Water Fluid Simulation

[SinhNQ]

Hello everyone!

I'm making fluid simulation effect, i found a demo: http://jeeliz.com/demos/water/ and i want to clone it.

The demo written by WebGL + shader but i don't know about WebGL, i'm worrying  . I'm trying export to babylon.js and there are a few things i don't know how to do.

I'm really stuck, i expect the babylon community to help me 

1.

var texture_water = GL.createTexture();
    GL.bindTexture(GL.TEXTURE_2D, texture_water);

    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE);
    GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, 512, 512, 0, GL.RGBA, GL.FLOAT, null);

2.

var quad_vertex = [-1, -1, 1, -1, 1, 1, -1, 1];
    var QUAD_VERTEX = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, QUAD_VERTEX);
    GL.bufferData(GL.ARRAY_BUFFER, new Float32Array(quad_vertex), GL.STATIC_DRAW);
    
    var quad_faces = [0, 1, 2, 0, 2, 3];
    var QUAD_FACES = GL.createBuffer();
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, QUAD_FACES);
    GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, new Uint16Array(quad_faces), GL.STATIC_DRAW);

    GL.vertexAttribPointer(SHP_VARS.rendering.position, 2, GL.FLOAT, false, 8, 0);
    GL.bindBuffer(GL.ARRAY_BUFFER, QUAD_VERTEX);
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, QUAD_FACES);
    GL.disableVertexAttribArray(SHP_VARS.rendering.position);

3.

GL.drawElements(GL.TRIANGLES, 6, GL.UNSIGNED_SHORT, 0);
            GL.disableVertexAttribArray(SHP_VARS.water.position);
            GL.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, texture_normals, 0);
            GL.useProgram(SHP_NORMALS);
            GL.enableVertexAttribArray(SHP_VARS.normals.position);
            GL.bindTexture(GL.TEXTURE_2D, texture_water);
            GL.drawElements(GL.TRIANGLES, 6, GL.UNSIGNED_SHORT, 0);
            GL.disableVertexAttribArray(SHP_VARS.normals.position);

GL.bindFramebuffer(GL.FRAMEBUFFER, null);
GL.flush();

With the above code how i export to babylon.js?

Thanks so much! 

[GameMonetize]

Unfortunately this will require a bit of learning for you.

Here are some tips:

1. This is a Babylon.Texture. You need to define if the texture is loaded from file or dynamically updated (then it is a BABYLOn.DynamicTexture)

2. This is a fullscreen quad. That can be done with a simple PostProcess object: http://doc.babylonjs.com/tutorials/how_to_use_postprocesses

3. Not required (actually it is done by the postprocess).

[SinhNQ]

Thank Deltakosh replied. I know this is really difficult , i will continue learning. 

Babylon.js is a great game engine! 

[GameMonetize]

Thanks a lot!

[Pryme8]

sexy, I like this effect a ton! good job.