2022-1-23 资深UI设计者
设计师需求中 3D 视觉平移到互动 H5 中的项目越来越多，three.js 和 PBR 工作流的结合却一直没有被系统化地整理。
和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望 3D 去往 H5 的道路天堑变通途。
本手册主要分为两大部分：
Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的 3D 项目，以及 three.js 材质和预期材质的对应关系。
Part 2 实践篇：基于 three.js 的实现性，提供场景、材质贴图的制作思路、以及 gltf 工作流，并动态讨论项目常常遇到的还原问题。
本文主要面向刚接触 3D 图形学的设计师，仅截取了最常用的理论知识和大家一起学习；部分涉及技术美术或计算机图形学的描述可能不甚严谨，希望大家多多交流讨论哈。
其实无论 H5 开发用到的是哪种 webGL，设计相关的材质制作基本还是基于 PBR 思路进行的，所以这边建议各位亲可以先去阅读一下 Substance 官方宝册《The PBR Guide》。
设计师在还原 3D 类型的互动 H5 项目的时候一定想过这个宇宙终极问题：为什么 H5/Web 实现的 3D 效果和 C4D 里渲染出来的差异那么大？
其实这是我们对实时渲染引擎（UE、Unity、three.js 等）和离线渲染工具（Redshift、Octane、Vray 等）的差异存在误解：一是离线渲染工具是基于真实光照环境来计算每颗像素的着色，实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照（没个好显卡都开不动光追）。
虽然 UE5 的实时渲染技术和硬件兼容性已经让大家大吃一惊，但在实际项目，尤其是需要兼容低端设备的 H5 来说，渲染能力还是相对有限的。二是对于游戏或 H5 互动网站实际应用来说，流畅的互动体验优先级往往高于画面精细度，所以牺牲视觉保性能也是常见情况。
图 1-Octane 离线渲染效果 vs three.js 实时渲染效果：材质细节、全局光照及投影、以及抗锯齿表现差距明显
当实时渲染效果与设计预期差距过大时，设计师能多了解一些基础的计算机图形学，也许就能更好地和开发同学商讨性价比更高的视觉实现和资源优化方案（以及更多 Battle 的筹码）。
首先我们要知道计算机之所以能在 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 材质时，就会发现他们在呈现时的差异。
图 2-Flat、Gouraud、Blinn-Phong 着色法比较 [ F1, ©️Stefano Scheggi ]
平直着色法 Flat Shading
这种着色法认为模型中所有面都是平的，同一个多边形上的任意点的法线方向都相同。着色时，会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型，也比较适合使用在高速渲染的场景。值得注意的是，这种着色法难以做出平滑高光效果。
高洛德平滑着色法 Gouraud Shading
这是一种平滑的着色方法，在着色时会先计算三角形每个顶点的光照特性，利用双线插值去补齐三角形区域内其他像素的颜色。这个着色法比起平直着色法增加了插值的细节，而且也比 Phong 着色法渲染单个像素的光照特性的性能要高。
但是在渲染高光时，可能会因为无法获取精确的光照值而出现一些不自然的过渡（或 T 型连接容易被错误绘制），此时可以考虑对模型进行细分或使用漫反射材质。
Phong 平滑着色法 Phong Shading
与 Gouraud Shading 不同的是，它会对顶点的法线进行插值，并透过每个像素的法向量计算光照特性。这种做法能绘制出精致、精准的曲面，但是计算量较大。Blinn-Phong 是 Phong 的进阶版，着色性能更好，且高光弥散更自然。
简单了解计算机如何绘制 3D 图形后，再来看看它要如何具体理解我们所设计的 3D 场景。
3D 转换成 2D，也就是 3D 栅格化的过程中，每一个像素的颜色是需要基于它所在的环境计算出来，而基于被渲染物体表面某个点的光强度计算模型就被称为光照明模型（Illumination Model）或光照模型（Light Model），透过计算光照模型所得到表面位置对应像素颜色的过程被称为表面绘制（Surface Render）。
*请注意这里说的光照模型并不是指设计师理解的 3D 立体模型，而是指模型对象表面光照效果的数学计算模型。
影响光照模型的因素有两大方面，一是本身给渲染物体材质设置的各种光学特性（颜色反射系数、表面纹理、透明度等），二是场景中光源光及环境光（场景中各个被照明对象的反射光）。
传统光照模型都是对漫反射和镜面反射的理想化模拟，如果要还原基于真实物理世界的效果，光照模型需要遵循能量守恒定律：一个物体能反射的光必然少于它接受的光。在实践层面则表现为，一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光，反之亦反。
图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]
光照模型与着色组合在不同的渲染需求下也会有不同的应用：
图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]
真实感渲染 Photorealistic Rendering
考虑到真实感渲染对硬件的依赖，目前 webGL 中使用的一般以简单的局部光照模型为主（只计算光源对物体的光照效果，不计算物体间的相互影响，我们看到的“假反射”通常透过贴图来进行模拟），根据反射形态，经典的光照模型有下列几种：
这种模型的粗糙表面（如塑料、石材等）会将反射光从各个方向反射出去，而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体（Lambertian Reflectors），也就是我们熟悉的橡胶材质。
图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]
这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射，但 Phong 模型在高光处的表现有过渡瑕疵。
图 6-Phong 镜面反射模型视觉构成 [ F5 ]
是在 OpenGL 和 Direct3D 里默认的着色模型，一种调优后的非物理的 Phong 模型，顶点间的像素插值使用 Gouraud 着色算法，比 Phong 着色算法性能更好，而且高光效果也更平滑。
图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]
如果你用过 C4D 的默认渲染器，那么一定在材质的反射通道设置中见过它俩。
这是相对高级的光照模型，不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟，这两个光照模型基于不同物理材质加入了微表面（Microfacet）的概念，并考虑到表面粗糙度对反射的影响，对镜面反射进行了调优，使得高光的长尾弥散更加自然，也是目前 PBR 渲染管线（Unity、UE）中较常用的光照模型。
图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]
终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时（皮肤、液体、毛玻璃等）的散射现象。现实生活中，大部分物体都是半透明的，光会先穿透物体表面，继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例，只有大概 6%的反射是直接反射，而 94%的反射都是次表面散射。
BSSRDF（双向次表面反射分布函数）是用于描述入射光在介质内部的光照模型，目前也被应用在最新的虚拟角色皮肤实时渲染中；但由于 SSS 材质的计算需要依赖深度/厚度数据，所以 webGL 对这种高级光照效果的还原程度还是相对有限的。
图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]
非真实感渲染 Unphotorealistic Rendering
也就是我们常说的 3 渲 2，非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出，目前也被大量应用在动画及游戏中，像《英雄联盟：双城之战》《蜘蛛侠：平行宇宙》都是顶级三渲二大作。
图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]
卡通着色，一种最常见的以 3D 技术模拟扁平风格的着色形式，通常以极简的颜色、渐变及明确的外框线等漫画元素作为风格特征。
图 11-Blender 中不同类型的 Toon Shader 效果 [ F10, ©️Blendernpr]
日本创意编程师 Misaki Nakano 制作了一个非常有趣的 Toon Shading H5 互动页面，大家可以体验一下不同着色形态下非常模型的视觉表现。点击体验： https://mnmxmx.github.io/toon-shading/dst/index.html
图 12-Misaki Nakano 的 Toon Shader 互动网站 [ F11, ©️Misaki Nakano]
目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理，以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色（Gooch Shading），以及更具绘画质感的素描着色（Hatching）及油画水墨画等自然媒体着色，都已经深入到了我们日常的创作之中。
图 13-在 Unity 中，基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]
说完真实感与非真实感渲染差异后，我们再来看看 Three.js 中的材质。
和许多渲染引擎一样，除了原生材质外，webGL 的材质和着色都是可以根据需求进行定制的，但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景，下表罗列了 Three.js 原生材质的对比，包含了材质特性优势、贴图差异及适用场景，大家可以基于项目需求快速选择并混合使用：
图 15 – three.js 材质对比表
虽然着色、光照模型以及材质渲染对 3D 表现有着最为直观的影响，但 3D 工作流仍有一个隐秘而关键的环节——色彩管理。
真实世界中按照物理定律，如果光的强度增加一倍，那么亮度也会增加一倍，这是线性的关系。理想状态下，像素在显示屏上的亮度也应为线性关系，才能符合人眼对真实世界的观察效果（如图 b：横坐标为像素的物理亮度，纵坐标为像素显示时的实际亮度）。
但是显示器的成像由于电压的影响，导致输出亮度与电压的关系是一个亮度等于电压的 1.7-2.3 次幂的非线性关系，这就导致了当电压线性变化时，亮度的变化在暗处转换时变慢，如果显示器不经过矫正，暗部成色也会整体偏暗（如图 c）。目前大多数显示器的 Gamma 值约为 2.2，所以也可以理解 Gamma2.2 是所有显示器自带的一个遗传病。
图 15-红色上曲线=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），像素的实际亮度也会高于它的物理亮度。
图 16-人眼感知光强度与发射光真实物理强度对比
上面那一大段确实有点绕，但也就说回来为什么建议渲染时使用线性空间（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，咱们需求再见。
像素着色器 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），两者结合可以让简单的模型快速获得细分曲面。（例如，含细分曲面效果的模型加上置换贴图就可以获得极其逼真细腻的模型）
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 负责给图形配上颜色的专门通道。管线越多，画面越流畅精美。
图 17-渲染管道细节工作流 [ F12 ]
Rasterization：光栅化/点阵化/栅格化，就是将管线处理完的图元转换成一系列屏幕可视的像素，过程包括：图元拼装（Primitive assembly）-三角形遍历（Triangle Traversal）- Pixel Processing-Merging。
文章来源：优设 作者：ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务