着色器
顶点着色器 控制点的位置和大小
var VSHADER_SOURCE =
'void main(){'+
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);'+
' gl_PointSize = 10.0;'+
'}'
类型和变量名字:
vec4 gl_Position 表示顶点位置,vec4在GLSE中是由四个浮点数组成的矢量
float gl_Position 表示点的尺寸
片元着色器 控制点的颜色
var FSHADER_SOURCE = '
' void main(){'+
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);'+
'}'
绘制操作
/**
*
* @param mode 绘制模式
* gl.Points, gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP ....
* @param first 从哪个点开始绘制
* @param count 指定绘制需要多少个顶点
*/
gl.drawArrays(mode, first, count);
获取attribute变量存储位置
gl.getAttribLocaltion(program, name);
参数 program: 程序对象
name: 指定获取其存储地址的attribute变量名称
向attribute 变量赋值
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
参数:a_Position 指定要修改的attribute 变量存储位置
v1, v2, v3:三个分量
<p style="color:#green">uniform变量操作同attribute </p>
绘制多个点
使用缓冲区步骤
1.创建缓冲区:
var vertexBuffer = gl.createBuffer()
2、绑定缓冲区:
gl.bindBuffer(target, buffer)
target:两个参数
gl.ARRAY_BUFFER 表示缓冲区对象中包含了顶点的数据
gl.ELEMENT_ARRAY_BUFFER 表示缓冲区对象包含了顶点数据的索引值
3、将数据写入缓冲区
gl.bufferData(target, data, usage);
target: gl.ARRAY_BUFFER || gl.ELEMENT_ARRAY_BUFFER
data:写入缓冲区的数据(类型化数据 Float32Array()之类)
usage: 表示程序如何使用存储在缓冲区对象中的数据,帮助WebGL优化操作
gl.STATIC_DRAW 写入一次数据,但绘制很多次
gl.STREAM_DRAW 写入一次数据,绘制若干次
gl.DYNAMIC_DRAW 多次写入数据,并绘制很多次
4、将缓冲区对象分配给attribute变量
gl.vertexAttribPointer(localtion, size, type,normalized, stride, offset)
localtion: attribute变量存储位置
size: 指定缓冲区每个顶点的分量个数(1到4),如果提供的比需要的少,则补0
type: 用下面类型来指定数据格式
gl.UNSIGNED_BYTE
gl.SHORT
gl.UNSIGNED_SHORT
gl.INT
gl.UNSIGNED_INT
gl.FLOAT
normalize: 传入true或false, 表明是否将非浮点数数据归一化到[0,1] or [-1,1]区间
stride: 相邻两个顶点间的字节数,默认为0
offset: 指定缓冲区的偏移量,如果从起始位置开始,则填0
5、开启attribute变量
gl.enableVertexArray(location)
attribute变量地址
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。