segitiga_gradasi

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>


    <script id="vertex" type="x-shader/x-vertex">
      #version 300 es


      in vec4 vertexPosition;


      void main() {
        gl_Position = vertexPosition;
      }
    </script>


    <script id="fragment" type="x-shader/x-fragment">
      #version 300 es
      precision highp float;


      uniform vec2 canvasSize;
      uniform float time;
      out vec4 fragColor;


      void main() {
        vec2 coord = gl_FragCoord.xy/canvasSize.xy;
        coord = 2.*coord - 1.;
        float scale = (sin(time) + 1.)/2.;
        coord /= scale;
        if (abs(coord.x) < 1. && abs(coord.y) < 1.) {
          coord = (coord + 1.)/4.0;
          fragColor = vec4(coord.x, 2, 5.2-coord.y, 0.3);
        } else {
          fragColor = vec4(1,1,1,1);
        }
      }
    </script>


    <script>
      const canvas = document.getElementById("canvas");
      const vertexCode = document.getElementById("vertex").textContent;
      const fragmentCode = document.getElementById("fragment").textContent;


      const gl = canvas.getContext("webgl2");
      if (!gl) throw "WebGL2 not supported";


      function createShader(shaderType, sourceCode) {
        const shader = gl.createShader(shaderType);
        gl.shaderSource(shader, sourceCode.trim());
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          throw gl.getShaderInfoLog(shader);
        }
        return shader;
      }


      const program = gl.createProgram();
      gl.attachShader(program, createShader(gl.VERTEX_SHADER, vertexCode));
      gl.attachShader(program, createShader(gl.FRAGMENT_SHADER, fragmentCode));
      gl.linkProgram(program);
      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        throw gl.getProgramInfoLog(program);
      }
      gl.useProgram(program);


      const vertices = [
        [0, 0],
        [-1, 0.5],
        [-1, 0],
        [-1, 0],
      ];
      const vertexData = new Float32Array(vertices.flat());
      gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
      gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);


      const vertexPosition = gl.getAttribLocation(program, "vertexPosition");
      gl.enableVertexAttribArray(vertexPosition);
      gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);


      const canvasSizeUniform = gl.getUniformLocation(program, "canvasSize");
      gl.uniform2f(canvasSizeUniform, canvas.width, canvas.height);


      const timeUniform = gl.getUniformLocation(program, "time");


      function draw() {
        gl.uniform1f(timeUniform, performance.now() / 800);
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length);
        requestAnimationFrame(draw);
      }
      draw();
    </script>
  </body>
</html>