如何编写SceneKit着色器修改器以使效果溶解

Question

我想为Scenekit游戏创建一个效果器。我一直在研究着色器修改器，因为它们似乎是最轻的并且在复制此效果方面没有任何运气：

是否可以使用着色器修改器创建此效果？ 您将如何实施？

Answer 1

使用片段着色器修改器可以非常接近预期的效果。基本方法如下：

• 噪声纹理中的样本
• 如果噪声样本低于某个阈值（我称之为“泄露”），则将其丢弃，使其完全透明
• 否则，如果片段靠近边缘，则用您喜欢的边缘颜色（或渐变）替换其颜色
• 应用绽放使边缘发光

这是执行此操作的着色器修改器代码：

#pragma arguments

float revealage;
texture2d<float, access::sample> noiseTexture;

#pragma transparent
#pragma body

const float edgeWidth = 0.02;
const float edgeBrightness = 2;
const float3 innerColor = float3(0.4, 0.8, 1);
const float3 outerColor = float3(0, 0.5, 1);
const float noiseScale = 3;

constexpr sampler noiseSampler(filter::linear, address::repeat);
float2 noiseCoords = noiseScale * _surface.ambientTexcoord;
float noiseValue = noiseTexture.sample(noiseSampler, noiseCoords).r;

if (noiseValue > revealage) {
    discard_fragment();
}

float edgeDist = revealage - noiseValue;
if (edgeDist < edgeWidth) {
    float t = edgeDist / edgeWidth;
    float3 edgeColor = edgeBrightness * mix(outerColor, innerColor, t);
    _output.color.rgb = edgeColor;
}

请注意，recoverage参数作为材料参数公开，因为您可能希望对其进行动画处理。还可以对其他内部常量（例如边缘宽度和噪点比例）进行微调，以使您的内容获得所需的效果。

不同的噪声纹理会产生不同的溶解效果，因此您也可以尝试一下。我只是使用了这个倍频程值噪声图像：

将图像加载为UIImage或NSImage，然后将其设置在显示为noiseTexture的材质属性上：

material.setValue(SCNMaterialProperty(contents: noiseImage), forKey: "noiseTexture")

您需要添加绽放作为后期处理，以获得发光的电子线效果。在SceneKit中，这就像启用HDR管道并设置一些参数一样简单：

let camera = SCNCamera()
camera.wantsHDR = true
camera.bloomThreshold = 0.8
camera.bloomIntensity = 2
camera.bloomBlurRadius = 16.0
camera.wantsExposureAdaptation = false

所有数字参数可能都需要根据您的内容进行调整。

为使内容整洁，我更喜欢将着色器修改器保留在自己的文本文件中（我将其命名为“ dissolve.fragment.txt”）。这是加载一些修改器代码并将其附加到材料的方法。

let modifierURL = Bundle.main.url(forResource: "dissolve.fragment", withExtension: "txt")!
let modifierString = try! String(contentsOf: modifierURL)
material.shaderModifiers = [
    SCNShaderModifierEntryPoint.fragment : modifierString
]

最后，要制作动画效果，可以使用用CABasicAnimation包装的SCNAnimation：

let revealAnimation = CABasicAnimation(keyPath: "revealage")
revealAnimation.timingFunction = CAMediaTimingFunction(name: .linear)
revealAnimation.duration = 2.5
revealAnimation.fromValue = 0.0
revealAnimation.toValue = 1.0
let scnRevealAnimation = SCNAnimation(caAnimation: revealAnimation)
material.addAnimation(scnRevealAnimation, forKey: "Reveal")