《WebGL编程指南》学习笔记 01、着色器获取js数据

夜宵少吃辣

已于 2024-07-25 16:10:09 修改

阅读量901

点赞数 24

分类专栏： webgl 着色器文章标签： javascript webgl 着色器

于 2024-07-24 17:16:40 首次发布

本文链接：https://blog.csdn.net/weixin_36431831/article/details/140667995

版权

webgl 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

着色器

3 篇文章 0 订阅

订阅专栏

01-WebGL 着色器获取js数据

1、attribute 变量的概念

attribute 只有顶点着色器才能使用的，js可以通过 attribute 变量向顶点着色器传递与顶点相关的数据

2、js向 attribute 变量传参的步骤

在顶点着色器中申明 attribute 变量。

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_position;
    void main () {
        gl_Position = a_position;
        gl_PointSize = 50.0;
    }
</script>

在js中获取 attribute 变量

const a_Position=gl.getAttribLocation(gl.program,'a_Position');

修改 attribute 变量

gl.vertexAttrib3f(a_Position,0.0,0.5,0.0);

整体代码

<canvas id="canvas"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = 50.0;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    void main() {
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
</script>
<script type="module">
    import {initShaders} from '../jsm/Utils.js';

    const canvas = document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const gl = canvas.getContext('webgl');
    const vsSource = document.getElementById('vertexShader').innerText;
    const fsSource = document.getElementById('fragmentShader').innerText;
    initShaders(gl, vsSource, fsSource);
    const a_Position=gl.getAttribLocation(gl.program,'a_Position');
    gl.vertexAttrib3f(a_Position,0.0,0.0,0.0);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.POINTS, 0, 1);
</script>

3 js 向attribute变量传参的原理

3.1 着色器中的attribute 变量

attribute vec4 a_Position;
void main(){
    gl_Position = a_Position;
    gl_PointSize = 50.0;
}

attribute 是存储限定符，是专门用于向外部导出与点位相关的对象的，这类似于es6模板语法中export 。
vec4 是变量类型，vec4是4维矢量对象。
a_Position 是变量名，之后在js中会根据这个变量名导入变量。这个变量名是一个指针，指向实际数据的存储位置。也是说，我们如果在着色器外部改变了a_Position所指向的实际数据，那么在着色器中a_Position 所对应的数据也会修改。

3.2 在js中获取attribute 变量

我们在js 里不能直接写a_Position 来获取着色器中的变量。

因为着色器和js 是两个不同的语种，着色器无法通过window.a_Position 原理向全局暴露变量。

那我们要在js 里获取着色器暴露的变量，就需要找人来翻译，这个人就是程序对象。

const a_Position=gl.getAttribLocation(gl.program,'a_Position');

gl 是webgl 的上下文对象。
gl.getAttribLocation() 是获取着色器中attribute 变量的方法。
getAttribLocation() 方法的参数中：
- gl.program 是初始化着色器时，在上下文对象上挂载的程序对象。
- ‘a_Position’ 是着色器暴露出的变量名。
  这个过程翻译过来就是：gl 上下文对象对program 程序对象说，你去顶点着色器里找一个名叫’a_Position’ 的attribute变量

3.3 在 js 中修改 attribute 变量

attribute 变量即使在js中获取了，他也是一个只会说GLSL ES语言的人，他不认识js 语言，所以我们不能用js 的语法来修改attribute 变量的值：

gl.vertexAttrib3f(a_Position,0.0,0.5,0.0);

gl.vertexAttrib3f() 是改变变量值的方法。
gl.vertexAttrib3f() 方法的参数中：
- a_Position 就是咱们之前获取的着色器变量。
- 后面的3个参数是顶点的x、y、z位置

a_Position被修改后，我们就可以使用上下文对象绘制最新的点位了。

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);

4. 扩展

4.1 vertexAttribute3f() 的同族函数

gl.vertexAttrib3f(location,v0,v1,v2) 方法是一系列修改着色器中的attribute 变量的方法之一，它还有许多同族方法，如：

void gl.vertexAttrib1f(index, v0);
void gl.vertexAttrib2f(index, v0, v1);
void gl.vertexAttrib3f(index, v0, v1, v2);
void gl.vertexAttrib4f(index, v0, v1, v2, v3);

void gl.vertexAttrib1fv(index, value);
void gl.vertexAttrib2fv(index, value);
void gl.vertexAttrib3fv(index, value);
void gl.vertexAttrib4fv(index, value);