Recomendación: utilice el editor de escenas NSDT para crear rápidamente una escena de aplicación 3D
Sistema coordinado
El 3D consiste esencialmente en representar formas en un espacio 3D y utilizar un sistema de coordenadas para calcular su posición.
WebGL utiliza un sistema de coordenadas derecho: el eje apunta hacia la derecha, el eje apunta hacia arriba y el eje apunta fuera de la pantalla, como se muestra en la imagen de arriba.xyz
objeto
Utilice vértices para construir diferentes tipos de objetos. Un vértice es un punto en el espacio que tiene su propia posición 3D en un sistema de coordenadas, generalmente alguna información adicional que la define. Cada vértice se describe mediante los siguientes atributos:
- Ubicación : Identifíquelo en el espacio 3D (,,).
xyz - Color : contiene valores RGBA (R, G y B para canales rojo, verde y azul, alfa para transparencia; todos los valores varían de a).
0.01.0 - Normal: una forma de describir la orientación de un vértice.
- Texturas : los vértices se pueden utilizar para decorar una imagen 2D de la superficie a la que pertenecen, en lugar de simplemente un color.
Puede utilizar esta información para construir geometría; aquí hay un cubo de ejemplo:
Las caras de una forma determinada son planos entre vértices. Por ejemplo, un cubo tiene 8 vértices distintos (puntos en el espacio) y 6 caras distintas, cada una formada por 4 vértices. La normal define la orientación de la cara. Además, al conectar los puntos, estamos creando las aristas del cubo. La geometría se construye a partir de vértices y caras, mientras que los materiales son texturas, que utilizan colores o imágenes. Si conectamos la geometría con el material obtendremos una malla.
canalización de renderizado
El proceso de renderizado es el proceso de preparar una imagen y enviarla a la pantalla. El proceso de representación de gráficos toma un objeto 3D construido a partir de primitivas descritas mediante vértices, aplica procesamiento, calcula fragmentos y los representa como píxeles en una pantalla 2D.
La terminología utilizada en el diagrama anterior es la siguiente:
- Primitivas : la entrada a la tubería; se construye a partir de vértices, que pueden ser triángulos, puntos o líneas.
- Fragmento : una proyección 3D de un píxel, con las mismas propiedades que un píxel.
- Píxeles : Puntos de la pantalla dispuestos en una cuadrícula 2D, con colores RGBA.
El procesamiento de vértices y fragmentos es programable; puede escribir sus propios sombreadores para manipular la salida.
Procesamiento de vértices
El procesamiento de vértices es el acto de combinar información sobre vértices individuales en primitivas y establecer sus coordenadas en un espacio 3D para que el espectador las vea. Es como tomar una fotografía de un paisaje determinado que has preparado: primero debes ubicar al sujeto, configurar la cámara y luego disparar.
Este procesamiento consta de cuatro fases: la primera fase implica organizar los objetos en el mundo, lo que se conoce como transformación del modelo . Luego está la transformación de vista , que se encarga de posicionar y establecer la orientación de la cámara en el espacio 3D. Una cámara tiene tres parámetros (posición, orientación y dirección) que deben definirse para una escena recién creada.
Luego, una transformación proyectiva (también llamada transformación de perspectiva) define la configuración de la cámara. Establece lo que la cámara puede ver: la configuración incluye campo de visión , relación de aspecto y planos cercanos y lejanos opcionales . Lea el párrafo de la cámara en el artículo de three.js para obtener más información sobre esto.
El último paso es la conversión de la ventana gráfica , que involucra todo lo que sigue en el proceso de renderizado de salida.
rasterización
La rasterización convierte una primitiva (vértices conectados) en un conjunto de fragmentos.
Estos fragmentos (es decir, proyecciones 2D de píxeles 3D) se alinean con la cuadrícula de píxeles, de modo que eventualmente puedan imprimirse como píxeles en una pantalla 2D durante la etapa de agrupación de salida.
procesamiento de fragmentos
El procesamiento de fragmentos se centra en las texturas y la iluminación: calcula el color final en función de los parámetros dados.
textura
Las texturas son imágenes 3D que se utilizan en el espacio 2D para hacer que los objetos se vean mejor y más realistas. Las texturas se ensamblan a partir de elementos de textura individuales llamados texels, del mismo modo que los elementos de una imagen se ensamblan a partir de píxeles. Aplicar texturas a objetos durante la etapa de procesamiento de fragmentos del proceso de renderizado nos permite modificarlo envolviéndolo y filtrándolo si es necesario.
El ajuste de textura nos permite repetir una imagen 3D alrededor de un objeto 2D. Cuando la resolución nativa o la imagen de textura difiere del fragmento mostrado, se aplicará el filtrado de textura; se reducirá o aumentará en consecuencia.
iluminación
Los colores que vemos en la pantalla son el resultado de la interacción de la fuente de luz con el color de la superficie del material del objeto. La luz puede ser absorbida o reflejada. El modelo de iluminación estándar Phong implementado en WebGL tiene cuatro tipos básicos de iluminación:
- Difusa : Luz direccional distante, como la del sol.
- Reflexión especular : Un punto de luz, como una bombilla o una linterna en una habitación.
- Entorno : Se aplica luz normal a todo lo que hay en la escena.
- Autoiluminación : Luz emitida directamente por un objeto.
fusión de salida
Durante la fase de operación de salida, todos los fragmentos de primitivas del espacio 3D se convierten en una cuadrícula de píxeles 2D, que luego se imprimen en la pantalla.
Durante la combinación de salida, también se aplica cierto procesamiento para ignorar información que no es necesaria; por ejemplo, los parámetros de objetos que están fuera de la pantalla o detrás de otros objetos no se calculan y, por lo tanto, no son visibles.
Enlace original: Explicación de la teoría básica del 3D (mvrlink.com)