HTML5与WebGL编程（3）：Three.js中的图形和渲染

   Three.js提供了人们对3D代码库期望的特性，以及用多边形网格构建的2D和3D几何图形，包含层级结构物体和变换的场景图像，材质、纹理和灯光，实时阴影，开放给用户定义的可编程着色器，以及一个可用于高级特殊效果的、支持多通道和延迟渲染技术的灵活渲染系统。

3.1 几何图形和网格

    包括预置的几何形状（如立方体和圆柱）、路径绘制形状、2D挤出几何体，以及用户可扩展的基类，以供我们自由添加自定义的几何形状。

    几何形状基础类：scr/core/Geometry.js基类，

    多数时候，并不直接使用编程方式来构造几何形状，而是直接在程序中载入用专业的建模软件（如3ds Max、Maya和Blender）所构建的3D模型。

    examples/webgl_loader_obj_mtl.html

     Three.js提供了一系列用于转换和加载模型文件的静态函数。为多种文件格式提供了加载器，某些格式只提供了对集合形状和材质的支持，但另一些可能更为复杂：包括整个场景、相机、灯光和动画。

3.2 场景图和空间变换的层级结构

     Three.js基于成熟的场景图（scene graph）概念定义了一个结构化场景的模型。场景图代表一个以父子关系层级结构存储的3D物体集合，场景图的根节点通常用root变量来表示。应用从根节点开始递归地渲染场景的每个子层级。

     利用场景图来管理复杂场景：小汽车的整体沿轨迹运动，而轮子同时在旋转。

     最基本的对象类型是THREE.Object3D（src/core/Object3D.js）。它是所有可见物体（如网格、线条、粒子系统）的基类，同时也是场景图层级结构组织的基本要素。

     每个object3D对象都包含它自身的变换信息，这些信息分别存储在position（位置，即平移）、rotation和scale属性中。通过设置这些属性，可以移动、旋转和缩放相应的物体。后代也将继承这些变换。

3.3 材质

     标准网格材质： src/materials目录，使用三种著名的材质技术来实现

• unlit（又称prelit）：当使用这种材质类型时，仅纹理、颜色和透明度属性会被用于物体的外观渲染。场景的光照对物体的外观不会产生影响。这是用于扁平风格渲染效果或者绘制无需复杂着色效果的简单几何形状的绝佳材质类型。这种材质对已经将光照信息和材质结合计算并预先输出到纹理中（例如使用3D建模工具创建并使用了洪培贴图）的情况同样适用，因为此时物体的外观效果无需由渲染器再次进行计算。
• Phong着色法：这种材质提供了一个简单而优秀的仿真风格的高性能着色模型。它已经成为迅速而简便地实现明暗视觉效果的常规方法，同时许多游戏和应用也还在使用这种着色方法。用Phong着色法渲染的物体会在光线直接照射的地方显示高光区域（镜面反射），物体表面的亮度随各点到光源的距离产生衰减，而背光区域会被渲染成完全黑暗的效果。
• 朗伯反射（Lambertian reflectance）：在Lambert着色法中，物体外观的明暗不随观察者视角的改变而改变。它非常适合于用来表现云朵等会漫反射大部分光线的物体，或者像月球这类具有高反射率（表面反射光非常明亮）的卫星。

3.4 光源

   对应建模工具和其他场景图库中定义的光源类型。最常用的光源类型有定向光、点光源、聚光灯和环境光。

• 定向光：实现了一类产生定向平行光的光源
• 点光源：包含位置信息，但不包含方向信息
• 聚光灯：同时具备位置和方向信息。同时它们提供了用于定义聚光灯内圆锥和外圆锥尺寸（角度）的参数，以及定义它们能够照亮多远距离的参数。
• 环境光：没有位置，也没有方向。它均匀地投射于整个场景。

3.5 阴影

   一直以来，设计师都使用阴影来营造更加真实的视觉效果。通常这些阴影都是伪造的、预渲染的效果，移动场景中的灯光或者移动带阴影的物体，都会破坏这种效果。

3.6 着色器

   使用可编程着色器，开发者可以创建出高性能、高度逼真的视觉效果，从预置的材质和灯光模型的限制中解放出来。

3.7 渲染

   3D场景控制的最终输出是渲染在浏览器Canvas元素上的2D图像。无论是使用WebGL，还是2D Canvas绘图API，抑或是通过更改CSS来使得元素在页面上移动，都无关紧要；我们的最终目的都是绘制像素点。