javascript - texture - Antialiasing no funciona en Three.js
three js light (5)
Creo que esto depende del navegador y el sistema que está utilizando. Por lo que sé, Firefox no es compatible con antialiasing en este momento. También puede depender de su tarjeta gráfica y controladores. Por ejemplo, no obtengo antialiasing en Chrome en mi vieja MacBook Pro de mediados de 2009, pero sí obtengo antialiasing en mi máquina más reciente de finales de 2012.
Además, puede considerar usar el sombreador FXAA para realizar el antialiasing como un paso de postproceso. Puedes leer sobre postprocesamiento here .
Soy nuevo en three.js y he empezado a trabajar mucho recientemente. Realmente lo disfruto y he creado algunas cosas increíbles. Sin embargo, no estoy seguro de por qué, pero al establecer el antialiasing en true, no veo ninguna diferencia.
renderer = new THREE.WebGLRenderer({ antialiasing: true });
He buscado posibles soluciones, pero parece que no puedo encontrar o entender por qué esto no funciona. ¿Hay algo que me falta o necesito para que funcione el antialiasing?
EDITAR:
Enlaces que me ayudaron a solucionar este problema: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_normalmap2.html https://github.com/mrdoob/three.js/tree/master/examples/js
Tomó un poco de investigación pero los desarrolladores de three.js lo tienen cubierto!
El nombre de la propiedad que está utilizando en el objeto de argumento del constructor WebGLRenderer es incorrecto. Según la documentation , el nombre de la propiedad debe ser ''antialias'' , no ''antialiasing'' .
Lo probé en Google Chrome para Mac OS y hubo una suavidad notable en la renderización de bordes en una demostración con un cubo giratorio.
En caso de que su computadora no sea compatible con WebGL AA predeterminado, cambiar el tamaño del renderizador y el ancho del lienzo me da un resultado mucho mejor que FXAA. Tenga en cuenta que el CSS contiene los valores reales de ancho y alto.
var w,h = [your prefs];
renderer.setSize(window.innerWidth*2, window.innerHeight*2);
renderer.domElement.style.width = w;
renderer.domElement.style.height = h;
renderer.domElement.width = w*2
renderer.domElement.height = h*2
La propiedad se llama antialias y se activa así:
renderer = new THREE.WebGLRenderer({ antialias: true });
No funciona para todos los navegadores, verifique este problema para obtener más información.
Nota:
La propiedad NO es de acceso público, por lo que se configuran los antialias después de la construcción de esta manera:
renderer.antialias = true; // <-- DOES NOT WORK
no trabajará.
renderer = new THREE.WebGLRenderer ({antialias: true}); - funciona con mi computadora de escritorio, pero no funciona con computadoras portátiles, puedo ver escaleras horribles