Artifacts on alpha blended liquid mesh

Questions
1

Hello I was working on the fluid mesh for a voxel engine and all of sudden it broke.
The other day it was working perfectly and there were no artifacts.
I shared some pictures of what is going on.
I provided the shaders and the code I am using for the material.
Any advice would be appreciated.
I am using Babylon 5 but it happens in 4.2 also.

brokenalpha2
brokenalpha21920×1079 278 KB

broken alpha
broken alpha1920×1079 157 KB

Material Code

  const shaderMaterial = new BABYLON.ShaderMaterial("fluid", scene, "fluid", {
   attributes: ["position", "normal", "cuv3", "colors"],
   uniforms: [
    "world",
    "view",
    "viewProjection",
    "worldView",
    "worldViewProjection",
    "vFogInfos",
    "vFogColor",
    "baseLightColor",
    "projection",
    "arrayTex",
    "time",
    ...animData.uniforms,
   ],
   needAlphaBlending: true,
   needAlphaTesting: false,
  });
  //shaderMaterial.fogEnabled = true;
  texture.hasAlpha = true;

 // shaderMaterial.alpha =  0.7;
  shaderMaterial.setTexture("arrayTex", texture);
shaderMaterial.alphaMode = BABYLON.Engine.ALPHA_COMBINE;
  shaderMaterial.backFaceCulling = false;
 //shaderMaterial.separateCullingPass = true;
  shaderMaterial.needDepthPrePass = true;

  shaderMaterial.onBind = (mesh) => {
   var effect = shaderMaterial.getEffect();
   if (!effect) return;

   effect.setFloat4(
    "vFogInfos",
    scene.fogMode,
    scene.fogStart,
    scene.fogEnd,
    scene.fogDensity
   );
   effect.setColor3("vFogColor", scene.fogColor);
   effect.setColor4("baseLightColor", new BABYLON.Color3(0.5, 0.5, 0.5), 1);
  };

  this.material = shaderMaterial;

  let time = 0;
  scene.registerBeforeRender(function () {
   time += 0.005;
   shaderMaterial.setFloat("time", time);
  });

Shader Code

//https://docs.godotengine.org/en/3.0/tutorials/3d/vertex_displacement_with_shaders.html


export const fluidShaders =  {
  vertexTop :  `
  precision highp float;
 
  // Attributes
  attribute vec3 position;
  attribute vec3 normal;
  attribute vec3 cuv3;
  attribute vec4 colors;
  // Uniforms
  uniform mat4 worldViewProjection;
  uniform mat4 world;                    
  uniform mat4 view;                    
  uniform mat4 viewProjection;          
 
 
  varying vec2 vUV2;
  // Varying
  varying vec3 vUV;
  varying vec3 vNormal;
  varying vec4 vColors;
 
 
 
  varying float fFogDistance;
 
  varying float animIndex;
 
  uniform float time;
  `,


  vertexMain : `
  
  void main(void) {
      vec3 p = position;

//    p.y += sin(p.x * 4.0 + time) * cos(p.z * 2.0 + time) * 0.1;


    float height = fbm(p.xz * 0.08 + time);
      p.y += height * 0.1 - .3;

      vec4 worldPosition = world * vec4(p, 1.0);
      fFogDistance = (view * worldPosition).z;
      gl_Position = viewProjection * worldPosition; 
      
 
      animIndex = getUVFace(cuv3.z);
      vUV = cuv3;
      //vColors = colors;
    //  vNormal = normal;
  }
  
  `,

  fragTop :`
  precision highp float;
  precision highp sampler2DArray;
 
  uniform vec4 baseLightColor;
 
 
  varying vec3 vUV;
  varying vec4 vColors;
  varying vec3 vNormal;
 
  varying float animIndex;
 
  uniform sampler2DArray arrayTex;
  `,
  fragMain : `
  void main(void) {
      vec4 rgb =  texture(arrayTex, vec3(vUV.x,vUV.y,animIndex)) ;

     if (rgb.a < 0.5) {
          discard;
      }
  gl_FragColor = vec4(rgb.rgb,0.5);
    //  gl_FragColor = vec4(0,0,0,0);   
   //   vec4 lightIntensity = vec4(.5,.5,.5,1);


      //mix with supplied vertex colors
    //  vec4 mixVertex = mix(rgb, vec4(1,1,1,1) , 1.0);
      //apply to texture color
    //  vec4 newBase = rgb * mixVertex;

   //   vec4 mixLight  = newBase * baseLightColor;

  //    float fog = CalcFogFactor();
 //     vec3 finalColor = fog * mixLight.rgb + (1.0 - fog) * vFogColor;

     // gl_FragColor = vec4(finalColor.rgb , mixLight.w ); 
  }`
}
2

Not sure to understand the issue fully :frowning: Could you create the same issue in the playground without the full engine mostly the same material and a couple planes/boxes ?

3

Hi thanks for the reply.
Managed to fix it.
Sorry about that.
I guess if anyone wants to know what was happening I accidently had the render loop running twice.
And I guess that is what happens when you do that lol.

I added code to test for FPS and did not change it back.

 //render loop
 engine.runRenderLoop(() => {
  scene.render();
  //@ts-ignore
  divFps.innerHTML = engine.getFps().toFixed() + " fps";
 });
 //render loop
 engine.runRenderLoop(() => {
  scene.render();
 });

So, it is some really weird behavior and had me worried. But very happy it was just my dumb mistake!
Been programming everyday for two weeks straight maybe time for a break.

2 Likes