javascript - particulas - three js effects

El material brilla al alejarse(three.js r78)

Question

El material brilla al alejarse (three.js r78)

Cuando se reduce el zoom hasta cierto punto, el material de los objetos detrás de otros objetos comienza a brillar. Se ve muy similar al efecto cuando las caras se superponen (las caras están en el mismo plano).

Para demostrar esto hice un violín .

En este ejemplo, dibujo dos cajas finas (grosor 1 y hay un espacio vacío entre las cajas de también 1) para que las cajas no se toquen entre sí pero el material brille de todos modos.

// geometry with thickness 1
var geometry = new THREE.BoxGeometry(20000, 20000, 1);

Esta captura de pantalla demuestra el efecto:

Esta captura de pantalla muestra que hay un espacio entre las dos geometrías.

Al hacer zoom, a veces aparece el efecto y, a veces, desaparece (también depende de la distancia del zoom y del tamaño de la pantalla).

Traté de jugar con diferentes propiedades de materiales, pero parece que no puedo encontrar ninguna configuración de material que impida que esto suceda.

¿Es esto un error? O una limitación de WebGL? O una limitación general en gráficos 3D? ¿O me estoy perdiendo algo y esto es en realidad un error de configuración de material o procesador?

En mis modelos, este efecto es realmente perturbador y feo. ¿Puedo de alguna manera evitar que esto suceda?

Answer 1

Este problema es causado por una configuración defectuosa que limita severamente la precisión del buffer de profundidad.
En OpenGL.org se describe de la siguiente manera:

Puede haber configurado sus planos de recorte zNear y zFar de una manera que limite seriamente la precisión del búfer de profundidad. En general, esto es causado por un valor de plano de recorte zNear que está demasiado cerca de 0.0 . Como el plano de recorte zNear se establece cada vez más cerca de 0.0 , la precisión efectiva de la memoria intermedia de profundidad disminuye drásticamente. Mover el plano de recorte zFar más lejos del ojo siempre tiene un impacto negativo en la precisión del búfer de profundidad, pero no es tan dramático como mover el plano de recorte zNear .

Es cierto, ya que en el ejemplo, el valor del plano de recorte cercano se estableció en 1 .
Hasta ahora, sé dos soluciones a este problema.

1) Simplemente aumente el valor near la cámara:

// camera
camera = new THREE.PerspectiveCamera(
    45, window.innerWidth / window.innerHeight, 
    500, // <-- Increased near from 1 to 500
    150000
);

Esta solución se demuestra en este violín

• La solución fue sugerida por @WestLangley aquí en GitHub
• Consulte esa página de OpenGL.org para más información de fondo
• Aquí una buena pregunta acerca de cómo decidir sobre los valores de su plano de recorte cercano

2) Configure el renderizador WebGL para usar un búfer de profundidad logarítmico:

// renderer
renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true // <-- Set render to use logarithmic depth buffer
});

Esta solución se demuestra en este violín

• Esta solución fue sugerida por @FastSnail en su comentario y proviene de esta respuesta en
  
• Consulte también una demostración de OpenGL en un buffer de profundidad normal VS logarítmico en esta película de YouTube
• Y otra demo específicamente para three.js / WebGL en esta película de YouTube
• Consulte también esta pregunta de para obtener más información sobre el búfer de profundidad logarítmica

Por favor, publique otra respuesta en caso de que conozca alguna otra solución.