Spark AR —— 使用渲染通道(Render Pass)创建辉光效果【贴片】

952 阅读5分钟

Spark AR 是 Facebook 免费创作 AR 作品的平台,使用户能够为 Facebook 和 Instagram 创建交互式增强现实体验,超过 40 万名创作者,190个国家/地区,使用 Spark AR 来创作自己的AR作品

由于该软件无需任何编码知识即可使用,因此任何人现在都可以在 AR 世界中几乎没有经验地制作下一个疯狂式传播的 Instagram AR 特效,引领世界潮流。

专门的 AR 滤镜设计师单价甚至可达到 1000 美元到 3 万美元不等。

image.png

使用渲染通道,你可以绕过默认的渲染管道,通过自定义渲染管线生成多个渲染层。它们是一个更高级的功能,渲染通道可以给你更大的创造灵活性。在 Spark AR Studio 中,渲染通道在贴片编辑器中以贴片形式表示。

在本教程中,我们将看一种使用渲染通道给场景中的星星添加闪光的效果:

在这个效果中,渲染通过贴片来独立各个星星的渲染。同一颗星星的多重渲染在第一次渲染的顶部分层,每一层添加一个元素,逐渐建立发光的闪光—— 没有将闪光应用到 Camera Feed。

下载示例内容以查看完成的项目。本教程将解释图的每个部分做什么,以及我们如何配置渲染通道贴片,以达到最终的效果。

链接:pan.baidu.com/s/1dtqDxs9U… 提取码:q66r

在开始之前,有必要看一看这篇关于渲染通道贴片的文章,以学习基本知识。

完成效果的总览

在我们深入讨论每个渲染通过贴片功能如何创建发光粒子的细节之前,值得从整体上看这个项目。为此,在示例内容文件夹中打开完成的效果。在贴片编辑器中,你会看到下图:

image.png

在开始有 2 个场景渲染通道贴片:

  • 第一个 Scene Render Pass 贴片渲染场景对象和相机纹理。
  • 第二个 Scene Render Pass 分离粒子并在低分辨率下进行第二次渲染。

第二个粒子渲染被连接到一系列贴片组,分组视觉着色器。第一组被标记为 AddContrast 。它增加了星星的亮度和对比度。第二组(2 个)被标记为 Blur 。他们在星星的高亮区域添加了垂直和水平的模糊效果,创造了最终的发光效果。

Shader Render Pass 贴片处理这些着色器,然后是一个 Multiply 贴片,放大整体效果。

然后,Add 贴片将两个 Scene Render Pass 的输出连接到图的末尾,将第二个渲染通道创建的辉光与第一个Scene Render Pass的完全渲染粒子相结合,添加发光的表面高光。

第一个粒子的渲染

这个贴片是渲染管线的开始。它将场景面板中的所有内容渲染到效果的前景中,包括粒子系统。这是通过连接一个代表 Device 的贴片到 Scene Object 输入端口来实现的。

摄像机纹理在背景中进行渲染,通过一个表示摄像机纹理的贴片连接到 Scene Render Pass 贴片中的 Background 输入。

如果我们将输出连接到 Screen Output 贴片,我们将拥有一个完整的渲染管线,它将与默认的渲染管线相匹配。唯一的区别是 distortionretouching 是不可用的,因为它们不支持自定义渲染管线。

下图是在没有任何附加 渲染通道贴片 或 视觉着色器 连接的情况下,图像的剖面图:

image.png

效果看起来就像没有自定义渲染管线一样。渲染了一个带有星星的粒子系统。一种基于物理的材质赋予了星星金属般的外观,但没有发光的亮点:

image.png

第二个粒子的渲染

在本节教程中,我们从Screen Input 贴片断开了第一个Scene Render Pass。这意味着我们将在黑色背景上清楚地看到粒子的第二次渲染。在本教程的最后,我们将结合这两种渲染。

第二个 Scene Render Pass 贴片

第二个 scene render pass 通过连接一个代表粒子系统的贴片到 Scene Object 输入端口,然后连接 Scene Render PassScreen Output 贴片,来第二次渲染粒子:

image.png

我们对 Scene Render Pass 中的 Size 值进行了调整,以低分辨率渲染粒子,将每个值从 1 更改为 0.125 。低分辨率构建了模糊效果,形成了最终发光的基础,同时渲染效率更高。

下面是模拟器中的效果:

69528694_1079588018903892_8484091505311481856_n.gif

AddContrast 贴片组

一个名为 AddContrast 的贴片组对一系列视觉着色器贴片进行分组。这组放大了星星的高光,所以它们会闪烁得更多些。它是在第二个Scene Render Pass贴片之后添加到图表中的:

image.png

下面是添加这个贴片组后的效果:

69528694_1079588018903892_8484091505311481856_n.gif

Blur 贴片组和 Shader Render Pass 贴片

两个 Blur 贴片组对 AddContrast 贴片组所创建的高光应用模糊效果。一组水平模糊高光,另一组垂直模糊高光,这是由每个贴片中的 Step 值定义的。

以下是添加了两个 Blur 贴片组的图,每个贴片组后面都有一个 Processor Render Pass:

Blur 贴片组中,我们连接了一系列视觉着色补丁,以创建渲染通道的多个副本,每次都对它们进行偏移,并将它们加到一起,沿着贴片组中的 Step 设置的方向涂抹图像。这就是所谓的卷积核。

image.png

Shader Render Passes 在(通过贴片中的 Size 值设置的)分辨率上来处理视觉着色贴片组,然后存储结果。没有它们的话,效果处理就会变慢。接着,一个 Multiply 贴片放大效果:

69528694_1079588018903892_8484091505311481856_n.gif

合并渲染器

最后的Add贴片将两个 Scene Render Pass 贴片的输出在图的末尾合并。

Multiply 贴片与 Device 贴片的 Screen Size 端口的输出相乘,并通过Texture Size 输入将此数据传递给每个 Blur 贴片组。

下面是最终的图,新的 MultiplyAdd 贴片以蓝色高亮显示:

image.png

下面是模拟器中的完整效果:

69528694_1079588018903892_8484091505311481856_n.gif