Threejs
By Romualdo Villalobos
En 49 líneas vamos a lograr lo siguiente:
Crear una cámara.
Crear una ventana (contexto) WebGL.
Un cubo con materiales. (Nótese que los materiales no son algo de WebGL/OpenGL sino una abstracción para pasar uniforms/attributes).
Scene Graph. (Tampoco es algo de WebGL sino una abstracción/estructura de datos que permite manejar transformaciones de forma eficiente).
Render Loop.
three.js Hello World
1.
2.
3.
4.
5.
https://github.com/romualdo97/opengl_studies/tree/master/web/01.%20Hello%20World
Ejercicios:
Renderizar varios cubos.
Animar otros parámetros como la escala.
Renderizar otras geometrías como: Conos, Esferas, etc.
Iniciar cada objeto con un color aleatorio de un grupo de posibles colores.
three.js Hello World
1.
2.
3.
4.
Model Data (VBO)
Parametrizar la generación de los arrays dependiendo de la geometría.
Transformaciones
Para construir el scene graph.
Para implementar la matriz proyección y perspectiva.
Cámaras
Rendering.
drawArrays, drawElements, clearColor, clear.
Entender el clip space.
Abstracciones para usar fácilmente los componentes mencionados anteriormente.
¿Qué se necesita para hacer el Hello World en WebGL puro?
1.
2.
3.
4.
a.
a.
b.
a.
b.
En un universo paralelo donde no existen programas de modelamiento como Blender, Maya, Cinema4D los modeladores serían los mismos programadores y los modelos se harían por código escribiendo las coordenadas de los vértices en un array.
Si suponemos que un solo modelo puede llegar a tener hasta 92 000 polígonos (suponiendo que cada polígono tiene 3 vértices), resultaría en un array de 276000 elementos, esto multiplicado por el número de modelos en la escena, podríamos concluir que:
En ese universo paralelo lo más realista a lo que se podría aspirar es a un juego similar a Minecraft.
Los programadores serían personas muy infelices.
Modelos
1.
2.
Los programas de modelamiento ponen a disposición de los artistas herramientas que les permiten generar modelos 3D, estos programas permiten exportar el modelo en distintos formatos, el estándar en varios engines WebGL es glTF.
Sin embargo ThreeJS también soporta otros formatos como: FBX, OBJ, o COLLADA.
Los Programas de modelamiento
Diseñado para lograr una transmisión y carga rápida.
Meshes.
Materials (Incluso PBR).
Textures.
Skins.
Skeletons.
Morph targets.
Animations.
Lights.
Cameras.
glTF es un json.
glTF (GL Transmission Format)
1.
2.
3.
4.
5
6.
7.
8.
9.
10.
11.
En teoría todos los formatos intentan lo mismo, codificar los vértices e información del Objeto 3D / Escenario 3D, para facilitar su transmisión y carga en otras aplicaciones. (three.js en nuestro caso).
Generalidad
https://github.com/romualdo97/opengl_studies/tree/master/web/02.%20Models
Ejercicios:
Anima la posición/rotación/escala del modelo.
Intentar cargar un modelo glTF que funcione con el setup básico. En esta página se asocian varios sitios de los que se pueden cargar modelos: https://threejs.org/docs/#manual/en/introduction/Loading-3D-models
Modelos Ejercicios
1.
2.
https://github.com/romualdo97/opengl_studies/tree/master/web/03.%20Lights
Ejercicios:
Agregar nuevos modelos.
Probar distintos parámetros para el MeshPhongMaterial, ¿Que parámetros reconoces?
Probar otros materiales.
Animar la posición de los modelos.
Animar la posición de las luces.
Otro ejemplo, sacado de three.js
https://threejs.org/examples/?q=light#webgl_lights_spotlights
Luces
1.
2.
3.
4.
5.
https://github.com/romualdo97/opengl_studies/tree/master/web/04.%20Shaders
Ejercicios:
Pasar otros uniforms (Ejemplo la resolución del canvas y actualizarlo cuando se rescale).
Jugar con el vertex shader.
Hacer un efecto diferente con el fragment shader.
Shaders
1.
2.
3.
Tema profundo, con mucho tema, se hace el fin de semana.
https://threejsfundamentals.org/threejs/lessons/threejs-transparency.html
Transparencia
https://threejs.org/docs/#manual/en/introduction/Loading-3D-models
Especificacion formato glTF https://github.com/KhronosGroup/glTF
Referencias
1.
2.