Code Repo: github.com/xuchi16/vis...
本文希望实现一个浮雕作品,在概念上主要包含以下内容:
- 几何着色器(Geometry Shader)的基本概念
- Blender 创建并导出简单的 USDZ 资产
- 在 Reality Composer Pro 中利用 Shader Graph 编辑包含几何着色器的材料

基本概念
实体对象可以绑定不同的材料(Material),在 visionOS 中主要包含 2 种材料:
-
PBR Material(Physically-Based Rendering) :基于物理渲染的材料,可见 10. PBR 基本概念
-
Custom Material:自定义材料,开发者可以通过 Shader Graph 组合不同的 Shader 来实现期望的视觉效果。
Shader 主要分为 2 类,均可在 Shader Graph 中进行操作:
- Surface shader: 主要用于控制 PBR 属性,最终汇总到 PreviewSurface 节点作为最终 Output 的输入
- Geometry shader: 主要用于控制几何属性,最终汇总到 GeometryModifier 节点作为最终 Output 的输入

主要步骤
为了实现浮雕的效果,主要分为如下步骤
-
利用文生图(Text to Image) AI 生成期望的浮雕图片。工具:Midjourney
-
利用工具利用浮雕图片生成对应的高度图(height map)和法线图(Normal map),工具:Materialize
-
使用建模工具(DCC)生成浮雕的基底,用于后续贴图。工具:Blender
-
在 Reality Composer Pro 中将步骤 2 中的贴图利用 Geometry Shader 变成最终浮雕作品
基本实现
生成图片
利用 Midjourney,生成特定比例的浮雕正视图。为了迎接龙年,这里指定了龙作为主题,提示词如下:
css
realistic front view of a Chinese dragon in relief style, Longmen Grottoes style, neutral lighting --ar 1:1 --v 6.0

可以发现和 AI 生成龙的爪子时会遇到和生成人像的手指类似的问题,我们在生成的结果中,我们选择画对爪子的图 1 进行增强(Upscale)。
生成贴图
将上一步生成的贴图导入到 Materialize 中,生成高度图和法线图。

生成基底
Reality Composer Pro 中的基础类型(Primitive Shape)只有如下的几种类型,而且无法只针对一个面进行贴图,因此需要利用建模软件创建基底实体。

这里我们使用 Blender
- 创建一个基本的平面:在 Object Mode 中,创建一个 Plane Mesh(Shift + A)

- 旋转坐标系
虽然 Reality Composer Pro 和 Blender 都是右手坐标系,但他们的坐标方向不同。
- Reality Composer Pro 中 Y 轴为向上方向,
- Blender 中 Z 轴为向上方向

这里有一个小技巧记住轴和颜色的对应:X/Y/Z 轴分别对应颜色 R/G/B。
颜色 | 轴 |
---|---|
R | X |
G | Y |
B | Z |
为了在贴图时平面的局部坐标系的 Y 方向为垂直于平面方向,我们需要翻转 Blender 中平面实体的局部坐标系。
- 在 Sidebar -> Tool -> Options -> Transform 中的 Affect Only 选项中勾选 Origins 选项(快捷键:N)
- 利用旋转工具,将坐标系调整为与 Reality Composer Pro 一致的方向

- 划分 Subdivision
在 Edit Mode 下,右击选择 Subdivide。这里可以将平面每边各划分 N 次,划分成(N+1)^2
个 Subdivision,取 N=100

- 从 Blender 导出 USDZ 模型
选择 File
-> Export
-> Universal Scene Description(.usd*)
。在导出时,有 2 个注意点:
- 需手动将导出名称的后缀从
.usdc
改为.usdz
- 需要将导出选项中的 Root Prim 设置为
/root
,否则后续 Reality Composer Pro 会抛出Multiple root level objects exist
错误

- 导入 Reality Composer Pro
将模型添加到RealityKitContent.rkassets
,并最终添加到场景中。

编辑材料
在 Reality Composer Pro 中新建一个 Custom Material,并且编辑对应的 Shader Graph。其中可以看到,Geometry 节点控制了最终 Outputs 的几何效果,这里我们控制了该节点的 2 个输入:
- Model Position Offset:使用高度图控制,将高度图的结果输入 Remap 节点用于控制浮雕的立体程度。此后利用 Combine3 节点,将结果作为 Y 坐标输入到 Geometry 节点,这样只会在垂直于平面方向发生位移
- Normal:使用法线图控制,直接输入到 Geometry 节点
将上述材料绑定到前一步骤导入的基底中,即可获得浮雕效果。

最终效果
