Introducción al modelado poligonal y Three.js

 

 

 

  • SmashingConf Friburgo 2024
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. Preparando la escena
      1. La malla
      2. Cámaras
      3. Encendiendo
      4. Agregar a la malla
    2. Tres.js
      1. Iniciar el proyecto
      2. Agregar objetos Three.js
      3. Renderizar la escena
      4. Dar control al usuario
    3. Conclusión
      1. Otras lecturas

    Este artículo toca la superficie de la biblioteca Three.js. Una vez que se sienta cómodo con la API, experimentar con partículas, mapeo y mallas más complicadas puede producir resultados increíbles. Three.js es una mina de oro para crear experimentos web hermosos y complejos. Tomar la demostración extremadamente simple explicada aquí y convertirla en un experimento alucinante simplemente requiere experimentación y la voluntad de probar cosas nuevas.

     

    Cuando la tercera dimensión se introduce en un medio de entretenimiento, cambia para siempre la forma en que se presenta y consume ese medio. El fotorrealismo de los dinosaurios CGI en Jurassic Park abrió las puertas para que los creadores de películas usaran computadoras para crear entornos visuales que de otro modo nunca hubieran sido posibles. VeggieTales generó un nuevo tipo de dibujos animados, uno que utiliza objetos tridimensionales en lugar de dibujos y que inspiró la creación de todo, desde éxitos de taquilla de Pixar y Dreamworks hasta dibujos animados de los sábados por la mañana.

    El software informático se vio muy afectado por esta nueva tendencia en los medios visuales. Los juegos de computadora en 3D, como Wolfenstein 3D, Quake y Doom, reinventaron los juegos de PC, y las franquicias clásicas que inspiraron a una generación con sus juegos bidimensionales, como Super Mario Bros y Zelda, se estaban actualizando a 3-D en sus títulos posteriores. .

    Hasta la llegada de la especificación oficial WebGL en 2011, esta tendencia tridimensional no había llegado muy lejos en su penetración en la Web y en los navegadores. Sin embargo, en los últimos años hemos visto avances en el uso de modelos y animaciones 3D en la Web similares a las tendencias en la televisión, el cine y el software nativo.

    Las demostraciones de WebGL, como los esfuerzos combinados de Epic y Mozilla para crear una versión puramente basada en navegador de Epic Citadel , apuntan al enorme potencial de esta nueva tecnología. Al recordar el problema de ejecutar Unreal Tournament de forma nativa en mi antiguo escritorio de los años 90, me parece alucinante que este tipo de presentación ahora pueda usarse con nuestros navegadores web.

    Ciudadela épica de Mozilla y Epic. ( Vista más grande )

    Un catalizador importante del interés por el 3-D entre los desarrolladores web fue la creación de la biblioteca JavaScript Three.js por Ricardo Cabello (o Mr.doob ). El objetivo del proyecto es permitir a los desarrolladores con poca experiencia en 3-D y WebGL crear escenas increíblemente sofisticadas utilizando prácticas comunes de JavaScript. Simplemente tener conocimientos de JavaScript y los conceptos básicos del modelado es más que suficiente para comenzar.

    Preparando la escena

    Si bien puedes hackear con Three.js sin haber trabajado con software 3D, para aprovechar la profundidad de la API, debes comprender los conceptos básicos de modelado y animación. Veremos cada una de las partes que componen una escena y cómo interactúan entre sí. Una vez que comprendamos estos fundamentos, aplicarlos a nuestra demostración de Three.js tendrá mucho más sentido.

    La malla

    El esqueleto que conforma la forma de los objetos 3D con los que trabajaremos se conoce comúnmente como malla, aunque también se le llama estructura alámbrica o modelo. El tipo de malla que se suele utilizar y que usaremos aquí es el modelo poligonal .

    (Se utilizan otros dos tipos de mallas para modelar objetos tridimensionales. El modelado de curvas implica establecer puntos en la escena que están conectados por curvas que dan forma al modelo. La escultura digital implica el uso de software que imita sustancias reales. Por ejemplo, en lugar de trabajar con formas y polígonos, se sentiría más como esculpir en arcilla).

    Las mallas que componen un modelo poligonal constan de tres partes: caras, aristas y vértices . Las caras son los polígonos individuales que ves al ver una malla y que le dan al objeto su forma y estructura. Las aristas corren a lo largo del exterior de las caras y son las conexiones entre los vértices. Un vértice es el punto donde se cruzan cualquier número de estas aristas. Si la malla se planifica y construye correctamente, entonces cada vértice estará tanto en la intersección de los bordes como en las esquinas de las caras contiguas.

     

    Esto permite que las caras y los bordes se muevan junto con los vértices y explica por qué mover los vértices en un modelo completo es la forma más común y efectiva de esculpir. Cada una de estas partes es una entidad separada y seleccionable con diferentes comportamientos.

    Caras, vértices y aristas de un cubo poligonal. ( Vista más grande )

    El modelado poligonal tiene más sentido para su uso en el navegador que otros tipos, no sólo porque es mucho más popular, sino también porque la computadora necesita menos tiempo para procesarlo. La desventaja de esta velocidad ahorrada es que los polígonos son planos y no pueden curvarse. Esta es la razón por la que un modelo tridimensional en bruto parece "en bloques".

    Para combatir este problema, programas como Blender , Maya y 3ds Max tienen una utilidad de suavizado, utilizada antes de exportar, que agrega muchos polígonos pequeños al modelo. Agregar estos polígonos a lo largo de una curva crea muchos ángulos pequeños donde solía encontrarse un ángulo previamente agudo de dos polígonos grandes, dando la ilusión de suavidad.

    Forma poligonal junto a su contraparte suavizada. (Imagen: Blender| Vista más grande )

    Al utilizar mallas, es posible utilizar diferentes materiales para conseguir diferentes comportamientos e interacciones. Una malla y un material básicos se representarán como polígonos planos, mostrando el modelo en color plano. El uso de un material Lambert evitará que la luz se refleje en la superficie y generalmente se considera no brillante. Muchos prototipos se crean con materiales Lambert para centrarse en la estructura, más que en la estética. Los materiales Phong son todo lo contrario: dan superficies brillantes. Estos pueden mostrar algunos efectos realmente fantásticos cuando se combinan con el uso correcto de la luz.

    Además de estos materiales de malla, se pueden aplicar de manera similar materiales para sprites, partículas y sombreadores.

    (Un modelo poligonal se llama "facetado" porque consta de caras poligonales que definen la forma de la estructura).

    Cámaras

    Para poder renderizar estas mallas, se deben colocar cámaras para indicarle al renderizador cómo deben verse. Three.js tiene dos tipos de cámaras, ortográficas y de perspectiva . Las proyecciones ortográficas eliminan la perspectiva, mostrando todos los objetos en la misma escala, sin importar qué tan lejos de la cámara estén. Esto es útil en ingeniería porque los diferentes tamaños debido a la perspectiva podrían dificultar la distinción del tamaño del objeto. Reconocerá proyecciones ortográficas en cualquier dirección para ensamblar muebles o modelos de automóviles. La cámara de perspectiva incluye propiedades para su ubicación relativa a la escena y, como su nombre lo indica, puede representar el tamaño del modelo en función de la distancia de las propiedades a la cámara.

    Las cámaras controlan el tronco de visualización , o área visible, de la escena. El tronco de visualización se puede representar como un cuadro definido por sus propiedades cercanas y lejanas (el plano donde el área comienza y termina), junto con la “relación de aspecto” que define las dimensiones del cuadro. Cualquier objeto que exista fuera del espacio de visualización frustum no se dibuja en la escena, pero aún así se representa.

     

    Como era de esperar, estos objetos pueden consumir recursos del sistema innecesariamente y es necesario eliminarlos. El sacrificio implica el uso de un algoritmo para encontrar los objetos que están fuera de los planos que forman el tronco y eliminarlos de la escena, así como el uso de estructuras de datos como un octree (que divide el espacio en subdivisiones de nodos) para aumentar el rendimiento.

    Encendiendo

    Ahora que una cámara está capturando la forma en que se representa el objeto, es necesario colocar fuentes de luz de manera que se pueda ver el objeto y los materiales se comporten como se espera. Los artistas 3D utilizan la luz de muchas maneras, pero en aras de la eficiencia, nos centraremos en las que están disponibles en Three.js. Por suerte para nosotros, esta biblioteca tiene muchas opciones para fuentes de luz:

    • Punto . Posiblemente la más utilizada, la luz puntual funciona de forma muy parecida a una bombilla y afecta a todos los objetos de la misma manera siempre que se encuentren dentro de su rango predefinido. Estos pueden imitar la luz emitida por una lámpara de techo.
    • Lugar . La luz puntual es similar a la luz puntual pero está enfocada, iluminando solo los objetos dentro de su cono de luz y su alcance. Debido a que no ilumina todo por igual como lo hace la luz puntual, los objetos proyectarán una sombra y tendrán un lado "oscuro".
    • Ambiente . Esto agrega una fuente de luz que afecta a todos los objetos de la escena por igual. Las luces ambientales, como la luz del sol, se utilizan como fuente de luz general. Esto permite que los objetos en la sombra sean visibles, ya que cualquier cosa oculta a los rayos directos estaría completamente oscura. Debido a la naturaleza general de la luz ambiental, la posición de la fuente no cambia la forma en que la luz afecta la escena.
    • Hemisferio . Esta fuente de luz funciona de manera muy similar a la luz de una mesa de billar, ya que se coloca directamente encima de la escena y la luz se dispersa únicamente desde ese punto.
    • Direccional . La luz direccional también es bastante similar a las luces puntuales y puntuales, en el sentido de que afecta todo lo que se encuentra dentro de su cono. La gran diferencia es que la luz direccional no tiene alcance. Se puede colocar lejos de los objetos porque la luz persiste infinitamente.
    • Área . La luz de área, que emana directamente de un objeto en la escena con propiedades específicas, es extremadamente útil para imitar accesorios como la luz fluorescente colgante y la retroiluminación de LCD. Al formar una luz de área, debes declarar su forma (generalmente rectangular o circular) y dimensión para determinar el área que cubrirá la luz.

    Para aprovechar las luces de área en Three.js, debe utilizar el renderizador diferido . Este renderizador permite que la escena se represente usando sombreado diferido , una técnica que representa la escena en dos partes en lugar de una. En el primer recorrido, se renderizan los objetos mismos, incluidas sus ubicaciones, mallas y materiales. La segunda pasada calcula la iluminación y las sombras de todos los objetos y los agrega a la escena.

     

    Debido a que los objetos están completamente formados en la escena durante este cálculo, pueden tener en cuenta la totalidad de los objetos y fuentes de luz adyacentes. Esto significa que estos cálculos deben realizarse solo una vez, cada vez que se representa la escena, en lugar de una vez por objeto representado.

    Por ejemplo, al renderizar cinco objetos y cinco fuentes de luz en la escena con un renderizador habitual, renderizará el primer objeto, luego calculará la iluminación y las sombras, luego renderizará el segundo objeto y recalculará la iluminación y las sombras para acomodar ambos objetos. Esto continúa para los cinco objetos y fuentes de luz. Si se utiliza el renderizador diferido, se renderizarán los cinco objetos y luego se calcularán y agregarán las fuentes de luz y el sombreado, y eso es todo. Trucos de los Sims 4

    Como puede ver, esto puede tener un enorme beneficio en los tiempos de renderizado cuando se utilizan muchas fuentes de luz y objetos. Varias desventajas le impedirían usar el renderizador diferido a menos que sea necesario, incluidos problemas con el uso de múltiples materiales, así como la imposibilidad de usar suavizado después de agregar la iluminación (cuando realmente es necesaria).

    Agregar a la malla

    Debido a que la malla está cubierta por el material elegido y representada en una vista con iluminación, se pueden realizar aplicaciones estéticas en la parte superior de la malla. Usando texturas, puedes superponer mapas de bits en partes del objeto para ilustrarlo. Esta es una forma extremadamente funcional de darle vida a los modelos y, siempre que la estructura se cree con cuidado, puede lucir impecable encima de las mallas. Los sombreadores también se pueden aplicar utilizando un tipo especial de material que sombree el objeto específicamente, independientemente de la iluminación.

    Tres.js

    Ahora que entendemos los fundamentos del desarrollo 3D utilizando mallas poligonales, podemos aplicarlos en la biblioteca Three.js. Podría decirse que la mayor parte de la biblioteca Three.js es la capacidad de crear escenas fantásticas únicamente a partir de la experimentación. Con este espíritu, desarrollaremos una demostración simple de una roca rodante para mostrar algunos de los conceptos básicos que hemos aprendido y las diversas implementaciones que podemos realizar, con la expectativa de que puedas seguir adelante desde allí.

    Iniciar el proyecto

    Primero, querrás configurar tu HTML y tu lienzo , e incluir la biblioteca en tu documento.

    html head titleMy first Three.js app/title style canvas { width: 600px; height: 600px; } /style /head body script src="three.min.js"/script !-- script src="Detector.js"/script -- !-- script src="stats.min.js"/script -- script // Three.js code here /script /body/html

    En el fragmento anterior se comentan otras dos bibliotecas de JavaScript que vale la pena examinar pero que no son necesarias para esta demostración.

    Detector.js se incluye en los ejemplos de Three.js y detecta si WebGL es compatible. Funciona de manera similar a la biblioteca Modernizr en su implementación.

     

    Stats.js es un monitor de rendimiento de JavaScript creado por el mismo Mr.doob que creó la biblioteca Three.js. Agrega un pequeño cuadro que indica los fotogramas por segundo y el tiempo necesario para renderizar un fotograma. Esto puede resultar extremadamente útil durante el desarrollo porque las animaciones 3D pueden consumir extremadamente recursos del sistema. Monitorear este cuadro lo mantiene informado en tiempo real sobre qué modelos o acciones están causando bajas velocidades de cuadros en su escena.

    A medida que comenzamos a configurar la escena, observe cuánto trabajo está haciendo la API por nosotros; La mayor parte de nuestro trabajo al principio no implica más que configurar los constructores y las propiedades. Usaremos la biblioteca para configurar la escena de la misma manera que se configuraría en un software 3-D.

    1. Crea el renderizador.
    2. Inicia la escena.
    3. Crear y posicionar las cámaras.
    4. Configure la malla combinando un nuevo material y una nueva geometría.
    5. Crea y posiciona la fuente de luz.
    6. Escribe una función que represente la escena en cada cuadro.

    Agregar objetos Three.js

    Antes de configurar la escena, debemos declarar un renderizador, establecer su tamaño y agregarlo a la ventana para que podamos ver en qué estamos trabajando.

    var renderer = new THREE.WebGLRenderer();renderer.setSize(600,600);document.body.appendChild(renderer.domElement);

    Si decidió incluir el Detector.js que se mencionó, puede usar la siguiente línea para verificar la compatibilidad con WebGL e incluir una degradación en el renderizador del lienzo si no es así.

    var renderer = Detector.webgl? new THREE.WebGLRenderer(): new THREE.CanvasRenderer();

    Ahora que el renderizador está incluido, iniciemos la escena:

    var scene = new THREE.Scene();

    Entonces la cámara:

    // Syntaxvar camera = new THREE.PerspectiveCamera([fov], [aspect ratio], [near], [far]);// Examplevar camera = new THREE.PerspectiveCamera(45, 600/600 , 0.1, 1000);

    Tenga en cuenta que cada cámara utiliza un constructor independiente. Como planeamos ver la escena en tres dimensiones, usamos la cámara de perspectiva. La primera de las propiedades es el campo de visión en grados; entonces nuestra visión estaría en un ángulo de 45°. La relación de aspecto es la siguiente y está escrita como width/height. Obviamente, esto podría escribirse así 1porque nuestra escena se ajustará a nuestro lienzo de 600 × 600 píxeles. Para una escena de 1200 × 800 píxeles, se escribiría como o ; y si quieres que el aspecto se ajuste constantemente a la ventana, también puedes escribir . Las propiedades y son la tercera y cuarta, y dan límites cercanos y lejanos al área que se representa.1200800128window.innerWidth / window.innerHeightnearfar

    Colocar la cámara solo requiere configurar la posición z.

    camera.position.z = 400;

    Ahora necesitamos crear una malla para colocarla en la escena. Three.js elimina la necesidad de crear mallas básicas usted mismo, al incluir la creación de estas en su API mediante la combinación de geometría y material. La única propiedad que debemos especificar es el radio de la geometría.

     

    var geometry = new THREE.SphereGeometry(70);

    Si bien tiene valores predeterminados, también es común especificar el ancho y el alto de los segmentos. Agregar segmentos aumentará la suavidad de la malla pero también disminuirá el rendimiento. Como esto es sólo una roca, no me preocupa demasiado la suavidad, por lo que estableceremos una cantidad baja de segmentos. Las propiedades del segmento son las dos siguientes después del radio, así que súmalas de la misma manera.

    var geometry = new THREE.SphereGeometry(70,10,10);

    Para crear una malla a partir de esta nueva geometría, aún necesitamos agregarle un material. Como queremos que esta roca realmente muestre la luz proveniente de nuestra cámara de perspectiva, agregaremos el material brillante de phong. Agregar este material es tan simple como llamarlo y configurar la colorpropiedad. Observe que el color hexadecimal requiere el 0xprefijo, lo que indica que es un valor hexadecimal.

    var material = new THREE.MeshPhongMaterial( { color: 0xe4e4e4 } );

    En Three.js, la malla real se crea combinando la geometría y el material. Para hacer esto, solo tenemos que llamar al Meshconstructor y agregar como argumentos las variables geometryy material.

    var sphere = new THREE.Mesh(geometry, material);

    Ahora que la malla está declarada, podemos agregarla a la escena.

    scene.add(sphere);

    Recordando la introducción, una malla necesita una fuente de luz para poder verse correctamente. Creemos una luz blanca de la misma manera que iniciamos la malla; luego especificaremos exactamente dónde queremos que se coloque la luz y la agregaremos a la escena de la misma manera que agregamos la malla.

    var pointerOne = new THREE.PointLight(0xffffff);

    Las posiciones se pueden escribir de dos maneras, dependiendo de lo que esté tratando de lograr.

    // Separately:pointerOne.position.x = -100;pointerOne.position.y = -90;pointerOne.position.z = 130;// Or combined:pointerOne.position.set(-100,-90,130);// Add to the scene the same way as before.scene.add(pointerOne);

    Renderizar la escena

    Tenemos todo lo que necesitamos para una escena básica, así que todo lo que queda es decirle al renderizador que se ejecute creando un bucle de renderizado . Usaremos requestAnimationFrame()para informar al navegador de la próxima animación y luego iniciaremos el renderizador con la escena que hemos creado. Tenga en cuenta que requestAnimationFrame()tiene soporte limitado, así que consulte la corrección de Paul Irish para asegurarse de que todos sus usuarios obtengan la misma experiencia.

    var render = function () {requestAnimationFrame(render);renderer.render(scene, camera);};render();

    Si abres esto en tu navegador, verás la bola en el medio del lienzo con la luz reflejándose en ella. En este punto, juegue con las propiedades para tener una mejor idea de cómo los pequeños cambios afectan la escena.

    Ahora que la escena está renderizada, podemos agregar una animación simple como punto de partida. El renderbucle ya está activando cada cuadro de animación, por lo que todo lo que tenemos que hacer es establecer las velocidades y luego podremos ver la animación de inmediato.

     

    var render = function () {requestAnimationFrame(render);sphere.position.x += 1; // Move along x-axis towards the right side of the screensphere.position.y -= 1; // Move along y-axis towards the bottom of the screensphere.rotation.x += .1; // Spin left to right on the x-axissphere.rotation.y -= .1; // Spin top to bottom on the y-axisrenderer.render(scene, camera);};render();

    Dar control al usuario

    Si está interesado en Three.js para la creación de juegos, querrá que el usuario pueda interactuar con los modelos en la pantalla. Asigne los comandos como sphere.position.x +=1códigos de teclas de caracteres , lo que le dará control al usuario (en este caso, usando las teclas W, y para moverse). Una simple declaración asignará los códigos clave a los cambios de posición. Combinar cambios de posición con el cambio de rotación opuesto hará que parezca que la pelota rueda (por ejemplo, con ).ASDswitchposition.y += 3position.x -= 0.2

    window.addEventListener('keydown', function(event) {var key = event.which ? event.which : event.keyCode;switch(key){case 87:sphere.position.y += 3;sphere.rotation.x -= 0.2;break;case 65:sphere.position.x -= 3;sphere.rotation.y -= 0.2;break;case 83:sphere.position.y -= 3;sphere.rotation.x += 0.2;break;case 68:sphere.position.x += 3;sphere.rotation.y += 0.2;break;}}, false);

    Si desea incluir también la biblioteca Stats.js, agréguela a su documento con el siguiente fragmento:

    var stats = new Stats();stats.setMode(1);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild( stats.domElement );setInterval( function () {stats.begin();stats.end();}, 1000 / 60 );

    Volviendo a la demostración, deberías tener una piedra que rueda en la dirección en la que presionas la tecla, junto con estadísticas ejecutándose en la esquina si así lo deseas.

    Conclusión

    Este artículo apenas toca la superficie de la biblioteca Three.js, como puede ver al leer la documentación. Una vez que se sienta cómodo con la API, experimentar con partículas, mapeo y mallas más complicadas puede producir resultados increíbles.

    Si desea comprender mejor cómo trabajar en 3-D pero no tiene acceso a Maya o 3ds Max, Blender está disponible de forma gratuita. Si prefiere permanecer en el navegador, se crearon algunas aplicaciones sandbox en Three.js que funcionarán para usted. Puede encontrar un editor en la página de inicio de Three.js. Una alternativa es en realidad un proyecto destacado en la página de inicio llamado ThreeFab y actualmente se encuentra en versión alfa.

    Three.js es una mina de oro para crear experimentos web hermosos y complejos. Tomar la demostración extremadamente simple explicada aquí y convertirla en un experimento alucinante simplemente requiere experimentación y la voluntad de probar cosas nuevas. No hay nada mejor que profundizar en esta biblioteca y en WebGL para crear algo como esto .

    Otras lecturas

    • Realidad aumentada simple con OpenCV, Three.js y WebSockets
    • Creación de sombreadores con Babylon.js
    • Por qué AJAX no es suficiente
    • Una guía para la visualización de audio con JavaScript y GSAP (Parte 1)

    (al, ea, mrn)Explora más en

    • Codificación
    • Herramientas
    • javascript
    • Técnicas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Introducción al modelado poligonal y Three.js

    Introducción al modelado poligonal y Three.js

    SmashingConf Friburgo 2024 Listas de verificación de diseño de interfaz inteligente Índice Preparando l

    programar

    es

    https://aprendeprogramando.es/static/images/programar-introduccion-al-modelado-poligonal-y-three-825-0.jpg

    2024-05-20

     

    Introducción al modelado poligonal y Three.js
    Introducción al modelado poligonal y Three.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20