Bubble Shader

I’m currently working on a Bubble Shader ( this is my first JME3 Shader ) and got some Results I wanted to show to you.
Perhabs you can give me some feedback :slight_smile:

[video]http://youtu.be/rkFbLZ1EOhg[/video]

Matdef:
[java]MaterialDef BubbleMatDef {

MaterialParameters {
    Texture2D ColorMap
    Float Shininess
    Color SpecularColor
    Boolean UseSpecularNormal
}

Technique {
    VertexShader GLSL100:   Shaders/bubbleVertexShader.vert
    FragmentShader GLSL100: Shaders/bubbleFragmentShader.frag

    WorldParameters {
        WorldViewProjectionMatrix
        Time
        CameraPosition
        WorldMatrix
        NormalMatrix
    }

    RenderState {
            Blend Alpha
            
    }

    Defines {
        SPECULARCOLOR : SpecularColor
        USESPECULARNORMAL : UseSpecularNormal
    }
}

}
[/java]

Vertex Shader:
[java]attribute vec3 inPosition;
attribute vec3 inNormal;
attribute vec2 inTexCoord;

uniform mat3 g_NormalMatrix;

uniform mat4 g_WorldViewProjectionMatrix;
uniform mat4 g_WorldMatrix;
uniform float g_Time;
uniform vec3 g_CameraPosition;

varying vec3 vNdotV;
varying vec2 vTexCoord;

varying vec4 vPosition;
varying vec3 vTransformedNormal;
varying vec3 vNormal;

void main(){
vTexCoord = inTexCoord;
vNormal = inNormal;

vec3 rel = vec3(inPosition.x - 1.0, inPosition.y - 0, inPosition.z -0);

vec3 wave = vec3(1,0,0) * (abs(inPosition.x))+vec3(0,1,0) * (abs(inPosition.y))+vec3(0,0,1) * (abs(inPosition.z));
wave *=  vec3(0.125*sin(g_Time / 3),0.3*sin(g_Time / 200),0.125*sin(g_Time /400))*(sin(g_Time)+0.5);
vec3 newPos = inNormal * wave; //* sin(length(rel)*g_Time);
newPos = inPosition + newPos;
gl_Position = g_WorldViewProjectionMatrix * vec4(newPos, 1.0);


vec3 viewVec = normalize(vec4(g_CameraPosition,1) - vec4(newPos, 1) * g_WorldMatrix).xyz;

vNdotV = dot(inNormal, viewVec);

vPosition = vec4(newPos, 1.0) * g_WorldMatrix;
vTransformedNormal = inNormal*g_NormalMatrix;

}[/java]

Fragment-Shader:
[java]varying vec3 vNdotV;
varying vec2 vTexCoord;
varying vec3 vNormal;

varying vec4 vPosition;
varying vec3 vTransformedNormal;
uniform sampler2D m_ColorMap;

#ifdef SPECULARCOLOR
uniform vec4 m_SpecularColor;
uniform float m_Shininess;
#endif

void main() {

vec4 specularLightWeighting = vec4(0,0,0,0);
#ifdef SPECULARCOLOR
vec3 eyeDirection = normalize(-vPosition.xyz);
vec3 reflectionDirection = reflect(-1*vec3(0,0,1), normalize(vTransformedNormal));
float specLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), m_Shininess);
vec4 specColor = m_SpecularColor;
#ifdef USESPECULARNORMAL
specColor = vec4(vNormal, m_SpecularColor.a);
#endif
specularLightWeighting = specColor * specLightWeighting;
#endif

vec4 modulatedColor;

vec4 soapRefColor = texture2D(m_ColorMap, vTexCoord);
vec4 groundColor = vec4(0.5,0.5,0.5,0);

modulatedColor.rgb = saturate(2 * soapRefColor * groundColor);
modulatedColor.a = (1- vNdotV)*0.5 - 0.01;		
float opacity = saturate(4*(groundColor.a*groundColor.a - 0.75));

