segitiga_sejajar

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="300" height="300"></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;


       out vec4 fragColor;


      void main() {
        fragColor = vec4(1, 0, 0, 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 segitiga1 = [
        [0, 0],
        [-1, 0.5],
        [-1, 0],
      ];
      const vertexData = new Float32Array(segitiga1.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);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, segitiga1.length);


      const segitiga2 = [
        [0, 0.5],
        [1, 0],
        [0, 0],
      ];
      const vertexData1 = new Float32Array(segitiga2.flat());
      gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
      gl.bufferData(gl.ARRAY_BUFFER, vertexData1, gl.STATIC_DRAW);
      const vertexPosition1 = gl.getAttribLocation(program, "vertexPosition");
      gl.enableVertexAttribArray(vertexPosition1);
      gl.vertexAttribPointer(vertexPosition1, 2, gl.FLOAT, false, 0, 0);
      const canvasSizeUniform1 = gl.getUniformLocation(program, "canvasSize");
      gl.uniform2f(canvasSizeUniform1, canvas.width, canvas.height);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, segitiga2.length);
    </script>
  </body>
</html>