材质 贴图 参数 希望本篇文章对使用 Arnold 渲染器和苹果电脑做三维创意的 UI 设计师们有一定帮助。前言随着行业的发展，现在越来越多的岗位要求 UI 设计师需要具备一定的三维设计能力，因此大多数 UI 设计师也在不断更新自己的技法能力，学习三维软件，大家都知道三维软件最好是用 PC 电脑，毕竟 PC 硬件配置是苹果电脑没法比的，但是 UI 设计师公司普遍配置的是苹果电脑（有条件的公司会再配个 PC 电脑），目前在苹果电脑上使用三维设计软件主要是 C4D 和 Blender，渲染器 C4D 可以选择 OC、RS、Arnold，前两个渲染器主要靠 GPU，Arnold 靠 CPU，个人使用后感觉苹果电脑 CPU 要比 GPU 好用一些，所以还是比较推荐大家用 Arnold 渲染，我也是今年才开始接触 Arnold，之前做三维都是用 PC 电脑，OC 进行渲染，目前市面上关于 Arnold 渲染的学习资料相对比较少，因此写这篇文章的目的主要是给目前使用苹果电脑需要做三维设计的的 UI 设计师们一些关于我用 Arnold 渲染器的经验总结，希望对你们有帮助。 文章分为两块内容，渲染设置和渲染技巧，渲染设置主要是讲常用的渲染参数设置，渲染技巧主要是讲在渲染中的知识点和技巧，下面两张图是我前段时间用 Arnold 渲染的图，Arnold 渲染的质量还是可以的。更多3D渲染器技巧：OC渲染慢还有噪点怎么办？简单4步快速解决！最近在项目中用 OC 渲染玻璃或者室内场景渲染时，经常会发现画面有噪点的情况，碰到疑难杂症是我最开心的一件事，又可以学到新东西了。阅读文章 > 一、渲染设置技巧1. 采样参数采样值是 Arnold 渲染中的主要参数，数值的大小会直接影响渲染图的最终效果，采样数越多，抗锯齿质量越好， 渲染时间越长，但是采样值也是有个零界值，超过这个值只会让渲染时间变的更长，但是渲染的效果不会因为时长变的更好，所以大家不要盲目以为调高参数就能让渲染质量更好，也要关注下材质和灯光的问题，关于参数设置建议大家逐渐增加它。① 摄像机 Camera摄像机参数相当于是一个全局参数的倍增器，摄像机参数调高以后所有的参数都会变高，参数数越高，抗锯齿质量越好，渲染时间越长，大家在设置摄像机参数时尽量不要给的太高，摄像机参数太高会导致其他参数等比变高，渲染时间也变的很长，通常来说参数为 4 时可以渲染中等质量，参数为 8 时可以渲染高质量，参数为 16 时可以渲染超高质量。② 漫射 Diffuse漫射参数是控制渲染图中的漫反射采样值，漫反射采样值只会影响直接可见的漫反射表面，不会影响其任何东西， 增加漫反射采样值可以有效降低漫射噪点。③ 镜面 Specular镜面参数是控制反射采样值，同理提高镜面的采样可以有效降低渲染图中反射的噪点。④ 透射 Transmission透射参数是控制材质透明属性的采样值，同理提高透射的采样可以有效降低渲染图中透明材质的噪点。这里和大家说个小技巧，因为透明材质比如玻璃类材质，因为有镜面和透射两个属性，当你无法判断是哪个属性导致的噪点时，可以尝试将透射和镜面切换为零，就可以判断是哪个参数导致的噪点。⑤ 次表面散射 SSS当我们使用 SSS 材质时，提高次表面散射采样值可以降低 SSS 材质一定的噪点，要想有效的降低 SSS 材质噪点还需要增加一点镜面和漫射采样值，这样噪点会更少一些。⑥ 间接 Volume间接指的是体积渲染的参数，当我们渲染一些体积效果比如云、烟雾等时，增加间接采样值可以提升体积对象的透光性。2. 光线深度光线深度时设置光线反弹的次数，反弹次数越高渲染的时间也会相应的变的更长，下面给大家介绍下各参数的效果。① 总数总数时代表的最大反弹次数，一般来说不会去动这个数值，除非你需要反弹次数超过这个值。② 漫射增加漫射值可以提高渲染常见中光的漫反射次数，以房间为例漫反射次数越多，房间中接受到的光越多，现实世界中可能只有一束阳光照进房间，但是因为光线经过多次反弹，房间其他地方的物体也会受到光的影响。③ 镜面增加镜面数值可以提升渲染图中反射的光线反弹次数，如果你的图中反射材质比较多，建议可以适当提高反射的反弹次数，这样画面更真实一些。④ 透射增加透射数值可以提高光在透明材质中的折射次数，如果你的渲染图中有很多透明材质可以适当提高透射参数值。⑤ 体积体积参数一般在渲染体积对象时才会用到，一般默认是 0，当你渲染体积对象云、烟雾等时可以提高体积参数， 提高光线在体积对象中的散射次数，让体积对象更通透。⑥ 透明深度透明度参数默认是 10，一般没去动它，这个参数控制的是多少光线穿过透明物体表面，穿过物体表面的光线过少会变黑。3. ACES 工作流ACES 工作流是色彩编码系统在电影或电视制作的整个生命周期中管理色彩的行业标准。ACES 确保了一致的色彩体验，除了创意优势之外，它拥有极为宽广的色彩空间， 其范围不仅包含了目前己知的全部色彩空间，甚至超过了人类视觉所能感知的所有色彩范围。不仅如此，它也通过定义建立了一个统一且精确的数学空间，为未来的视觉工作做好了充足准备，通俗点来说用 ACES 工作流渲染的图要好看点，而且用 ACES 工作流渲染图亮部不会过曝。① 渲染设置要使用 ACES 工作流首先我们要去渲染设置中设置颜色管理，这里需要用到 ACES 的色彩文件包，我会分享给大家，可以在文末和开头下载，具体参数设置看下图，设置的时候记得选 1.0.3 版本中的 config。ocio 文件。② IPR 渲染窗口设置打开色彩空间列表 View（显示）-Toolbar（工具箱）- Show color space list（显示颜色空间列表）勾选将色彩空间设置为 Output-SRGB③ 设置贴图色彩空间ACES 贴图分为三类，用不同的色彩空间设置第一类：漫射材质（例如：木头材质表面的木头贴图）， 色彩空间设置为 Utility-sRGB-Texture第二类：材质的镜面、反射、凹凸贴图，色彩空间设置为 Utility- Raw第三类：光照贴图（例如：HDR 贴图）色彩空间设置为 Utility-Linear-SRGB4. 色彩校正ACES 工作流渲染的图有个缺点是偏暗，因此我们可以在 Post 中添加一个色彩校正进行调整一下，当然你也可以渲染完后在 PS 中进行调整5. 辉光效果Arnold 发光效果好多小伙伴都不知道是怎么弄的，其实 Arnold 的发光效果是放在 Post 里的，默认是没有开启的，如果你需要发光效果可以去 Post 里打开，具体参数根据渲染效果自行设置。6. Arnold 降噪大家在渲染的时候可以开启 Arnold 降噪可以降低最终渲染图中的噪点，在 Post 里可以找到 Arnold 降噪，关于参数我一般用的是默认的，大家也可以尝试下不同参数效果。7. 体积光体积光需要在渲染设置中的环境-大气里选择 atmosphere_volume，选择后会自动建立一个体积光的材质球，材质球的属性也比较简单。颜色 Density：控制体积光的密度参数越大越实、越小越虚哀减颜色 Attenuation：数值越高光穿过体积传播衰减的越多，数值越小光穿过体积衰减的越少，如果数值为 0 光穿过体积不会衰减8. 着色覆盖着色覆盖是个非常有趣的功能，你可以设定一个材质球， 赋予给着色覆盖，然后渲染画面中的所有模型材质都会变为你赋予的这个材质球材质。二、材质/标签1. 标准材质球标准材质球是 Arnold 渲染中用的最多的，大部分对象材质渲染都是用的标准材质球，标准材质球中包含了基础 Base、镜面 Specular、透射 Transmission、次表面散射 Subsurface、涂层 Coat、 光泽 Sheen、薄膜 Thin Film、自发光 Emission、几何体 Geometry、ID、 高级 Advanced，共十一个功能，最常用的是前面九个，接下来我会给大家介绍下标准材质球常用的一些功能都是干嘛的。① 基础 Base可以理解为材质的漫反射属性，基础属性的颜色决定了材质的颜色（玻璃和 SSS 可单独调整颜色），通常材质漫射贴图都贴在这里，基础里有个金属度属性可以制作金属质感材质。② 镜面 Specular可以理解为材质的反射属性，镜面属性的参数影响材质的反射效果，关于镜面说下几个难理解的参数，如果你想让你的图渲染的更真实，可以在网上找下对应材质的“反射率 IOR”是多少，Arnold 中预设了一些 IOR 参数，各向异性 Anisotropy 和旋转 Rotation（旋转可以做拉丝不锈钢材质）可以改变材质表面反光的样子。③ 透射 Transmission可以理解为材质的透明度属性，透射属性参数影响材质的透明度效果，做玻璃、水等材质时都会用到透射，关于透射我给大家讲下几个不好理解的功能。深度 Depth：深度数可以控制玻璃的厚薄效果，数值越高玻璃越薄。散射 Scatter：较厚的模型调整散色颜色会改变内部散射效果。散射各向异性 Scatter Anisotropy： 该数值为零时光线向四周均匀散射，大于零时散射效果向前偏，小于零时散射向后偏。色散阿贝 Dispersion Abbe：这个数值可以增加透明材质的色散效果，制作钻石、宝石等材料时用的到。透射通道 Transmit Aovs：这个是渲染半透明材质要用到的通道。介质优先级 Dielectric Priority：介质是在制作多个透明材质混在一起时使用的，数值越高的介质会覆盖数值低的介质。④ 次表面散射 Subsurface次表面散射就是我们常说的 SSS 材质，SSS 材质是模拟物体内部的散射效果，关于 SSS 材质我给大家讲几个不好理解的参数。半径 Radius：半径值是控制物体内部的透光性，值越高越通透越低则透过物体的光越少。比例 Scale：控制光线在反射回来之前可能在表面下传播的距离，比例增大会等比增加半径值的效果。类型 Type：类型中有三种类型可以选择扩散 Diffusion：通过单层，它可以捕获表面细节和深度散射。随机游走 randomwalk：与基于扩散理论的经验不同，随机游走实际上是在表面以下以真正的随机游走进行追踪， 并且不假设几何形状是局部平坦的。随机游走 Randomwalk v2：这种方法通过高度透明/光学薄的物体更准确、更深入地散射，从而在物体的精细表面细节和强背光区域周围产生具有更饱和色彩的 SSS各向异性 Anisotropy：将光均匀散射到各个方向，正值使散射效果向前偏向光的方向，而负值使散射向后偏向光。⑤ 涂层 Coat涂层参数和镜面属性很像，从字面我们可以理解涂层属性就是给物体表面涂抹了一层具有反射性的透明涂层，比如像汽车油漆的透明涂层，它的属性和镜面差不多，多了一个法线的功能。这里的法线指我们可以通过法线贴图来控制涂层，比如模型上的雨滴效果就可以用这种方式做。⑥ 光泽 Sheen光泽属性多用于表现纤维、布料、天鹅绒和缎子等表面的光泽效果，参数也比较简单。⑦ 薄膜 Thin Film薄膜属性是给材质表面一层反光涂层，效果就是大家所说的五彩斑斓的黑，这里需要注意的是，薄膜效果会受镜面属性的“反射率 IOR“影响。厚度 Thickness(nm)：厚度效果会影响镜面反射、透射和涂层。反射率 IOR：反射率会影响薄膜表面效果，如果你需要追求更真实的效果可以在网上找对应物体的 IOR 具体数值⑧ 自发光 Emission自发光很好理解，该属性可以给材质赋予发光效果，如果大家需要让一个物体对象做为光源，建议大家使用网格灯光，不要用材质自发光。⑨ 几何体 Geometry该功能主要用于模型的一些改变，接下来给大家说下常用功能。薄壁 Thin Walled：薄壁功能启用后会将你的模型对象模拟成一个薄片，比如你做玻璃材质的时候启用薄壁，你的模型对象会被模拟成一个薄玻璃。修剪透明度 Cutout Opacity：这个功能类似 PS 的蒙版， 可以通过黑白贴图来修剪模型，如果不用贴图单调试透明度数值会让模型产生透明效果。法线 Normal：法线功能是我们做 PBR 贴图最常用的功能，它并不是像字面意思那样只能用法线贴图，后面我会给大家说用法。2. SSS 材质说下关于 SSS 材质一些技巧，Arnold 可以在标准材质球可以中编辑透明和次表面散射，因此我们在做 SSS 材质时可以把透射和次表面散射混合在一起，混合参数根据效果自己把握，可以适当的加入一点自发光让材质更通透一些。3. 法线和凹凸贴图Arnold 的凹凸和法线贴图可能相比 OC 渲染要麻烦一点，文末我会给大家分享高质量免费 PBR 材质资源。凹凸贴图需要在节点编辑器加入 Bump2D 功能，在将黑白贴图连接到 Bump2D-凹凸贴图，最后链接到标准材质的法线上。法线贴图需要在节点编辑器加入 Normal 功能，在将法线贴图链接到 Normal-输入，最后链接到标准材质的法线上。同时使用凹凸和法线贴图，需要将第二步 Normal 功能链接到 Bump2D - 法线 Normal，最后将 Bump2D 链接到标准材质的法线 Normal 上。4. 置换贴图使用Arnold 置换贴图需要在节点编辑器中设置，在标准材质球中打开节点编辑器，加入节点功能“置换 Displacement”把贴图链接到置换上，在链接到 Arnold Displacemont。5. 透明贴图在 Arnold 中渲染透明贴图有两种方式，都是通过编辑材质球来实现，下面给大家介绍下着两种方式：① Alpha 贴图把透明背景的贴图，放入标准材质球的 Alpha 中可以制作透明贴图效果，简单理解为 PS 中的剪切蒙版。② 修剪透明度贴图把黑白贴图连接到修剪透明度，它是通过图片的黑白信息对物体对象进行裁剪，可以简单理解为 PS 中给图层加了一个蒙版。6. 贴图反相为啥要单独把反相这个节点功能拿出来说呢？因为好多朋友用节点的时候都没找到反相，Arnold 汉化后名字叫“补码 Complement”7. Arnold 标签关于 Arnold 标签主要讲几个实用的功能。① 不透明 Opaque：渲染玻璃材质时把这个勾去掉，玻璃会更通透一些。② 细分功能：细分功能可以通过渲染器增加模型的面数，比如：做一些需要高细分的置换贴图时，可以用细分功能去增加面数，而不用去增加模型面数。③ 置换标签：默认是 100CM 的高度，如果在你模型场景中不合适可以调整小些。8. 材质视图预览Arnold 材质默认是不会在摄像机视图显示你贴在哪个模型上的，可以通过节点编辑器中，将材质球链接到阿诺德视口 Arnold Viewport，就可以在摄像机视图中查看哪些模型贴了材质。9. 渐变控制黑白贴图当我们使用一些黑白贴图时需要对贴图细节进行一些调整，比如我们使用一张黑白污垢图，但是不希望污垢出现那么多，那么我们可以将黑白贴图链接到渐变节点进行调整，渐变节点还可以改变贴图的颜色。使用渐变调整黑白贴图时，渐变节点功能的类型一定要选用“Custom”三、灯光/渲染1. 渐变灯光如果想让灯光有更多的细节变化，可以尝试给灯光加一个渐变贴图，可以控制渐变贴图控制灯光照射到物体上的效果，同时可以使照射在物体上的灯光过度更柔和。2. HDR 天空给大家介绍两个 HDR 天空中的三个比较常用的三个功能① Arnold 默认 HDR 是对摄像机可见的，如果我们要对单一对象渲染一张透明背景的图，又不想让 HDR 显示出来可以在 Arnold 天空中把摄像机参数设置为 0，同理如果不希望 HDR 对模型对象产生漫射、反射等效果也可以在这里调整。② Arnold 的 HDR 不像 OC 可以直接在 HDR 参数面板进行调整，在 Arnold 中我们需要到坐标里进行调整 HDR 的位置。③ 如果想让 HDR 天空贴图变为黑白的，可以创建 image 材质球把 HDR 贴图放进去勾选单通道，在把材质球放到 Arnold 天空里3. 目标灯光Arnold 中没有 OC 的目标灯光，灯光中有一个目标功能，把目标模型拖入到目标功能即可。4. 巧用灯光做焦散Arnold 渲染器的焦散效果并没有 GPU 渲染器 RS 和 OC 的效果那么好，但是不代表不能做，可以采用聚光灯-灯光过滤的方式给一个焦散的贴图，文章最后我会给大家分享一套高清焦散贴图。5. 巧用灯光“可见“属性有时候我们需要对渲染对象某一属性进行单独调整，比如需要加强高光亮度，如果我们此时去提高灯光强度会让高光、漫反射、透射等属性都增加，如果只想调整高光可以在灯光属性面板可见中单独调节高光属性，同理想提高其他属性也可以单独调整。6. 着色调试模式这个功能其实挺好用的，你可以通过右键点击调色模式渲染各种类型的图，比如：白模、线框图、法线图、对象图等，对象图可以方便我们在后期修图的时候对单个对象进行调整。7. 降噪处理这里再次给大家提到降噪，如果只是单纯提高采样值并不能完全解决噪点问题，因为我们的灯光、HDR、体积等也是有采样值的，大多数情况灯光采样 3-4 就够了，光源越大阴影越柔和需要的采样就会高一些，所以我们在降低噪点时不要只看渲染设置的采样值参数，有时候可能受其他因素影响。8. 景深给摄像机加入 Arnold 标签，勾选景深，选择“大小”给大小一个合适的数值，可以自己尝试，按住 Control+option 点击 IPR 渲染窗口中的渲染主体对象注意：有些摄像机投射方式是没法使用景深的，比如等角视图，平行视图等。9. 渲染错误处理有时我们可能会遇到贴图丢失导致渲染错误无法渲染，但是因为材质太多不知道是哪个出了问题，可以到渲染设置中找到“错误处理“功能，将出错时中止的勾去掉就可以继续渲染了，出错的纹理和颜色会有颜色在渲染图中标示出来。写在最后随着行业的发展目前很多 U 设计师都在学习三维设计，三维设计软件和渲染器也有非常多的种类各有千秋，目前来看最适合做三维设计的硬件设备依然是 PC 电脑更好，但是做为 UI 设计师我们可能更多的在是苹果电脑上工作（有条件的会单独配个 PC)，因此如何在苹果电脑较差的硬件条件上更好的完成三维设计是一个挑战，以目前个人使用情况来看 Arnold 渲染器在苹果电脑上算是一个不错的选择，感兴趣的朋友可以尝试一下。 本篇文章给大家大致介绍了一下 Arnold 渲染器的基础知识和一些使用技巧，Arnold 渲染器做为一款强大的渲染器还有很多功能值得我们去探索。参考文献和资料素材Arnold for Cinema 4D 用户指南: https://docs.arnoldrenderer.com/display/A5AFCUGACES 色彩文件： 附件下载高质量 PBR 材质： https://polyhaven.com/textures高清焦散贴图：附件下载 文件名 如何下载使用 文件大小 提取码 下载来源 资源包3.7G8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/arnold-skills
建模 效果 材质 一、序言3D 设计风格已经在越来越多的设计领域被广泛应用，其视觉表现和设计技法，也随着行业发展在不断进化演变着。我们可以发现，今天的 3D 设计已不仅是“立体感”和“真实性”的代名词，三维设计作品，已进化表现为更细腻多元的质感、更精致的高维建模、更丰富的色彩表现、以及更具艺术性的设计语言。但这些更成熟的表现通常对设计师具有很高的要求，也需要花费很大的精力时间去调试。如果你不是一个专业三维设计师，但却很想涉及这个领域，通常会被各种 3D 软件、渲染器、以及超高的硬件配置等较高门槛而劝退，或是花费很长时间去学习。但是，灵感与创意，本不应该被技术限制所束缚。本文将为大家介绍一款基于 iPad 场景而生的三维数字雕刻软件「Nomad Sculpt」。以上作品效果，都可以使用 Noamd 轻松制作出来。让你的 iPad 从此告别“买前生产力，买后爱奇艺”的秘诀，只需一个 iPad + iPencil，结合其轻量、低门槛且易于上手的特性，就能让你的从电脑前的久坐中解放出来，随时随地施展创意，体验“躺平式”建模的快乐。那么，快来跟我一起了解 Nomad，轻松打开三维设计的大门吧。更多3D设计神器：免费用上手快！快来试试这款 3D 设计神器 MagicaCSG3D 元素在设计中的应用广泛，之前向大家推荐了很多免费的 3D 素材下载网站，但是实际应用起来还是有局限的。阅读文章 > 二、使用 Nomad Sculpt 制作 3D 设计的优势传统 3D 工作流与 Nomad 对比传统 3D 工作流对初学者而言是一件成本较高的事情，完成一套完整的作品，需要多个工具串联集合使用。而 Nomad 即可以解决一些轻量 3D 诉求，又能确保设计被完美呈现。软件集成硬表面建模、高模精雕、材质及顶点绘制、PBR 实时渲染、后期处理五大核心 3D 工作流于一身，只需一个 App，即可完成一件非常完美的 3D 艺术作品。同时，这也是一款对新手非常友好的 App，软件全中文，交互体验十分友好易懂。如果你具备一些 3D 基础，花费 30 分钟熟悉下界面基本就可以开始尝试设计了。随着 iPad 端设计生态丰富，Nomad 很有可能成为未来设计工具的新趋势。非常值得一提的是 Nomad 出色的实时渲染，让设计所见即所得，这极大提升了 3D 作品艺术效果调试产出的效率，并且在创作过程也会出现许多随机偶得的惊艳效果。三、设计思路：为未来种下一颗“种子”3D 角色类型的作品，因其非常吸眼球的视觉表现、灵活的设计空间、以及非常适合在其他虚拟场景中跨界联动等优势，而受到设计师和用户的欢迎，正在被虚拟人、IP 形象、手办、游戏等领域广泛应用起来。下面将结合一个三维形象设计案例，分享 Nomad 使用心得。从创意诞生到设计执行，一般角色设计流程主要由以下四个步骤组成：主题概念设定、基础角色设计、角色衍生设计、成品预览导出。3D 形象设计流程STEP 1：主题概念设定好 IP 的基础是拥有一个好的世界观。在这个 Case 中，故事由一颗种子展开。借用植物作为核心概念对现实世界进行视觉投射，为未来种下一颗充满幻想的“种子”。植物和我们人类一样，离不开光合作用，离不开水与氧气。成为一颗种子，在春日诞生，在夏日绽放，在秋天成熟，在冬季闪亮。根据以上概念，选定 IP 形象是一颗可以随着时间的变化长大的种子，也是对“充满幻想的未来”的隐喻。设定了形象的设计关键词: 软萌/治愈/可进化体STEP 2：基础角色设计基础形态的设计是后续的讲好故事的基础，角色需要有一定辨识度，“蒜头”作为核心标识元素贯穿始终，所以重点做细节纹理的刻画。模型其他结构尽可能简约处理，可以为后续拓展留出足够空间。基础角色设定是一颗生长在春天的种子，寓意诞生。「 诞生」基本形态设计通常形象设计一般都需要先手绘 2D 草图再到 3D 软件中建模，但如果你使用 Nomad，其实完全可以跳过手绘草图的步骤，用 iPencil 直接快速在软件中绘制 3D 草图，并且可以使用雕刻工具组用画笔快速自由的调节模型比例细节，手感丝滑，和手绘基本一致的操作方式，体验非常丝滑，且易于调整预览效果。① 黏土式建模和高模精雕Nomad 使用“黏土建模”原理，类似一个低门槛版本的 Z-brush，捏泥巴的感觉能让建模的过程令人心生愉悦，使用雕刻工具组配合 iPencil 压感辅助绘制雕刻细节，非常适合对模型进行细节刻画，让 3D 模型有近似游戏感的真实质感和艺术效果，非常适合制作形象类的模型。② Nomad 建模面板内置 9 种基本几何体，以及车削、圆管等超好用辅助建模工具。尤其推荐大家体验一下车削和圆管工具，结合 iPencil 可以创造出许多艺术性的效果。车削：可以用来制作角色身体和头部等旋转对称形态模型，类似于 C4D 中的旋转工具。点击车削工具后，屏幕中心会出现一根对称线，此时只需用 iPencil 从中心点边缘开始画线，勾勒出角色身体轮廓横截面，软件自动生成立体效果，再基于轮廓调整线条的角度和曲线，就能轻松绘制出角色的身体。车削工具制作“角色身体”圆管：快速制作犄角/藤蔓/耳朵等管道线类型部件，类似于 C4D 中的放样功能，但操作比 C4D 快捷自然许多。选中工具后，用笔在空白处画出想要的样条造型，然后可以针对每个顶点调整附近点的半径大小，最后可以使用平滑工具对边缘进行打磨，让模型更精致自然。圆管工具制作“犄角”③ 支持 OBJ/GLB/STL 等主流 3D 格式导入除了黏土建模之外，Nomad 也支持硬表面类型的低面建模需求。但由于软件目前暂不支持针对点线面进行细节调整，所以实测体验下来感受并没有电脑端的 3D 软件那样精准。但软件支持 OBJ/GLB/STL 等主流 3D 格式导入，可以无缝与其他电脑端主流 3D 软件兼容。在项目面板中选择导入新文件，可以从外部导入模型再进行编辑如果你还是更习惯在 C4D 上建模，或者想对已有的模型进行修改调整，也可以在电脑端建模完毕后，另存为 Nomad 所支持的格式，导入至 Nomad 中进行细节刻画、材质渲染和后期效果的处理。④ 随心所欲的材质上色：基础材质Nomad 基础材质编辑非常简单。与其说是材质，更像是在挑选画笔对模型上色。常见的漫射、玻璃、金属、发光等基础材质，都可以通过简单的滑块设置调节，配合 HDR 和的灯光，可以产生不同效果质感，并且可以实时预览颜色效果。⑤ 自由的画笔绘制：3D 手绘画笔工具是我认为 Nomad 中最好用的特色功能，设置好基础材质后，只要使用绘画工具，就可以直接把“材质”当做“笔刷”对模型任意表面进行插画一样的涂画，支持笔刷导入达到不同的笔触效果，也支持类似 PS 中的图层绘画，所以不用担心画错或者多种样式并行的问题，只需要隐藏和打开图层，就能呈现出材质叠加的惊艳效果。绘画工具绘制头部粉色且具有金属材质的呆毛犄角，再用平滑工具打磨可对衔接处自然过渡⑥ 后期处理：无需再导入 PS 调色了！Nomad 自带强大的后期处理系统，例如屏幕反射、景深、光效、色调、曲线、晕影、噪点、锐化...这些常用的后期处理功能，都可以用滑块轻松调节，让角色更具真实感。Nomad 内置了 Factor、Spacing 等滤镜功能，打开开关后，可以一键把 3D 图像变成像素块风格或者赛博朋克风的扫描线滤镜效果，这些有趣的小功能也印证 Nomad 开发团队也是有意在尝试让软件变得更加未来感。到此，基础模型的设计就完成了，预览一下最终效果吧。基础角色 360预览STEP 3：角色衍生设计我们可以根据角色的性格设计符合其人设的场景丰满角色的世界观。在这里，四季的更替最能体现植物主题的生长状态，基于植物生长的周期，设定四季主题装扮，分别对应 春日诞生、夏季绽放、秋日成熟、冬日恋歌 四个季节更替，由此便生成 4 个装扮，变幻出不同的质感、色彩、状态。「 四季系列」同一角色不同装扮质感呈现① PBR 实时渲染：实现独一无二的艺术效果我们也可以开始运用 Nomad 中强大的 HDRI 实时渲染来快速生成其他风格的艺术效果了。这是一个奇妙的调试过程，收集配色丰富的图片作为 HDRI，赋予模型不同感觉的环境光效，而当下非常流行的奇幻流光玻璃效果，或许就藏在这些 HDRI 中~实时预览生成不同的场景氛围感*材质捕捉：也可以运用 Nomad 材质捕捉渲染模式，导入不同材质纹理贴图，Nomad 会自动捕捉贴图上的材质赋予模型，结合不同质感的材质球生成更多伪 2D、 卡通渲染、玉石、国风等酷炫效果，只要耐心多尝试搭配，会生成许多意想不到的奇妙艺术效果。「 材质捕捉」导入纹理材质贴图一键生成意想不到的艺术效果STEP4：360动画预览导出Nomad 目前暂不支持动画设计，但这里也有一个小窍门，我们可以利用软件的旋转展示功能结合 iPad 屏幕录制，导出动态视频模拟 360旋转动画的效果，同时软件支持调整旋转速率。四、其他延伸使用场景除了上文所述，Nomad 在其他领域也有许多拓展使用场景。感兴趣的同学可以拓展阅读。1. AR 虚拟现实联动Nomad Kivicube 快速让你的模型走近现实 .video_pc { width: 100%; height: 585px; } @media (max-width:767px) { .video_pc { height: 50vw; } }当视频无法加载时请刷新页面，或前往PC获得最佳体验。2. UV 贴图绘制与 Procreate 无缝结合制作 UV 贴图：https://www.youtube.com/watch?v=Ym0FBH2vFoI3. 日常运营需求高效输出除了角色设计之外，由于 Nomad 超轻量和实时渲染的特点，也可以用来快速支持一些轻量的日常运营 3D 需求，无需渲染等待，快速出图，并且这一切都可以在沙发上躺着完成。《QQ 看点年度盘点》使用 Nomad 快速输出 H5 运营活动的多个主线场景《腾讯看点-星探计划》主 IP 角色“星探”使用 Nomad 设计五、结语以上就是本次为大家分享 Nomad 的一些制作三维设计的思路。虽然没有 C4D、Blender 等主流 3D 软件的功能强大完备，但流畅的实时渲染、强大的数字雕刻、随时随地建模、以及在创作过程中可以产生许多随机性和实验性的视觉效果，都让人欲罢不能。在这个效率至上的时代，如何降低设计成本，减少软件复杂的逻辑理解和设备硬件影响，让设计师更专注创意本身，也是我们需要思考和探索的新命题。如果你心动了，就快来解锁“躺平式”建模的新姿势 ，探索 3D 时代的设计乐趣吧！欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/nomad-sculpt
模型 反射 材质 前言设计师需求中 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》。Part 1 理论篇设计师在还原 3D 类型的互动 H5 项目的时候一定想过这个宇宙终极问题：为什么 H5/Web 实现的 3D 效果和 C4D 里渲染出来的差异那么大？其实这是我们对实时渲染引擎（UE、Unity、three.js 等）和离线渲染工具（Redshift、Octane、Vray 等）的差异存在误解：一是离线渲染工具是基于真实光照环境来计算每颗像素的着色，实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照（没个好显卡都开不动光追）。虽然 UE5 的实时渲染技术和硬件兼容性已经让大家大吃一惊，但在实际项目，尤其是需要兼容低端设备的 H5 来说，渲染能力还是相对有限的。二是对于游戏或 H5 互动网站实际应用来说，流畅的互动体验优先级往往高于画面精细度，所以牺牲视觉保性能也是常见情况。图 1-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 材质时，就会发现他们在呈现时的差异。图 2-Flat、Gouraud、Blinn-Phong 着色法比较 [ F1, ©️Stefano Scheggi ]平直着色法 Flat Shading这种着色法认为模型中所有面都是平的，同一个多边形上的任意点的法线方向都相同。着色时，会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型，也比较适合使用在高速渲染的场景。值得注意的是，这种着色法难以做出平滑高光效果。高洛德平滑着色法 Gouraud Shading这是一种平滑的着色方法，在着色时会先计算三角形每个顶点的光照特性，利用双线插值去补齐三角形区域内其他像素的颜色。这个着色法比起平直着色法增加了插值的细节，而且也比 Phong 着色法渲染单个像素的光照特性的性能要高。但是在渲染高光时，可能会因为无法获取精确的光照值而出现一些不自然的过渡（或 T 型连接容易被错误绘制），此时可以考虑对模型进行细分或使用漫反射材质。Phong 平滑着色法 Phong Shading与 Gouraud Shading 不同的是，它会对顶点的法线进行插值，并透过每个像素的法向量计算光照特性。这种做法能绘制出精致、精准的曲面，但是计算量较大。Blinn-Phong 是 Phong 的进阶版，着色性能更好，且高光弥散更自然。2. 基本光照模型 Illumination Model简单了解计算机如何绘制 3D 图形后，再来看看它要如何具体理解我们所设计的 3D 场景。3D 转换成 2D，也就是 3D 栅格化的过程中，每一个像素的颜色是需要基于它所在的环境计算出来，而基于被渲染物体表面某个点的光强度计算模型就被称为光照明模型（Illumination Model）或光照模型（Light Model），透过计算光照模型所得到表面位置对应像素颜色的过程被称为表面绘制（Surface Render）。*请注意这里说的光照模型并不是指设计师理解的 3D 立体模型，而是指模型对象表面光照效果的数学计算模型。影响光照模型的因素有两大方面，一是本身给渲染物体材质设置的各种光学特性（颜色反射系数、表面纹理、透明度等），二是场景中光源光及环境光（场景中各个被照明对象的反射光）。传统光照模型都是对漫反射和镜面反射的理想化模拟，如果要还原基于真实物理世界的效果，光照模型需要遵循能量守恒定律：一个物体能反射的光必然少于它接受的光。在实践层面则表现为，一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光，反之亦反。图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]光照模型与着色组合在不同的渲染需求下也会有不同的应用：真实感渲染（Photorealistic Rendering）：目的是基于真实物理世界对 3D 场景进行仿真还原。非真实感渲染（Unphotorealistic Rendering）：也被成为风格化渲染（Stylistic Rendering），会更抽象化地对模型进行重绘。图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]真实感渲染 Photorealistic Rendering考虑到真实感渲染对硬件的依赖，目前 webGL 中使用的一般以简单的局部光照模型为主（只计算光源对物体的光照效果，不计算物体间的相互影响，我们看到的“假反射”通常透过贴图来进行模拟），根据反射形态，经典的光照模型有下列几种：Lambert 漫反射模型：这种模型的粗糙表面（如塑料、石材等）会将反射光从各个方向反射出去，而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体（Lambertian Reflectors），也就是我们熟悉的橡胶材质。图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]Phong 镜面反射模型：这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射，但 Phong 模型在高光处的表现有过渡瑕疵。图 6-Phong 镜面反射模型视觉构成 [ F5 ]Blinn–Phong 模型：是在 OpenGL 和 Direct3D 里默认的着色模型，一种调优后的非物理的 Phong 模型，顶点间的像素插值使用 Gouraud 着色算法，比 Phong 着色算法性能更好，而且高光效果也更平滑。图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]Cook-Torrance/GGX 光照模型：如果你用过 C4D 的默认渲染器，那么一定在材质的反射通道设置中见过它俩。这是相对高级的光照模型，不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟，这两个光照模型基于不同物理材质加入了微表面（Microfacet）的概念，并考虑到表面粗糙度对反射的影响，对镜面反射进行了调优，使得高光的长尾弥散更加自然，也是目前 PBR 渲染管线（Unity、UE）中较常用的光照模型。图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]次表面散射模型 Subsurface scattering/SSS：终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时（皮肤、液体、毛玻璃等）的散射现象。现实生活中，大部分物体都是半透明的，光会先穿透物体表面，继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例，只有大概 6%的反射是直接反射，而 94%的反射都是次表面散射。BSSRDF（双向次表面反射分布函数）是用于描述入射光在介质内部的光照模型，目前也被应用在最新的虚拟角色皮肤实时渲染中；但由于 SSS 材质的计算需要依赖深度/厚度数据，所以 webGL 对这种高级光照效果的还原程度还是相对有限的。图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]非真实感渲染 Unphotorealistic Rendering也就是我们常说的 3 渲 2，非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出，目前也被大量应用在动画及游戏中，像《英雄联盟：双城之战》《蜘蛛侠：平行宇宙》都是顶级三渲二大作。图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]Cel Shading/Toon Shading:卡通着色，一种最常见的以 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]Customized Shading：目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理，以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色（Gooch Shading），以及更具绘画质感的素描着色（Hatching）及油画水墨画等自然媒体着色，都已经深入到了我们日常的创作之中。图 13-在 Unity 中，基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]3. Three.js 材质着色对比说完真实感与非真实感渲染差异后，我们再来看看 Three.js 中的材质。和许多渲染引擎一样，除了原生材质外，webGL 的材质和着色都是可以根据需求进行定制的，但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景，下表罗列了 Three.js 原生材质的对比，包含了材质特性优势、贴图差异及适用场景，大家可以基于项目需求快速选择并混合使用：图 15 – three.js 材质对比表4. 色彩描述与管理 Color Space虽然着色、光照模型以及材质渲染对 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，咱们需求再见。附录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 负责给图形配上颜色的专门通道。管线越多，画面越流畅精美。图 17-渲染管道细节工作流 [ 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? #11110https://github.com/mrdoob/three.js/issues/11110[11] donmccurdy, Best practise for color managementhttps://github.com/aframevr/aframe/issues/3509https://github.com/mrdoob/three.js/issues/11337#issuecomment-440795075[12] alteredq, Questions about the use of Gamma Correction in the WebGL Renderer #1488https://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 Correctionhttps://learnopengl.com/Advanced-Lighting/Gamma-Correction[16] 柯灵杰，3D 图形学基础：https://zhuanlan.zhihu.com/p/27846162[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 Stageshttps://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 shadinghttps://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 Effectshttps://download.autodesk.com/us/mudbox/help2011_5/index.html?url=./files/WS1a9193826455f5ff5cf1d02511b1d000978-6b44.htm,topicNumber=d0e8759[F4] Virocore, Lighting and Materialshttps://virocore.viromedia.com/v1.0.0/docs/3d-scene-lighting[F5] Wikipedia, Phong Reflection Modelhttps://en.wikipedia.org/wiki/Phong_reflection_model[F6] Wikipedia, Blinn–Phong reflection modelhttps://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 Commentaryhttps://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硬核干货！各路专家编制+腾讯翻译的《PBR指引手册》（二）万物皆可 PBR， 本手册带你知其然也知其所以然。阅读文章 > 欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/3d-to-h5-workflow
在路上
表哥
