Usando WebXR con Babylon.js

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. ¿Qué es WebXR?
      1. La especificación WebXR y la compatibilidad con el navegador
      2. Campo de visión (FOV) y grados de libertad (DoF)
      3. Modos de sesión WebXR
    2. Preparando una escena con WebXR y Babylon.js
      1. Presentamos Babylon.js
      2. ¡Luces, CAMARA, ACCION!
      3. Tomando forma: conjuntos y formas paramétricas

    En esta descripción general de las tecnologías WebXR y el marco Babylon.js, nos embarcaremos en un viaje a través del pasado, presente y futuro de la realidad mixta tanto en la web como en auriculares inmersivos. Inspeccionaremos los fundamentos de WebXR y los aspectos más importantes de la API del dispositivo WebXR antes de centrar nuestra atención en Babylon.js, un marco para crear aplicaciones inmersivas en JavaScript para web, dispositivos móviles y auriculares. Este tutorial está dirigido a desarrolladores web y JavaScript que crean aplicaciones web pero que buscan sumergirse en experiencias inmersivas.

     

    Las experiencias inmersivas, especialmente aquellas regidas por la realidad mixta (XR), que abarca tanto la realidad aumentada como la virtual, están ganando rápidamente nueva atención entre los desarrolladores y arquitectos interesados ​​en llegar a los usuarios y clientes de formas novedosas. Durante muchos años, la falta de adopción de experiencias de realidad mixta se debió al hardware (demasiado caro y difícil de manejar) y al software (demasiado complejo y delicado de usar).

    Pero la pandemia de coronavirus puede estar alterando todos esos viejos cálculos al fomentar tipos de experiencias que se limitan principalmente al mundo de los videojuegos, que está experimentando un inmenso crecimiento en el tiempo de juego durante la crisis actual. Las matemáticas detrás de los espacios tridimensionales también pueden presentar barreras para los desarrolladores, pero afortunadamente, sólo se necesita un poco de geometría vectorial y matemáticas matriciales para tener éxito con las experiencias XR, no un curso universitario en álgebra lineal y cálculo multivariado.

    Aunque la compatibilidad de los navegadores con WebXR se está ampliando, crear experiencias inmersivas en navegadores o auriculares puede resultar complicado debido a los cambios en las especificaciones y API, así como a los marcos y las mejores prácticas en rápida evolución. Pero incorporar la inmersión en su próxima aplicación web también puede introducir nuevas dimensiones y riqueza en su experiencia de usuario, todo sin la necesidad de aprender un nuevo lenguaje de programación.

     

    • ¿Qué es WebXR?
      • La especificación WebXR y la compatibilidad con el navegador
      • Campo de visión (FOV) y grados de libertad (DoF)
      • Modos de sesión WebXR
    • Preparando una escena con WebXR y Babylon.js
      • Presentamos Babylon.js
      • ¡Luces, CAMARA, ACCION!
        • Un breve comentario sobre la geometría WebXR
        • Cámaras
        • Luces
        • Fuentes de luz
        • Parámetros de luz
      • Tomando forma: conjuntos y formas paramétricas
      • Poniéndolo todo junto: renderizando la escena
      • Próximos pasos: soporte y gestión de la entrada del usuario
    • Depuración, ampliación y agrupación de Babylon.js
      • Depurando Babylon.js con el inspector
      • Integración y agrupación de Babylon.js con otros JavaScript
    • Sumergirse en WebXR

    ¿Qué es WebXR?

    En pocas palabras, WebXR es la agrupación de estándares responsables de soportar escenas tridimensionales renderizadas en realidad virtual y aumentada, ambos reinos experienciales conocidos juntos como realidad mixta (XR). La realidad virtual (VR), que presenta un mundo totalmente inmersivo cuyos elementos físicos son dibujados en su totalidad por un dispositivo, difiere considerablemente de la realidad aumentada (AR), que en cambio superpone elementos gráficos en el entorno del mundo real.

    Los dispositivos compatibles con WebXR abarcan desde auriculares 3D inmersivos con seguimiento de orientación y movimiento incorporado y nombres como Vive, Oculus y Hololens hasta anteojos con gráficos colocados sobre imágenes del mundo real y teléfonos inteligentes que muestran el mundo (y elementos adicionales) en sus cámaras nativas.

    La especificación WebXR y la compatibilidad con el navegador

    La API del dispositivo WebXR es el conducto principal a través del cual los desarrolladores pueden interactuar con auriculares inmersivos, anteojos AR y teléfonos inteligentes habilitados para AR. Incluye capacidades para que los desarrolladores descubran dispositivos de salida compatibles, representen una escena tridimensional en el dispositivo a la velocidad de fotogramas correcta, reflejen la salida en una pantalla bidimensional (como un navegador web 2D) y creen vectores que capturen la imagen. movimientos de los controles de entrada.

    Actualmente es un borrador de trabajo, la especificación WebXR es una combinación de la API WebVR anterior, que fue diseñada únicamente para casos de uso de realidad virtual, y el nuevo módulo de realidad aumentada WebXR, que sigue siendo altamente experimental. WebVR, que anteriormente era el enfoque predominante y recomendado para experiencias de realidad virtual, ahora ha sido reemplazado por WebXR, y muchos marcos y bibliotecas ofrecen estrategias de migración entre WebVR y la especificación WebXR más nueva.

     

    Aunque WebXR ahora está siendo testigo de la adopción en toda la industria, el soporte del navegador sigue siendo irregular y aún no se garantiza que una aplicación de realidad mixta creada de acuerdo con la especificación WebXR funcione en producción.

    Chrome 79, Edge 79, Chrome para Android 79 y Samsung Internet 11.2 ofrecen soporte completo para WebXR. Pero para navegadores no compatibles como Firefox, Internet Explorer, Opera, Safari o ciertos navegadores móviles (vista web de Android, Firefox para Android, Opera para Android y Safari en iOS), hay un WebXR Polyfill disponible gracias a los miembros de la comunidad WebXR que implementa WebXR. API de dispositivo en JavaScript para que los desarrolladores puedan escribir aplicaciones de acuerdo con el último estado de la especificación. En Firefox para web y Firefox para Android, puede habilitar la marca de función experimental navegando about:configy configurando dom.vr.webxr.enabledla trueconfiguración avanzada de su navegador.

    La instalación del emulador de API WebXR en Chrome o Firefox en una computadora personal presentará herramientas adicionales para ayudarlo con la depuración y las pruebas.

    La API del dispositivo WebXR depende de WebGL (Biblioteca de gráficos web), el motor de renderizado que admite gráficos tridimensionales y, por lo tanto, emplea muchos conceptos de WebGL cuando realiza el renderizado, la iluminación y el texturizado necesarios para una escena. Aunque los alcances más profundos de WebGL están más allá del alcance de este artículo, aquellos que ya están familiarizados con WebGL se beneficiarán de la experiencia existente.

    Hay varios marcos de JavaScript de código abierto disponibles para interactuar con WebGL y WebXR, a saber, Three.js y Babylon.js . A-Frame , un enfoque de WebXR basado en navegador y centrado en el marcado, está construido sobre Three.js. En este tutorial, destacamos Babylon.js, que ha llamado la atención últimamente debido a su gran superficie API y su relativa estabilidad. Pero estos no son como las bibliotecas y marcos de JavaScript que utilizamos para crear aplicaciones web bidimensionales; en cambio, juegan en el arenero de espacios tridimensionales.

    Campo de visión (FOV) y grados de libertad (DoF)

    En este artículo, nos centraremos en crear una experiencia inmersiva simple con entrada limitada y un objeto estático, lo que significa que nuestra necesidad de un conocimiento profundo sobre WebGL es mínima. Pero hay conceptos críticos de WebXR fuera de WebGL que son fundamentales no para los gráficos tridimensionales en sí, sino para interactuar con espacios tridimensionales. Debido a que WebXR se basa en la experiencia del espectador, todo gira en torno a los auriculares inmersivos o la ventana gráfica a la que se enfrenta el usuario.

    Todos los auriculares y teléfonos inteligentes tienen una cámara que sirve como ventana de visualización para el usuario en una experiencia inmersiva. Cada cámara tiene un determinado campo de visión (FOV) que abarca la extensión del entorno del espectador que es visible en un momento dado en un dispositivo. Un solo ojo humano tiene un FOV de 135º, mientras que dos ojos humanos, con FOV superpuestos, tienen un FOV combinado de 220º de ancho. Según MDN, la mayoría de los auriculares oscilan entre 90º y 150º en su campo de visión.

     

    El mundo virtual o aumentado visto a través del campo de visión de la cámara se puede ajustar mediante el movimiento , que ocurre en grados de libertad cada vez que un dispositivo se mueve de cierta manera mientras el usuario permanece estacionario. El movimiento de rotación se produce a lo largo de tres grados de libertad (3DoF), que es la base para la mayoría de los auriculares inmersivos básicos:

    • El tono es el movimiento que se produce al mirar hacia arriba y hacia abajo. En tono, la cabeza del usuario gira sobre el eje x, que se extiende horizontalmente a lo largo de la ventana gráfica.
    • La guiñada es el movimiento que se produce al mirar hacia la izquierda y hacia la derecha. En guiñada, la cabeza del usuario gira sobre el eje y, que se extiende verticalmente a lo largo de la ventana gráfica.
    • El balanceo es el movimiento que se produce al inclinarse hacia la izquierda y hacia la derecha. Al girar, la cabeza del usuario gira sobre el eje z, que se extiende hacia adelante en la ventana gráfica y en el horizonte.

    El movimiento de rotación se produce a lo largo de tres grados de libertad (3DoF): cabeceo (pivotando en el eje x), guiñada (pivotando en el eje y) y balanceo (pivotando en el eje z). ( Vista previa grande )

    Aunque tres grados de libertad son suficientes para experiencias de inmersión más simples, los usuarios normalmente desean moverse a través del espacio en lugar de simplemente cambiar su perspectiva sobre él. Para ello, necesitamos seis grados de libertad (6DoF), cuyos últimos tres grados definen el movimiento de traslación a través del espacio (hacia delante y hacia atrás, hacia la izquierda y hacia la derecha, hacia arriba y hacia abajo) para cabecear, girar y girar. En resumen, 6DoF incluye no sólo girar a lo largo de los ejes x, y y z, sino también moverse a lo largo de ellos. Debido a la frecuente necesidad de sensores externos para detectar el movimiento de traslación, sólo los auriculares de alta gama admiten los seis grados.

    El movimiento de rotación y traslación se produce a lo largo de seis grados de libertad (6DoF). ( Vista previa grande )

    Modos de sesión WebXR

    Ahora que WebXR reemplaza la especificación WebVR anterior, ahora proporciona una API como fuente única de verdad para la realidad virtual y aumentada. Cada aplicación WebXR comienza con el inicio de una sesión , que representa una experiencia inmersiva en progreso. Para la realidad virtual, WebXR pone a disposición dos modos de sesión: inline, que deposita una escena renderizada en un documento del navegador, y immersive-vr, que depende de unos auriculares. Para la realidad aumentada, debido a que el renderizado sólo es posible en las cámaras de los teléfonos inteligentes y en gafas transparentes en lugar de navegadores, immersive-ares el único modo disponible.

     

    Debido a que muchos de nosotros no tenemos a mano unos auriculares inmersivos en casa, y debido a que el módulo de realidad aumentada WebXR sigue en intenso desarrollo, centraremos nuestra atención en una experiencia de realidad virtual inmersiva que se puede representar en el lienzo de un navegador.

    Preparando una escena con WebXR y Babylon.js

    En esta sección, aprenderemos cómo crear y renderizar una escena WebXR con Babylon.js, el entorno de nuestro entorno y la configuración de nuestra experiencia, antes de prestar atención a acciones como la entrada o el movimiento del usuario. Babylon.js es un motor de renderizado web gratuito y de código abierto basado en WebGL que incluye soporte para WebXR y aplicaciones multiplataforma en forma de Babylon Native. Babylon.js ofrece una serie de funciones adicionales, incluido un editor de materiales de nodo de código bajo para la creación de sombreadores y una integración profunda con funciones de WebXR como la gestión de sesiones y entradas. El sitio web Babylon.js también ofrece entornos de juegos y zonas de pruebas.

    Aunque seleccionar entre Babylon.js y Three.js depende de las preferencias del desarrollador, Three.js se centra en la extensibilidad más que en la exhaustividad, con una serie de módulos intercambiables que agregan funcionalidad complementaria. Babylon.js, mientras tanto, proporciona una suite con más funciones que puede resultar excesiva para proyectos más pequeños, pero ofrece la superficie necesaria para muchas implementaciones.

    Presentamos Babylon.js

    Aunque usted mismo puede manejar todas las interacciones con la API del dispositivo WebXR, Babylon.js proporciona un Asistente de experiencia predeterminado opcional que puede configurar y cerrar sesiones en su nombre. El asistente de experiencia predeterminado WebXR también incluye controles de entrada y otras características, así como un botón HTML rudimentario para ingresar a la experiencia inmersiva. Para experimentar con el asistente de experiencia predeterminado, escribamos una página HTML que proporcione un lienzo para la visualización XR y proporcione la fuente Babylon.js desde una CDN. Puede encontrar esta página HTML en el repositorio de GitHub para este tutorial en la mainrama.

    Ábralo index.htmlen su editor de código preferido y en un navegador. Para esta primera parte del tutorial, inspeccionaremos el archivo en lugar de agregar código. En un navegador habilitado para WebXR como Chrome o Firefox (con el indicador de función WebXR habilitado en el caso de Firefox), verá un lienzo que contiene el área de juegos inicial de Babylon.js, una especie de "Hola mundo", y puede arrastrar el ratón sobre la pantalla para reorientarse. La siguiente captura de pantalla muestra este estado inicial. Películas en excelente calidad Full HD

    El estado inicial del patio de juegos predeterminado de Babylon.js. ( Vista previa grande )

    Primero, incorporaremos las últimas versiones de Babylon.js del CDN de Babylon, así como otras dependencias útiles. También agregaremos algunos estilos para nuestro elemento de lienzo de escena en body, que es donde se representará nuestra experiencia inmersiva.

    !-- babylon-webxr/index.html --!DOCTYPE htmlhtml head titleBabylon WebXR Demo/title !-- Embed latest version of Babylon.js. -- script src="https://cdn.babylonjs.com/babylon.js"/script !-- Embed Babylon loader scripts for .gltf and other filetypes. -- script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"/script !-- Embed pep.js for consistent cross-browser pointer events. -- script src="https://code.jquery.com/pep/0.4.3/pep.js"/script style html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box; } #render-canvas { width: 100%; height: 100%; touch-action: none; } /style /head body canvas/canvas

    Ahora es el momento de nuestra implementación de Babylon.js. Dentro de un scriptelemento justo antes de la /bodyetiqueta de terminal, comenzamos identificando nuestro elemento de lienzo en Babylon.js durante la creación de instancias de un nuevo motor Babylon con configuración predeterminada.

     

    !-- Our Babylon.js implementation. --script // Identify canvas element to script. const canvas = document.getElementById('render-canvas'); // Initialize Babylon.js variables. let engine, scene, sceneToRender; const createDefaultEngine = function () { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };

    ¡Luces, CAMARA, ACCION!

    Para que nuestros espectadores puedan sumergirse en nuestra experiencia, necesitamos definir una cámara que se colocará en un punto de vista y se orientará en una dirección en la que el espectador pueda percibir el entorno. También necesitamos proporcionar una fuente de iluminación para que los espectadores puedan ver la escena. Aunque la API del dispositivo WebXR ofrece mecanismos basados ​​en WebGL de bajo nivel para crear cámaras , Babylon.js viene con una implementación de cámara completa.

    Un breve comentario sobre la geometría WebXR

    Sin embargo, antes de continuar, es importante que tomemos un rápido desvío para examinar algunos conceptos esenciales de geometría tridimensional en WebXR y WebGL, de los cuales WebXR hereda los conceptos geométricos. Para comprender la posición, la rotación y la escala en WebXR y Babylon.js, necesitamos comprender los vectores tridimensionales, las matrices , los espacios mundiales y locales, y los espacios de referencia. Y para posicionar, rotar y escalar objetos en un espacio tridimensional, necesitamos usar transformaciones matriciales.

    En un plano de coordenadas bidimensional típico, expresamos el origen como las coordenadas (0, 0), donde los valores de x e y son iguales a cero. En el espacio tridimensional, por otro lado, necesitamos un vector tridimensional, que suma un tercer eje, el eje z, que es perpendicular al plano representado por los ejes x e y. (Si los ejes x e y de un plano de coordenadas son una hoja de papel, el eje z salta de la página). Dado que WebGL, y por lo tanto WebXR, expresa una sola unidad como un metro , el tridimensional El vector (0, 1, 2) tendría un valor x de 0, un valor y de 1 metro y un valor z de 2 metros.

    WebGL y WebXR distinguen entre espacios mundiales y espacios locales según el marco de referencia o espacio de referencia en el que esté operando. El espacio de coordenadas o espacio mundial estándar de WebGL está representado por un cubo imaginario de 2 metros de ancho, 2 metros de alto y 2 metros. metros de profundidad, y cada vértice del cubo está representado por un vector cuyos valores están a un metro del origen (0, 0, 0), como lo ilustra el siguiente diagrama. Cuando te pones unos auriculares y comienzas una experiencia de realidad virtual, estás ubicado en el origen, es decir, (0, 0, 0), del espacio mundial , con el eje –y delante de ti, el eje –x. a su izquierda y el eje –z debajo de sus pies. Normalmente, la ubicación inicial de un dispositivo WebXR es el origen del espacio mundial.

     

    El sistema de coordenadas WebGL, que consta de un cubo que se extiende una unidad desde el origen. ( Vista previa grande )

    Cada objeto, incluidas entidades en el espacio y controladores de entrada como joysticks, tiene su propio marco de referencia o espacio de referencia que se relaciona con el marco de referencia global representado por el espacio mundial, cuyo origen generalmente se actualiza en tiempo real según la posición del espectador. . Esto se debe a que cada objeto y fuente de entrada no tiene conocimiento de las posiciones de otros objetos y fuentes de entrada. El marco de referencia específico del objeto o controlador es el espacio local , representado como una matriz, y cada vector de posición o transformación en esa entidad se expresa de acuerdo con ese espacio local. Esto significa que una escena WebXR típica puede consistir en docenas o decenas de espacios de referencia distintos.

    Como ejemplo de esto, considere una esfera sin transformaciones que está ubicada en (1, 3, 5), que es su origen nativo en el espacio mundial. Sin embargo, según su espacio local se ubica en (0, 0, 0), que es su origen efectivo . Podemos reposicionar, rotar y escalar la esfera de maneras que modifiquen su relación con su espacio local, pero durante el renderizado, eventualmente necesitaremos convertir esos cambios en transformaciones que también tengan sentido en el espacio mundial. Esto requiere la conversión de la matriz espacial local de la esfera en una matriz espacial mundial de acuerdo con el desplazamiento del origen (la diferencia entre los orígenes nativo y efectivo). La aritmética detrás de estas operaciones implica transformaciones matriciales , cuya exploración completa está mucho más allá del alcance de este artículo, pero MDN tiene una excelente introducción . Ahora podemos comenzar a posicionar nuestra primera cámara.

    Cámaras

    Primero, creamos una nueva escena y una nueva cámara, ubicadas en el vector tridimensional (0, 5, –10) (es decir, valor x de 0, valor y de 5, valor z de –10), que posicionará la cámara 5 unidades arriba y 10 unidades detrás del origen nativo del espacio WebXR de (0, 0, 0). Luego, apuntamos la cámara a ese mismo origen, lo que la inclina ligeramente hacia abajo (valor y de 5) y deja cualquier objeto de la escena frente a nosotros (valor z de –10).

    // Create scene and create XR experience.const createScene = async function () { // Create a basic Babylon Scene object. let scene = new BABYLON.Scene(engine); // Create and position a free camera. let camera = new BABYLON.FreeCamera('camera-1', new BABYLON.Vector3(0, 5, -10), scene); // Point the camera at scene origin. camera.setTarget(BABYLON.Vector3.Zero()); // Attach camera to canvas. camera.attachControl(canvas, true);

    Si posteriormente realizamos transformaciones locales en la posición de la cámara, éstas operarán en el origen efectivo de la cámara. Para obtener capacidades de cámara más completas o acceder a funciones de nivel inferior, puede utilizar el WebXRCameraprototipo .

     

    Luces

    Si mostráramos esta escena a nuestros espectadores, no verían nada, porque no hay una fuente de luz en el entorno para transmitir partículas que reboten en los objetos y lleguen a nuestros ojos. En realidad mixta, hay tres posibles componentes de una fuente de luz , cada uno de los cuales representa un tipo de iluminación, como lo describe MDN :

    • La luz ambiental es omnipresente y no proviene de un único punto o fuente. Debido a que la luz se refleja por igual en todas las direcciones, el efecto de la luz ambiental es equivalente sin importar en qué parte de la escena se encuentre.

    • La luz difusa es la luz que se emite o se refleja en una superficie, de manera uniforme y en una dirección. El ángulo de incidencia (el ángulo entre el vector que representa la dirección de la luz que llega a la superficie de un objeto y el vector perpendicular a la superficie del objeto) determina la intensidad de la luz a través del objeto.

    • La luz especular es el tipo de luz que marca áreas brillantes o resaltadas en objetos reflectantes como joyas, ojos, platos y objetos similares. La luz especular se presenta como puntos o cajas brillantes en la superficie de un objeto donde la luz incide más directamente sobre el objeto.

    Babylon.js proporciona un HemisphericLightprototipo de luz ambiental que podemos utilizar para crear una nueva fuente de luz. En este caso, estamos posicionando la luz hemisférica para que apunte hacia el cielo con el vector (0, 1, 0).

    // Create a light and aim it vertically to the sky (0, 1, 0).let light = new BABYLON.HemisphericLight('light-1', new BABYLON.Vector3(0, 1, 0), scene);

    Fuentes de luz

    Babylon.js proporciona cuatro tipos de fuentes de luz que pueden emplear luz ambiental, difusa o especular en diversos grados: fuentes de luz puntuales (definidas por un único punto desde el cual se emite luz en todas las direcciones, por ejemplo, una bombilla), fuentes de luz direccionales (definidas por una dirección desde la cual se emite la luz, por ejemplo, la luz solar que ilumina un planeta distante), y fuentes de luz puntual (definidas por un cono de luz que comienza desde una posición y apunta hacia una dirección, por ejemplo, un foco de escenario). En este caso, debido a que estamos creando una fuente de luz hemisférica , que emite luz ambiental en una dirección pero no tiene una posición única, solo necesitamos un único vector tridimensional para definir su orientación.

    Modifiquemos este código de iluminación para experimentar con los otros tipos de luz. En cada uno de los tres ejemplos siguientes, reemplazamos la luz hemisférica con luces puntuales, direccionales y puntuales, respectivamente. Como era de esperar, las luces puntuales (rama lighting-1en el repositorio de GitHub) solo requieren un vector que indique la posición.

    // Create a point light.let light = new BABYLON.PointLight('light-1', new BABYLON.Vector3(0.5, 5, 0.5), scene);

    Mientras tanto, las luces direccionales (rama lighting-2), actúan de manera similar a las luces hemisféricas en el sentido de que también solo requieren un vector que indique la dirección. En este ejemplo, la luz direccional se origina desde la derecha (valor x de –1).

     

    // Create a directional light.let light = new BABYLON.DirectionalLight('light-1', new BABYLON.Vector3(-1, 0, 0), scene);

    Finalmente, los focos (rama lighting-3) requieren argumentos para la posición y la dirección (ambos vectores tridimensionales), así como el ángulo de iluminación (el tamaño en radianes del haz cónico del foco) y un exponente que define qué tan rápido decae la luz. una distancia.

    Aquí, tenemos un vector de posición para colocar nuestra fuente de luz puntual en lo alto (valor y de 15) y en la parte trasera (valor z de –15) para imitar una configuración de cine típica. El segundo vector direccional indica que el foco debe apuntar hacia abajo (valor y de –1) y hacia adelante (valor z de 1). El haz está limitado a π/4 (45º) y decae a un ritmo de 3 (es decir, la intensidad de la luz decae en dos tercios con cada unidad a su alcance).

    // Create a spot light.let light = new BABYLON.SpotLight('light-1', new BABYLON.Vector3(0, 15, -15), new BABYLON.Vector3(0, -1, 1), Math.PI / 4, 3, scene);

    La captura de pantalla que se muestra a continuación ilustra las diferencias entre fuentes de luz ambiental, puntual, direccional y puntual.

    Una captura de pantalla que muestra fuentes de luz ambiental (extremo izquierdo), puntual, direccional y puntual, respectivamente. ( Vista previa grande )

    Parámetros de luz

    Hay ciertos parámetros que los usuarios de Babylon.js pueden configurar para las luces, como la intensidad ( light.intensitytiene un valor predeterminado de 1) y el color. Las luces también se pueden apagar ( light.setEnabled(false)) y encender ( light.setEnabled(true)).

    // Set light intensity to a lower value (default is 1).light.intensity = 0.5;

    Reduzcamos a la mitad la intensidad de la luz reduciendo el valor a 0,25. Guarde el archivo y visualícelo en el navegador para ver el resultado, que refleja la rama lighting-4en el repositorio de GitHub.

    // Set light intensity to a lower value (default is 1).light.intensity = 0.25;

    También hay parámetros disponibles para ajustar el color de la luz difusa o especular que se origina en una fuente de luz. Podemos agregar dos líneas adicionales para definir el color difuso y especular (rama lighting-5). En este ejemplo, creamos un azul claro difuso y un rojo claro especular, que superpone un punto rojo especular brillante encima de una franja azul más difusa.

    // Set diffuse light to blue and specular light to red.light.diffuse = new BABYLON.Color3(0, 0, 1);light.specular = new BABYLON.Color3(1, 0, 0);

    La gama completa de capacidades de iluminación en Babylon.js, incluidos mapas de luz y texturas de proyección, está mucho más allá de este artículo, pero la documentación de Babylon.js sobre luces contiene mucha más información.

    Tomando forma: conjuntos y formas paramétricas

    Ahora que tenemos iluminación y una cámara, podemos agregar elementos físicos a nuestra escena. Con el generador de mallas integrado de Babylon.js, puede renderizar formas tanto establecidas como paramétricas. Las formas fijas son aquellas que suelen tener nombres en el uso cotidiano y una apariencia conocida, como cajas (también llamadas cuboides), esferas, cilindros, conos, polígonos y planos. Pero las formas establecidas también incluyen formas que quizás no uses a diario, como toros, nudos de toro y poliedros.

    En el siguiente código de ejemplo, creamos una esfera con un diámetro de 2 unidades y con 32 segmentos horizontales utilizados para representar la forma.

    // Add one of Babylon's built-in sphere shapes.let sphere = BABYLON.MeshBuilder.CreateSphere('sphere-1', { diameter: 2, segments: 32}, scene);// Position the sphere up by half of its height.sphere.position.y = 1;

    Si ajustamos los parámetros para incluir distintos diámetros a lo largo de los ejes x, y y z, podemos transformar nuestra esfera en un elipsoide (rama shapes-1). En este ejemplo, los parámetros diameterYy diameterZanulan el diámetro predeterminad






    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

    Usando WebXR con Babylon.js

    Usando WebXR con Babylon.js

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-usando-webxr-con-babylon-1065-0.jpg

    2024-05-21

     

    Usando WebXR con Babylon.js
    Usando WebXR con Babylon.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