Jump to content

Create effect underwater


Dad72
 Share

Recommended Posts

  • 2 months later...

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"]
        });

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...