WebGL编程指南-动态修改着色器中的变量

一、前文回顾

第一篇文章中，我主要学习了WebGL的起源，以及如何写一个简单的WebGL着色器程序。

了解了WebGL起源于OpenGL ES 2.0，主要通过顶点着色器和片元着色器来进行三维渲染。在JavaScript中，这两个着色器程序以C语言的规范编写，通过字符串的方式注入至webgl上下文中。从而实现程序编写。

glsl中，顶点着色器有两个内置变量：gl_Position和gl_PointSize。

片元着色器有一个内置变量：gl_FragColor。

二、动态修改着色器中的变量

在第一篇文章中，实现了在三维中绘制一个点，点的坐标是（0,0,0）。期初绘制完成很有成就感，但后续仔细想想，还是有很大的局限性。如何绘制多个点？如何动态增加点？如何让点的位置动态变化？

既然JS中，glsl是通过字符串注入的形式实现的。那么怎么动态向glsl中传递参数呢？

glsl中有两种类型的变量：attribute变量和uniform变量。

attribute变量：传输与顶点相关的数据【因此只有顶点着色器能够使用它】。

uniform变量：传输其它数据。

下面将实现，利用attribute动态传递鼠标点击位置，并通过uniform将颜色传递给片元着色器的效果：

<template>
  <canvas id='webgl' width='400' height='400'></canvas>
</template>

<script lang='ts'>
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
  name: 'webgl3',
  setup() {
    const v_shader_source = `
       //传递顶点坐标
       attribute vec4 a_Position;
       //attribute float a_PointSize;
       void main()
       {
          gl_Position = a_Position;
          gl_PointSize = 10.0;
       }
    `;
    const f_shader_source = `
       precision mediump float;
       //传递顶点颜色
       uniform vec4 u_FragColor;
       void main()
       {
          //gl_FragColor = vec4(1.0,0.0,0.0,1.0);
          gl_FragColor = u_FragColor;
       }
    `;
    const initShaders=(gl:WebGLRenderingContext,v_shader_source:string,f_shader_source:string):WebGLProgram=>{
      const vertexShader = gl.createShader(gl.VERTEX_SHADER)
      gl.shaderSource(vertexShader!, v_shader_source)
      gl.compileShader(vertexShader!)

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

      const shaderProgram = gl.createProgram()
      gl.attachShader(shaderProgram!, vertexShader!)
      gl.attachShader(shaderProgram!, fragmentShader!)
      gl.linkProgram(shaderProgram!)
      gl.useProgram(shaderProgram!)

      return shaderProgram!;
    }

    const points:number[][] = []
    const onClick=(ev:MouseEvent,gl:WebGLRenderingContext,canvas:HTMLCanvasElement,position:number,color:WebGLUniformLocation)=>{
      // 获取屏幕坐标，并归一化，转换为webgl
      let x = ev.clientX
      let y = ev.clientY
      const rectangle = (ev.target as HTMLElement).getBoundingClientRect()

      //将x、y归一化
      x = ((x - rectangle.left) - canvas.height / 2) / (canvas.height / 2)
      y = (canvas.width / 2 - (y - rectangle.top)) / (canvas.width / 2)

      points.push([x, y])


      gl.clear(gl.COLOR_BUFFER_BIT)
      for (let i = 0; i < points.length; i++) {
        // 更新attribute变量值
        gl.vertexAttrib3f(position, points[i][0], points[i][1], 0.0)
        // 更新uniform变量值
        gl.uniform4f(color,points[i][0], points[i][1], 0.0,1.0)
        gl.drawArrays(gl.POINTS, 0, 1)
      }

    }

    onMounted(()=>{
      const canvas = document.getElementById('webgl') as HTMLCanvasElement;
      const gl = canvas.getContext('webgl') as WebGLRenderingContext;

      const program = initShaders(gl, v_shader_source, f_shader_source)

      //从webgl中获取attribute和uniform类型变量
      const a_Position = gl.getAttribLocation(program,'a_Position')
      const u_FragColor = gl.getUniformLocation(program,'u_FragColor')

      // 注册鼠标click事件，并在回调函数中对attribute和uniform变量赋值
      canvas.onmousedown = (ev)=>{
        onClick(ev, gl, canvas, a_Position,u_FragColor!)
      }

      gl.clearColor(1.0, 1.0, 0.0, 1.0)
      gl.clear(gl.COLOR_BUFFER_BIT)
    })
  }
})
</script>

<style scoped>

</style>

运行后的效果：

 

三、总结

当需要从外部动态修改glsl中的参数时，需要将glsl中的参数关键字设置为attribute和uniform。

attribute变量：传输与顶点相关的数据【因此只有顶点着色器能够使用它】。

uniform变量：传输其它数据。