main

分支 (1)

管理

管理

main

webgl-notes
/
04绘制圆形.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./utils/reset.css" />
    <script src="./utils/webgl-helper.js"></script>
    <title>04绘制圆形</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>

    <script type="shader-source" id="vertexShader">
      void main(){
          gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
          gl_PointSize = 50.0;
        }
    </script>
    <script type="shader-source" id="fragmentShader">
      precision mediump float;
      void main() {
          float dist = distance(gl_PointCoord, vec2(0.5, 0.5));
          if(dist < 0.5) {
              gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
          } else {
              discard;
          }
      }
    </script>
    <script>
      const canvas = getCanvas("#canvas");
      resizeCanvas(canvas);
      const gl = getContext(canvas);
      const vertexShader = createShaderFromScript(
        gl,
        gl.VERTEX_SHADER,
        "vertexShader"
      );
      const fragmentShader = createShaderFromScript(
        gl,
        gl.FRAGMENT_SHADER,
        "fragmentShader"
      );
      const program = createSimpleProgram(gl, vertexShader, fragmentShader);
      gl.useProgram(program);
      gl.clearColor(0, 0, 0, 1);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.POINTS, 0, 1);
    </script>
  </body>
</html>