clases/2024-04-05-clase.md (174 lines)

Line numbers

Render

Clase 05-04-24

\tableofcontents

Formatos Soportados por Three.js

glTF
FBX
OBJ
COLLADA (DAE)
STL

Siendo el más importante y eficiente glTF

Dos versiones 1.0 y 2.0, siendo la primera obsoleta

GLTF

Los archivos .gltf son modelos 3D en formato JSON.

Los archivos .glb son la version binaria de los archivos gltf

Loaders

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

loader.load( 'models/helmet/DamagedHelmet.gltf',
            onModelLoaded,
            onProgress,
            onLoadError);

function onModelLoaded(gltf) {
    console.log('Model loaded', gltf);
    gltf.scene;
    scene.add(gltf.scene);
}

function onProgress(event) {
    console.log((event.loaded / event.total) * 100 + '% loaded');
}

CallBacks vs. Promises

Formate USDZ

Formato alternativo adoptado por Apple y desarrollado en conjunto por Pixar

Object promise

Eventos del Teclado

Primero hay definir un callback para cuando se produzca un evento sobre un objeto html en particular mientras la ventana del navegador este en foco

Document.addEventListener('keydown', keyHandler)

function keyHandler(event) {
    if (event.key == 'c' && event.ctrlKey && event.shiftKey) {
        console.log("Ctrl+Shift+c");
    }
}

Controles

FlyControl

OrbitControl

TrackballControl

User Interface

uil

dat GUI

dat.GUI

let gui = new dat.GUI();
gui.add(params, 'cantidadTotal', 0, 10).step(1);

Matriz de Normales

El comportamiento deseado al trasladar y escalar un objeto, es que las normales conserven su dirección
El comportamiento deseado al rotar un objeto es que las normales cambien su dirección
Casos particulares incluyen escalado con diferente magnitud en sus componentes

Shaders

Uniforms

Las uniforms son variables globales que comparten todas las unidades de procesamiento de la GPU

// Se definen los uniforms que se usarán en los shaders
uniforms: {
    modelMatrix: { value: new THREE.Matrix4() },
    viewMatrix: { value: new THREE.Matrix4() },
    projectionMatrix: { value: new THREE.Matrix4() },
},

Varyings

Las varyings son variables globales que el Vertex Shader comparte con el Fragment Shader

Vertex Shader

precision highp float;

attribute vec3 position;
attribute vec2 uv;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
varying vec2 vUv;

void main() {
    vec3 pos = position;	

    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(pos, 1.0);
    vUv = uv;
}

Fragment Shader

precision highp float;
varying vec2 vUv;

void main() {
    // Se pinta el fragmento con las coordenadas de textura
    gl_FragColor = vec4(vUv, 0.0, 1.0);
}

Normal a una Superficie deformada

Versión de WebGl 2.0 (OpenGL 3.0) proporciona el calculo de las derivadas
Se calcula el vector gradiente

vec3 x=dFdx(vViewPos);
vec3 y=dFdy(vViewPos);

// Normal de la superficie surge de la normalización del producto cruz de los
// vectores gradiente
vec3 normal=normalize(cross(x,y));

   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 ```

repos/TA159