• 3D骨架：是通过大量的计算将3D世界中所有点投影到二维平面中。
• 3D实体：通过摄像机向投影面发射射线与世界中的物体交汇，把与物体交汇点的颜色渲染到投影面。

Your browser does not support the canvas element.

• 坐标系
• 点、线、面和网格
• 纹理贴图及材质
• 摄像机、视口和投影
• 着色器

• 点：一个点由3个值组成：(x,y,z) —— 表示3D空间内的唯一位置。
• 线：2个点可以连成一条线。
• 面：3个点我们就可以形成一个平面。
• 网格：多个面相互拼接就组成了网格。

• 纹理用来定义一个网格表面的外观，可以是纯色、填充位图，甚至更加复杂。
• 材质就是网格表面的特性，模型外表是否透明、是否会反射等都是通过网格的材质所定义的。

• 在Canvas上看到的3D空间并非一个真实的3D空间，而是用数学算法将模拟的3D空间投射到2D视口的图像而已。
• 投影就是将模拟的三维空间内的物体映射到屏幕上生成一个二维图像的过程。
• 投影分为正交投影和透视投影：投影线垂直于投影面的投影属于正交投影，也称为平行投影；透视投影属于中心投影，它是从某个投射中心将物体投射到单一投影面上所得到的图形，与人们观看物体时所产生的视觉效果非常接近。
• 摄像机是用户观察场景的眼睛，摄像机的视野决定了透视关系和我们在Canvas上看到的内容。

• x = x1 * |(vz - z0)/(vz - z1)|
• y = y1 * |(vz - z0)/(vz - z1)|
• z = z0

为了最终的渲染模型，开发者必须精确的定义定点、变换、材质和相机之间的关系。这就是由着色器来完成的。着色器包含了将模型投射到屏幕上的算法，通常是由类C语言编写，编译并运行在图形处理单元(GPU)中。

• WebGL是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。


• WebGL基于OpenGL ES 2.0，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中。


• WebGL标准由科纳斯组织（Khronos Group）开发和维护，Google、Mozilla、Opera和Apple 等浏览器厂商都是其中的成员，为这一标准做出了显著贡献。

• window下需要安装：the Microsoft DirectX runtime


• 最新的显卡


• 支持的浏览器

• WebGL支持绘制点、线段或三角形。
• 三角形颜色渲染：应用提供一个被称作像素着色器（pixel shader）或片段着色器（fragment shader）的回调，三角形的每个像素都会调用该回调，回调确定应使用哪一颜色绘制像素。
• 三角形顶点计算：WebGL允许您提供自己的被称作顶点着色器（vertex shader）的回调，您将渲染的每个三角形的每个顶点都会调用该回调，它将确定顶点应被绘制在画布的哪一坐标处。


• 通过允许指定任意的顶点着色器，它支持任意坐标转换的实现，这其中包括了3D游戏需要执行的复杂转换。通过接受任意的片段着色器，它支持任意像素颜色计算的实现，其中包括了3D游戏中随处可见的那些微妙的光影效果。

• GPU（图形处理器：Graphics Processing Unit）是一些大规模并行处理器，包含了大量的计算单元，这些单元被设计成是彼此并行工作的，而且是与CPU并行工作的。
• 关于典型的工作负载，在正确使用时，WebGL允许GPU的图形命令与任何CPU端的工作一起并行执行，也即，GPU和CPU应无需等待对方；且WebGL允许GPU尽量利用它的并行处理能力。
• 为了支持在GPU上运行，这些着色器以一种专用的GPU友好语言（类似 C 语言的低级语言，名为 GLSL（OpenGL 着色语言））编写而成
• 为了支持GPU同时运行多个着色器，着色器只能作为一次处理一个顶点或一个像素的回调存在——这样，GPU就可以随意在任何一个GPU执行单元中、以任何一种它所喜欢的顺序来运行着色器。

• 1、设置顶点着色器和片段着色器，并向WebGL提供这些着色器需要读取的所有数据：
  

  -用来描述被绘制的三角形的顶点数据；

  -将被片段着色器使用的位图数据（被称作“纹理”）。

• 2、渲染过程开始为每个顶点执行顶点着色器，该着色器确定三角形的画布坐标。
• 3、所得的三角形被光栅化，这意味着要被绘制的像素的清单已经确定；
• 4、为每个像素执行片段着色器，确定它的颜色；
• 5、一些帧缓存区操作确定这一被计算出来的颜色如何影响最终的帧缓冲区中这一位置上的像素的颜色（实现诸如深度测试和透明度一类的效果）。

• 要使用 WebGL，部分代码以 JavaScript 编写，部分代码则使用一种类似 C 语言的低级语言，名为 GLSL（OpenGL 着色语言）编写。
• 图像的加载、颜色的设置、对象的描述都在 JavaScript 代码中进行。GLSL 代码会将图像、颜色和矢量转换为通过着色器程序在 GPU 上运行。两者的结合使用，为 WebGL 提供极速图形。

• Learning WebGL
• WebGL入门
• Three.js：目前最好的WebGL library，也是浏览器支持最好最广泛的类库。
• Blender：Blender是一个免费和开源的3D建模编辑应用，可以直接导出ThreeJS可用的代码。当然你也可以在其他3D建模工具如3DMax，然后导入到Blender从而生成ThreeJS可用的文件。