说明
以前在写核算几何时,写到过 S04E11: 李萨如曲线体网格生成,其中在一个圆环上叠加 2 个周期的正弦动摇(即 2*2),即可生成 Meta Logo 的 Mesh 网格几何体。
实际上,借用同样的思路只用编写 Shader,也能将一个圆环变成一个 Meta Logo。刚好此次 Xcode 15 中的 Reality Composer Pro 支撑了 Shader Graph 功能,让咱们能够通过拖拖拽拽就能编写好一个 Shader,那就来试玩一下吧!
准备作业
不过首先,咱们需求一个圆环体,这儿不得不吐槽一下,以前在 SceneKit 编辑器界面能够直接拖拽生成圆环体的,现在 Reality Composer Pro 却只有立方体球体等几种。这儿不得不凭借 Blender 生成一下基础的圆环体,记住将主环段数设置的略微大一些,这样变形后的几何体也会平滑。导出为 .usdc
文件即可。
在 Xcode 中翻开 Reality Composer Pro,创立一个新的工程。
将模型导入,并拖动到 3D 场景中,由于没有原料,所以整个模型显现为紫赤色条纹,咱们需求创立一个新的原料。
将原料应用到圆环几何体上,然后选中原料,翻开 Shader Graph 面板,能够愉快地编写 Shader 了。
增加新的 Shader 节点的办法是:在空白处双击,或从任一输入或输出拖拽出来,即可弹出挑选面板。引荐选用拖拽方法,由于这样能够主动匹配类型,比方从输出拖拽时,输出类型是 vector3
的话,弹出界面中会筛选出能够承受 vector3
类型的节点。
别的需求提前留意的是:圆环模型大环在 XY 平面上,半径 2m,小环是绕 Z 轴旋转,半径 0.25m。要得到 Meta Logo 咱们需求编写 Shader 将圆环上的点沿 Z 轴进行偏移。
基本思路
假如直接对一切点沿着 Z 轴进行偏移的话,由于不同方位的偏移量不一致,会导致圆环变得扁平。 这时咱们就需求先沿旧法线将小环收缩成一条线并增加 Z 坐标歪曲,然后从头核算歪曲后的法线,再沿新的法线康复小环,就能让小环康复成圆形。全体流程和作用如下图所示: 接下来,咱们依照五个主要流程来解说核算的原理。
1.收缩小环
要收缩小环其实十分简单,增加一个 GeometryModifier,然后将一切的点沿法线移动 -0.25,即可将小环缩小到 0。用伪代码表达:
newPosition = position + normal * (-0.25)
当然,假如此时直接缩小到 0 就看不到,为了便利调查能够先移动 -0.245 可是,由于最终回来的是偏移量 Position Offset,也便是将原有的点移动多少而不是每个点的具体方位,这样会导致后续核算呈现困难,所以咱们还需求做一些小的修正:先加上原始方位,得到偏移后的坐标,中间核算能够在此基础上进行,最终输出时再减去原始方位,得到最终偏移量做为输出。
由于鄙人一步中,咱们需求对 Z 坐标进行独自操作,这时咱们就需求用到别的两个节点:Separate3 和 Combine3,前者能够将三维向量分解为三个独自的量,后者则是将三个独自的量组合为一个三维向量。 选中前面多个节点,点击右键,挑选:Compose Node Graph 来紧缩节点收拾一下,将紧缩后的命名为:CenterLine。至此,收缩小环的作业完美完成了!
2.歪曲大环
要歪曲大环,咱们需求知道每一个点在大环上的方位,或者说视点。这儿咱们使用 atan2
函数来求夹角,将 XY 坐标输入就得到该点相对于 X 轴的夹角,输出范围为 (-,]。
接下来对 Z 坐标增加 2 个周期的歪曲,动摇起伏也是 2m,用伪代码表达便是:
angle = atan2(x, y)
z = sin(2*angle) * 2
能够看到大环发生了明显的歪曲,滚动不同方位调查,就会发现已经和 Meta Logo 比较相似了。
3.核算歪曲切线
要获取歪曲后的法线,需求先核算歪曲后大环的切线。这儿咱们弥补一点数学知识:假如已知一条曲线的数学表达式,要求恣意点的切线,只需求对其表达式求导即可。那么收缩后的图形的表达式为:
// 大环半径为 2 米
x = sin(angle) * 2
y = cos(angle) * 2
z = sin(2*angle) * 2
//对其求导后
x' = cos(angle)
y' = -sin(angle)
z' = cos(2*angle) * 2 //复合函数求导链式规律:f[(g(x))]' = f'[g(x)] * g'(x),也便是说:sin'(2x) = cos(2x) * 2;sin'(3x) = cos(3x) * 3;sin'(4x) = cos(4x) * 4
最终要对求出的切线长度进行归一化 Normalize,以便后续处理,顺便将节点收拾紧缩一下,如下图:
4.核算歪曲法线
咱们先用切线和旧的法线,进行叉乘得到副切线。将副切线与切线再次进行叉乘,即可得到新的法线方向。这儿需求副切线,是由于咱们歪曲 Z 坐标时,副切线不变,它实际相当于旋转轴。 这儿需求留意叉乘的次序:叉乘遵守右手螺旋规律,右手手指从第一个向量动身,向第二个向量弯曲,大拇指方向便是新向量的方向。 用伪代码表明如下:
bitangent = cross(tangent, oldNormal)
newNormal = cross(bitangent, tangent)
修正 Shader Graph 如下,最终记住将求出的新法线,赋值给 GeometryModifier 的 Normal 属性,以便显现出正确的光照作用。
5.康复小环
康复小环也很简单,将挤在中心线上的点沿新的法线移动 0.25 米即可,用伪代码表达:
newPosition = centerOffset + newNormal * 0.25
还要记住,将前面的 -0.245
改为 -0.25
,以便取得更完美的作用。收拾好的 Shader Graph 如下:
展开后完全版 Shader Graph 如下:
6.其他
最终,咱们选中物体,将其绕 X 轴旋转 90 度,这样看上去更像 Meta Logo 了。由于咱们的 Shader Graph 是作用在 Geometry 上,也便是模型空间坐标系,所以外部旋转并不会影响 Shader 的坐标系。 相信大家也发现了,当咱们选中物体时,显现的高亮概括仍然是原来的圆环的形状,这是由于 Shader 代码作业在 GPU 上,咱们只更改了物体的显现作用。当物体与其他物体(包括鼠标,眼动等交互操作)交互时,实际是在 CPU 上处理的物理磕碰核算,这些咱们并没有专门处理。
最终的最终,假如想要显现更多周期的动摇,只需求将下图中赤色框中倍数进行更改即可,比方改为 3个周期:
总结
此次 Reality Composer Pro 的更新十分强大,尤其是对 Shader Graph 的支撑让人惊喜,从使用者的视点,使用 Shader Graph 比直接编写 Shader 代码要容易很多,能够有用降低入门门槛。缺点方面:偶然会遇到一些类型的 bug;别的短少 Debug 功能让人编写代码时难以调试。
总之,功能强大,简练好用,引荐初学者都来试试!
本文工程代码已开源,github 地址: github.com/XanderXu/Sh…