How to Empty blank of texture in shader transparent

Questions
, , ,
1

Hi, from my recent question I have this problem in UV cooordinates and its now fixed.

UV coordinates

My second problem now is that how do I make the texture transparent when I’m like animating the fragmentShader of the texture? like you can see this dark / white empty in the grid animations…

Not Empty Blank Texture

I put a box behind so you can see it that the texture is not transparent.

I did add a transparent={true} but its not working though so anyone got idea or what?

  return (
    <>
      <ambientLight />
      <mesh position={[0, 0, 0]} rotation={[0, 0, 0]}>
        <planeGeometry args={[1, 1, 16, 16]} />
        <shaderMaterial
          transparent={true}
          ref={shadersRef}
          uniforms={data}
          // wireframe={true}
          fragmentShader={fragmentShader}
          vertexShader={vertexShader}
          side={THREE.DoubleSide}
        ></shaderMaterial>
      </mesh>
      <mesh position={[0, 0, -5]}>
        <boxGeometry args={[2, 2]}></boxGeometry>
        <meshBasicMaterial color={0x3f3f3f}></meshBasicMaterial>
      </mesh>
    </>
  );

And this is my fragmentShader

    uniform sampler2D u_texture; 
    varying vec2 vUv;
    uniform vec2 u_resolution; 
    uniform float u_time; 

    void main() {
        vec2 st = vUv;
    
        // Adjust the gap size and number of boxes
        vec4 img = texture2D(u_texture, st);

        float gapSizeY = 0.5;
        float gapSizeX = 0.0; // No gap in the x vector
        int numBoxes = 10;

        // Calculate the size of each box based on the gap size and number of boxes
        float boxSizeY = 1.0 / float(numBoxes);
        float boxSizeX = 1.0 / float(numBoxes);

        // Loop through and create the boxes
        vec4 color = vec4(1.0);
        for (int i = 0; i < numBoxes; ++i) {
            // Animate scaleX and scaleY with a staggered effect from right to left
            float columnDelay = 0.1;
            float maxColumn = float(numBoxes) - 1.0;
            float timeBasedOffset = u_time - (maxColumn - float(i)) * columnDelay;

            // Animate scaleX
            float scaleX;
            if (timeBasedOffset < 8.0) {
                scaleX = boxSizeX * (clamp(smoothstep(0.0, 1.0, sin(timeBasedOffset)), 0.0, 1.0));
            } else {
                scaleX = boxSizeX;
            }

            float scaleY = boxSizeY * (clamp(smoothstep(0.0, 1.0, timeBasedOffset), 0.0, 1.0));
            
            for (int j = 0; j < numBoxes; ++j) {
                float x = gapSizeX * float(i+1) + boxSizeX * float(i);
    
                // Animate gapSizeY based on animation progress
                float gapSizeYAnim = gapSizeY * (1.0 - clamp(smoothstep(0.0, 1.0, timeBasedOffset), 0.0, 1.0));
                float y = gapSizeYAnim * float(j+1) + scaleY * float(j);
    
                if (scaleX >= boxSizeX) {
                    scaleX = boxSizeX;
                }
    
                if (st.x > x && st.x < x + scaleX && st.y > y && st.y < y + scaleY) {
                    color = img * vec4(0.7, 0.7, 0.7, 1.0); // Box color from the texture
                }
            }
        }
        gl_FragColor = color;

    }
2

Your shader needs to modify gl_FragColor.a to have a value lower than 1 for it to be transparent.
Try this change:

if (st.x > x && st.x < x + scaleX && st.y > y && st.y < y + scaleY) {
                    color = img * vec4(0.7, 0.7, 0.7, 1.0); // Box color from the texture
                }
else color.a = .25; // See if this does something...
``
1 Like
3

Thanks it work got the idea but the box was entirely transparent too haha… could you try it without affecting the box sir? just wanna see…

image
image767×738 63.6 KB

4 
    // Loop through and create the boxes
    vec4 color = vec4(0.);

https://codesandbox.io/p/sandbox/vigorous-joji-forked-3qrrxc

1 Like
5

oh :rofl: :rofl: yeah thanks sir.

1 Like