小白历险记-2023/11/24-优快云博客

本文链接：https://blog.youkuaiyun.com/TTTT2222111/article/details/134595480

1.<canvas>

<canvas>是Html5新增的一个DOM元素
显示二维或者三维图像
webgl api提供三维绘图

优势

2.着色器

顶点着色器：
- 二维三维空间中的一个点，可以理解为一个坐标，用来描述定点的特性，通过计算获取位置信息
片元着色器：
- 片元一个个像素，进行片元处理程序，通过计算获取颜色信息

3.实现一个webgl绘制一个点

思路：

获取canvas元素和WebGL上下文（gl）。
编写顶点着色器和片元着色器的源代码，顶点着色器将点的位置和大小传递给片元着色器，片元着色器决定每个像素的颜色。
创建顶点着色器和片元着色器对象。
将着色器源代码附加到对应的着色器对象上，并编译着色器。
创建一个程序对象，并将顶点着色器和片元着色器挂载到程序对象上。
链接程序对象。
使用程序对象。
清空颜色缓冲区，设置背景颜色为白色。
调用 gl.drawArrays() 方法，它指定了绘制的图元类型（这里是 gl.POINTS），起始顶点编号（这里是 0）和要绘制的顶点数量（这里是 1）。最后就可以在canvas上画出一个红色的点了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 获取canvas元素和WebGL上下文（gl） -->
    <canvas id="canvas" width="400" height="400">此浏览器不支持 canvas</canvas>
  </body>
  <script>
    const ctx = document.querySelector('#canvas')
    const gl = ctx.getContext('webgl')

    // 顶点着色器
    const VERTEX_SHADER_SOURCE = `
    void main() {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 10.0;
    }
    `

    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
    `

    // 创建着色器
    const vertexShader = gl.createShader(gl.VERTEX_SHADER)
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)

    // 指定着色器源码
    gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE)
    gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)

    // 编译着色器
    gl.compileShader(vertexShader)
    gl.compileShader(fragmentShader)

    // 创建程序对象
    const program = gl.createProgram()

    // 将着色器挂载到程序对象上
    gl.attachShader(program, vertexShader)
    gl.attachShader(program, fragmentShader)

    // 链接程序对象
    gl.linkProgram(program)

    // 使用程序对象
    gl.useProgram(program)

    // 清空颜色缓冲区
    gl.clearColor(1.0, 1.0, 1.0, 1.0) // 设置背景颜色为白色
    gl.clear(gl.COLOR_BUFFER_BIT) // 清空颜色缓冲区

    // 绘制一个点
    gl.drawArrays(gl.POINTS, 0, 1)
  </script>
</html>