Three.js可视化系统课程WebGL【24年3月版48章】

参考资料1：https://pan.baidu.com/s/1bHQ8Jkqt2WgHj1zB-uH8Tw 提取码: t8ve 参考资料2：https://share.weiyun.com/QL6JqNUT 密码：hi8h6m 一、WebGL 是什么 对于 WebGL 百度百科给出的解释是 WebGL 是一种 3D 绘图协议，而对此维基百科给出的解释却是一种 JavaScript API。由于 WebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果，我们可以将其理解为一种帮助我们开发 3D 网页的绘图技术，当然底层还是 JavaScript API。 二、WebGL 发展史 WebGL 的发展最早要追溯到 2006 年，WebGL 起源于 Mozilla 员工弗拉基米尔·弗基西维奇的一项 Canvas 3D 实验项目，并于 2006 年首次展示了 Canvas 3D 的原型。这一技术在 2007 年底在 FireFox 和 Opera 浏览器中实现。2009 年初 Khronos Group 联盟创建了 WebGL 的工作组最初的工作成员包括 Apple、Google、Mozilla、Opera 等。 2011 年 3 月 WebGL 1.0 规范发布，WebGL 2 规范的发展始于 2013 年，并于 2017 年 1 月最终完成，WebGL 2 的规范，首度在 Firefox 51、Chrome 56 和 Opera 43 中被支持 三、Three.js和WebGL的关系 WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 HTML5 <canvas> 元素中使用。WebGL提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。 Three.js 是一款 WebGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。 WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js 将入门的门槛降低了一大截，对 WebGL 进行封装，简化创建三维动画场景的过程。只要我们有一定的 JavaScript 基础，有一定的前端经验，用不了多长时间，三维制作会变得很简单。用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。 四、Three.js 的功能 Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js 的具体功能如下： 1、渲染封装 Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源，即它内置了图形编程常用的一些对象种类。 2、面向对象 开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数。 3、功能丰富 Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。 4、性能优良 Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能。 5、交互支持 WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 Three.js 则固化了拾取支持，这就使得应用添加交互功能非常容易。 6、数学运算 Three.js 拥有一个强大易用的数学库，方便在其中进行矩阵、投影和矢量运算。 7、内置格式 既可以使用流行的 3D 建模软件导出文本格式的文件，然后使用 Three.js 加载，也可以使用 Three.js 自己的 JSON 格式或二进制格式。 8、扩展性强 为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到 Three.js 即可。 9、支持画布 Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。 五、WebGL程序的结构 相对于传统网页，支持WebGL的浏览器底层接入了OpenGL/OpenGL ES标准，WebGL通过实现标准支持着色器语言编程语言GLSL ES，在我们实际开发过程中，GLSL ES通常是以字符串的形式存在JavaScript中，我们可以通过JavaScript修改GLSL ES字符串来改变着色器程序。 六、WebGL和OpenGL OpenGL是一种用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，是在个人计算机上使用最广泛的两种三维图形渲染技术之一，另一种是Direct3D。在某种意义上，WebGL就是“Web版的OpenGL”。 OpenGL ES在添加新特性的同时从OpenGL中移除了许多陈旧无用的旧特性，使得在保持轻量级的同时，仍然具有足够的能力来渲染出精美的三维图形。 WebGL的技术规范继承自OpenGL ES，从2.0版本开始，OpenGL支持可编程着色器方法，这个支持可以让我们通过着色器语言编写着色器程序。