0.webgl初识

WebGL是什么呢？

WebGL其实就是JavaScript的API.
它允许了我们直接在浏览器上展示实时交互的3D图形。
WebGL是一个被Khronos小组开发的web标准,其中
Opera与Google（Chrome）、Mozilla（Firefox）、Apple（Safari）和其他3D图形开发人员一起积极参与。
webgl作为html元素的特定上下文运行，这使您可以访问javascript中的硬件加速3d渲染。
因为它运行在元素中，webgl还与所有dom接口完全集成。该api基于opengl es 2.0，这意味着可以在许多不同的设备上运行webgl，如台式计算机、移动电话和电视。您可以在KHRONOS站点查看WebGL规范。

如何运行WebGL？

• Opera12.00 或者更高版本
• Chrome 9或者更高版本，在linux,Mac和windows
• Firefox4或者更高的版本
• Safari5.1或者更高的版本
  此外好的显卡可能回提高WebGl的性能。

WebGL用来干什么？

![Alt text][https://dev.opera.com/articles/introduction-to-webgl-part-1/webgl.jpg]

• 交互式音乐视频
• 游戏
• 数据可视化
• 艺术
• 3D设计环境
• 空间3D建模
• 绘制数据函数
• 创建物理模拟

WebGL是怎么工作的?

webglbii传统的web技术复杂一点，因为它是直接使用显卡而设计的。
所以，这是比较底层的。这样就使得了他可以快速进行复杂的三维渲染，
包括大量计算。

你不需要完全理解webgl的内部工作原理。有几个webgl库可以用于减少其的复杂性。
然而你想用这些库中不包含的特性的时候，了解webgl其实更有必要。或者你想更深入了解
掌握这门技术，知道这些库咋实现的。这时候就有必要了解了解webgl内部工作原理了。

在webgl中编程时，通常要渲染某种场景。这通常包括多个后续绘制作业或“调用”，每个都是通过一个称为渲染管线的过程在Gpu中执行的。

在webgl中，与大多数实时3d图形一样，三角形是绘制模型的基本元素。因此，在webgl中绘图的过程涉及到使用javascript生成指定这些三角形将在何处以及如何创建，以及它们的外观（颜色、阴影、纹理等）的信息。然后，这些信息被输入gpu，gpu对其进行处理，并返回场景的视图。接下来我们将更详细地了解最后一点是如何发生的。

webGL渲染管线，此处略去，后续详解

我们怎么开始使用WebGL

首先要做的是获得一个支持webgl的浏览器。您可以使用您喜爱的javascript开发环境对webgl进行编码。
我们这里使用vscode的是vscode
如果要是做项目的话，我建议使用webgl的库。
因为直接调用webgl API很辛苦，它很底层。
设计webgl的人为什么这么设计呢，这是为了保持它的灵活性，通用性。
他们想的是别人的库会增加便利性，加速简化开发

大多数库都提供了现成的模型、顶点着色器和片段着色器的选择，它们可以极大地减少需要编写的代码量。如果你仍然不相信，可以看看一个月球三维模型的例子代码-有一个库，没有一个库。即使您只是简单地看一下，代码的长度和复杂度的差异也是显而易见的，这是使用库的一个很好的理由。

有许多webgl库。大多数人所做的是在WebGL的基础上创建对3D环境直观的元素，如场景、相机、光源、环境光、现成的形状、材质、纹理和效果（如雾和浮动粒子）。这些元素的概念在各个库中几乎保持不变。但是，它们的使用方式取决于库的体系结构。因为webgl可以是交互式的，所以大多数库也提供了处理事件的简单方法。最后，大多数库还提供了一些顶点和片段着色器。

选择一个WebGL的库

1.Three.js (Github)是一个轻量级的3d引擎，复杂度非常低——这是一个很好的方法。引擎可以使用、 和webgl进行渲染。这是一些关于如何开始的信息，其中对场景中的元素有很好的描述。下面是three.js api文档。就用户数量而言，three.js也是最受欢迎的webgl库，因此如果你陷入困境，可以指望一个热情的社区（irc.freenode.net上的three.js）来帮助你。

2.PhiloGL (Github)

3.GLGE (Github)

4.3D (Github)

---

查看WebGL源码

总结