Creación de un terreno realista con WebGL y Babylon.JS para Microsoft Flight Simulator Arcade

Creación de un terreno realista con WebGL y Babylon.JS para Microsoft Flight Simulator Arcade

La primera versión de Flight Simulator se envió en 1980 para Apple II y, sorprendentemente, ¡estaba en 3D! Ese fue un logro notable. Es aún más asombroso si se tiene en cuenta que todo el 3D se hizo a mano, como resultado de cálculos meticulosos y comandos de píxeles de bajo nivel. Cuando Bruce Atwick abordó las primeras versiones de Flight Simulator, no solo no había marcos 3D, ¡sino que no había marcos en absoluto! Esas versiones del juego se escribieron en su mayoría en ensamblador, a solo un paso de unos y ceros que fluyen a través de una CPU.

Cuando nos propusimos reimaginar Simulador de vuelo (o Flight Arcade como lo llamamos) para la web y para demostrar lo que es posible en el nuevo Navegador Microsoft Edge y motor de renderizado EdgeHTML, no pudimos evitar pensar en el contraste de crear 3D antes y ahora: el antiguo Flight Sim, el nuevo Flight Sim, el antiguo Internet Explorer, el nuevo Microsoft Edge. La codificación moderna parece casi lujosa mientras esculpimos mundos 3D en WebGL con excelentes marcos como Babylon.js. Nos permite centrarnos en problemas de muy alto nivel. En este artículo, compartiremos nuestro enfoque de uno de estos divertidos desafíos: una forma sencilla de crear un terreno a gran escala que parezca realista. https://www.youtube.com/watch?v=xyaq9TPmXrA Nota: El código interactivo y los ejemplos de este artículo también se encuentran en: http://www.flightarcade.com/learn/

Modelado y Terreno 3D

La mayoría de los objetos 3D se crean con herramientas de modelado y por una buena razón. Crear objetos complejos (como un avión o incluso un edificio) es difícil de hacer en código. Las herramientas de modelado casi siempre tienen sentido, ¡pero hay excepciones! Uno de esos podría ser casos como las colinas ondulantes de la isla Flight Arcade. Terminamos usando una técnica que nos pareció más simple y posiblemente incluso más intuitiva: un mapa de altura. Un mapa de altura es una forma de utilizar una imagen bidimensional regular para describir el relieve de elevación de una superficie como una isla u otro terreno. Es una forma bastante común de trabajar con datos de elevación, no solo en los juegos, sino también en los sistemas de información geográfica (SIG) utilizados por cartógrafos y geólogos. Para ayudarlo a tener una idea de cómo funciona esto, consulte el mapa de altura interactivo a continuación. Intente dibujar en el editor de imágenes y luego verifique el terreno resultante.

Pruebe la demostración interactiva aquí.

El concepto detrás de un mapa de altura es bastante sencillo. En una imagen como la de arriba, el negro puro es el «piso» y el blanco puro es el pico más alto. Los colores de la escala de grises intermedios representan las elevaciones correspondientes. Esto nos da 256 niveles de elevación, lo cual es un montón de detalles para nuestro juego. Las aplicaciones de la vida real pueden usar el espectro de color completo para almacenar muchos más niveles de detalle (2564 = 4,294,967,296 niveles de detalle si incluye un canal alfa). Un mapa de altura tiene algunas ventajas sobre una malla poligonal tradicional: Primero, los mapas de altura son mucho más compactos. Solo se almacenan los datos más significativos (la elevación). Deberá convertirse en un objeto 3D programáticamente, pero este es el intercambio clásico: ahorra espacio ahora y paga más tarde con el cálculo. Al almacenar los datos como una imagen, obtiene otra ventaja de espacio: puede aprovechar las técnicas estándar de compresión de imágenes y hacer que los datos sean pequeños (en comparación). En segundo lugar, los mapas de altura son una forma conveniente de generar, visualizar y editar terrenos. Es bastante intuitivo cuando ves uno. Se siente un poco como mirar un mapa. Esto resultó ser particularmente útil para Flight Arcade. ¡Diseñamos y editamos nuestra isla directamente en Photoshop! Esto hizo que fuera muy simple hacer pequeños ajustes según fuera necesario. Cuando, por ejemplo, queríamos asegurarnos de que la pista fuera completamente plana, solo nos asegurábamos de pintar sobre esa área en un solo color. Puede ver el mapa de altura de Flight Arcade a continuación. Vea si puede ver las áreas «planas» que creamos para la pista y el pueblo.

El mapa de altura de la isla Flight Arcade. Fue creado en Photoshop y está basado en la «gran isla» en una famosa cadena de islas del Océano Pacífico. ¿Alguna suposición?

Una textura que se asigna a la malla 3D resultante después de decodificar el mapa de altura. Más sobre eso a continuación.

Decodificación del mapa de altura

Creamos Flight Arcade con Babilonia.js y Babylon nos proporcionó un camino bastante directo desde el mapa de alturas hasta el 3D. Babylon proporciona una API para generar una geometría de malla a partir de una imagen de mapa de altura:

