# Artifacts on alpha blended liquid mesh

**URL:** <https://forum.babylonjs.com/t/artifacts-on-alpha-blended-liquid-mesh/27046>\
**Category:** Questions\
**Created:** [January 24, 2022, 3:37pm UTC](https://forum.babylonjs.com/t/artifacts-on-alpha-blended-liquid-mesh/27046 "2022-01-24T15:37:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lucas-divinestar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lucas-divinestar/32/15443_2.png) [@lucas-divinestar](https://forum.babylonjs.com/u/lucas-divinestar)\
**Post date:** [January 24, 2022, 3:37pm UTC](https://forum.babylonjs.com/t/artifacts-on-alpha-blended-liquid-mesh/27046/1 "2022-01-24T15:37:28Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/a/aacffa299666ccf3c1632576ac789bee5e4d4db2.jpeg)  
 ![broken alpha](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/c/7c5bf53cb6a3e561ea72ab0417e2488deb7b555a.jpeg)

Material Code

```auto
  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

```auto
//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 ); 
  }`
}

```

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 24, 2022, 4:23pm UTC](https://forum.babylonjs.com/t/artifacts-on-alpha-blended-liquid-mesh/27046/2 "2022-01-24T16:23:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![lucas-divinestar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lucas-divinestar/32/15443_2.png) [@lucas-divinestar](https://forum.babylonjs.com/u/lucas-divinestar)\
**Post date:** [January 24, 2022, 9:28pm UTC](https://forum.babylonjs.com/t/artifacts-on-alpha-blended-liquid-mesh/27046/3 "2022-01-24T21:28:23Z")

</div>

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.

```auto
 //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.