Water Transparency

[iiceman]

Hey folks,

 

I am trying to understand a bit more about shaders/customMaterials/shaderMaterials... I didn't get into alot yet, I just wanted to play around a bit so I did follow this tutorial: http://blogs.msdn.com/b/eternalcoding/archive/2013/08/06/babylon-js-creating-a-convincing-world-for-your-game-with-custom-shaders-height-maps-and-skyboxes.aspx and tried to fill the gaps with this: http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx

 

Based on that I modified a previous scene I had to get this output: http://p215008.mittwaldserver.info/moveWithCollisions/

 

The problem now is, that if you jump into the water (click to move) the part of the player model that is under the water is not visible (same for the ramps and the cube). I thought I could set some kind of transparency on the mesh or the material but it somehow didn't work the usual way.

 

What would I have to do to get this kind of transparency for the water?

[GameMonetize]

Just add your player to the render list of the refraction texture

[iiceman]

I already did that, I can see the players reflection in the water. What I meant was that when he walks into the water, like the water is up to his hips... it looks like his legs disappeared... I want to see trough the water a little bit. Same for the ramps.. i don't see where the ramps start, so its hard to walk on it if half of them is invisible because it's under the water surface. I hope I explained it tight...you know what I mean, right?

[GameMonetize]

If you add the ramp or whatever in the REFRACTION texture render list it will be rendered like the ground which you can see under the water. There is no transparency, just refraction

[iiceman]

Hmm... I updated the example and added the meshes to the render list for the reflection texture but the problem still exists. I can see the reflection of the part that is above the water, but I don't see the part of the mesh that is under the water. I attached a screenshot to show what I mean. Am I misunderstand you - or are you misunderstanding me - or both?

[Dad72]

Ah, yes, if the subject is not completely under water, it does seem to work. I never paid attention to this. That's a good observation.

[RaananW]

Just as DK said, you are missing the objects in the refraction (not reflection) list. You add the ramp, rampLarge and meshPlayer to the reflection list but only the skybox and the ground to the refraction list.

Here:

[Dad72]

like this:

if(objet3D.getChildren().length > 0) { //in the case of sub-objects    for(var i = 0; i < objet3D.getChildren().length; i++) {        waterMaterial.refractionTexture.renderList.push(objet3D.getChildren()[i]);    }} else {    waterMaterial.refractionTexture.renderList.push(objet3D); }

objet3D = your objet underwater
waterMaterial = you material user for water

[iiceman]

Ohhw.. I see... totally my bad, I confused reflection and refraction (looks so similar..even has the same length) I added to the refraction list now. One more question though:

 

I can see the lower part of his body now, but at the same time I see the upper part in the water, too, even if that part is not under water.... is that normal? Did I do something wrong again? :-/

[pathogen]

One more question though:

 

I can see the lower part of his body now, but at the same time I see the upper part in the water, too, even if that part is not under water.... is that normal? Did I do something wrong again? :-/

 

I have just come across this when implementing the water shader also.

It will have to do with having an opacity setting in the shader I think? Or blending the original back into the output of the shader in one way or another.

Shaders are still pretty magical to me, so if anybody has any hints that would be fantastic!

[iiceman]

Hi pathogen,

 

sorry for the kinda late reply... somehow your post must have moved to the second page before I had a chance to see it (kinda busy and can't check the forum as often as I would like to )

 

I have no clue about shaders either, so I can't really help I fear. I am pushing this to see if somebody else can enlighten us because I am still very interested in that matter. Back then I settle the whole thing for myself with: that's just how it is because the whole mesh gets reflected and not just the under water part. But I didn't really know how to confirm that (and I still don't - no no idea if that's really how things work :-/ ).

 

So again... what could be done to avoid the reflection of the upper half and make that a bit more realistic looking?

[prvi_treti]

Apart from the fact that it never moved when clicked (at Firefox or IE 11) , I just wondered reason behind its poor performance even at my (Xeon E3 / GTX 560) computer.

[iiceman]

Hmm, true. I just checked in IE. I assume the event handling works differently in firefox an IE, I'll check that if I have time. In chrome it works fine

 

The performance: I donno. Might be the shader? I guess that water thingy is kinda expensive... here is a version without the water matirial: http://p215008.mittwaldserver.info/moveWithCollisions/#noShader Does that work better for you?

[prvi_treti]

Well, I know it sounds blasphemous but I don't use Chrome (yet) actually I hate Google's metrics collecting browser thing.

 

And without water , performance is fine now but maybe you should have some kind of emissive water exempt of light effects for testing.

[iiceman]

Yeah, I was just playing around with it and wanted to try things out. And of course the events should work in all browsers. I'll have to check whats wrong with that... if I have time/mood

 

Edit: I think I figured the event thing out:

window.addEventListener("mousedown", mouseDownEvent);window.addEventListener("pointerdown", mouseDownEvent);window.addEventListener("mouseup", mouseUpEvent);window.addEventListener("pointerup", mouseUpEvent);

The event has different names in different browsers. if I add listeners to mouse{eventname} as well as pointer{eventname} it seems to work in chrome and IE as well (firefox not tested but I assume the use the same event names as IE). I updated the demo, let me know if there still are problems.