本文介绍如何使用webgl构建3D世界，包括理解webgl的工作原理、绘制正方体、实现深度效果以及处理超出xyz[-1,1]空间的问题。通过实例展示了正方体的移动和旋转，探讨了透视效果的实现和空间区域的映射。"
112514708,10548568,高速PCB设计：差分信号详解与布线策略,"['PCB设计', '差分传输', '信号完整性', '电磁兼容', '电路设计']
从本篇起，我们将正式进入webgl的3D世界
本篇涵盖的内容包括：
- webgl它在干啥？
- 如何画一个正方体？
- 如何成为一个“有深度”的正方体？
- 正方体要离家出走了！
webgl它在干啥？
首先我们需要知道webgl的世界其实是一个x[-1,1],y[-1,1],z[-1,1]的小世界，所有在这个长度2的世界中的物体，才能被显示。如图所示：
从正面看就会是
简单说来，这个过程中webgl把三纬空间xyz[-1，1]压扁成xy[1，-1]再根据实际画布的尺寸，绘制到canvas上，这个过程就是光栅化。不过如果三纬空间xyz[-1，1]中的物体如图所示，而canvas是2:1的尺寸的话实际得到的图片会是这样的：
那么为啥我平常用的canvas不会变形？请耐心看到文末你会有答案的！
如何画一个正方体？
本篇我们并不会在作色器上大动手脚，所以按照老方法，做一遍就可以了，不懂得可以看看《前端图形学从入门到放弃》第一篇。我们对作色器的唯一改造就是，开放了标示深度的z值：
<!-- 一个顶点着色器提供裁剪空间坐标值 -->
<script id="vertex-shader-2d" type="notjs">
attribute vec3 a_position;
uniform mat4 u_matrix;
// 这个是后续空间变化需要的，这一步
void main() {
vec4 position = u_matrix * vec4(a_position,1.0);
gl_Position = vec4(position.xyz,1.0);
}
</script>
<!-- 一个片断着色器提供颜色值 -->
<script id="fragment-shader-2d" type="notjs">
precision mediump float;
void main() {
// 输出颜色固定即可，我选的是(1.0,0.1,.45)，rgb都除以255
gl_FragColor = vec4(vec3(1.0,0.1,.45), 1.0); //
}
</script>我们当然可以使用gl.drawArrays方法继续绘制，但对于数量更多的图形，这个方法其实不够高效，想象一下有如图ABCD四个点组成了两个三角形：
对于gl.drawArrays我们需要向buffer中传入ABC后再传入BCD绘制两个三角形，但buffer就会重复存储点BC，目前还只有位置坐标，如果是复杂的场景一个点上除了位置信息外，还会包含颜色，法线等一些列数据，这就相当浪费存储空间了。所以我们采用gl.drawElements方法。
顶点数据还是如前，往buffer中丢，只不过每个点只传入一次，例如我们需要绘制一个以[0，0，0]为中心，边长是0.4的正方形，他的的八个顶点组成的数据是：
var data = 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,
0.2, 0.2, -0.2,
-0.2, 0.2, -0.2,
-0.2, -0.2, -0.2,
0.2, -0.2, -0.2,
]);
这时我们还需要一个索引数组来标识，用哪些点围城图形。
//顶点索引数组
var indexes = new Uint8Array([
//右侧四个点
0, 1, 2, 3,
//左侧四个顶点
4, 5, 6, 7,
//左右对应关系
0, 4,
1, 5,
2, 6,
3, 7
]);
然后把这两个数据丢给buffer：
var indexesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexesBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexes, gl.STATIC_DRAW);
var vBuffer = gl.createBuffer();
// 顶点需要是 ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
最后就是绘制：
//LINE_LOOP模式绘制右侧四个点
gl.drawElements(gl.LINE_LOOP, 4, gl.UNSIGNED_BYTE, 0);
//LINE_LOOP模式从第五个点开始绘制左侧四个点
gl.drawElements(gl.LINE_LOOP, 4, gl.UNSIGNED_BYTE, 4);
//LINES模式绘制连线左右点连线
gl.drawElements(gl.LINES, 8, gl.UNSIGNED_BYTE, 8);
这样运行一遍会得到如下结果：
奇怪？为什么只有一个正方形？说好的3D？
这是因为我们现在还是正交视图，后面的点完全被前面的点挡住了，所以我们需要移动这个立方体。让后面的点被看到
所以，接下来我们创建6个滑块分别控制正方形向x，y，z移动和绕x，y，z旋转。你怎么实现都可以：
<div id="control">
<div class="item item-x">
<span>x:</span>
<input type="range" id="item-x" value="0" min="-1" max="1" step="0.01" >
</div>
<div class="item item-y">
<span>y:</span>
<input type="range" id="item-y" value="0" min="-1" max="1" step="0.01" >
</div>
<div class="item">
<span>z:</span>
<input type="range" id="item-z" value="0" min="-1" max="1" step="0.01" >
</div>
<div class="item item-x">
<span>x轴角度:</span>
<input type="range" id="item-r-x" value="0" min="-3.14" max="3.14" step="0.001" >
</div>
<div class="item item-y">
<span>y轴角度:</span>
<input type="range" id="item-r-y" value="0" min="-3.14" max="3.14" step="0.001" >
</div>
<div class="item">
<span>z轴角度:</span>
<input type="range" id="item-r-z" value="0" min="-3.14" max="3.14" step="0.001" >
</div>
</div>而通过这些数据我们可以组成一个矩阵对立方体的点进行变换。只是从《前端图形学从入门到放弃》002第二篇的2D（支持齐次变换的3维矩阵）变成了3D（支持齐次变换的4维矩阵）。
他们分别是一个平移矩阵和3个旋转矩阵：
var m4 = { // 用来存放三位变换方法的对象
transform: function (x, y, z) {
return [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
x, y, z, 1,
];
},
rotateX: function (deg) {
var c = Math.cos(deg);
var s = Math.sin(deg);
return [
1, 0, 0, 0,
0, c, s, 0,
0, -s, c, 0,
0, 0, 0, 1,
]
},
rotateY: function (deg) {
var c = Math.cos(deg);
var s = Math.sin(deg);
return [
c, 0, -s, 0,
0, 1, 0, 0,
s, 0, c, 0,
0, 0, 0, 1,
]
},
rotateZ: function (deg) {
var c = Math.cos(deg);
var s = Math.sin(deg);
return [
c, s, 0, 0,
-s, c, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
]
},
}
当然我们还需要一个矩阵的乘法方法multiply，以及可以支持多个矩阵连乘的multiplys方法：
var m4 = {
// .......
multiply: function (a, b) {
var a00 = a[0 * 4 + 0];
var a01 = a[0 * 4 + 1];
var a02 = a[0 * 4 + 2];
var a03 = a[0 * 4 + 3];
var a10 = a[1 * 4 + 0];
var a11 = a[1 * 4 + 1];
var a12 = a[1 * 4 + 2];
var a13 = a[1 * 4 + 3];
var a20 = a[2 * 4 + 0];
var a21 = a[2 * 4 + 1];
var a22 = a[2 * 4 + 2];
var a23 = a[2 * 4 + 3];
var a30 = a[3 * 4 + 0];
var a31 = a[3 * 4 + 1];
var a32 = a[3 * 4 + 2];
var a33 = a[3 * 4 + 3];
var b00 = b[0 * 4 + 0];
var b01 = b[0 * 4 + 1];
var b02 = b[0 * 4 + 2];
var b03 = b[0 * 4 + 3];
var b10 = b[1 * 4 + 0];
var b11 = b[1 * 4 + 1];
var b12 = b[1 * 4 + 2];
var b13 = b[1 * 4 + 3];
var b20 = b[2 * 4 + 0];
var b21 = b[2 * 4 + 1];
var b22 = b[2 * 4 + 2];
var b23 = b[2 * 4 + 3];
var b30 = b[3 * 4 + 0];
var b31 = b[3 * 4 + 1];
var b32 = b[3 * 4 + 2];
var b33 = b[3 * 4 + 3];
return [
b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
];
},
multiplys: function (list) {
var that = this;
return list.reduce(function (a, b) {
return that.multiply(a, b);
})
},
// .......
}
要完成对立方体的控制，我们需要把渲染写入一个循环中：
var xNode = document.querySelector('#item-x');
var yNode = document.querySelector('#item-y');
var zNode = document.querySelector('#item-z');
var rXNode = document.querySelector('#item-r-x');
var rYNode = document.querySelector('#item-r-y');
var rZNode = document.querySelector('#item-r-z');
// 。。。。。
loop();
function loop() {
var mx = m4.rotateX(rXNode.value);
var my = m4.rotateY(rYNode.value);
var mz = m4.rotateZ(rZNode.value);
var mTransform = m4.transform(xNode.value,yNode.value,zNode.value);
var matrix = m4.multiplys([mTransform,mz,my,mx]);
gl.uniformMatrix4fv(u_matrix, false, matrix);
// 把矩阵传入顶点作色器
gl.clearColor(0.75, 0.85, 0.8, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//LINE_LOOP模式绘制右侧四个点
gl.drawElements(gl.LINE_LOOP, 4, gl.UNSIGNED_BYTE, 0);
//LINE_LOOP模式从第五个点开始绘制左侧四个点
gl.drawElements(gl.LINE_LOOP, 4, gl.UNSIGNED_BYTE, 4);
//LINES模式绘制连线左右点连线
gl.drawElements(gl.LINES, 8, gl.UNSIGNED_BYTE, 8);
requestAnimationFrame(loop)
}
这样一来我们就能看到立方体的屁股了：
知乎视频www.zhihu.com如何成为一个“有深度”的正方体？
虽然我们实现了3D效果，但这种正交效果并不会有日常我们见到的透视中的近大远小。
我们要如何实现呢？
我们先来想想近大远小是什么，近大远小不就是近处的看起来大一点远处的看起来小一点么。那么最直接的近大远小就是根据z值大小去缩放点的位置。
这里我们添加一个控制点来缩放透视程度：
<div class="item">
<span>z透视参数:</span>
<input type="range" id="item-z-factor" value="0" min="0" max="2" step="0.001" >
</div>
// .......
<script>
//........
var zFactorNode = document.querySelector("#item-z-factor")
// ........
</script>然后我们把这个变换写成一个矩阵的形式：
var zFactorMatrix = [
1,0,0,0,
0,1,0,0,
0,0,1,zFactorNode.value,
0,0,0,1
];
var matrix = m4.multiplys([zFactorMatrix,mTransform,mz,my,mx]);
这样通过调节z透视参数，我们的立方体就有了纵深感：
知乎视频www.zhihu.com需要注意的是，xyz经过zFactorMatrix处理后没有变化：
out_x = in x+0+0+0；out_y = in_y +0+0+0；out_z = in_z +0+0+0；
但w会变成
out_w = in_w +1
给 gl_Position 的 x,y,z,w 值自动除以 w，所以所有点的x，y才会受到z的控制。
但实际开发中，我们不会使用zFactor来控制深度。而是用透视矩阵：
不过在此之前我们先来解决，物体超出xyz[-1,1]空间的问题。
正方体要离家出走了！
例如我把立方体变成一个边长20，中心在(0，0，70)的立方体：
var data = new Float32Array([
10, 10, 80,
-10, 10, 80,
-10, -10, 80,
10, -10, 80,
10, 10, 60,
-10, 10, 60,
-10, -10, 60,
10, -10, 60,
]);
它立刻消失在屏幕上。
所以我们现在要做的是指定一个区域（假设是以(0，0，70)为中心，变成是50的空间，图中黑色区域）将其矩阵变换到空间[-1，1]之中。
第一步我们自然是要把这个空间移动到(0，0，0)，第二部就是把这个空间缩小到[-1,1]
这里我们在m4对象中再创建一个方法orthographic，它接受6个参数（t, b, l, r, n, f）分别所需要呈现空间的y，x，z的最小和最大值，对于以(0，0，70)为中心，变成是50的空间，这6个参数是（25,-25,25,-25,45,95）：
var m4 = {
// ......
orthographic: function (t, b, l, r, n, f) {
//先把空间移动到0，0，0
var trans = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
-(r + l) / 2, -(t + b) / 2, -(n + f) / 2, 1,
]
//在把空间缩放到[-1,1]
var scale = [
2 / (r - l), 0, 0, 0,
0, 2 / (t - b), 0, 0,
0, 0, 2 / (n - f), 0,
0, 0, 0, 1,
]
return this.multiply(scale, trans);
},
//......
}
大家可以用原始空间的顶点带入矩阵计算看看是不是都被移动到了[-1,1]的八个顶点上。
这样我们在loop中再创建一个矩阵：
var Ortho = m4.orthographic(25,-25,25,-25,45,95);
而此时传入作色器的matrix矩阵将变成：
var matrix = m4.multiplys([Ortho, mTransform, mx, my, mz]);
而运行后通过调整参数我们又得到立方体，这样我们就实现了将空间中任意区域的几何体画到canvas上了：
虽然如此但我们的透视又消失了回到了正交的状态，而且旋转的时候，物体好像并不是绕着自己的中心在转？这又是怎么回事？由于篇幅有限，这些事我们留到下回再说吧！
下回我们将解决：
- 如何加入透视？
- 如何让物体绕着自己旋转
- 如何让相机移动与旋转
- 如何盯住物体
参考资料：
https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-perspective.htmlwebglfundamentals.org
WebGL 三维透视投影
WebGL 三维透视投影webglfundamentals.org
Marschner, S., & Shirley, P. (2018). Fundamentals of computer graphics. Place of publication not identified: A K Peters/CRC Press.
扫一扫
5471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
