webgl 入门(二) - 简书

在JavaScript 中使用gl.vertexAttrib3f函数对attribute 变量赋值. gl.vertexAttrib3f()函数拥有很多同族函数,比如gl.vertexAttrib1f,gl.vertexAttrib2f,gl ... webgl入门(二)webgl参数传递 webgl是基于着色器进行绘制的.着色器本身无法与JavaScript进行通讯以及数据的传输.为了能够与JavaScript语言进行数据的交互,webgl封装了很多函数,这些函数根据GLSLES暴露出来地址来传递参数.下面主要介绍两种变量:attribute变量和和uniform变量 attribute变量 attribute变量是一种GLSLES变量,被用来从外部想顶点着色器内传输数据.只有顶点着色器可以使用它,在对变量命名的时候,对于顶点变量一般使用a_开头. 使用attribute变量包含以下几个步骤 在顶点着色器中声明attribute变量 将attribute变量赋值给gl_Position变量 向attribute变量传输数据 声明attribute.attribute变量必须声明为全局变量,数据从着色器外部传递给变量.变量声明的格式按照以下格式: 变量如下所示 attributevec4a_Position; 存储限定符号-类型-变量名 将attribute变量赋值给gl_Position.在赋值的数据的类型必须一致,否则将会报错 如下所示 gl_Position=a_Position; 向attribute变量传输数据 gl.vertexAttrib3f(a_Position,0.2,0.0,0.0) 完整代码如下所示 attributevec4a_Position; voidmain(){ gl_Position=a_Position; gl_PointSize=20.0; } 定义完变量之后,需要在JavaScript调用gl.getAttribLocation函数得到attribute变量的地址.如果返回的值小于0,则代表读取的变量为空.示例如下: consta_Position=gl.getAttribLocation(gl.program,'a_Position') getAttribLocation函数表示获取attribute变量的地址,它拥有两个参数:program,name program:表示包含顶点着色器和片元着色器的程序对象 name:指定想要获取到的attribute变量的名称,名称的长度必须小于256个字节 Attribute变量赋值 在JavaScript中使用gl.vertexAttrib3f函数对attribute变量赋值. gl.vertexAttrib3f()函数拥有很多同族函数,比如gl.vertexAttrib1f,gl.vertexAttrib2f,gl.vertexAttrib3fgl.vertexAttrib4f.webgl对于相关函数的命名规范一般遵循以下规律 gl.vertexAttrib4f(location,v0,v1,v2,v3) vertexAttrib基础函数名 4参数个数f:参数类型f代表浮点数,i代表整数,后续的参数参数参数的个数v1,v2默认值为0,v3默认值为1 uniform变量 uniform变量将颜色值传递给着色器,其步骤与attribute变量传递类似,不过不同仅仅是,这次数据传输的目标是片元着色器.对于uniform变量的命名一般使用u_开头,uniform变量数据格式为 在片元着色器准备uniform变量 用uniform变量想gl_FragColor赋值 将颜色数据从JavaScript传递给uniform变量 获取uniform变量的存储地址 gl.getUniformLocation(program,name) program:包含顶点着色器和片元着色器的程序对象 name:uniform变量的名称 uniform变量赋值 gl.uniform4f(location,v1,v2,v3,v4) location:代表uniform变量的地址 v1,v2,v3,v4代表4个参数 uniform4f函数的同族函数 uniform代表函数名, 4代表4个参数,f代表数据类型为浮点,i代表未整数, 对于uniform1f,uniform2f,uniform3f这些同族函数,没有传递第四个参数,那么第四个参数默认为1,其他参数如果不传递默认为了 实例代码如下 attributevec4a_Position; voidmain(){ gl_Position=a_Position; gl_PointSize=20.0; } //全局设置浮点数的精确度,其他类型都有默认的精度类型,浮点数需要单独的设置 precisionmediumpfloat; uniformvec4u_FragColor; voidmain(){ gl_FragColor=u_FragColor; }

initShader代码如下 functioninitShaders(gl,vsShader,fShader){ constprogram=gl.createProgram(); constvertextShader=loaderShader(gl,gl.VERTEX_SHADER,vsShader) constfragmentShader=loaderShader(gl,gl.FRAGMENT_SHADER,fShader) gl.attachShader(program,vertextShader) gl.attachShader(program,fragmentShader) //链接webgl上下文和程序对象 gl.linkProgram(program) gl.useProgram(program) gl.program=program returntrue } //加载着色器 functionloaderShader(gl,type,source){ constshader=gl.createShader(type) gl.shaderSource(shader,source) //编译着色器 gl.compileShader(shader) returnshader } 抽奖赞1赞赞赏更多好文