极客观点
项目管理
HarmonyOS
代码如下图所示，更改vertexs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制彩色三角形</title>
</head>
<body>
<canvas id="glcanvas" width="640" height="480"></canvas>
</body>
<script type="text/javascript">
var glCanvas = document.getElementById('glcanvas');
var gl = glCanvas.getContext('webgl');
var vertexs = [
0.0, 0.5, 0.0,
0.0, -0.5, 0.0,
0.5, -0.5, 0.0,
];
var colors = [
0.0, 0.0, 1.0, 1.0,
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0
];
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexs), gl.STATIC_DRAW);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
//顶点着色器源码
var vsSource = `
attribute vec3 vPosition;
attribute vec4 vColor;
varying lowp vec4 uColor;
void main() {
gl_Position = vec4(vPosition.x, vPosition.y, vPosition.z, 1.0);
uColor = vColor;
}
`;
var fgSource = `
varying lowp vec4 uColor;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
//编译顶点着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(vertexShader));
gl.deleteShader(vertexShader);
}
//编译片段着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fgSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(fragmentShader));
gl.deleteShader(fragmentShader);
}
//创建着色器程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
}
//链接顶点属性
var pl = gl.getAttribLocation(shaderProgram, 'vPosition');
gl.vertexAttribPointer(pl, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(pl);
// //链接顶点颜色属性
var cl = gl.getAttribLocation(shaderProgram, 'vColor');
gl.vertexAttribPointer(cl, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(cl);
gl.useProgram(shaderProgram);
// gl.uniform1f(gl.getUniformLocation(shaderProgram, 'offset'), 0.5)
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
// gl.drawArrays(gl.LINE_LOOP, 0, 3);
</script>
</html>
是不是自己对webGL相关知识理解有误，求大佬指点