Making a 3D Forest Environment for Holozing! - #1

A weekee-greeting to all Hivers!! After many days of work I thought it was now time to show you my progress on one of the main game's future environments: The Forest.
In this post I will tell you about the struggle I had during the first part of the making, surprisingly the one that consumed the most time in comparison to what I managed later. I had to investigate and learn a lot of new stuff.

¡Un weekee-saludo a todos los Hivers! Después de numerosos días de trabajo pensé que ya era hora de mostrarles mi progreso en uno de los principales ambientes futuros del juego: El Bosque.
En este post les contaré sobre los enredos que tuve durante la primera parte del desarrollo, sorprendentemente la parte que más tiempo me llevó en comparación con los avances que logré luego. Tuve que investigar mucho y aprender muchas cosas nuevas.

First I made a plane and deformed it a bit to make it look irregular like earth, and placed a circle in the middle with two of the dragons as reference for the sizes.

Primero hice un plano y lo deformé un poco para que se pareciera a la tierra y coloqué un círculo en el centro junto con dos de los dragones para tener una referencia de los tamaños.

I had no previous idea of what to make.
I mean, it's just a forest, must be easy... right? No, it wasn't easy at all to imagine the composition and the ideal place of each of the elements in the environment. So the first thing I did was an ugly sketch.

No tenía una idea previa de qué hacer.
Quiero decir, es solamente un bosque, debe ser fácil... verdad? No, no fue nada fácil imaginarse la composición y el tamaño y lugar adecuado de cada elemento del escenario. Así que la primera cosa que hice fue un bozeto feo.

Attending to what I still understand of my caothic doodle, there was gonna be a mountain zone with many loose rocks around the top right corner, a pond in the bottom left, a pine's zone in the top left surrounded by bushes, a fruit tree's zone in the bottom right, many flowers near the bottom of the map and four dirt paths that connect the most important zone in the center, the battle arena. I considered this guide was solid enough to start building the most important assets, starting with the mountains and the pond zone.

Según lo que aún entiendo de mi garabato caótico, iba a haber una zona montañosa con piedras caídas alrededor de la esquina derecha arriba, un estanque en la parte izquierda de abajo, una zona de pinos a la izquiera arriba y una zona de árboles frutales en la derecha abajo, muchas flores cerca de la parte inferior del mapa y cuatro caminos de tierra que se conectaban en la zona más importante en el centro del mapa, la arena de batalla. Consideré que esta guía era lo suficientemente sólida para comenzar a modelar los assets más importantes, empezando por las montañas y la zona del estanque.

The hole for the pond zone was as easy as just making a hole in the mesh and deforming it. Here you see I made a texture with flat colors to differentiate the grass zone from the arena dirt one.

Para el hueco para la zona del estanque sólo abrí un hueco en la malla y la deformé. Aquí pueden ver que hice una textura con colores planos para diferenciar al césped de la tierra de la arena de batalla.

Then I made some irregular bumps out of squared meshes for what were going to be the mountain assets.

Luego hice unos bultos irregulares usando unas mallas cuadradas para lo que serían las montañas.

But here I faced for the first time (not really the first time) my biggest enemy: Peformance for WebGL. You see, these type of games need the lowest resolution yet the best quality possible to be handled by any kind of platform, even web navigators. The more lightweight it is the better it can run in real time in any device.
To resume all this, I had to build everything with the simplest mesh possible. So I made two new deformed bumps, but the mesh complexity was actually so low that it was imposible to make them look like actual mountains with their rocky peaks and depth...

Pero aquí me enfrenté por primera vez (no realmente la primera vez) a mi mayor enemiga: La Eficiencia para WebGL. Ves, este tipo de juegos necesitan la resolución más baja y a la vez la mayor calidad posible para que puedan ser soportados por cualquier tipo de plataforma, inlcuso los navegadores web. Mientras más ligero mejor puede correr el videojuego en tiempo real en cualquier dispositivo.
Para resumir todo esto, tuve que contruir todo con la malla más sencilla posible. Así que hice dos nuevos bultos deformados, pero la cantidad de caras de la malla era tan poca que se me hacía imposible hacer que parecieran montañas con sus picos y profundidad...

So I researched about the strategies they use in low poly games to make things look like they have volume with actually no volume. And there I met the magic of normal maps.
Basically it consists of a texture than simulates bumps and volumetric shapes on top of totally flat surfaces. But I needed a high topology version of the mesh with those irregularities to use as the mold to bake the texture on its surface and then apply the texture to the low topology mesh.
In not nerdy words, I had to sculpt a mountain with a similar overall shape to steal its 4K looking graphics and apply them to this lame bump I made before.
The sculpting part was relatively easy, the real struggle came next.

