前言
课堂目标
-
使用js向着色器传递数据 -
获取鼠标在canvas 中的webgl 坐标系位置
知识点
-
attribute 变量 -
gl.vertextAttribute3f() 的同族函数 -
鼠标在canvas 中的css 位置转webgl 坐标位 -
uniform 变量 -
gl.uniform4f() 的同族函数
第一章 用js控制一个点的位置
1-attribute 变量的概念。
gl_Position = vec4(
0,
0,
0,
1);
2-js向attribute 变量传参的步骤
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_Position;
void main(){
gl_Position = a_Position;
gl_PointSize =
50.0;
}
</script>
const a_Position=gl.getAttribLocation(gl.program,
'a_Position');
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 变量
const a_Position=gl.getAttribLocation(gl.program,
'a_Position');
-
gl 是webgl 的上下文对象。 -
gl.getAttribLocation() 是获取着色器中attribute 变量的方法。 -
getAttribLocation() 方法的参数中： -
gl.program 是初始化着色器时，在上下文对象上挂载的程序对象。 -
'a_Position' 是着色器暴露出的变量名。
3-3-在js中修改attribute 变量
a_Position.a=1.0
gl
.vertexAttrib3f(
a_Position,0
.0,0
.5,0
.0);
-
gl.vertexAttrib3f() 是改变变量值的方法。 -
gl.vertexAttrib3f() 方法的参数中： -
a_Position 就是咱们之前获取的着色器变量。 -
后面的3个参数是顶点的x、y、z位置
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-vertexAttrib3f()的同族函数
gl
.vertexAttrib1f(location,v0)
gl
.vertexAttrib2f(location,v0,v1)
gl
.vertexAttrib3f(location,v0,v1,v2)
gl
.vertexAttrib4f(location,v0,v1,v2,v3)
4-2-webgl 函数的命名规律
-
vertexAttrib：基础函数名 -
3：参数个数，这里的参数个数是要传给变量的参数个数，而不是当前函数的参数个数 -
f：参数类型，f 代表float 浮点类型，除此之外还有i 代表整型，v代表数字……