gl_FragColor.rgb = lerp(modulatedColor, groundColor, opacity)+specularLightWeighting.rgb;
gl_FragColor.a = modulatedColor.a + opacity ;
gl_FragColor.a /= 2;
gl_FragColor.a += specularLightWeighting.a;

}

[/java]

[java]@Override
public void simpleInitApp() {

    Sphere b = new com.jme3.scene.shape.Sphere(200, 200, 1);
    Geometry geom = new Geometry("Box", b);

    Material mat = new Material(assetManager,"MatDefs/bubbleMat.j3md"); //"Common/MatDefs/Misc/Unshaded.j3md");//"MatDefs/bubbleMat.j3md");
    mat.setTexture("ColorMap", assetManager.loadTexture("Textures/rainbow.png"));
    mat.setFloat("Shininess", 20f);
    mat.setColor("SpecularColor", ColorRGBA.Blue);
    mat.setBoolean("UseSpecularNormal", true);
    geom.setMaterial(mat);
    geom.setQueueBucket(Bucket.Transparent);
    
    geoms.add(geom);
    
    rootNode.attachChild(geom);
    rootNode.attachChild(SkyFactory.createSky(
        assetManager, "Textures/Sky/Bright/BrightSky.dds", false));
    
    flyCam.setEnabled(false);
    ChaseCamera chaseCam = new ChaseCamera(cam, geom, inputManager);
}[/java] 

8 Likes

Very nice and convincing!

Cool Shader!
@mainclain would you like to add it to ShaderBlow Library?
Here - https://wiki.jmonkeyengine.org/legacy/doku.php/sdk:plugin:shaderblow

cool, just could u make when u click with mouse on it it explodes :smiley:

That’s really nice :slight_smile:

<cite>@nehon said:</cite> Very nice and convincing!
<cite>@zarch said:</cite> That's really nice :)

Thanks :slight_smile:

<cite>@mifth said:</cite> Cool Shader! @mainclain would you like to add it to ShaderBlow Library? Here - https://wiki.jmonkeyengine.org/legacy/doku.php/sdk:plugin:shaderblow

That would be great :slight_smile:

<cite>@eraslt said:</cite> cool, just could u make when u click with mouse on it it explodes :D
Hm if someone can tell me if it is possible to use a surface normal or to explain me the possible values of attribute uint inIndex (does it starts with 0? When I tested it it doesnt looked like that...) it would be possible :P
@mainclain said: Thanks :)

That would be great :slight_smile:

Hm if someone can tell me if it is possible to use a surface normal or to explain me the possible values of attribute uint inIndex (does it starts with 0? When I tested it it doesnt looked like that…) it would be possible :stuck_out_tongue:

Send me you gmail then. :slight_smile:

Btw, you did some common mistakes with glsl.
Don’t make like that:
[java]
float x = 0; //bad
float y = x+1; // bad

float x = 0.0; //good
float y = x+1.0; // good

[/java]

I other way most ATI cards will give you exception.

so will i get exploding bubbles then? :smiley:
it actually was a joke :smiley:

<cite>@mifth said:</cite> Send me you gmail then. :)

Done

<cite>@mifth said:</cite> Btw, you did some common mistakes with glsl. Don't make like that: [java] float x = 0; //bad float y = x+1; // bad

float x = 0.0; //good
float y = x+1.0; // good

[/java]

I other way most ATI cards will give you exception.

Argh, I read about that but because I hadn’t problems I forgot it again :smiley:
I fixed it in my version, but I’ll work on the next weekend on it so I will update this thread after Im done.

<cite>@eraslt said:</cite> so will i get exploding bubbles then? :D it actually was a joke :D
:D Im trying to do it :P My girlfriend went to a toy store and bought some soap bubbles :P You can't even really see them explode so the effect won't be that great as a shader too :P And I think I have to use an imported sphere for this effect... :P

