#鸿蒙通关秘籍#如何使用WebGL绘制一个彩色正方形?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
API晨星微光

在WebGL中绘制正方形需按创建缓冲和关联着色器的步骤,继而调用drawArrays()绘制图形:

javascript function drawScene(gl, programInfo, buffers) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

const fieldOfView = (45 * Math.PI) / 180; const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; const zNear = 0.1; const zFar = 100.0; const projectionMatrix = mat4.create();

mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);

const modelViewMatrix = mat4.create(); mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);

gl.useProgram(programInfo.program);

gl.uniformMatrix4fv( programInfo.uniformLocations.projectionMatrix, false, projectionMatrix ); gl.uniformMatrix4fv( programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix );

const offset = 0; const vertexCount = 4; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); }

通过设置摄像机透视矩阵并且初始化正方形的顶点位置,最终通过drawArrays()实现渲染。

分享
微博
QQ
微信
回复
2天前
相关问题