成都网站创建,企业网络推广技巧,国内永久免费crm代码,中信建设责任有限公司绘制多点
1 #xff09; WebGL 缓冲区
我们在用js定点位的时候#xff0c;肯定是要建立一份顶点数据的#xff0c;这份顶点数据是给着色器的#xff0c;因为着色器需要这份顶点数据绘图然而#xff0c;我们在js中建立顶点数据#xff0c;着色器肯定是拿不到的#xff…绘制多点
1 WebGL 缓冲区
我们在用js定点位的时候肯定是要建立一份顶点数据的这份顶点数据是给着色器的因为着色器需要这份顶点数据绘图然而我们在js中建立顶点数据着色器肯定是拿不到的这是语言不通导致的为了解决这个问题webgl 系统就建立了一个能翻译双方语言的缓冲区js 可以用特定的方法把数据存在这个缓冲区中着色器可以从缓冲区中拿到相应的数据接下来就看一下这个缓冲区是如何建的着色器又是如何从其中拿数据的
2 WebGL 绘制多点步骤
2.1 建立着色器源文件
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;void main(){gl_Position a_Position;gl_PointSize 20.0;}
/script
script idfragmentShader typex-shader/x-fragmentvoid main(){gl_FragColorvec4(1.0,1.0,0.0,1.0);}
/script2.2 获取webgl 上下文
const canvas document.getElementById(canvas);
canvas.width 200;
canvas.height 200;
const gl canvas.getContext(webgl);2.3 初始化着色器
const vsSource document.getElementById(vertexShader).innerText;
const fsSource document.getElementById(fragmentShader).innerText;
initShaders(gl, vsSource, fsSource);2.4 设置顶点点位
const vertices new Float32Array([0.0, 0.1,-0.1,-0.1,0.1, -0.1
]);const vertexBuffer gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);const a_Position gl.getAttribLocation(gl.program, a_Position);
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);建立顶点数据两个浮点数构成一个顶点分别代表 x、y 值const vertices new Float32Array([// x, y0.0, 0.1, // 顶点-0.1, -0.1, // 顶点0.1, -0.1 // 顶点
])现在上面的这些顶点数据是存储在js 缓存里的着色器拿不到需要建立一个着色器和js 都能进入的公共区即缓冲区建立缓冲对象const vertexBuffer gl.createBuffer();现在上面的这个缓冲区是独立存在的它只是一个空着的仓库和谁都没有关系。接下来咱们就让其和着色器建立连接绑定缓冲对象gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);绑定缓冲区相关api为gl.bindBuffer(target,buffer) target 要把缓冲区放在 webgl 系统中的什么位置buffer 缓冲区 着色器对象在执行 initShaders() 初始化方法的时候已经被写入webgl 上下文对象gl 中了这个 initShaders 方法可查阅之前博文当缓冲区和着色器建立了绑定关系我们就可以往这块空间写入数据了往缓冲区对象中写入数据gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);相关api为bufferData(target, data, usage) 将数据写入缓冲区 target 要把缓冲区放在 webgl 系统中的什么位置data 数据usage 向缓冲区写入数据的方式目前使用 gl.STATIC_DRAW 方式它是向缓冲区中一次性写入数据着色器会绘制多次现在着色器虽然绑定了缓冲区可以访问里面的数据了但是我们还得让着色器知道这个仓库是给哪个变量的比如咱们这里用于控制点位的attribute 变量这样做是为了提高绘图效率 将缓冲区对象分配给 attribute 变量const a_Position gl.getAttribLocation(gl.program, a_Position);
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);相关api为gl.vertexAttribPointer(local, size, type, normalized, stride, offset) 将缓冲区对象分配给 attribute 变量 local attribute变量size 顶点分量的个数比如我们的vertices 数组中两个数据表示一个顶点我们定一个 2type 数据类型比如 gl.FLOAT 浮点型normalized 是否将顶点数据归一stride 相邻两个顶点间的字节数我的例子里写的是0那就是顶点之间是紧挨着的offset 从缓冲区的什么位置开始存储变量我的例子里写的是0那就是从头开始存储变量 到了这里着色器就知道缓冲区的数据是给谁的了因为咱们缓冲区里的顶点数据是数组里面有多个顶点所以我们得开启一个让着色器批量处理顶点数据的属性默认着色器只会一个一个的接收顶点数据然后一个一个的绘制顶点开启顶点数据的批处理功能gl.enableVertexAttribArray(a_Position);相关api, enableVertexAttribArray(location), location attribute 变量好, 目前已经是万事俱备可以着手绘图, 绘图前先将画布清理下
2.5 清理画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);2.6 绘图
gl.drawArrays(gl.POINTS, 0, 3); // 这是绘制三个顶点相关apidrawArrays(mode, first, count) mode 绘图模式比如 gl.POINTS 画点first 从哪个顶点开始绘制count 要画多少个顶点
绘制三角形
绘制完成三个点那么绘制三角形的工作就简单了注意绘制三角形是不需要设置顶点的大小的
1 顶点着色器移除顶点的配置
script idvertexShader typex-shader/x-vertexattribute vec4 a_Position;void main(){gl_Position a_Position;// gl_PointSize 20.0;}
/script因为 gl_PointSize 这个属性是控制顶点大小的已经不需要了
2 js中更改绘制方式
// gl.drawArrays(gl.POINTS, 0, 3);
gl.drawArrays(gl.TRIANGLES, 0, 3);gl.TRIANGLES 就是绘制三角形
画不同的线条
关于 drawArrays 第一个 mode 参数 POINTS 可视的点LINES 单独线段LINE_STRIP 线条LINE_LOOP 闭合线条TRIANGLES 单独三角形TRIANGLE_STRIP 三角带TRIANGLE_FAN 三角扇
1 POINTS
字面理解就是一个个的可以看到的点 上面六个点的绘制顺序是v0, v1, v2, v3, v4, v5
2 LINES 单独线段 上面三条有向线段的绘制顺序是 v0 v1v2 v3v4 v5
3 LINE_STRIP 线条 上面线条的绘制顺序是v0v1v2v3v4v5
4 LINE_LOOP 闭合线条 上面线条的绘制顺序是v0v1v2v3v4v5v0