hmm usign the example above leads to
[java]
com.jme3.renderer.RendererException: compile error in:ShaderSource[name=ShaderBlow/Shaders/Bubble/Bubble.frag, defines, type=Fragment, language=GLSL100] error:Fragment shader failed to compile with the following errors:
ERROR: 0:38: error(#143) Undeclared identifier: saturate
ERROR: 0:38: error(#202) No matching overloaded function found: saturate
WARNING: 0:38: warning(#402) Implicit truncation of vector from size: 1 to size: 3
WARNING: 0:39: warning(#402) Implicit truncation of vector from size: 3 to size: 1
ERROR: 0:40: error(#202) No matching overloaded function found: saturate
ERROR: 0:42: error(#143) Undeclared identifier: lerp
ERROR: 0:42: error(#202) No matching overloaded function found: lerp
ERROR: error(#273) 5 compilation errors. No code generated[/java]

@b00n said: hmm usign the example above leads to [java] com.jme3.renderer.RendererException: compile error in:ShaderSource[name=ShaderBlow/Shaders/Bubble/Bubble.frag, defines, type=Fragment, language=GLSL100] error:Fragment shader failed to compile with the following errors: ERROR: 0:38: error(#143) Undeclared identifier: saturate ERROR: 0:38: error(#202) No matching overloaded function found: saturate WARNING: 0:38: warning(#402) Implicit truncation of vector from size: 1 to size: 3 WARNING: 0:39: warning(#402) Implicit truncation of vector from size: 3 to size: 1 ERROR: 0:40: error(#202) No matching overloaded function found: saturate ERROR: 0:42: error(#143) Undeclared identifier: lerp ERROR: 0:42: error(#202) No matching overloaded function found: lerp ERROR: error(#273) 5 compilation errors. No code generated[/java]

Did you try from the shaderBlow?
From here Google Code Archive - Long-term storage for Google Code Project Hosting.

@b00n said: hmm usign the example above leads to [java] com.jme3.renderer.RendererException: compile error in:ShaderSource[name=ShaderBlow/Shaders/Bubble/Bubble.frag, defines, type=Fragment, language=GLSL100] error:Fragment shader failed to compile with the following errors: ERROR: 0:38: error(#143) Undeclared identifier: saturate ERROR: 0:38: error(#202) No matching overloaded function found: saturate WARNING: 0:38: warning(#402) Implicit truncation of vector from size: 1 to size: 3 WARNING: 0:39: warning(#402) Implicit truncation of vector from size: 3 to size: 1 ERROR: 0:40: error(#202) No matching overloaded function found: saturate ERROR: 0:42: error(#143) Undeclared identifier: lerp ERROR: 0:42: error(#202) No matching overloaded function found: lerp ERROR: error(#273) 5 compilation errors. No code generated[/java]

Ok, I did fixes. It seems some cards cannot recognize lerp and saturate functions. Also i did some casts to vectors.
http://code.google.com/p/jmonkeyplatform-contributions/source/detail?r=1431

Try it.

@mifth said: Ok, I did fixes. It seems some cards cannot recognize lerp and saturate functions. Also i did some casts to vectors. http://code.google.com/p/jmonkeyplatform-contributions/source/detail?r=1431

Try it.

still not usable :confused:

[java]com.jme3.renderer.RendererException: compile error in:ShaderSource[name=ShaderBlow/Shaders/Bubble/Bubble.frag, defines, type=Fragment, language=GLSL100] error:Fragment shader failed to compile with the following errors:
WARNING: 0:42: warning(#402) Implicit truncation of vector from size: 4 to size: 3
ERROR: 0:42: error(#162) Wrong operand types: no operation “+” exists that takes a left-hand operand of type “4-component vector of vec4” and a right operand of type “highp 3-component vector of vec3” (or there is no acceptable conversion)
WARNING: 0:42: warning(#402) Implicit truncation of vector from size: 4 to size: 3
ERROR: error(#273) 1 compilation errors. No code generated[/java]

@b00n said: still not usable :/

[java]com.jme3.renderer.RendererException: compile error in:ShaderSource[name=ShaderBlow/Shaders/Bubble/Bubble.frag, defines, type=Fragment, language=GLSL100] error:Fragment shader failed to compile with the following errors:
WARNING: 0:42: warning(#402) Implicit truncation of vector from size: 4 to size: 3
ERROR: 0:42: error(#162) Wrong operand types: no operation “+” exists that takes a left-hand operand of type “4-component vector of vec4” and a right operand of type “highp 3-component vector of vec3” (or there is no acceptable conversion)
WARNING: 0:42: warning(#402) Implicit truncation of vector from size: 4 to size: 3
ERROR: error(#273) 1 compilation errors. No code generated[/java]

Ok, try this:
http://code.google.com/p/jmonkeyplatform-contributions/source/detail?r=1432

@mifth said: Ok, try this: http://code.google.com/p/jmonkeyplatform-contributions/source/detail?r=1432

perfect! I’m using more and more your great work. Thank you very much=)!

i get no errors anymore but the bubble is yet now visible, but i check the params again.

edit:
great it works! thank you

@b00n said: perfect! I'm using more and more your great work. Thank you very much=)!

i get no errors anymore but the bubble is yet now visible, but i check the params again.

edit:
great it works! thank you

Cool! That’s not my work. I just fixed it :slight_smile:

@b00n said: perfect! I'm using more and more your great work. Thank you very much=)!

i get no errors anymore but the bubble is yet now visible, but i check the params again.

edit:
great it works! thank you

Btw, if you have some time… Could you test all examples in ShaderBlow? If something does not work i can fix it for your card.

@mifth said: Btw, if you have some time... Could you test all examples in ShaderBlow? If something does not work i can fix it for your card.

sure =)

@mifth said: Btw, if you have some time... Could you test all examples in ShaderBlow? If something does not work i can fix it for your card.

testing the following failed with jme 3.0 but workt with jMonkeyEngine SDK 3.1 Pre-Alpha
@TestFrostedGlass , TestNightVision , TestPredatorVision,TestGlass, TestMatCap,TestLightBlowShadingSystem

[java]java.lang.NullPointerException
at com.jme3.scene.Mesh.prepareForAnim(Mesh.java:392)
at com.jme3.animation.SkeletonControl.switchToHardware(SkeletonControl.java:126)
at com.jme3.animation.SkeletonControl.testHardwareSupported(SkeletonControl.java:158)
at com.jme3.animation.SkeletonControl.controlRender(SkeletonControl.java:298)[/java]

@TestMotionBlur

i can’t see blur, just flickering of my screen (like a vertex is stretched to infinity for a short moment)

edit: testet it again with vsync @60hz and now i can see a little motion blur

@TestTexturebombing
[java]java.lang.NullPointerException
at com.shaderblow.test.texturebombing.TestTextureBombing.simpleInitApp(TestTextureBombing.java:81)
at com.jme3.app.SimpleApplication.initialize(SimpleApplication.java:226)[/java]

@b00n said: testing the following failed with jme 3.0 but workt with 3.1 @TestFrostedGlass , TestNightVision , TestPredatorVision,TestGlass, TestMatCap,TestLightBlowShadingSystem

[java]java.lang.NullPointerException
at com.jme3.scene.Mesh.prepareForAnim(Mesh.java:392)
at com.jme3.animation.SkeletonControl.switchToHardware(SkeletonControl.java:126)
at com.jme3.animation.SkeletonControl.testHardwareSupported(SkeletonControl.java:158)
at com.jme3.animation.SkeletonControl.controlRender(SkeletonControl.java:298)[/java]

@TestMotionBlur

i can’t see blur, just flickering of my screen (like a vertex is stretched to infinity for a short moment)

edit: testet it again with vsync @60hz and now i can see a little motion blur

@TestTexturebombing
[java]java.lang.NullPointerException
at com.shaderblow.test.texturebombing.TestTextureBombing.simpleInitApp(TestTextureBombing.java:81)
at com.jme3.app.SimpleApplication.initialize(SimpleApplication.java:226)[/java]

Aha, if they work with JME 3.1 then it’s ok. As there were made some changes. It seems it’s ok. Shaders are ok.
Thank you a lot!

1 Like