Jump to content

Water Transparency


iiceman
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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? :D

Link to comment
Share on other sites

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? :P

post-12304-0-20907700-1423348097_thumb.j

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Ohhw.. I see... totally my bad, I confused reflection and refraction (looks so similar..even has the same length) :P 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? :-/

post-12304-0-60241300-1423410054.jpg

Link to comment
Share on other sites

  • 4 months later...

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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...