Water



Water

En este tutorial experimentaremos un poco más con materiales y aprenderemos a crear un efecto de agua 3D simple usando texturas y un objeto de cámara de cubo (para crear reflejos).

Empecemos creando una escena básica con algunos objetos y un plano que usaremos para crear nuestra agua, tenemos que configurar nuestra geometría de plano para tener subdivisión múltiple, la necesitaremos más adelante para crear un efecto de onda con el material.

Después de que tengamos nuestra escena, creemos un nuevo material, podemos usar un material estándar, físico o phong para este tutorial. Vamos a nombrar este material agua, este material se utilizará para nuestra superficie de agua. Puede agregar algo de color y transparencia si lo desea.



Para crear un efecto de agua, podemos usar un mapa normal de la superficie del agua, podemos encontrar algunos de estos en la web, aquí está el que he usado para este tutorial. Podemos usar nuestro mapa normal como mapa normal de cabina y mapa de desplazamiento, al adjuntar nuestro mapa normal como mapa de desplazamiento, el único canal de color se utilizará para crear desplazamiento en la superficie de nuestra geometría creando un efecto ondulado que debería hacer que nuestra agua se vea uniforme. mejor.



La textura que agregamos arriba es estática, el siguiente código se puede usar para animar la textura, mueve nuestro mapa normal de agua en los ejes xey. Para que funcione correctamente tenemos que configurar nuestra repetición de textura en modo "Repetir", de lo contrario esto no funcionará. Para habilitar la animación de vértices, podríamos establecer el atributo needUpdate de nuestro material y textura en verdadero.


var normal;

function initialize()
{
normal = program.getTextureByName("normal");
}

function update()
{
normal.offset.x += 0.002;
normal.offset.y += 0.002;
}

Ahora tenemos una superficie similar al agua pero aún no refleja el entorno que la rodea, para agregar esto podemos crear un objeto de cámara cúbica. Después de agregar el objeto a la escena, tenemos que activar la actualización automática, para no tener que actualizar manualmente la cámara del cubo.


var water, cube;

function initialize()
{
...

water = program.getMaterialByName("water");
cube = scene.getObjectByName("cubecamera");
water.envMap = cube.cube;
}

Nuestra agua está muy lista en este momento, he agregado un mapa de cubos para que nuestra escena se vea más completa y un objeto OrbitControl para el movimiento de la cámara.


Water GBEngine Demo











NUESTROS Partners
image
Official

MANTENTE CONECTADO

Twitch
image image
Facebook
image image
Twitter
image image
YouTube
image image
Instagram
image image
Vimeo
image image