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

最新推荐文章于 2025-03-03 21:42:32 发布

原创

最新推荐文章于 2025-03-03 21:42:32 发布 · 619 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#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;