GLSL Shader: Unexpected Behavior in Pixel Looping

OpenGL OpenGL: Basic Coding
1

shader
shader1450×756 141 KB

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.0/three.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100%;
        overflow: hidden;
        background: #1d1d1d;
      }
      canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <canvas id="three-canvas"></canvas>

    <script id="vertexShader" type="x-shader/x-vertex">
      varying vec2 vUv;

      void main() {
          vUv = uv;
          gl_Position =   projectionMatrix * modelViewMatrix * vec4(position,1.0);
      }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
      precision highp float;

      uniform sampler2D texture1;
      varying vec2 vUv;

      void main() {
          vec4 bg_clr = texture2D(texture1, vUv);
          vec4 finalClr = vec4(0.0, 0.0, 1.0, 1.0);

          float pixelStep = 0.001;
          vec4 finalX;
          vec4 finalY;

          if(bg_clr.w > 0.2){
            float i = 0.0;
            while(i < 1.0){
                vec2 pos = vUv - vec2(i, 0.0);
                vec4 xColor = texture2D(texture1, pos);
                if(xColor.w < 0.01){
                    finalX = vec4(1.0,0.0,0.0,1.0);
                    break;
                }
                i = i + pixelStep;
            }
            i=0.0;
            while(i < 1.0){
                vec2 pos = vUv + vec2(0.0, i);
                vec4 xColor = texture2D(texture1, pos);
                if(xColor.w < 0.1){
                    finalY = vec4(0.0,1.0,0.0,1.0);
                    break;
                }
                i = i + pixelStep;
            }
            finalClr = mix(finalX,finalY,0.5);
          }

          gl_FragColor = finalClr;
      }
    </script>
    <script defer src="main.js"></script>
  </body>
</html>
2

You didn’t ask a question.

Also, you embedded your shader in a pile of HTML Javascript nonsense, obscuring the OpenGL portion.

Both of these will discourage anyone from taking even a second to look at your post, much less reply.

Please edit your post to focus on the OpenGL / GLSL portion, provide background for your problem, and ask a specific question.

1 Like