做网站推广电话,网站建设制作免费推广,简洁大气的公司网站,外贸电商网站开发价格绘制矩形面
可以绘制的面只有三角面#xff0c;要绘制矩形面的话#xff0c;只能用两个三角形去拼
1 #xff09; 使用 三角带 TRIANGLE_STRIP 绘制矩形 回顾一下之前的规律#xff1a; 第一个三角形#xff1a;v0v1v2第偶数个三角形#xff1a;以上一个三角形…绘制矩形面
可以绘制的面只有三角面要绘制矩形面的话只能用两个三角形去拼
1 使用 三角带 TRIANGLE_STRIP 绘制矩形 回顾一下之前的规律 第一个三角形v0v1v2第偶数个三角形以上一个三角形的第二条边下一个点为基础以和第二条边相反的方向绘制三角形第奇数个三角形以上一个三角形的第三条边下一个点为基础以和第二条边相反的方向绘制三角形 关键顶点绘制数据 const vertices new Float32Array([-0.2, 0.2,-0.2,-0.2,0.2, 0.2,0.2,-0.2,
])绘制 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
2 使用 三角带 TRIANGLE_FAN 绘制矩形 回顾一下之前的规律 v0v1v2: 以上一个三角形的第三条边下一个点为基础按照和第三条边相反的顺序绘制三角形v0v2v3: 同上v0v3v4: 同上v0v4v5: 同上 基于此设计顶点关键数据 const vertices new Float32Array([-0.2, -0.2,0.2, -0.2,0.2, 0.2,-0.2, 0.2
])绘制 gl.drawArrays(gl.TRIANGLE_FAN, 0, 4)
3 使用独立三角形绘制矩形 绘制规律 这里就是普通的三角形画了2个需要6个点上面两个面的绘制顺序是 v0v1v2v3v4v5 顶点关键数据 const vertices new Float32Array([-0.2, 0.2,-0.2, -0.2,0.2, 0.2,0.2, 0.2,-0.2, -0.2,0.2, -0.2
])可以根据自己的需求绘制各种各样的图形
封装多边形对象
1 封装一个Poly 对象用于绘制多边形
const defAttr () ({gl: null,vertices: [],geoData: [],size: 2,attrName: a_Position,count: 0,types: [POINTS],
})export default class Poly {constructor(attr) {Object.assign(this,defAttr(),attr)this.init()}init() {const { attrName, size, gl } this;if(!gl) returnconst vertexBuffer gl.createBuffer()gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)this.updateBuffer()const a_Position gl.getAttribLocation(gl.program,attrName)gl.vertexAttribPointer(a_Position, size, gl.FLOAT, false, 0, 0)gl.enableVertexAttribArray(a_Position)}addVertice(...params) {this.vertices.push(...params)this.updateBuffer()}popVertice() {const { vertices, size }thisconst len vertices.lengthvertices.splice(len-size,len)this.updateCount()}setVertice(ind,...params) {const { vertices, size }thisconst i ind * sizeparams.forEach((param,paramInd) {vertices[iparamInd] param})}updateBuffer() {const { gl,vertices } thisthis.updateCount()gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)}updateCount() {this.count this.vertices.length / this.size}updateVertices(params) {const { geoData } thisconst vertices []geoData.forEach(data {params.forEach(key {vertices.push(data[key])})})this.verticesvertices}draw(types this.types) {const { gl, count } thisfor(let type of types) {gl.drawArrays(gl[type],0,count);}}
}属性 gl webgl上下文对象vertices 顶点数据集合在被赋值的时候会做两件事 更新count 顶点数量数据运算尽量不放渲染方法里向缓冲区内写入顶点数据 geoData 模型数据对象数组可解析出 vertices 顶点数据size 顶点分量的数目positionName 代表顶点位置的attribute 变量名count 顶点数量types 绘图方式可以用多种方式绘图 方法 init() 初始化方法建立缓冲对象并将其绑定到webgl 上下文对象上然后向其中写入顶点数据。将缓冲对象交给attribute变量并开启attribute 变量的批处理功能。addVertice() 添加顶点popVertice() 删除最后一个顶点setVertice() 根据索引位置设置顶点updateBuffer() 更新缓冲区数据同时更新顶点数量updateCount() 更新顶点数量updateVertices() 基于geoData 解析出vetices 数据draw() 绘图方法
2 应用1
const poly new Poly({gl,vertices:[0, 0.2]
})poly.draw([POINTS])setTimeout((){poly.addVertice(-0.2, -0.1);gl.clear(gl.COLOR_BUFFER_BIT);poly.draw([POINTS])
}, 1000)setTimeout((){gl.clear(gl.COLOR_BUFFER_BIT);poly.draw([POINTS,LINE_STRIP])
}, 2000)3 应用2
// 实例化多边形
const poly new Poly({gl,types:[POINTS,LINE_STRIP]
})// 鼠标点击事件
canvas.addEventListener(click, (event) {const { x,y } getMousePosInWebgl(event, canvas);poly.addVertice(x,y);gl.clear(gl.COLOR_BUFFER_BIT);poly.draw();
});
