Share
Los gráficos 3D en el navegador han sido un tema de interés desde su introducción. Pero si tuviera que crear sus aplicaciones utilizando WebGL antiguo, tomaría mucho tiempo. Recientemente, algunas bibliotecas realmente útiles han estado disponibles. Three.js es uno de los más populares, y en esta serie te mostraré cómo hacer el mejor uso de él, para crear impresionantes experiencias 3D para tus usuarios..
Espero que tengas una comprensión básica del espacio 3D antes de comenzar a leer este tutorial, ya que no explicaré cosas como coordenadas, vectores, etc..
Si ya sabe qué son los shaders, puede omitir este paso. Los sombreadores son básicamente programas escritos en GLSL (Graphics Layer Scripting Language), que se ejecutan en la GPU. Esto los hace extremadamente útiles, ya que podemos tomar algo de trabajo de la CPU y ponerlo en la GPU para aumentar el rendimiento. Hay dos tipos: sombreadores de vértices y fragmentos. Los sombreadores de vértices se utilizan para modificar la estructura del objeto (mover los vértices), y los sombreadores de fragmentos realizan cambios en los píxeles que se están dibujando.
Empezaremos por el más sencillo. Este sombreado modificará la ubicación de los vectores en la malla, lo que resultará en caras en movimiento. Inserte este código en de su aplicación:
los tipo El navegador no entenderá el atributo de este script, por lo que no se ejecutará (más adelante pasaremos su contenido al material de Three.js). En las dos primeras líneas estamos definiendo dos variables. El primero es uniforme. tiempo de flotación. Los uniformes se pasan tanto a vértices como a sombreadores de fragmentos. A continuación, hay variaciones vec2 vUv. Las variaciones son la interfaz entre el vértice y el sombreador de fragmentos. hora mantendrá el tiempo en milisegundos desde que se inició la aplicación, que utilizaremos para calcular nuevas posiciones de vértices. En vUv almacenaremos el UV (vector de textura) de cada vértice, por lo que podemos usarlo en el fragmento de sombreado.
A continuación, está la vacío principal() declaración. Todos los shaders deben tener esta función. Aquí estamos pasando el UV del vértice a nuestro vUv y calculando la nueva posición del vértice. Finalmente, establecemos la gl_Posición, que de hecho establece la posición del vértice. Pero también, tenemos que multiplicar la posición calculada anteriormente por el proyección de matriz y modelViewMatrix, Dos matrices que Three.js nos suministra. Esto es necesario porque si no lo hacemos, la GPU no considerará el punto desde el cual estamos mirando el vértice. Ahora vamos a pasar al fragmento shader..
Ahora este es el lugar donde sucede toda la magia. Los sombreadores de fragmentos son responsables de todos esos juegos atractivos. El que usaremos es bastante simple, así que no espere ver una escena de Crysis 3 después de usarla. Inserte el siguiente código debajo de su sombreado de vértice:
Como puede ver en la parte superior del sombreado, hay dos variables de nuevo. Debe tener en cuenta que todas las variables que use (excepto las de Three.js) deben definirse en cada sombreador en el que se usan..
En el vacío principal() Para ello, estamos calculando los colores en función del tiempo y UV del fragmento (los sombreadores de fragmentos operan en fragmentos, que están compuestos de vértices, por lo que los valores de variar Las variables se interpolan en el fragmento shader). Siéntase libre de meterse con esos números y funciones (solo recuerde que los valores de color deben ser positivos).
Finalmente, estamos configurando el gl_FragColor variable que establece el color del fragmento.
Si abre su navegador ahora, nada cambiará, porque tenemos que cambiar el material del objeto para que use sombreadores.
Este material especial se usa cuando necesitamos usar sombreadores. Cambiemos el material del objeto que adjuntamos a nuestro modelo en la parte anterior de esta serie. Primero, define el uniformes matriz que se utilizará para pasar variables a los shaders:
Accentsconagua
var uniforms = time: type: "f", value: 0, resolution: type: "v2", value: new THREE.Vector2, texture: type: "t", value: THREE.ImageUtils. loadTexture ('./ box.png'); A continuación, en el loader.load definir el ítde material y úsalo:
var itemMaterial = new THREE.ShaderMaterial (uniforms: uniforms, vertexShader: document.getElementById ('cubeVertexShader'). innerHTML, fragmentShader: document.getElementById ('cubeFragmentShader'). innerHTML); item = new THREE.Mesh (new THREE.CubeGeometry (100, 10, 10), itemMaterial); Ahora, si abre el navegador, debería ver que la viga roja cambió sus colores:
Pero los colores no están cambiando, y la malla tampoco está animada. Para cambiar eso, tenemos que actualizar el hora Variable en los shaders cada vez que se dibuja un cuadro. Ve a la hacer función y añadir esta línea después de la clock.getDelta () llamada:
uniforms.time.value + = delta * 10;
Ahora, si abres el navegador, deberías ver un objeto muy animado y colorido:
Si tuviéramos que crear un efecto de textura de este tipo utilizando, por ejemplo, HTML5 Canvas, el proceso tomaría demasiado de los ciclos de la CPU, lo que provocaría retrasos. Pero todos los shaders se ejecutan en la GPU, que está optimizada para todas las operaciones en gráficos y está enfocada solamente en ellos. La separación de cálculos gráficos y no gráficos es la clave para una aplicación con buen rendimiento.
Si desea crear algo real utilizando WebGL, permítame asegurarle que tendrá que mover todo el trabajo posible a la GPU para que su aplicación sea fluida y receptiva..
Como puede ver, el uso de Three.js nos permite crear gráficos 3D en el navegador con mucha facilidad, y los resultados son bastante buenos. Pero, pueden ser incluso mejores, eche un vistazo a estos ejemplos del sitio de Three.js:
Con el tiempo suficiente, una mente creativa y Three.js, puedes crear aplicaciones sorprendentes como esas también. Estaré más que feliz de ver tus creaciones de Three.js. Gracias por leer.
