How would you do a Orthographic water intersection effect?

Questions
, , ,
1

The above video is a demonstration of a water-intersection effect that was implemented by following this excellent post: Simple stylized water shader with playground: https://playground.babylonjs.com/#UNGKGD#7

The problem is this technique requires the use of a linear depth buffer which doesnt seem to work when rendered using a orthographic camera (which our game is going to use):

chrome_i7EcRo7QBG
chrome_i7EcRo7QBG1045×604 153 KB

What we are trying to recreate in 3D is an effect that we have in the past baked into the 2D versions of our assets:

explorer_fYoqDYJCv0

image

Im wondering if rather than using a render texture we could achieve the same effect with a semi-transparent plane and some clever blend modes?

Thoughts?

2

@Evgeni_Popov is the king of rendering :slight_smile:

3

I am using an ortho cam with the same shader without problems. You might have to tweak the shader a little to accommodate ortho params but its not a biggie. If your view is closeup and depth affects the foam generation, then this shader cannot help you. You could try a volumetric approach. If the foam is an impt aspect in the look and immersion of yr game then spending some time and effort getting a cool foam shader is worth it. Hope it helps.

4

Really? Would you mind sharing the values that you are using for the shader? These are the ones I am:

const shallowColor = Color4.FromHexString(`#b2e6fd`);
  const deepColor = Color4.FromHexString(`#06364b`);

  // set shader parameters
  material.setTexture("depthTex", depthTex);
  material.setTexture("refractionSampler", renderTarget);
  material.setFloat("camMinZ", camera.minZ);
  material.setFloat("camMaxZ", camera.maxZ);
  material.setFloat("time", 0);
  material.setFloat("wNoiseScale", 5.0);
  material.setFloat("wNoiseOffset", 0.0);
  material.setFloat("fNoiseScale", 5.0);
  material.setFloat("maxDepth", 0.5);
  material.setVector4("wDeepColor", new Vector4(deepColor.r, deepColor.g, deepColor.b, 0));
  material.setVector4(
    "wShallowColor",
    new Vector4(shallowColor.r, shallowColor.g, shallowColor.b, 0.8)
  );

Any special camera settings other than camera.mode = Camera.ORTHOGRAPHIC_CAMERA; to get this to work?

It simply refuses for now (see the above image).

5

Sure, quick and dirty pg: https://playground.babylonjs.com/#UNGKGD#175

6

Oh… hmmm what on earth am I doing differently then… hmm…

I think the only thing you changed was to make the camera Orthographic is that right?

    camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
    camera.orthoLeft = -10
    camera.orthoRight = 10
    camera.orthoTop = 10
    camera.orthoBottom = -10

The Mode is the only difference between the two camera’s in my scene. Has anyone got any hints of what I should be looking for? Maybe shadows are interfering in Orthographic mode somehow?!

See video to see what I mean:

7

@Evgeni_Popov will probably know what is going on

8

Sorry, I missed this post!

Note that @phaselock also updated the calculation of the water linear depth in the shader:

float linearWaterDepth = ((vClipSpace.z + camMinZ) / (camMaxZ + camMinZ))*(camMaxZ*0.5);

instead of:

float linearWaterDepth = (vClipSpace.z + camMinZ) / (camMaxZ + camMinZ);

[EDIT]

Note that the right formula for the ortho camera is:

float linearWaterDepth = (vClipSpace.z + 1.0) / 2.0;

because the z component in clipspace has a range of -1..+1.

3 Likes
9

Thanks for fixing that @Evgeni_Popov . I always forget to convert my depths XD…