实现的基本思路很简单,首先提供如上图所示立方体线框所有顶点的三维坐标,然后通过旋转矩阵对所有顶点进行旋转变换,最后调用绘制函数gl.drawArrays
把所有点连成线渲染出来。
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="webgl" width="500" height="500" style="background-color: #0d72da"></canvas>
</body>
<script id="vertexShader">
attribute vec4 apos;
void main(){
//设置选装角度
float radian=radians(30.0);
//计算余弦正弦
float cos=cos(radian);
float sin=sin(radian);
//设置旋转矩阵
mat4 mx=mat4(1,0,0,0, 0,cos,-sin,0, 0,sin,cos,0, 0,0,0,1);
mat4 my=mat4(cos,0,-sin,0, 0,1,0,0, sin,0,cos,0, 0,0,0,1);
gl_Position=mx*my*apos;
}
</script>
<script id="fragmentShader">
void main(){
gl_FragColor=vec4(1.0,0.0,0.0,1.0);
}
</script>
<script>
var canvasElement=document.getElementById('webgl');
var gl=canvasElement.getContext('webgl');
//顶点着色器源码
// var vertexShaderSource = '' +