Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. WebGL
Gamedevelopment

Creación de terreno realista para juegos HTML5 con WebGL

by
Difficulty:IntermediateLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

La primera versión de Flight Simulator enviada en 1980 para el Apple II y, sorprendentemente, ¡fue en 3D! Eso fue un logro notable. Es aún más sorprendente si se tiene en cuenta que todo el 3D se hizo a mano, resultado de cálculos meticulosos y comandos de píxel de bajo nivel. Cuando Bruce Atwick abordó las primeras versiones de Flight Simulator, no sólo no había marcos 3D, pero no había marcos en absoluto! Esas versiones del juego se escribieron sobre todo en el montaje, apenas un paso lejos de los ceros y unos que fluyen a través de una CPU.

Cuando nos propusimos reimaginar Flight Simulator (o Flight Arcade como lo llamamos) para la web y demostrar lo que es posible en el nuevo navegador Edge de Microsoft y el motor de renderizado EdgeHTML, no podríamos dejar de pensar en el contraste de crear 3D entonces Y el ahora viejo Flight Sim—el nuevo Flight Sim, el antiguo Internet Explorer, el nuevo Microsoft Edge. La codificación moderna parece casi lujosa al esculpir mundos 3D en WebGL con grandes marcos como Babylon.js. Nos permite centrarnos en problemas de muy alto nivel.

En este artículo, compartiré nuestro acercamiento a uno de estos desafíos de la diversión: una manera simple de crear realista-mirar el terreno a gran escala.

Nota: El código interactivo y los ejemplos para este artículo también se encuentran en Flight Arcade / Learn.

Modelado y Terreno 3D

La mayoría de los objetos 3D se crean con herramientas de modelado, y por buenas razones. Crear objetos complejos (como un avión o incluso un edificio) es difícil de hacer en el código. Las herramientas de modelado . casi siempre tienen sentido, ¡pero hay excepciones! Uno de ellos "podría ser" casos como las colinas de la isla de Flight Arcade. Terminamos usando una técnica que encontramos más sencilla y posiblemente 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 sólo en juegos sino también en sistemas de información geográfica (GIS) usados ​​por cartógrafos y geólogos.

Para ayudarle a tener una idea de cómo funciona esto, echa un vistazo al mapa de altura en esta demostración interactiva. Trate de dibujar en el editor de imágenes, y luego echa un vistazo al terreno resultante

Screenshot of the heightmap demo

El concepto detrás de un mapa de altura es bastante sencillo. En una imagen como la anterior, el negro puro es el "piso" y el blanco puro es el pico más alto. Los colores en escala de grises intermedios representan elevaciones correspondientes. Esto nos da 256 niveles de elevación, que es un montón de detalles para nuestro juego. Las aplicaciones de la vida real pueden utilizar el espectro a todo color para almacenar significativamente 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:

En primer lugar, los mapas de altura son mucho más compactos. Sólo se almacenan los datos más significativos (la elevación). Tendrá que ser convertido en un objeto 3D de forma programática, pero este es el comercio clásico: ahorrar espacio ahora y pagar más tarde con la computación. Al almacenar los datos como una imagen, obtendrá otra ventaja espacial: puede aprovechar las técnicas de compresión de imagen estándar y hacer que los datos sean pequeños (en comparación)!

En segundo lugar, los mapas de altura son una manera conveniente de generar, visualizar y editar el terreno. 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 muy simple hacer pequeños ajustes según sea necesario. Cuando, por ejemplo, queríamos asegurarnos de que la pista fuera completamente plana, sólo nos aseguramos de pintar sobre esa zona en un solo color.

A continuación puede ver el mapa de altura de Flight Arcade. Vea si puede detectar las áreas "planas" que creamos para la pista y el pueblo.

heightmap for Flight Arcade
El mapa de altura para la isla Flight Arcade. Fue creado en Photoshop y está basado en la "isla grande" en una cadena famosa de la isla del Océano Pacífico. ¿Alguna conjetura?
Una textura que se asigna a la malla 3D resultante después de que el mapa de altura se decodifica. Más sobre eso a continuación.

Descodificación del mapa de altura

