Create effect underwater

[Dad72]

How can I make an effect under water. When the camera is below the position Y 0 I would like to do a blur effect of of blue as when one is under water.

 

Thanks for the help.

[Dad72]

I unearths the topic. 

 

I think to achieve this, activate the fog when it is below the level 0 of the world and give a green/bleux color this fog. This could give effect underwater.

 

What do you think of this idea?

[reddozen]

That would work... other than that, If you could apply a color filter to the camera, and maybe have a shader that makes ripples in the scene... guess it depends on how realistic you want it. randomized small bubbles floating up maybe.

[Dad72]

Thanks Reddozen

 

I managed a have a rather correct effect like this:

scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR ;scene.fogColor = new BABYLON.Color3(0, 0.23, 0.27);scene.ambientColor = new BABYLON.Color3(0, 0.23, 0.27);LightDirectional[0].intensity = 0.1;LightDirectional[1].intensity = 0.1;scene.fogStart = 1.0;scene.fogEnd = 100.0;scene.fogDensity = 0.008;postProcess2 = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), 20, 1.5, scene.activeCamera, BABYLON.Texture.DEFAULT_SAMPLINGMODE);postProcess3 = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), 20, 1.5, scene.activeCamera, BABYLON.Texture.DEFAULT_SAMPLINGMODE);

But this blurs that objects. not the ambient scene.
 
You do not have an idea to give the blur has the scene, what accentuerais the effect under water.

 

I love the idea of randomized of small bubbles. I'm not very good with the shader, but the ripple effect is what I search with a postProcess, but I can't. How would you do this?

[reddozen]

bubbles can be spheres generated randomly, and even at random small sizes than just have them "float" to the top in a kind of wave motion.

 

looks like this GLSL shader has underwater kind of ripples... would have to convert it.

https://github.com/opatut/Shaders/blob/master/data/underwater.glsl

 

 

EDIT:

Looks like some people are using particle effects to create the distortions without applying a shader to the whole environment.

 

EDIT 2:

This guy is explaining exactly what you want... and it's HTML5. Good starting point. Could limit the effect to kind of as needed.

http://ariya.ofilabs.com/2012/03/underwater-effect-with-html5-canvas.html

[Dad72]

Very interesting all this. I'll look. Thank you very much Redozzen

[Dad72]

Oh, I've seen in Cyos of babylon there is a shader that has this ripple effect

 

http://www.babylonjs.com/cyos/

 

Wave

 

But I do not know as add it to my scene to make it turn when one is under water and off when it is above the water.

 

The idea to add it has the scene

[reddozen]

maybe some action manager that enables or disables it as you do in or exit the water?

[Dad72]

Ah yes, this could be an idea. But how I join a shader has the entire scene?

[Dad72]

Found, it is necessary that I used an  new BABYLON.ShaderMaterial()

 

But I know not to use it. You might not make a tutorial top DK for use of shader custom with ShaderMaterial? If you have a bit of time of course.

 

 

[Temechon]

Did you check here ? 

[Dad72]

Thanks Themechon, I'll read it.

 

I start to do it otherwise. I have not yet understood the options, but I'll learn.

 

        var waveMaterial = new BABYLON.ShaderMaterial("wave", scene, {

            vertexElement: "vertexShaderCode_wave",

            fragmentElement: "fragmentShaderCode_wave",

        }, 

        {

            needAlphaBlending: true,

            attributes: ["position", "uv"],

            uniforms: ["worldViewProjection"],

            samplers: ["textureSampler"]

        });

[Dad72]

I managed to have a more correct result. remains for me only a put random bubbles and the effect will be pretty good.

 

scene.fogMode = BABYLON.Scene.FOGMODE_LINEAR ;scene.fogColor = new BABYLON.Color3(0, 0.23, 0.27);scene.ambientColor = new BABYLON.Color3(0, 0.23, 0.27);LightDirectional[0].intensity = 0.1;LightDirectional[1].intensity = 0.1;scene.fogStart = 1.0;scene.fogEnd = 100.0;scene.fogDensity = 0.008; postProcess2.blurWidth = 150;postProcess3.blurWidth = 150;

Wholesale, lower the intensity of the light, put a color ambiente a blue scene, add a can of fog color blue and a post-process blur raise and the effect is very good.