1 # Clase 05-04-24 2 3 \tableofcontents 4 5 ## Formatos Soportados por Three.js 6 7 * glTF 8 * FBX 9 * OBJ 10 * COLLADA (DAE) 11 * STL 12 13 Siendo el más importante y eficiente `glTF` 14 15 * Dos versiones 1.0 y 2.0, siendo la primera obsoleta 16 17 ## GLTF 18 19 Los archivos `.gltf` son modelos 3D en formato JSON. 20 21 Los archivos `.glb` son la version binaria de los archivos `gltf` 22 23 ## Loaders 24 25 ```js 26 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; 27 ``` 28 29 ```js 30 loader.load( 'models/helmet/DamagedHelmet.gltf', 31 onModelLoaded, 32 onProgress, 33 onLoadError); 34 ``` 35 36 ```js 37 function onModelLoaded(gltf) { 38 console.log('Model loaded', gltf); 39 gltf.scene; 40 scene.add(gltf.scene); 41 } 42 ``` 43 44 ```js 45 function onProgress(event) { 46 console.log((event.loaded / event.total) * 100 + '% loaded'); 47 } 48 ``` 49 50 * CallBacks vs. Promises 51 52 ## Formate USDZ 53 54 Formato alternativo adoptado por Apple y desarrollado en conjunto por Pixar 55 56 Object promise 57 58 ## Eventos del Teclado 59 60 Primero hay definir un callback para cuando se produzca un evento sobre un 61 objeto html en particular mientras la ventana del navegador este en foco 62 63 ```js 64 Document.addEventListener('keydown', keyHandler) 65 ``` 66 67 ```js 68 function keyHandler(event) { 69 if (event.key == 'c' && event.ctrlKey && event.shiftKey) { 70 console.log("Ctrl+Shift+c"); 71 } 72 } 73 ``` 74 75 ### Controles 76 77 #### FlyControl 78 79 #### OrbitControl 80 81 #### TrackballControl 82 83 ### User Interface 84 85 #### uil 86 87 [uil](https://github.com/lo-th/uil) 88 89 ### dat GUI 90 91 [dat.GUI](https://github.com/dataarts/dat.gui) 92 93 ```js 94 let gui = new dat.GUI(); 95 gui.add(params, 'cantidadTotal', 0, 10).step(1); 96 ``` 97 98 ## Matriz de Normales 99 100 * El comportamiento deseado al trasladar y escalar un objeto, es que las 101 normales conserven su dirección 102 * El comportamiento deseado al rotar un objeto es que las normales cambien su 103 dirección 104 * Casos particulares incluyen escalado con diferente magnitud en sus componentes 105 106 ## Shaders 107 108 ### Uniforms 109 110 Las `uniforms` son variables globales que comparten todas las unidades de 111 procesamiento de la GPU 112 113 ```js 114 // Se definen los uniforms que se usarán en los shaders 115 uniforms: { 116 modelMatrix: { value: new THREE.Matrix4() }, 117 viewMatrix: { value: new THREE.Matrix4() }, 118 projectionMatrix: { value: new THREE.Matrix4() }, 119 }, 120 ``` 121 122 ### Varyings 123 124 Las `varyings` son variables globales que el Vertex Shader comparte con el 125 Fragment Shader 126 127 ### Vertex Shader 128 129 ```c 130 precision highp float; 131 132 attribute vec3 position; 133 attribute vec2 uv; 134 135 uniform mat4 modelMatrix; 136 uniform mat4 viewMatrix; 137 uniform mat4 projectionMatrix; 138 varying vec2 vUv; 139 140 void main() { 141 vec3 pos = position; 142 143 gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(pos, 1.0); 144 vUv = uv; 145 } 146 ``` 147 148 ### Fragment Shader 149 150 ```c 151 precision highp float; 152 varying vec2 vUv; 153 154 void main() { 155 // Se pinta el fragmento con las coordenadas de textura 156 gl_FragColor = vec4(vUv, 0.0, 1.0); 157 } 158 ``` 159 160 #### Normal a una Superficie deformada 161 162 * Versión de WebGl 2.0 (OpenGL 3.0) proporciona el calculo de las derivadas 163 * Se calcula el vector gradiente 164 165 ```c 166 vec3 x=dFdx(vViewPos); 167 vec3 y=dFdy(vViewPos); 168 ``` 169 170 ```c 171 // Normal de la superficie surge de la normalización del producto cruz de los 172 // vectores gradiente 173 vec3 normal=normalize(cross(x,y)); 174 ```
