webgl合集-怎么设置多个顶点？

最新推荐文章于 2024-08-12 13:45:33 发布

一只规划转行狗的转行日记

最新推荐文章于 2024-08-12 13:45:33 发布

阅读量207

点赞数 3

文章标签： webgl

本文链接：https://blog.csdn.net/TTTT2222111/article/details/139815813

版权

1、设置多个顶点的步骤

获取WebGL上下文：获取Canvas元素并获取其WebGL上下文。
编写顶点和片段着色器源码：
- 顶点着色器：设置点的位置和大小。
- 片段着色器：设置点的颜色。
初始化着色器程序：创建并编译顶点和片段着色器，创建着色器程序对象，将编译后的顶点和片段着色器附加到程序对象并链接。
创建缓冲区对象并传递顶点数据：
- 创建缓冲区对象，将顶点数据绑定到缓冲区并传递到GPU。
- 将缓冲区绑定到顶点属性。
绘制图形：调用WebGL的绘图函数绘制点、线或三角形。

2.代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制多个点</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        margin: 50px auto 0;
        display: block;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
      // 1. 获取Canvas元素和WebGL上下文
      const canvas = document.getElementById('canvas');
      const gl = canvas.getContext('webgl');

      if (!gl) {
        alert('WebGL not supported in this browser');
        throw new Error('WebGL not supported');
      }

      // 2. 编写顶点着色器和片段着色器的源码
      const vsSource = `
        attribute vec4 aPosition;
        void main() {
          gl_Position = aPosition;
          gl_PointSize = 10.0; // 设置点的大小
        }
      `;

      const fsSource = `
      precision mediump float;
      uniform vec2 uColor;
        void main() {
          gl_FragColor = vec4(uColor.r, uColor.g, 0.0, 1.0); // 设置点的颜色
        }
      `;

      // 3. 初始化着色器程序
      function initShader(gl, vsSource, fsSource) {
        function compileShader(type, source) {
          const shader = gl.createShader(type);
          gl.shaderSource(shader, source);
          gl.compileShader(shader);
          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.error('An error occurred compiling the shaders:', gl.getShaderInfoLog(shader));
            gl.deleteShader(shader);
            return null;
          }
          return shader;
        }

        const vertexShader = compileShader(gl.VERTEX_SHADER, vsSource);
        const fragmentShader = compileShader(gl.FRAGMENT_SHADER, fsSource);
        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
          console.error('Unable to initialize the shader program:', gl.getProgramInfoLog(shaderProgram));
          return null;
        }

        return shaderProgram;
      }

      const program = initShader(gl, vsSource, fsSource);
      gl.useProgram(program);

      // 4. 创建缓冲区对象并传递顶点数据
      const aPosition = gl.getAttribLocation(program, 'aPosition');
      const points = new Float32Array([
        -0.5, -0.5,
         0.5, -0.5,
         0.0,  0.5,
        -0.7,  0.7,
         0.7,  0.7
      ]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
      gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(aPosition);

      // 5. 绘制多个点
      gl.drawArrays(gl.POINTS, 0, 5); // 绘制5个点
    </script>
  </body>
</html>