WebGL 是什么？

WebGL（全称Web Graphics Library）是一种 3D 绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0（OpenGL 是最常用的跨平台图形库）结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。

显然，WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。

OpenGL 和 WebGL 均带有可编程的着色器。如顶点着色器(Vertex Shader)、片元着色器(Fragment Shader)，着色器的编写语言均为 GLSL。如果要说它们的主要区别：

• 首先 WebGL 相对 OpenGL 功能被削减了，例如删除了混合、反走样、雾化、缓存设置等高级场景设置函数，保留了简单、效能的函数；

• 其次是安全问题，它使得显卡硬件直接暴露在恶性代码或者 web 程序面前；

• 最后 WebGL 只是 OpenGL的简易版，性能上比桌面应用还是有一定差距。

Threejs是什么？

threejs 与 webgl 类似 vue 与 html 关系；Three.js是一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中创建和展示动画的三维计算机图形，Three.js 使用了 WebGL。

Three.js是使用MIT开源协议的JavaScript库，底层使用WebGL API来工作。这个库由Ricardo Cabello创造，现在有一个庞大的社区组织来维护更新，几乎每个月都会更新，在使用的时候，我们应该注意教程和Three.js库当前的发行版本号。

这个库最大的目标是简化处理我们使用WebGL的难点，我们只需几行代码就可以绘制带有动画的3D场景，而不必去了解着色器、矩阵算法等晦涩的知识点。

Three.js目前仍是最受欢迎的WebGL库，相关的资料和社区，以及案例都非常丰富

推荐 WebGL、Threejs 学习教程：

• ThreeJS 官方文档：https://threejs.org/docs/index.html

• ThreeJS fundamentals：https://threejs.org/manual/#en/fundamentals

• Threejs 学习教程：https://discoverthreejs.com/tips-and-tricks/

• WebGL fundamentals（有中文）：https://webglfundamentals.org/

• WebGL 编程指南

• glsl shader ：https://www.shadertoy.com/