examples - three.js tutorial

renderizando millones de vóxeles usando texturas 3D con three.js

Question

Estoy usando three.js para renderizar una representación de vóxel como un conjunto de triángulos. Lo tengo renderizar 5 millones de triángulos cómodamente, pero ese parece ser el límite. puedes verlo en línea aquí .

seleccione el modelo de Dublín en la resolución 3 para ver una gran cantidad de triángulos que se dibujan.

He utilizado todos los trucos para llegar hasta aquí (geometría de buffer, eliminación de vóxeles, múltiples buffers), pero creo que ha alcanzado la cantidad máxima que pueden lograr los triángulos OpenGL.

Grandes cantidades de vóxeles normalmente se representan como un conjunto de imágenes en una textura 3D y mientras hay varias publicaciones sobre cómo piratear texturas 2D en texturas 3D, pero parecen tener un límite máximo en el tamaño de la textura.

He buscado tutoriales o ejemplos utilizando este enfoque, pero no he encontrado ninguno. Alguien ha usado este enfoque antes con three.js

Answer 1

Tu escena se renderiza dos veces, porque SSAO necesita textura de profundidad. Puede usar la extensión WEBGL_depth_texture, que tiene una buena compatibilidad , por lo que solo necesita un único pase de renderizado. Usted puede permanecer de nuevo en el paso doble de bajo rendimiento si la extensión no está disponible.

El material de su vóxel tiene doble cara. Puede ser a propósito, pero puede crear un gran sobregiro.

En tu demostración, usas un MeshPhongMaterial y luces direccionales. Es un material innecesariamente complejo. Sus geometrías no tienen ninguna norma por lo que no puede tener ninguna iluminación. Intenta usar un material más simple no iluminado.

Tu objetivo es renderizar una gran cantidad de vértices, por lo tanto, suponiendo que la velocidad de fotogramas esté limitada por el sombreador de vértices:

• Pruebe cosas como https://github.com/GPUOpen-Tools/amd-tootle para preprocesar sus geometrías. Centrándose en el caché de vértices prefetch y el caché de vértices.

• reducir el ancho de banda utilizado por sus búferes de vértices. Dado que tus vértices están alineados en una "cuadrícula", puedes almacenar la posición de los vértices en 3 cortos en lugar de 3 flotantes, reduciendo el tamaño de tu VBO en 2. Podrías usar los mismos trucos si tuvieras normales ya que todas las normales deberían estar alineadas con el eje (cubos )

• generalmente reduce la cantidad de variaciones que necesita el sombreador de fragmentos

• si necesita más atributos que solo la posición vec3, use una sola VBO intercalada en lugar de una por attrib.