Lab 081 – Exploring Feathered Materials
Adding a soft, gradual transition at the edges of 3D objects.
Overview
At a recent meeting we were wondering how to created the feathered look that Apple uses around some of their occlusion cutouts. Below is a screenshot showing the effect we hope to achieve.
Le-Roy Karunaratne created three stunning materials to explore feathered edges in Shader Graph. The heavy lifting is done by the nodes that feed into the opacity channel.
Video Demo:
Shader Graph Materials
Unfortunately, the Occlusion Surface nodes lack any sort of input. If you know how to blend these effects with RealityKit Occlusion, please let us know!
Lab Code
The real work for this lab was done by Le-Roy Karunaratne in the Shader Graph materials. The code just loads a scene from Reality Composer Pro and makes the entities interactive.
struct Lab081: View {
var body: some View {
RealityView { content in
guard let scene = try? await Entity(named: "FeatheredMatLab", in: realityKitContentBundle) else { return }
content.add(scene)
// Add ManipulationComponent to every entity that already has an InputTargetComponent (added in RCP)
var stack: [Entity] = Array(content.entities)
await MainActor.run {
while let entity = stack.popLast() {
if entity.components.has(InputTargetComponent.self) &&
!entity.components.has(ManipulationComponent.self) {
entity.components.set(ManipulationComponent())
}
stack.append(contentsOf: entity.children)
}
}
}
.realityViewLayoutBehavior(.centered)
}
}
Support our work so we can continue to bring you new examples and articles.
Download the Xcode project with this and many more labs from Step Into Vision.
Follow Step Into Vision