编辑导语：作为产物设计师，你知道盘算机是怎样 明确 和实时渲染3D项目的吗？信托 你也曾为这个问题而困扰，本篇文章里，作者总结了响应 的理论问题，也允许 以帮你买通3D和H5之间的障碍。
前言设计师需求中3D视觉平移到互动H5中的项目越来越多，three.js和PBR事情流的团结 却一直没有被系统化地整理。
和列位前端仙人 一起做项目，也一起磕磕碰碰出了爱与痛的意会 。小小总结，希望3D去往H5的蹊径 天堑变通途。
本手册主要分为两大部门：
Part 1 理论篇：主要让设计师相识 盘算机到底是怎样 明确 和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。
Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思绪 、以及gltf事情流，并动态讨论项目经常遇到的还原问题。
本文主要for刚接触3D图形学的设计师，仅截取了最常用的理论知识和各人一起学习。
部门涉及手艺 美术或盘算机图形学的形貌 可能不甚严谨，希望各人多多交流讨论哈。
着实 无论H5开发用到的是哪种webGL，设计相关的材质制作基本照旧基于PBR思绪 举行 的，以是 这边建议列位亲可以先去阅读一下Substance官方宝册《The PBR Guide》。
理论篇设计师在还原3D类型的互动H5项目的时间 一定想过这个宇宙最终 问题：为什么H5/Web实现的3D效果和C4D里渲染出来的差异那么大？
着实 这是我们对实时渲染引擎（UE、Unity、three.js等）和离线渲染工具（Redshift、Octane、Vray等）的差异存在误解：一是离线渲染工具是基于真实光照情形 来盘算每颗像素的着色，实时渲染若是 要实现这种效果需要泯灭更多硬件基础和算力去模拟光照（没个好显卡都开不动光追）。
虽然UE5的实时渲染手艺 和硬件兼容性已经让各人大吃一惊，但在现实 项目，尤其是需要兼容低端装备 的H5来说，渲染能力照旧相对有限的。二是对于游戏或H5互动网站现实 应用来说，流通 的互动体验优先级往往高于画面细腻 度，以是 牺牲视觉保性能也是常见情形 。
Octane离线渲染效果 VS three.js 实时渲染效果
材质细节、全局光照及投影、以及抗锯齿体现差距显着
当实时渲染效果与设计预期差距过大时，设计师能多相识 一些基础的盘算机图形学，也许就能更好地和开发同砚 商讨性价比更高的视觉实现和资源优化方案（以及更多Battle的筹码）。
1. 着色器与着色算法差异（靴靴微硬核预警）首先我们要知道盘算机之以是 能在2D屏幕上画出3D的图像，是由于 有着色器（Shader）在绘制，它将我们三维空间里的模子 与光照信息举行 转换，并光栅化为二维图像。在盘算机图形学中，着色器是用于对图像的材质（光照、亮度、颜色）举行 处置赏罚 的程式。
常用的着色器分为四种：像素/片元着色器（Pixel/Fragment Shader）、极点着色器（Vertex Shader）、几何着色器（Geometry Shader）、细分曲面着色器（Tessellation Shader）。
像素/片元着色器与极点着色器（Vertex Shader）在webGL处置赏罚 历程中都有使用，极点着色器先将模子 中每个极点的位置、纹理坐标、颜色等信息举行 转换装配，再由片元着色器对3D信息光栅化并转换成2D屏幕信息。（关于着色器差异，感兴趣的同砚 可以直接跳到附录审查 。）
着色器是怎么把极点中所带有光照、纹理等信息转换并重修 在二维图像的像素中呢？GPU中是透过差异的着色算法来实现的。
一种是获取每个三角形的插值（Interpolate）来实现，这种要领称作Per Vertex Lighting，可是 当三角型很大的时间 ，插值往往不够精准。此时还可以引用另一种要领Per Pixel Lighting，盘算每个像素的光照信息，获得更好的渲染效果，可是 往往也带来更大的盘算量。
一样平常 常见盘算机图形着色算法有三类：Flat Shading、Gouraud Shading、Phong Shading。这些算法虽然看起来和我们设计师没啥关系，但事实上在后面相识 three.js材质时，就会发现他们在泛起时的差异。
Flat、Gouraud、Blinn-Phong着色法较量 [ F1, ©️Stefano Scheggi ]
1）平直着色法 Flat Shading
这种着色法以为 模子 中所有面都是平的，统一 个多边形的上恣意 点的法线偏向都相同。着色时，会优先选择多边形的第一个极点或三角形的几何中央 盘算颜色。这种着色法实践上的效果很像低面模子 ，也较量 适合使用在高速渲染的场景。值得注重 的是，这种着色法难以做出平滑高光效果。
2）高洛德平滑着色法 Gouraud Shading
这是一种平滑的着色要领，在着色时会先盘算三角形每个极点的光照特征 ，使用 双线插值去补齐三角形区域内其他像素的颜色。这个着色法的比起平直着色法增添 了插值的细节，而且也比Phong着色法渲染单个像素的光照特征 的性能要高。
可是 在渲染高光时，可能会由于 无法获取准确 的光照值而泛起一些不自然的过渡（或T型毗连 容易被错误绘制），此时可以思量 对模子 举行 细分或使用漫反射材质。
3）Phong平滑着色法 Phong Shading
与Gouraud Shading差异的是，它会对极点的法线举行 插值，并透过每个像素的法向量盘算光照特征 。这种做法能绘制出细腻 、精准的曲面，可是 盘算量较大。Blinn-Phong是Phong的进阶版，着色性能更好，且高光弥散更自然。
2. 基本光照模子 Illumination Model简朴相识 盘算机怎样 绘制3D图形后，再来看看它要怎样 详细 明确 我们所设计的3D场景。
3D转换成2D，也就是3D栅格化的历程中，每一个像素的颜色是需要基于它所在的情形 盘算出来，而基于被渲染物体外貌某个点的光强度盘算模子 就被称为光照明模子 （Illumination Model）或光照模子 （Light Model），透过盘算光照模子 所获得外貌位置对应像素颜色的历程被称为外貌绘制（Surface Render）。
*请注重 这里说的光照模子 并不是指设计师明确 的3D立体模子 ，而是指模子 工具外貌光照效果的数学盘算模子 。
影响光照模子 的因素有两大方面，一是自己给渲染物体材质设置的种种光学特征 （颜色反射系数、外貌纹理、透明度等），二是场景中光源光及情形 光（场景中各个被照明工具的反射光）。
传统光照模子 都是对漫反射和镜面反射的理想化模拟，若是 要还原基于真实物理天下 的效果，光照模子 需要遵照 能量守恒定律：一个物体能反射的光一定少于它接受的光。在实践层面则体现为，一个漫反射更强且更粗拙的物体会反射更暗且规模更大的高光，反之亦反。
基于PBR的光照模子 需要遵照 能量守恒定律 [ F2, ©️Joe Wilson ]
光照模子 与着色组合在差异的渲染需求下也会有差异的应用：
真实感渲染（Photorealistic Rendering）：目的是基于真实物理天下 对3D场景举行 仿真还原。非真实感渲染（Unphotorealistic Rendering）：也被成为气焰 气焰 化渲染（Stylistic Rendering），会更抽象化地对模子 举行 重绘。真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]
1）真实感渲染 Photorealistic Rendering
思量 到真实感渲染对硬件的依赖，现在 webGL中使用的一样平常 以简朴的局部光照模子 为主（只盘算光源对物体的光照效果，不盘算物体间的相互影响，我们看到的“假反射”通常透过贴图来举行 模拟），凭证 反射形态，经典的光照模子 有下列几种：
Lambert 漫反射模子 ：
这种模子 的粗拙外貌（如塑料、石材等）会将反射光从各个偏向反射出去，而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体（Lambertian Reflectors），也就是我们熟悉的橡胶材质。
漫反射模子 与其他光照模子 对比 [ F4, ©️ViroCore ]
Phong 镜面反射模子 ：
这是一种以实验及视察为合成基础的非物理模子 。它的外貌反射同时团结 了粗拙外貌漫反射清静 滑外貌镜面反射，但Phong模子 在高光处的体现有过渡瑕疵。
Phong镜面反射模子 视觉组成 [ F5 ]
Blinn–Phong 模子 ：
是在OpenGL和Direct3D里默认的着色模子 ，一种调优后的非物理的Phong模子 ，极点间的像素插值使用Gouraud着色算法，比Phong着色算法性能更好，而且高光效果也更平滑。
Phong及Blinn-Phong镜面反射模子 对比 [ F6 ]
Cook-Torrance/GGX 光照模子 ：
若是 你用过C4D的默认渲染器，那么一定在材质的反射通道设置中见过它俩。
这是相对高级的光照模子 ，差异于Phong和Blinn-Phong模子 仅仅对漫反射及镜面反射举行 理想化模拟，这两个光照模子 基于差异物理材质加入了微外貌（Microfacet）的看法，并思量 到外貌粗拙度对反射的影响，对镜面反射举行 了调优，使得高光的长尾弥散越发自然，也是现在 PBR渲染管线（Unity、UE）中较常用的光照模子 。
Phong、Blinn-Phong与GGX镜面反射模子 对比 [ F7, ©️ridgestd ]
次外貌散射模子 Subsurface scattering/SSS：
终于有一个设计师们常见的看法了。次外貌散射是指光穿透不透明物体时（皮肤、液体、毛玻璃等）的散射征象 。现实生涯 中，大部门物体都是半透明的，光会先穿透物体外貌，继而在物体内被吸收、多次反射、然后在差异的点穿出物体。以皮肤为例，只有或许6%的反射是直接反射，而94%的反射都是次外貌散射。
BSSRDF（双向次外貌反射漫衍函数）是用于形貌 入射光在介质内部的光照模子 ，现在 也被应用在最新的虚拟角色皮肤实时渲染中；但由于SSS材质的盘算需要依赖深度/厚度数据，以是 webGL对这种高级光照效果的还原水平照旧相对有限的。
Unity中模拟次外貌散射光照模子 效果 [ F8, ©️Alan Zucconi ]
2）非真实感渲染 Non-Photorealistic Rendering-NPR
也就是我们常说的3渲2，非写实渲染气焰 气焰 也是从人们对3D场景套以2D绘画或自然媒体材质需求而演化过来的。因此非写实渲染手艺 现实 上是差异光照模子 +差异着色处置赏罚 配合作用的气焰 气焰 化输出，现在 也被大量应用在动画及游戏中，像《英雄同盟 ：双城之战》《蜘蛛侠：平行宇宙》都是顶级三渲二大作。
在差异通道中混淆应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]
Cel Shading/Toon Shading：
卡通着色，一种最常见的以3D手艺 模拟扁平气焰 气焰 的着色形式，通常以极简的颜色、渐变及明确的外框线等漫画元素作为气焰 气焰 特征。
Blender中差异类型的Toon Shader效果 [ F10, ©️Blendernpr]
日本创意编程师Misaki Nakano制作了一个很是有趣的Toon Shading H5互动页面，各人可以体验一下差异着色形态下很是模子 的视觉体现。搜索体验：https://mnmxmx.github.io/toon-shading/dst/index.html
Misaki Nakano的Toon Shader互动网站 [ F11, ©️Misaki Nakano]
Customized Shading：
现在 越来越多渲染器可支持设计师及工程师凭证 项目需求对着色举行 定制化处置赏罚 ，以产出更具气焰 气焰 化和艺术化的着色效果。例如工业界插画常用的冷暖着色（Gooch Shading），以及更具绘画质感的素描着色（Hatching）及油画水墨画等自然媒体着色，都已经深入到了我们一样平常 的创作之中。
在Unity中，基于真实感渲染的贴图效果与NPR水墨气焰 气焰 化着色效果对比 [ F11, ©️邓佳迪]
3. Three.js 材质着色对比说完真实感与非真实感渲染差异后，我们再来看看Three.js中的材质。
和许多渲染引擎一样，除了原生材质外，webGL的材质和着色都是可以凭证 需求举行 定制的，但这往往会也带来较高的开发成本及兼容性风险。思量 到H5项目的现实 应用场景，下表枚举 了Three.js原生材质的对比，包罗了材质特征 优势、贴图差异及适用场景，各人可以基于项目需求快速选择并混淆使用：
three.js材质对比表
4. 色彩形貌 与治理 Color Space虽然着色、光照模子 以及材质渲染对3D体现有着最为直观的影响，但3D事情流仍有一个隐秘而要害的环节——色彩治理。
真实天下 中凭证 物理定律，若是 光的强度增添 一倍，那么亮度也会增添 一倍，这是线性的关系。理想状态下，像素在显示屏上的亮度也应为线性关系，才气切合人眼对真实天下 的视察效果（如图b：横坐标为像素的物理亮度，纵坐标为像素显示时的现实 亮度）。
可是 显示器的成像由于电压的影响，导致输出亮度与电压的关系是一个亮度即是电压的1.7-2.3次幂的非线性关系，这就导致了当电压线性转变 时，亮度的转变 在暗处转换时变慢，若是 显示器不经由 矫正，暗部成色也会整体偏暗（如图c）。现在 大多数显示器的Gamma值约为2.2，以是 也可以明确 Gamma2.2是所有显示器自带的一个遗传病。
红色上曲线=Gamma0.45=sRGB Space绿色下曲线=Gamma2.2=显示器真实成像缺陷蓝色斜线=Gamma1.0=Linear Space 真实物理天下 线性关系为了矫正显示器的非线性问题（从图c校正回图b），我们需要对它举行 一个2.2次幂的逆运算（如图a），在数学上，这是一个约0.45的幂运算（Gamma0.45）。经由 0.45幂运算，再由显示器经由 2.2次幂输出，最后的颜色就和现实 物理空间的一致了，这套校正的操作就是伽马校正（Gamma Correction）。
而我们常见的sRGB就是Gamma0.45所在的色彩空间，是1996由微软与惠普配合开发的尺度色彩空间。当照片素材一最先 储存成sRGB空间，相当于自带一个Gamma0.45的遗传病抗体，当它被显示器显示时，就自动中和了显示器Gamma2.2的缺陷，从而显示出与物理天下 相符的亮度。
另一个校正缘故原由 是由于 人眼在接受光线时的敏感度也不是线性的，人对于暗部的感知更敏感，对高亮区域感知较弱，而且人眼感知光强度与光的物理强度也恰恰 是对数关系。为了在暗部泛起更多人眼可感知的细节，Gamma0.45的色彩空间中（如图a），像素的现实 亮度也会高于它的物理亮度。
人眼感知光强度与发射光真实物理强度对比
上面那一大段确实有点绕，但也就说回来为什么建议渲染时使用线性空间（Linear Space）了。由于 在盘算机图形中，着色器的运算基本上都是基于物理天下 的光照模子 来保证渲染真实性的，若是 模子 的纹理输入值是非线性的（sRGB），那么运算的条件 就不统一，输出的效果 自然就不那么真实了。
而在大多数事情流及渲染软件中，大部门贴图资源都是默认输出sRGB的（设计师作图情形 一样平常 也在sRGB，所见即所得），而法线贴图、光线贴图等纹理（纯数值类纹理，只用于盘算）又是Linear的，这个部门就需要我们凭证 渲染引擎自己的特征 ，来判断是否需要对差异的贴图举行 差异的”去Gamma化”处置赏罚 了（WebGL、Unity、Octane等）。
将所有贴图举行 去Gamma化，统一为Linear空间后，再在渲染输出时由引擎统一举行 Gamma校正，这个时间 在显示屏里显示的就是靠近 真实天下 的效果了。
更多色彩空间的现实 效果较量 ，各人可以看下Unity的文档：《Linear/Gamma渲染较量 》：
https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html
回到H5所用的Three.js，它的着色器盘算也是默认在Linear空间，若是 最终渲染时不转化为sRGB，在装备 显示时可能会造成色彩失真。在three.js中色彩治理的事情流会凭证 导入模子 Asset的差异而有所差异，若是 贴图与模子 是划分导入场景，则建议可实验以下游 程：
1）输入贴图数据 sRGB to Linear: 含色彩的贴图（基础材质、情形 、发光）设编码为sRGB（texture.encoding = sRGBEncoding），或将渲染设置renderer.gammaInput设为True，可将原为sRGB的贴图转换为Linear，而原纯数值类贴图（法线、凹凸等）仍然 保持Linear；这一操作可保证贴图输入数据的准确 性与统一性。
2）刷新材质：当材质编码类型被修改后，需要设置Material.needsUpdate为True，以重新编译材质。
3）输出渲染 Linear to sRGB: 校正渲染输出值的Gamma：renderer.gammaOutput = true; renderer.gammaFactor = 2.2；以供显示屏准确 显色。
《Part1-理论篇》就先告一段落啦，若是 你偶发失眠，建议可以重复品味 延伸阅读的内容。
《Part2-实践篇》会继续完善three.js场景、材质贴图的制作思绪 、以及gltf事情流，并动态讨论项目经常遇到的还原问题。
2022，咱们需求再见。
附录1）着色器差异
① 像素着色器 Pixel Shader
也称为片元/片断 着色器（Fragment Shader）, 为二维着色器。它纪录了每一个像素的颜色、深度、透明度信息。最简朴的像素着色器可用于纪录颜色，像素着色器通常使用相同的色阶来体现光照属性，以实现凹凸、阴影、高光、透明度等贴图。同时，他们也可以用来修改每个像素的深度（Z-buffering）。
可是 在3D图像中，像素着色器可能无法实现一些重大 的效果，由于 它只能控制自力 的像素而并不含有场景中模子 的极点信息。不外，像素着色器拥有屏幕的坐标信息，可以依据屏幕或相近 像素的的材质举行 采样并增强，例如，Cel Shader的边缘强化或一些后期的模糊效果。
② 极点着色器 Vextex Shader
是最常见的3D着色器，他纪录了模子 每个极点的位置、纹理坐标、颜色等信息。它将每个极点的3D位置信息转换成2D屏幕坐标。极点着色器可以处置赏罚 位置、颜色、纹理的坐标，可是 无法增添 新的极点。
③ 几何着色器 Geometry Shader
是最近新兴的着色器，在Direct3D 10 和Open GL3.2中被引用。这种着色器可以在图元外天生 新的极点，从而转换成新的图元（例如点、线、三角等），而优势也是在于可以直接在着色中增添 模子 细节，减低CPU肩负。荟萃着色器的常用场景包罗点精灵（Point Sprite）天生 （粒子动画），细分曲面，体积阴影等。
④ 细分曲面着色器 Tessellation Shader
在OpenGL4.0和 Direct3D 11中泛起，它可以在图元内镶嵌更多三角体。为传统模子 新增了两个着色步骤（一是细分控制着色，又称为Hull Shader，二是细分评估着色，又称为Domain Shader），两者团结 可以让简朴的模子 快速获得细分曲面。（例如，含细分曲面效果的模子 加上置换贴图就可以获得极其传神细腻的模子 ）
2）一些术语的简朴明确
GL：Graphics Library, 图形函数库。
webGL：Web Graphics Library，Html 5可接入的3D绘图协议/函数库，可以为H5 Canvas提供3D渲染的种种API。
Z-Buffering：
深度缓冲，3D图像在渲物体的时间 ，每一个天生 的像素的深度会存储在缓冲区中。若是 另一个物体也在统一 个像素中发生渲染效果 ，那么GPU会较量 两个物体的深度，优先渲染距离更近的物体，这个历程叫做Z-Culling。当两个物体靠很近的时间 （16-bit），可能会泛起Z-Fighting，也就是交叠闪灼 的征象 ，使用24或32bit的Buffer可以有用 缓解。
Rendering Pipeline：
渲染管线/渲染流水线/像素流水线，为GPU的处置赏罚 事情流，是GPU认真 给图形配上颜色的专门通道。管线越多，画面越流通 细腻 。
渲染管道细节事情流 [ F12 ]
Rasterization：
光栅化/点阵化/栅格化，就是将管线处置赏罚 完的图元转换成一系列屏幕可视的像素，历程包罗：图元拼装（Primitive assembly）-三角形遍历（Triangle Traversal）- Pixel Processing-Merging。
3）参考文献+延伸阅读
[1]Hearn, D. and Baker, M.P., 2004. Computer graphics with OpenGL, 盘算机图形学第四版 . Upper Saddle River, NJ: Pearson Prentice Hall,.
[2]Akenine-Möller, T., Haines, E. and Hoffman, N., 2019.Real-time rendering. Crc Press.
[3]锐萌瑞, 经典光照模子 （illumination model）
https://blog.csdn.net/qq_34552886/article/details/79089418
[4]Krishnaswamy, A; Baronoski, GVG (2004). “A Biophysically-based Spectral Model of Light Interaction with Human Skin” (PDF).
[5] List of Common Shading Algorithm：
https://en.wikipedia.org/wiki/List_of_common_shading_algorithms
[6] 0憧憬0, 剖析Unreal Engine超真实人类的渲染手艺 Part 1 – 概述和皮肤渲染
https://www.cnblogs.com/timlly/p/11098212.html
[7] 毛星云, 【《Real-Time Rendering 3rd》 提炼总结】(十) 第十一章 · 非真实感渲染(NPR)相关手艺 总结
https://zhuanlan.zhihu.com/p/31194204
[8] 卜噪大仙，局部光照模子 杂记【Lambert/Phong/Blin-Phong/BRDF/BSSRDF/Cook-Torrance】
https://www.jianshu.com/p/96ca495669d6
[9] puppet_masterm, Unity Shader-Matcap（材质捕捉）
https://blog.csdn.net/puppet_master/article/details/83582477
[10] WestLangley, documentation on gamma correction incorrect? #11110
https://github.com/mrdoob/three.js/issues/11110
[11] donmccurdy, Best practise for color management
https://github.com/aframevr/aframe/issues/3509
https://github.com/mrdoob/three.js/issues/11337#issuecomment-440795075
[12] alteredq, Questions about the use of Gamma Correction in the WebGL Renderer #1488
https://github.com/mrdoob/three.js/issues/1488
[13] Friksel, What’s this about gammaFactor?
https://discourse.threejs.org/t/whats-this-about-gammafactor/4264/3
[14] PZZZB，Linear Space Lightning、Gamma、sRGB详情解说：
https://zhuanlan.zhihu.com/p/66558476
[15] Learn OpenGL, Gamma Correction
https://learnopengl.com/Advanced-Lighting/Gamma-Correction
[16] 柯灵杰，3D图形学基础：
https://zhuanlan.zhihu.com/p/27846162?source=post_page—–b1cde1f23adf———————-
[17] Klayge游戏引擎，关于D3D11你必须相识 的几件事情（三）
http://www.klayge.org/?p=1404
[18] 拓荒犬, GPU渲染流水线简介
https://zhuanlan.zhihu.com/p/61949898
[19] Steve Baker, Learning to Love your Z-buffer.
https://www.sjbaker.org/steve/omniv/love_your_z_buffer.html
[20] Steve Baker, Alpha-blending and the Z-buffer.
https://www.sjbaker.org/steve/omniv/alpha_sorting.html
[21] Microsoft, Direct3D 11 Graphics-Tessellation Stages
https://docs.microsoft.com/en-us/windows/win32/direct3d11/direct3d-11-advanced-stages-tessellation#domain-shader-stage
[F1] Stefano Scheggi, Flat shading vs. Gouraud shading vs. Blinn-Phong shading
https://www.youtube.com/watch?v=VRw3GuVdldo
[F2] Joe Wilson, Physically-Based Rendering, And You Can Too!
https://marmoset.co/posts/basic-theory-of-physically-based-rendering/
[F3] Autodesk, Apply Visual Effects
https://download.autodesk.com/us/mudbox/help2011_5/index.html?url=./files/WS1a9193826455f5ff5cf1d02511b1d000978-6b44.htm,topicNumber=d0e8759
[F4] Virocore, Lighting and Materials
https://virocore.viromedia.com/v1.0.0/docs/3d-scene-lighting
[F5] Wikipedia, Phong Reflection Model
https://en.wikipedia.org/wiki/Phong_reflection_model
[F6] Wikipedia, Blinn–Phong reflection model
https://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model#cite_note-4
[F7] Ridgestd，从Microfacet到GGX反射模子
http://ridgestd.github.io/2019/03/18/ggx-shader/
[F8] Alan Zucconi, Fast Subsurface Scattering in Unity (Part 2)
https://www.alanzucconi.com/tag/sss/
[F9] Polygon Runway, Toon Shading Tutorial for Blender 2.8 with Commentary
https://www.youtube.com/watch?v=kriKwtzZWFg
[F10] Blendernpr, Basic Toon Shaders with Blender
]http://blendernpr.org/basic-toon-shaders-with-blender-internal/
[F11] 邓佳笛，在Unity举行 水墨风3D渲染的实验
https://zhuanlan.zhihu.com/p/25346977
[F12] Wikipedia, Graphics_pipeline
https://en.wikipedia.org/wiki/Graphics_pipeline
本文由 @腾讯ISUX 原创宣布于人人都是产物司理 。未经允许 ，榨取 转载
题图来自Unsplash，基于CC0协议。