js向着色器attribute传递变量的步骤
attribute 是存储限定符,是专门用于向外部导出与点位相关的对象的,这类似于es6模板语法中export 。
vec4 是变量类型,vec4是4维矢量对象。
a_Position 是变量名,之后在js中会根据这个变量名导入变量。这个变量名是一个指针,指向实际数据的存储位置。也是说,我们如果在着色器外部改变了a_Position所指向的实际数据,那么在着色器中a_Position 所对应的数据也会修改。
1.在顶点着色器声明attribute变量
const verSource = ` attribute vec4 a_Position; void main(){ gl_Position=a_Position; gl_PointSize=50.0; } `
2.在js中获取attribute变量的方法
因为着色器和js 是两个不同的语种,着色器无法通过window.a_Position 原理向全局暴露变量。
那我们要在js 里获取着色器暴露的变量,就需要找人来翻译,这个人就是程序对象。
const a_Position=gl.getAttributeLocation('程序对象','变量名称')
gl 是webgl 的上下文对象。
gl.getAttribLocation() 是获取着色器中attribute 变量的方法。
getAttribLocation() 方法的参数中:
gl.program 是初始化着色器时,在上下文对象上挂载的程序对象。
'a_Position' 是着色器暴露出的变量名。
这个过程翻译过来就是:gl 上下文对象对program 程序对象说,你去顶点着色器里找一个名叫'a_Position' 的attribute变量。
现在a_Position变量有了,接下来就可以对它赋值了。
3.修改attribute变量
gl.vertexAttrib3f(a_Position,0.0,0.0.0.0.1)
attribute 是存储限定符,是专门用于向外部导出与点位相关的对象的,这类似于es6模板语法中export 。
vec4 是变量类型,vec4是4维矢量对象。
a_Position 是变量名,之后在js中会根据这个变量名导入变量。这个变量名是一个指针,指向实际数据的存储位置。也是说,我们如果在着色器外部改变了a_Position所指向的实际数据,那么在着色器中a_Position 所对应的数据也会修改。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> </body> <script src="../lib/webgl-utils.js"></script> <script src="../lib/webgl-debug.js"></script> <script src="../lib/cuon-utils.js"></script> <script type="module"> let canvas = document.getElementById('canvas'); let gl = canvas.getContext('webgl'); const verSource = ` attribute vec4 a_Position; void main(){ gl_Position=a_Position; gl_PointSize=50.0; } ` const fsSource = ` void main(){ gl_FragColor=vec4(1,1,0,1); } ` initShaders(gl, verSource, fsSource); //获取a_Position的存储空间,然后通过js改变储存空间的内容 const a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //设置attribute变量 gl.vertexAttrib3f(a_Position, 0.0, 0.5, 0) gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINTS, 0, 1); </script> </html>
WebGLRenderingContext.vertexAttrib[1234]f[v]()
gl.vertexAttrib3f(location,v0,v1,v2) 方法是一系列修改着色器中的attribute 变量的方法之一,它还有许多同族方法,如:
gl.vertexAttrib1f(location,v0) gl.vertexAttrib2f(location,v0,v1) gl.vertexAttrib3f(location,v0,v1,v2) gl.vertexAttrib4f(location,v0,v1,v2,v3)
webgl 函数的命名规律
GLSL ES里函数的命名结构是:<基础函数名><参数个数><参数类型>
以vertexAttrib3f(location,v0,v1,v2,v3) 为例:
vertexAttrib:基础函数名
3:参数个数,这里的参数个数是要传给变量的参数个数,而不是当前函数的参数个数
f:参数类型,f 代表float 浮点类型,除此之外还有i 代表整型,v代表数字……
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站,联系方式11523518。
热评文章
标签列表
热门文章
友情链接