前言
好久没写过东西了哈哈，有些时候当你会得越多、学习得越多、或者接触的牛人多了，就会发现知道原来自己很渺小，自己懂得很少，有些东西真的需要各种天赋，尤其是数学天赋。比如：图形学、
GAMES101:现代计算机图形学入门。废话不多说，先上一个自己刚画的简版冰墩墩《人手一墩，用代码给自己画一个“冰墩墩”》，再上两个一日本大神 Ykob 的超惊艳的 Three.js 作品《sketch-threejs Fireball 火球效果》【源码】，或者这个《sketch-threejs Fireball2 火球效果 II》【源码】。可以感觉一下实现这两效果需要那些知识，呵呵；也可以去我的两练手项目看源码《Play Webgl & Canvas In VueJs》【源码】与《Play Three.js & GLSL in Vue》【源码】。
回归正题
这里与其说是写教程，不如说是自己对这段时间的学习的一次回顾，加深理解。回想当初，我自己学习 Webgl / Three.js 的那些日子。感觉无它，就是强撸例子；为了提高自己的兴趣度，先自己去 Three.js
官方网站的例子上先撸下几个例子，改造一下，然后自嗨，自我感觉良好，比如：我的 Three.js 例子《3D 动漫角色欣赏》。当然我也自己写了篇文章《Three.js 入门篇-制作 3D
动漫角色欣赏》，嘴巴上扬：）。经过一轮各种绚丽的例子的熏陶，自己慢慢有了些概念，脑海中开始有各种感觉了，各种 Fantasy，Nice!
3D 畅想
想象一下，现在我们要拍摄一个电影场景（Scene 场景），当然场景里面可以添加一些雾（Fog 雾），摄像机（Camera 相机）准备好啦。
太可恶了，居然经费不够，没办法去法国埃菲尔铁塔现场取景，没办法了，找个正方体状的大房间，室内四周前、后、左、右、上、下各贴一长大的法国埃菲尔铁塔现场背景图吧。这时，我们置身在这个房间（Skybox 天空盒）里仿佛身临其境。
好了，背景有了，灯光师就位，开始打灯啦，这时灯光师取出他们各个顶级灯光（Light 光源）设备及全局照明方案（GI: Global Illumination 全局照明）。直接取太阳白光（DirectionalLight 平行光可以看作距离很远的光。它发出的所有光线都是平行的）？需要搞点温暖点的全局环境光配合（AmbientLight 环境光源，一般不会单独使用，需要配合其他光源类似使用。环境光会照亮场景中的所有物体，不能用来投射阴影【CastShadow 投射阴影】，因为环境光是没有方向的）？当然也可以开比较常用普通的电灯（PointLight 点光源）、比较醒目的聚光灯（SpotLight 聚光灯）？
好，现在灯光师的工作完了，现在男、女主角（Mesh 网格，3D 模型都是一个或者多个 Mesh 构造而成）因为要拍摄不同的情节，需要换不同的妆（材质 Material，里面包含可配置 Texture – 纹理 / 贴图、Transparent – 透明度、Color – 颜色、Specular – 高光的颜色、Shininess – 光泽度 / 反光度、Emissive – 自发光度、Diffuse Reflection – 漫反射，等等光学模型【比如：Phong、Blinn Phong、PBR / Physicallly Based Rendering】都可以配置；除此之外你还可以用类似 C 语言的 Shader 着色器语言【GLSL – OpenGL Shading Language、HLSL – High Level Shading Language、Cg – C for Graphic】自己控制 GPU 来按需渲染），轮到化妆师出场了。如果是一个 3D 角色模型的话，需要找建模师帮忙建模，导出不同格式的模型（常见的 GLTF、OBJ 文件格式等等）。
如果 3D 模型自身头、手脚、身体各部位需要动的话，这就是骨骼动画（Skeleton / Bone Animation）范畴；除了人物自身的骨骼运动，如果要真正的让 3D 模型能在 3D 世界里面像现实世界一样自由自在的运动（Rigid Motion 刚体运动）或者变形（Transform）？这时的就要改变物体的位置（Position Translation）、比例（Scale）、旋转（Rotation），更加高级更加复杂的刚体运动需要物理引擎（Physics Engine 比如：Bullet、Ammo）辅助；当然也有简单的几何模型（Geometry 几何模型），比如球体（SphereGeometry）、正方体（BoxGeometry）、平面（PlaneGeometry）等等。最后还相机也可以移动的（常用的相机动画），使用相机动画可以实现各种超炫的航拍效果哦。
一个几何模型 Geometry 加上一个材质 Material 就可以合成一个简单的 网格模型 Mesh 啦，但有时模型比较粗糙，看上去不怎么好看，怎么办？这时，需要我们加后期处理（Post Processing），常见的如让不够平滑的边边角角平滑点（AA – Anti-aliasing 抗锯齿，可采用的方案一般有 FXAA、SMAA、MSAA、TXAA）、加点虚光（Bloom Unreal）特效、给模型加上描边效果（Outline）等等。
话说，摄影师还可以选择不同的相机类型来拍出不同的效果，比如如果选择最常用的是透视相机（PerspectiveCamera 透视投影相机），这个相机好，可以拍出远小近大的效果更接近现实情况；如果选择是正交投影相机（OrthographicCamera 正投影相机 / 平行投影），其效果是另一种风格，远近平行的效果，看上去远近一样，不太接近现实，但也有大量适用场景，比如机械、工业设计领域常常采用正投影 / 平行投影。当然还有很多其他特效类的相机类型，比如：立体相机（StereoCamera），立方体相机或全景相机（CubeCamera）等等。
然后，摄影师可以按需使用常见的轨道控制器（OrbitControls 轨道控制器）操控相机按不同的角度或者不同的距离进行拍摄；也可以使用第一人控制器（FirstPersonControls 第一人控制器），这个强悍，比如平时的 4D 电影，可以拍出我们就是主角，在开火车时时，我们感觉就是火车老司机的感觉，太爽了；还有其他飞行控制器（FlyControls 与第一人控制器有点像）等等。
万事俱备，开搞啦！现在得需要一个渲染器（Renderer）把上面拍的东东逐帧（AnimationFrame）渲染出来。
继续扯淡，一切只是想让你们更快的由入门到“放弃”，你可以把这个作为“劝退”指南
注意，上面每出现的一个英语词语，都有一定的学习量，或者就凭你不可能掌握，每个人都可以把它们按照学习量分为三个等级，分别按自己能加评估分别是：我可以尝试学学，我不太容易掌握，我不可能掌握。
对于我自己而言，我的学习之路
1、我可以尝试学学并已经可以驾驭的：
1.1、我可以模仿 Three.js / Babylon.js 官网 Demo 来实现类似的效果。
1.2、我可以改造 Three.js / Babylon.js 官网的 Demo 来实现一些不太复杂的我想要的效果。
1.3、我可以读懂部分 Three.js 源码，并可以开发一些简单的 Three.js 插件。
1.4、我可以模仿 CesiumJS 官网 Demo 来实现类似的效果。
1.5、没错，我会 ctr + c/v，我是 API 调用能手：）。
2、我不太容易掌握，但我已经学会了一丢丢的：
2.1、把 Webgl 的 Webglfundamentals 教程源码撸了一遍（死啃烂啃、还行）。
2.2、改造 Webglfundamentals 中的 Demo 来实现一些不太复杂的我想要的效果。
2.3、我可以读懂大部分 Webglfundamentals 源码，并可以使用 Webgl 开发一些简单效果。
2.4、我把线性代数中矩阵 / 向量（Matrix & Vector）的基础都重新学了一遍，并使用 gl-matrix.js 来更好的操作现有的 Demo，我可以读懂部分 gl-matrix.js 源码。
2.5、我实践了在 Canvas 2D 作图中使用矩阵 / 向量实现想要的效果。
2.6、我可以模仿官网 粒子系统（Particle System）的 Demo 来实现类似（一样：））的效果。
2.7、我可以参考网络上的代码在 Webgl 实现一个属于自己的 PerspectiveCamera 并可以控制其视角。
2.8、我可以参考网络上的代码实现一些 Glsl Shader 的效果。
2.9、我正在学习怎么玩 Shadertoy，并有能力改造一些好玩的效果。
2.10、我开始学习 WebGpu，并可以读懂 WebGpuSamples 的一些例子。
2.11、各种常用图形相关基础数学、图论、算法。如（各种求交算法 intersect、AABB、OBB、Ray、AStar、BVH、Dijkstra 等等）
3、我不可能掌握，但我已经开始尝试：
3.1、去看图形学的一些 Paper 论文、图形算法、超级绕的数学公式去实现出来，太难了，我就是个 Loser。
3.2、光学模型【比如：Phong、Blinn Phong、PBR / Physicallly Based Rendering】自已实现一次？立了 Flag，开始了，有点想放弃。
3.3、看到 Shadertoy 中的 iq 等大神一些效果，才知道什么是差距，才知道我不配玩这个。
3.4、网格分割、八叉树实现框选、模形减面，百度一下被劝退。
3.5、Ray、RayCaster、Ray Tracing、Ray Marching，Path Tracing，不就是光线步进、光线 / 路径跟踪、射线检测吗？已经开始了，进度为 0 ：）
3.6、3D 编辑器功能模型拆分、模型合并、模型编辑 ：）逗我玩呢，我还没有开始。
3.7、比如说自己实现一个 3D 渲染引擎 ：）洗洗睡吧。
3.8、各种图像算法。如图像缩放算法往往基于插值实现，常见的图像插值算法包括最近邻插值（Nearest-neighbor）、双线性插值（Bilinear）、双立方插值（bicubic）、lanczos插值、方向插值（Edge-directed interpolation）、example-based插值、深度学习等算法。
3.9、各种 2D 图形布局算法。经典的 Reingold–Tilford tidy 布局算法、生态树 Dendrogram 布局算法、缩进树 IndentedTree 布局算法、脑图树 Mindmap 布局算法等等
4.0、各种点连接之间的路由算法。
| 路由名称 | 说明 |
|---|---|
| orth | 正交路由，由水平或垂直的正交线段组成。 |
| oneSide | 受限正交路由，由受限的三段水平或垂直的正交线段组成。 |
| manhattan | 智能正交路由，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。 |
| metro | 智能地铁线路由，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）。 |
| er | 实体关系路由，由 Z 字形的斜角线段组成。 |
4.0、计算机图形流体仿真 （Fluid Simulation），如水、海平面
下一章标题：待定
欲知后事如何，只须观看前事。
交流与学习
本文作者：Nelson Kuang，欢迎大家留言及多多指教
版权声明：欢迎转载学习 => 请标注信息来源于 http://www.kt5.cn/fe/2022/01/12/webgl-three-js/
