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

01-WebGL 着色器获取js数据

1、attribute 变量的概念

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

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

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

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

1. 在js中获取 attribute 变量

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

1. 修改 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;voidmain(){
        gl_Position = a_Position;
        gl_PointSize =50.0;}</script><script id="fragmentShader" type="x-shader/x-fragment">voidmain(){
        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;voidmain(){
    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);

参数说明：

index：
类型，指定了待修改顶点 attribute 变量的存储位置。
v0, v1, v2, v3：
浮点数类型Number，用于设置顶点 attibute 变量的各分量值。
value：
Float32Array 类型，用于设置顶点 attibute 变量的向量值。

4.2 webgl 函数的命名规律

GLSL ES里函数的命名结构是：<基础函数名><参数个数><参数类型>
以vertexAttrib3f(location,v0,v1,v2,v3) 为例：

• vertexAttrib：基础函数名
• 3：参数个数，这里的参数个数是要传给变量的参数个数，而不是当前函数的参数个数
• f：参数类型，f 代表float 浮点类型，除此之外还有i 代表整型，v代表数字……

本文章为B站李伟_Li慢慢关于《WebGL+图形学》课程的笔记
详情请参考：https://juejin.cn/post/7067368813838204959