如何用WebGL轻松绘制出炫酷3D物体？

在之前的文章中，我们使用WebGL绘制了很多二维的图形和图像，在学习2D绘图的时候，我们提过很多次关于GPU的高效渲染，但是2D图形的绘制只展示了WebGL部分的能力，WebGL更强大的地方在于，它可以绘制各种3D图形，而3D图形能够极大地增强可视化的表现能力。 相信很多小伙伴都对此有所耳闻，也有不少人学习WebGL，就是冲着它的3D绘图能力。 接下来，我就用一个简单的正立方体的例子来演示在WebGL中如何绘制3D物体。 本文可配合视频食用 从二维到三维 首先，我们先来绘制一个熟悉的2D图形，正方形。 // vertex attribute vec2 a_vertexPosition; attribute vec4 color; varying vec4 vColor; void main() { gl_PointSize = 1.0; vColor = color; gl_Position = vec4(a_vertexPosition, 1, 1); } // fragment #ifdef GL_ES precision highp float; #endif varying vec4 vColor; void main() { gl_FragColor = vColor; } // ... renderer.setMeshData([{ positions: [ [-0.5, -0.5], [-0.5, 0.5], [0.5, 0.5], [0.5, -0.5] ], attributes: { color: [ [1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], [1, 0, 0, 1], ] }, cells: [[0, 1, 2], [2, 0, 3]] }]); // ... 上述这些代码比较简单，我就不过多解释了。 在画布上我们看到，绘制了一个红色的正方形，它是一个平面图形。 接下来，我们就在这个图形的基础上，将它拓展为3D的正立方体。 要想把2维图形拓展为3维几何体，第一步就是要把顶点扩展到3维。也就是把vec2扩展为vec3。 // vertex attribute vec3 a_vertexPosition; attribute vec4 color; varying vec4 vColor; void main() { gl_PointSize = 1.0; vColor = color; gl_Position = vec4(a_vertexPosition, 1); } 当然仅仅修改Shader是不够的，因为数据是从JavaScript传递过来的，所以我们需要在JavaScript中计算立方体的顶点数据，然后再传递给Shader。 一个立方体有8个顶点，能组成6个面。在WebGL中需要用12个三角形来绘制它。 如果6个面的属性相同的话，我们可以复用8个顶点来绘制； 但如果属性不完全相同，比如每个面要绘制成不同的颜色，或者添加不同的纹理图片，就得把每个面的顶点分开。这样的话，就需要24个顶点来分别处理6个面。 为了方便使用，我们可以定义一个JavaScript函数，用来生成立方体6个面的24个顶点，以及12个三角形的索引，并且定义每个面的颜色。