Hemos creado Flight Arcade con Babylon.js, y Babylon nos dio un camino bastante directo desde el mapa de altura 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 es determinada por la propiedad de esa subdivisión. Es importante tener en cuenta que el parámetro se refiere al número de subdivisiones en cada lado de la imagen del mapa de altura, no el número total de celdas. Así que aumentar este número ligeramente puede tener un gran efecto sobre el número total de vértices en su malla.

  • 20 subdivisiones = 400 celdas
  • 50 subdivisiones = 2.500 celdas
  • 100 subdivisiones = 10.000 celdas
  • 500 subdivisiones = 250.000 celdas
  • 1.000 subdivisiones = 1.000.000 celdas

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

Creación de detalles de la textura

Una vez que teníamos el modelo, mapear una textura era 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, por lo que la textura y el mapa de altura siguen correlacionados. Esto fue realmente fácil de visualizar y, una vez más, todo el trabajo de producción se hizo en Photoshop.

La imagen original de la textura fue creada en 4096x4096. ¡Eso es bastante grande! (Finalmente redujimos el tamaño por un nivel de 2048x2048 para mantener la descarga razonable, pero todo el desarrollo se hizo con la imagen de tamaño completo.) Aquí hay una muestra de píxel completo de la textura original.

A full-pixel sample of the original island texture
Una muestra de píxel completo de la textura original de la isla. La ciudad entera es sólo alrededor de 300 px cuadrados.

Esos rectángulos representan los edificios en la ciudad en la isla. Rápidamente nos dimos cuenta de una discrepancia en el nivel de detalle de texturas que podríamos lograr entre el terreno y los otros modelos 3D. ¡Incluso con nuestra textura de isla gigante, la diferencia era evidente!

Para arreglar esto, "mezclamos" detalles adicionales en la textura del terreno en forma de ruido aleatorio. Puedes ver el antes y el después abajo. Observe cómo el ruido adicional realza la apariencia del detalle en el terreno.

Before and after comparison of airport texture

Hemos creado un sombreado personalizado para agregar el ruido. Shaders le da una cantidad increíble 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: el vértice y los shaders de fragmentos. El objetivo principal del sombreado de vértices es asignar vértices a una posición en el cuadro representado. El fragmento (o píxel) sombreado controla el color resultante de los píxeles.

Los shaders están escritos en un lenguaje de alto nivel llamado GLSL (Graphics Library Shader Language), que se asemeja a C. Este código se ejecuta en la GPU. Para obtener una visión detallada de cómo funcionan los shaders, vea este  tutorial  sobre cómo crear su propio sombreador personalizado para Babylon.js, o vea esta guía para principiantes para codificar sombreadores de gráficos.

El sombreado vértice

No estamos cambiando cómo nuestra textura se mapea en la malla de tierra, por lo que nuestro vertex shader es bastante simple. Simplemente calcula el mapeo estándar y asigna la ubicación de destino.

El sombreador de Fragmento

Nuestro fragment shader es un poco más complicado. Combina dos imágenes diferentes: la base y las imágenes de mezcla. La imagen de base se asigna a través de toda la malla de tierra. En Flight Arcade, esta es la imagen en color de la isla. La imagen de mezcla es la pequeña imagen del ruido usada para dar a la tierra una cierta textura y detalle en distancias cercanas. El sombreador combina los valores de cada imagen para crear una textura combinada a través de la isla.

La lección final en Flight Arcade se lleva a cabo en un día de niebla, por lo que la otra tarea de nuestro sombreador de pixel tiene que ajustar el color para simular la niebla. El ajuste se basa en cuán lejos está el vértice de la cámara, con píxeles distantes siendo más "oscurecidos" por la niebla. Verá este cálculo de distancia en la función calcFogFactor por encima del código de sombreado principal.

La pieza final para nuestro mezcla de sombreado personalizada 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értice y píxel.

Babylon.js facilita la creación de un material de sombreado personalizado. Nuestro material de Mezcla es relativamente simple, pero realmente hizo una gran diferencia en la apariencia de la isla cuando el avión voló cerca del suelo. Los shaders aportan la potencia de la GPU al navegador, ampliando los tipos de efectos creativos que puede aplicar a sus escenas en 3D. En nuestro caso, que era el toque final!

Microsoft tiene un montón de aprendizaje gratuito en muchos temas de código abierto de JavaScript, y estamos en una misión de crear mucho más con Microsoft Edge. Éstos son algunos para visitar:

Y algunas herramientas gratuitas para empezar: Visual Studio Code, Azure Trial y herramientas de prueba de navegador—todas disponibles para Mac, Linux o Windows.

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.