整个网站都在下雪特效怎么做,设计网站定制公司,软件开发交付流程,安徽省工程信息网官网这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程#xff0c;该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容#xff0c; 没有由 Three.js 处理的任何照明。 推荐#xff1a;用 NSDT场景设计器 快速搭建3D场…这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容 没有由 Three.js 处理的任何照明。 推荐用 NSDT场景设计器 快速搭建3D场景。 如果你正在寻找一种方法来导出具有可在 Three.js 中主动点亮的纹理的 .glb/.gltf 资产请查看我关于从 Redshift 烘焙 PBR 样式贴图的另一篇文章。 因为这篇文章主要关注导出过程所以我不会讨论如何对模型进行 UV或如何将 .glb/.gltf 导入 Three.js 并分配纹理。
本系列的后续文章将包括优化流程和资产的重要方法、此方法的缺点以及其他提示和技巧。
1、从任何UV 模型开始
你要导出的任何模型都需要有一组合适的 UV。 虽然我知道使用 Redshift 有时会使应用着色器不需要此过程但你计划导出为 glb/gltf 的模型必须经过 UV。 这就是 C4D/Redshif 知道如何将材质/纹理烘焙到图像中所以 Three.js 知道如何将该纹理应用于模型顶点。
记住要保持你的模型的几何体低多边形毕竟这是一个 Three.js 场景。
2、添加 Redshift 材质并照亮场景
通过在 Redshift 中添加材质/纹理等来完成场景并照亮。请记住最后我们将烘烤出一个单一的平面pass以应用于模型而无需在 Three.js 中处理任何照明因此有些东西不会转换即凹凸/移位 会影响烘焙的外观即裂缝会有阴影但你不会在模型本身上看到任何凹凸/位移。 3、检查Redshift 渲染设置并添加 AOV
当我们烘焙纹理时我们希望在 exr 文件中使用 ACEScg 和原始颜色这样我们就可以确保保留所有可能的颜色信息。 在“颜色管理”部分的“全局”选项卡中对 Redshift 渲染设置进行一些调整
确保渲染色彩空间设置为 ACEScg将视图设置为“原始”关闭“补偿视图变换”
如果打开 Redshift RenderView/IPR你会注意到颜色看起来不对。 这是可以预料的。
你还需要在 Redshift AOV 管理器中为 Beauty pass 设置 AOV。 添加通道然后确保选中“Direct”可以取消选中“Multi-pass”并在右侧的“Direct Output”部分下
将格式设置为“OpenEXR”将每通道位数设置为“浮动32 位”将压缩设置为“DWAA”。
如果需要你可以选择导出其他 AOV这些 AOV 也将在我们烘焙时输出到它们自己的图像文件中。 然而由于我们只是希望将我们在 Redshift 中看到的准确结果转化为 Three.js所以我们只需要 Beauty。 4、合并烘焙
合并使用相同UV/Texture空间的几何体添加一个RS BakeSet然后烘焙
因为钳子有三个独立的几何体但我把它们放在同一个 UV/Texture 空间我想使用这个工作流程临时组合它们
复制组。关闭原始组的编辑器可见性/渲染可见性。对副本执行“连接对象并删除”。 我将其重命名为 Tongs-Combined。 这将确保当我们进行烘焙时它会将所有 tong geo 的烘焙纹理输出到一个图像文件中而不是基于每个 几何体 的单独图像文件。 虽然你可以在 Photoshop 中单独组合这些文件但这会使它更容易并在纹理图像中为你提供漂亮的边缘绘画/UV 边缘扩展。
现在通过以下方式创建你的 RS BakeSet
选择要烘焙的所有几何体我的是 Tongs-Combined、GroundPlane 和 CuttingBoard。转到 Redshift 菜单 - 工具 - 纹理烘焙 - 从选择创建烘焙集。 现在在大纲中选择 BakeSet 并更新宽度和高度。 我做了 2K这可能有点矫枉过正但你可以随时根据 Three.js 中场景的需要缩小它们。 如果设置了另一个想要烘焙的 UV 空间你可以在 UV 源字段中指定它尽管由于我们所有人都使用默认的 UVW你可以将其留空。 你还可以验证要烘焙的所有对象是否都列在“对象”字段中。 如果有任何遗漏可以将它们拖到这里。
现在你可以单击 BakeSet 上的 Bake 按钮。 它会给你一个弹出窗口你可以在其中设置
纹理的输出文件夹取消选中“Default Beauty AOV”因为我们已经在 AOV 管理器中配置了一个。 单击“烘焙”渲染纹理需要一段时间。 你会得到类似下面的东西。
5、对纹理进行颜色校正
因为我们想要我们可以获得的所有颜色信息并且我们在 Redshift 中使用了 ACEScg 颜色空间所以我们需要对我们的 OpenEXR 进行一些颜色转换以便通过确保它们在 sRGB 颜色空间中它们在 Three.js 中看起来是正确的。 我知道如何做到这一点的方法是使用 After Effects
确保项目设置中的颜色设置使用32 bps、sRGB并选中“线性化工作空间”。
将你的 OpenEXR 作为合成导入 After Effects。 确保作为合成导入但不需要联系表。
将所有 OpenEXR 放入一个合成中。 将它们每个修剪为 1 帧并及时将它们的位置偏移 1 帧这样就可以看到它们并使用当前时间指示器擦洗它们。
现在将一个调整层添加到此合成的顶部并将 OpenColorIO 效果在此处可用添加到该层。 从 Configuration 下拉列表中添加 Redshift 的配置文件该文件位于 Applications/redshift/Data/OCIO 目录中名为 config.ocio。 现在将 OpenColorIO 效果设置为“显示”模式。 将输入空间设置为“ACEScg”并将显示设置为“sRGB”。 颜色还是不对我们首先需要在 OpenColorIO 效果下面添加一个 Color Profile Converter 效果。 将输入配置文件设置为“sRGB”。最后我们的颜色应该与我们在 Redshift 中设置材质和灯光时的外观完全一样 如果你想尽可能地编辑纹理只需在顶部颜色转换层下方添加任何调整以确保利用 OpenEXR 中的所有颜色信息。
接下来我们可以将时间轴所有三个帧渲染为 PNG 序列并且我们将准备好在 Three.js 中使用的纹理文件。 现在以高位深度和全分辨率 (2048) 渲染它们。 输出后可以降低分辨率或将它们压缩为 jpg 等。它们应该如下所示。
6、将 Cinema 4D 场景导出为 glb/gltf。
切换回你的 Cinema 4D 文件并准备好导出到 glb/gltf。 你可能希望将场景保存为“-JustGeo”之类的副本因为我们将清除 Three.js 不需要的东西。
移除所有灯光、相机和你制作的重复几何图形以促进纹理烘焙。 大纲中唯一剩下的东西应该是空值、几何体如果你有一些被操纵的东西可能还有骨骼尽管导出一个被操纵/蒙皮的对象有很多复杂的事情所以在依赖这个工作流程进行任何动画或操纵之前做一些实验。 也可以移除材质标签但保留 UV 标签和 Phong 标签。
现在转到文件 - 导出 - glTF 并使用以下设置对其进行配置然后将其保存。
7、将 .glb 和纹理导入 Three.js
基本上有 4 件事你需要做才能让你的场景在 Three.js 中工作
使用基本样板创建通用场景三样东西。画布、场景、相机、轨道控件、渲染器、浏览器窗口的调整大小事件、初始化纹理加载器和 gltf 加载器以及添加动画循环。从它们的 URI 加载三个纹理文件将它们的每个编码更新为 THREE.sRGBEncoding并将它们的每个 flipY 属性设置为 false。创建三个 MeshBasicMaterials每个纹理一个并将它们的贴图属性设置为上面的纹理对象。加载 gltf。 在加载过程中遍历 gltf 并将正确的材质应用于每个几何体Cinema 4D 导出的命名将保留因此只需搜索具有这些名称的网格。 并将 gltf 添加到 Three.js 场景中。
好了3D 模型将以你在 Redshift 和 Cinema 4D 中开发的相同高质量外观在浏览器中运行。 原文链接C4D-Three.js流程 — BimAnt
