WebGL绘图

浏览器提供的 WebGL API 是 OpenGL ES 的 JavaScript 绑定版本，它赋予了开发者操作 GPU 的能力。

1、WebGL绘图可分为五步

• 创建上下文WebGL
• 创建WebGL程序
• 将数据存入缓冲区
• 将缓冲区数据读取到gpu
• gpu执行WebGL程序，输出结果

2、WebGL实现可视化案例

点击查看代码

<template>
     <canvas width="400" height="300" class="webgl"></canvas>
</template>
<script>
export default {
  mounted () {
    this.webglRender()
  },
  methods: {
       // 使用webgl绘制三角形
    webglRender () {
      // 1创建webgl上下文
      const canvas = document.getElementsByClassName('webgl')[0]
      const webgl = canvas.getContext('webgl')
      // 2创建webgl程序
      // 创建顶点着色器和片元着色器
      // 声明变量，类型为vec2(二维向量) 变量名
      // GLSL编程语言
      // 顶点着色器
      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);
                      }`
      // 通过 gl_Position 设置顶点
      // 片元着色器
      const fragment = `precision mediump float;
                        varying vec3 color;
                        void main() {
                          gl_FragColor = vec4(color, 1.0);
                        } `
      const vertexShader = webgl.createShader(webgl.VERTEX_SHADER)
      webgl.shaderSource(vertexShader, vertex)
      webgl.compileShader(vertexShader)

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

      // 创建 WebGLProgram 对象,并将vertexShader和fragmentShader关联到webgl程序上
      const program = webgl.createProgram()
      webgl.attachShader(program, vertexShader)
      webgl.attachShader(program, fragmentShader)
      // 并将WebGLProgram 对象链接到webgl上下文
      webgl.linkProgram(program)
      // 启用WebGLProgram对象,在绘制图形时，gpu会自动去执行WebGLProgram对象设定的两个shader
      webgl.useProgram(program)
      // 3将数据存入缓冲区
      const points = new Float32Array([ -1, -1, 0, 1, 1, -1 ])
      // 创建一个缓存对象
      const bufferId = webgl.createBuffer()
      webgl.bindBuffer(webgl.ARRAY_BUFFER, bufferId)
      // 把当前数据写入缓存对象
      webgl.bufferData(webgl.ARRAY_BUFFER, points, webgl.STATIC_DRAW)
      // 4将缓冲区数据读取到gpu上
      // 获取顶点着色器中的position变量的地址
      const vPosition = webgl.getAttribLocation(program, 'position')
      // 给变量设置长度和类型
      webgl.vertexAttribPointer(vPosition, 2, webgl.FLOAT, false, 0, 0)
      // 激活这个变量
      webgl.enableVertexAttribArray(vPosition)
      // 5执行着色器程序完成绘制
      // 将当前画布的内容清除
      webgl.clear(webgl.COLOR_BUFFER_BIT)
      // 传入绘制模式,以三角形为图元绘制,再传入绘制的顶点偏移量和顶点数量
      webgl.drawArrays(webgl.TRIANGLES, 0, points.length / 2)
    }         
   }        
}
</script>

顶点着色器的作用

• 通过 gl_Position 设置顶点
• 向片元着色器传递数据

注意点：

• GLSL语法在使用时需要注意后面的结束符号;
• webgl绘图的特点：并行处理像素点

实现效果图