WebGL

想必各位看官大大都了解过，进行3D图形渲染，主要依赖显卡（GPU）为我们提供强大的运算支持。GPU也像不同CPU架构具备不同的指令集一样，不同的显卡厂商也为不同的GPU型号提供了不同的底层指令逻辑，所支持的能力也不尽相同。为了简化方便图形应用开发和硬件适配的工作量，诞生了一些可以让不同应用方便调用的图形库，用以抹平底层硬件实现的差异，例如OpenGL、 Direct3D、Vulkan......

基本概念

WebGL（Web Graphics Library，Web图形库）， 是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件 。 WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。通过这些接口，开发者可以直接跟GPU进行通信。

---

目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari5.1+, Internet Explorer 11+和Microsoft Edge build 10240+；然而, WebGL一些特性也需要用户的硬件设备支持。

WebGL 2 API引入了对大部分的OpenGL ES 3.0功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

---

WebGL 程序分为 2 部分：

• 使用 Javascript 编写的运行在CPU的程序
• 使用 GLSL 编写的运行在GPU的着色器程序

着色器程序接收CPU传过来的数据，并进行一定处理，最终渲染成丰富多彩的应用样式。

3D坐标系

渲染流程

WebGL 能绘制的基本图元只有 3 种，分别是点、线段、三角形，对应了物理世界中的点线面。所有复杂的图形或者立方体，都是先用点组成基本结构，然后用三角形将这些点构成的平面填充起来，最后由多个平面组成几何体。

但现实情况是，如果想生成满足各种应用场景的复杂形状，几何结构会非常复杂，代码写起来也会非常复杂。这时候就会有看官会问了：那我写个🐱 啊？别着急哈，咱不是前端开发者嘛，所以肯定会有对前端友好的开发方式嘛~

Three.js

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

github链接：github.com/mrdoob/thre…

Three.js官网：threejs.org/

Three.js文档：threejs.org/docs/index.…

Three.js示例：threejs.org/examples/#w…

Three.js应用

既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必各位看官大大一定很关心。所以接下来内容会展示一些基于Three.js引擎或Three.js类似引擎开发的Web3D应用，以便大家了解~

物联网3D可视化

物联网粮仓3D可视化案例：www.yanhuangxueyuan.com/3D/liangcan…

产品720在线预览

玉镯产品在线预览案例：www.yanhuangxueyuan.com/3D/liangcan…

沙发在线预览

沙发在线预览：app.xuanke3d.com/apps/trayto…

服装在线预览

服装在线预览：suit.xuantech.cn/

洗衣机在线交互预览

 

洗衣机在线交互预览：cdn.weshape3d.com/hir001/1021…

数据可视化

解析GeoJSON数据中国GDP数据可视化：www.yanhuangxueyuan.com/3D/geojsonC…

H5/微信小游戏

非常火的微信小游戏跳一跳就是使用Three.js引擎开发的。 开发3D类的H5小游戏或者微信小游戏，Three.js引擎是非常好的选择。

通过Threejs开发的小游戏，可以直接部署在微信小程序或者web端，无需下载，方便传播，目前的生态非常和小游戏开发。

科教领域

在科教领域通过3D方式展示特定的知识相比较图像更为直观。

科研平台-蛋白质结构可视化案例：www.rcsb.org/3d-view/2JE…

化学相关——分子结构可视化：www.yanhuangxueyuan.com/3D/fenzi/in…

地理天文相关——太阳系3D预览：www.yanhuangxueyuan.com/3D/solarSys…

机械领域

机械模型在线预览demo：www.yanhuangxueyuan.com/3D/jixiezhu…

Onshape是一款机械领域的三维建模软件，如果熟悉Solidworks、UG等CAD软件，那么你可以把Onshape理解为云Solidworks。

WebVR

对于现在比较火的VR、AR概念，WebGL技术的出现，也是一个好消息，如果你想预览一些VR内容，完全可以不下载一个VR相关的APP，通过threejs引擎实现VR内容发布，然后用户直接通过微信等社交方式推广，直接打开VR内容链接就可以观看。

VR与Web3D技术结合自然就衍生出来一个新的概念WebVR，也就是基于Web实现的VR内容。

家装室内设计相关

室内设计作品展示案例：www.yanhuangxueyuan.com/3D/houseDes…

相关库

下面表格列举了一些Three.js相关的开源库。

库	功能
Physijs	Physijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现
stats.js	JavaScript性能监控器，同样也可以测试webgl的渲染性能
dat.gui	轻量级的icon形用户界面框架，可以用来控制Javascript的变量，比如WebGL中一个物体的尺寸、颜色
tween.js	借助tween.js快速创建补间动画，可以非常方便的控制机械、游戏角色运动
ThreeBSP	可以作为three.js的插件，完成几何模型的布尔，各类三维建模软件基本都有布尔的概念
react-three-fiber	Threejs的React 渲染器。
gltfjsx	一个小型命令行工具，可将 GLTF 资产转换为声明性和可重用的react-three-fiber JSX 组件。