Así que investigué sobre las estrategias usadas en juegos low poly para que las cosas que no tengan volumen se vean con volumen. Y ahí conocí la magia de los mapas de normales.
Básicamente, consiste de una textura que simula tener irregularidades, elevaciones y depresiones que se pone sobre superficies planas. Pero para conseguir esos efectos de volumen necesitaba esculpir una versión de alta complejidad de la malla con las irregularidades para usarla como molde para hornear la textura en su superficie y luego aplicar dicha textura a la malla de baja resolución.
Sin usar palabras nerds, Tuve que esculpir una montaña de una forma general similar para robarle sus gráficos 4K y aplicárselos al vergonzoso bulto que hice antes.
La parte de esculpir fue relativamente fácil, el verdadero enredo llegó después.

After hours of learning how to make these colorful weird looking textures correctly and many failed attempts I finally made it. This is how the 'volume' stracted from the detailed mountain looks like.

Después de horas de aprender cómo hacer esas texturas rara y coloridas y fracasar repetidas veces en el intento lo logré. Así es como se ve el 'volumen' extraído de la montaña detallada.

Finally this may look like the same detailed mountain... but guess what.

Finalmente esto se debe ver como si fuera la misma montaña detallada... pero adivinen qué.

:D same lame bump after all! Following this technique I made everything else that required to look like it had depth.
It was time to give some color and glossyness to the mountains. These requires two extra textures for each of them.

¡:D mismo bulto vergonzoso después de todo! Siguiendo esa técnica hice todo lo que necesitaba verse como si tuviera profundidad.
Era hora de darle color y reflexión a las montañas. Esto requirió dos texturas más para cada una de ellas.

At first, I made them with that earth-like color and the fade to the green grass, but then I changed my mind. That would be for the next post though, I know you're already bored of me talking about mountains.
Though this other topic is not so different either XD, the rocks.

Al principio las hice con ese color tierra y el difuminado al verde de la hierba, pero luego cambié de opinión. Eso será para el siguiente post sin embargo, sé que ya están aburridos de leerme hablando tanto sobre montañas.
Aunque este otro tópico no es tan diferente tampoco XD, las rocas.

I needed to do the same thing again, sculpt the high resolution version of the rock mesh. This is the result.

Necesitaba hacer lo mismo nuevamente, esculpir la versión de alta resolución de la malla de la roca.
Este es el resultado.

_source

Woops wrong picture 😭...
_{woops foto equivocada...}

There ya go.
_{Ahora sí.}

These rocks will be near the mountain's zone and you will be able to shoot them with some kind of weapon to extract materials from their inside, like ores and crystals. I initially made this version of the big rocks that had visible ores.

Estas rocas estarán cerca de la cordillera y serás capaz de dispararles con un arma especial para extraer valiosos recursos de su interior, como minerales y cristales. Inicialmente hice esta versión de las rocas más grandes con estos minerales visibles.

But it was then changed, as well as the colors of the rocks cuz they looked like chocolate. In the next post.

Pero se cambió luego, así como los colores de las rocas porque parecían chocolate. En el siguiente post.

By that point I was about to get in the part I struggled the most... you guessed it, trees.
This was the process of my first attempt of a tree.

En ese punto estaba a punto de meterme en la parte en la que más pasé trabajo... adivinaron, los árboles.
Este fue el proceso de mi primer intento de árbol.

Beautiful, right? Performance did not agree.
I made three more versions but again they were imposible to use, same problem.
I moved to the pine model, which was relatively more simple. It was functional, but ugly. I wasn't satisfied.

Hermoso, verdad? La eficiencia no estuvo de acuerdo.
Hice tres versiones más pero otra vez el mismo problema, imposibles de utilizar.
Fui a hacer el pino, el cual era relativamente más sencillo. Era funcional, pero feo. No estaba satisfecha.

Though, for an early positioning in the overall map they were good as reference. I made a quick setup according to the sketch.

Sin embargo, para una temprana ubicación general de las cosas en el mapa servían de referencia. Hice un setup rápido siguiendo el boceto.

And in the game it was going to look like this.
I needed to fix a lot of stuff, and the trees topic was worrying me the most. But don't worry, I'll show you how I turned this...

Y en el juego se iba a ver así.
Necesitaba arreglar muchas cosas, y el tema de los árboles era lo que más me preocupaba. Pero no se preocupen, les mostraré cómo convertí esto...

Into this georgeous landscape :3

En este hermoso paisaje :3

Don't miss the next post out, read ya there!

No se pierdan el siguiente post, los leo ahí!

---

_{All images are screenshots of my progress in the Blender project. I did not use a translator, I manually write the post in both languages.
Todas las imágenes son capturas de pantalla que hice de mi proceso. No usé traductor, manualmente escribo el post en ambos idiomas.}