La cantidad de detalle está determinada por la propiedad de esa subdivisión. Es importante tener en cuenta que el parámetro se refiere a la cantidad de subdivisiones en cada lado de la imagen del mapa de altura, no a la cantidad total de celdas. Por lo tanto, aumentar ligeramente este número puede tener un gran efecto en el número total de vértices de la malla.

20 subdivisiones=400 celdas
50 subdivisiones=2500 celdas
100 subdivisiones=10,000 celdas
500 subdivisiones=250.000 celdas
1000 subdivisiones=1,000,000 de celdas

En la siguiente sección, aprenderemos cómo texturizar el suelo, pero al experimentar con la creación de mapas de altura, es útil ver la estructura alámbrica. Aquí está el código para aplicar una textura de estructura alámbrica simple para que sea fácil ver cómo los datos del mapa de altura se convierten en los vértices de nuestra malla:

Crear detalle de textura

Una vez que tuvimos un modelo, mapear una textura fue relativamente sencillo. Para Flight Arcade, simplemente creamos una imagen muy grande que coincidía con la isla en nuestro mapa de altura. La imagen se estira sobre los contornos del terreno para que la textura y el mapa de altura permanezcan correlacionados. Esto fue realmente fácil de visualizar y, una vez más, todo el trabajo de producción se realizó en Photoshop. La imagen de textura original se creó a 4096×4096. ¡Eso es bastante grande! (Finalmente redujimos el tamaño en un nivel a 2048×2048 para mantener la descarga razonable, pero todo el desarrollo se realizó con la imagen de tamaño completo). Aquí hay una muestra de píxeles completos de la textura original.

Una muestra de píxeles completos de la textura original de la isla. Toda la ciudad tiene solo alrededor de 300px cuadrados.

Esos rectángulos representan los edificios del pueblo de la isla. Rápidamente notamos una discrepancia en el nivel de detalle de textura que podíamos lograr entre el terreno y los otros modelos 3D. ¡Incluso con nuestra textura de isla gigante, la diferencia era tan evidente que distraía! Para solucionar esto, «combinamos» detalles adicionales en la textura del terreno en forma de ruido aleatorio. Puedes ver el antes y el después a continuación. Observe cómo el ruido adicional mejora la apariencia de los detalles en el terreno.

Creamos un sombreador personalizado para agregar el ruido. Los sombreadores le brindan una increíble cantidad de control sobre la representación de una escena 3D WebGL y este es un gran ejemplo de cómo un sombreador puede ser útil. Un sombreador WebGL consta de dos piezas principales: los sombreadores de vértices y de fragmentos. El objetivo principal del sombreador de vértices es asignar vértices a una posición en el marco renderizado. El sombreador de fragmentos (o píxeles) controla el color resultante de los píxeles. Los sombreadores están escritos en un lenguaje de alto nivel llamado GLSL (Graphics Library Shader Language) que se parece a c. Este código se ejecuta en la GPU. Para ver en profundidad cómo funcionan los sombreadores, consulte este tutorial sobre cómo crear su propio sombreador personalizado para Babylon.js

El sombreador de vértices

No estamos cambiando la forma en que nuestra textura se asigna a la malla de tierra, por lo que nuestro sombreador de vértices es bastante simple. Simplemente calcula el mapeo estándar y asigna la ubicación de destino.

El sombreador de fragmentos

Nuestro sombreador de fragmentos es un poco más complicado. Combina dos imágenes diferentes: la base y las imágenes combinadas. La imagen base se mapea en toda la malla de tierra. En Flight Arcade, esta es la imagen en color de la isla. La imagen de mezcla es la imagen de ruido pequeño que se usa para darle al suelo algo de textura y detalle a distancias cortas. El sombreador combina los valores de cada imagen para crear una textura combinada en toda la isla. La lección final en Flight Arcade tiene lugar en un día de niebla, por lo que la otra tarea que tiene nuestro sombreador de píxeles es ajustar el color para simular la niebla. El ajuste se basa en qué tan lejos está el vértice de la cámara, con los píxeles distantes más «oscurecidos» por la niebla. Verá este cálculo de distancia en la función calcFogFactor sobre el código de sombreado principal.

La pieza final de nuestro sombreador Blend personalizado es el código JavaScript utilizado por Babylon. El propósito principal de este código es preparar los parámetros pasados ​​a nuestros sombreadores de vértices y píxeles.

Babylon.js facilita la creación de un material personalizado basado en sombreadores. Nuestro material Blend es relativamente simple, pero realmente marcó una gran diferencia en la apariencia de la isla cuando el avión volaba cerca del suelo. Los sombreadores llevan la potencia de la GPU al navegador, ampliando los tipos de efectos creativos que puede aplicar a sus escenas 3D. En nuestro caso, ¡ese fue el broche de oro!

Más prácticas con JavaScript

Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de JavaScript de código abierto y tenemos la misión de crear mucho más con Borde de Microsoft. Aquí hay algunos para revisar:

Y algunas herramientas gratuitas para empezar: código de estudio visual, Prueba de Azurey herramientas de prueba de navegador cruzado – todos disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)

#Creación #terreno #realista #con #WebGL #BabylonJS #para #Microsoft #Flight #Simulator #Arcade

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.