webgl/hello_world.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGL Hello world</title>
    <style>
      .buttons {
        display: flex;
        height: 30px;
        align-items: center;
      }
      .buttons > button {
        width: 40px;
      }
      .buttons .side {
        width: 40px;
        text-align: center;
      }

    </style>
  </head>
  <body>
    <div class="buttons">
      <div>边数:&nbsp;&nbsp;</div>
      <button onclick="cal('-')">-</button>
      <div class="side">3</div>
      <button onclick="cal('+')">+</button>
    </div>
    <canvas width="300" height="300"></canvas>
    <script>
      let side = 3
      
      function cal(type) {
        eval(`side ${type}= 1`)
        document.querySelector('.side').innerHTML = side
        polygon.generatePolygon(side)
      }

      const vertex = `
        attribute vec2 position;
        varying vec3 color;

        void main() {
          gl_PointSize = 1.0;
          color = vec3(0.5 + position * 0.5, 0.0);
          gl_Position = vec4(position * 0.5, 1.0, 1.0);
        }
      `

      const fragment = `
        precision mediump float;
        varying vec3 color;

        void main()
        {
          gl_FragColor = vec4(color, 1.0);
        }    
      `

      class Polygon {
        constructor(r = 1) {
          this.r = r
          const canvas = this.canvas = document.querySelector('canvas')
          const gl = this.gl = canvas.getContext('webgl')

          const vertexShader = gl.createShader(gl.VERTEX_SHADER)
          gl.shaderSource(vertexShader, vertex)
          gl.compileShader(vertexShader)

          const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
          gl.shaderSource(fragmentShader, fragment)
          gl.compileShader(fragmentShader)

          const program = this.program = gl.createProgram()
          gl.attachShader(program, vertexShader)
          gl.attachShader(program, fragmentShader)
          gl.linkProgram(program)
          gl.useProgram(program)

          this.generatePolygon(side, 2)
        }

        generatePolygon(n) {
          const { gl, program, r } = this
          const angle = (2 * Math.PI) / n
          let points = []

          for (let i = 0; i < n; i++) {
            points.push(r * Math.cos(angle * i))
            points.push(r * Math.sin(angle * i))
          }
          points = new Float32Array(points)
          console.log(points)

          const bufferId = gl.createBuffer()

          gl.bindBuffer(gl.ARRAY_BUFFER, bufferId)
          gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW)

          const vPosition = gl.getAttribLocation(program, 'position')
          gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0)
          gl.enableVertexAttribArray(vPosition)

          gl.clear(gl.COLOR_BUFFER_BIT)
          gl.drawArrays(gl.LINE_LOOP, 0, points.length / 2)
          return points
        }
      }

      const polygon = new Polygon(2)
    </script>
  </body>
</html>