Making shader graph same as wwdc24

Hey there, I'm wonder if any one knows how to make the shader graph which is shown in wwdc24 video. I tired couple things but couldn't get same result I could make it in Unity and Blender but not in RCP. thank you. https://developer.apple.com/wwdc24/10106

Answered by Vision Pro Engineer in 797201022

Hello @Gamno, while I do not have access to the exact project shown in that video, I can attempt to walk you through the steps of building a similar material in Shader Graph. If you haven’t already, check out Build Materials in Shader Graph for more info on creating materials using Shader Graph.

A couple notes about what you see in the video: The nodes with yellow trim are composed from multiple base nodes and collapsed for brevity. Two types of nodes were created this way: an "incidence" node that outputs the dot product (float) of the view direction and surface normal, and an "undulate" node that outputs a vector3f that is used for the Model Position Offset input on a GeometryModifier node. You can create your own custom nodes by selecting a group of nodes and clicking Compose Node Graph in the context menu.

To build the "incidence" node, combine the outputs of a ViewDirection node with a Normal node into a DotProduct node. This value will be used to calculate the Color and Opacity inputs in an UnlitSurface node. Try experimenting by redirecting the outputs of this node through Power nodes and a Remap node to get the visual effect you are looking for.

To build the "undulate" node, input the outputs of a Position node and a Time node into an Add node, and input the output of the Add node to the Position of the Noise3D node. Finally, input the output of the Noise3D node to the Model Position Offset on the GeometryModifier node, which will be used for your final Outputs node. You’ll want to adjust some of the values here - I also multiplied the output of the Position node using a CustomFloat node (20.00) and Multiply node, as well as set the amplitude of the Noise3D node to something that looked more like the video (0.02).

Let me know if you have any issues achieving this effect on your end!

Hello @Gamno, while I do not have access to the exact project shown in that video, I can attempt to walk you through the steps of building a similar material in Shader Graph. If you haven’t already, check out Build Materials in Shader Graph for more info on creating materials using Shader Graph.

A couple notes about what you see in the video: The nodes with yellow trim are composed from multiple base nodes and collapsed for brevity. Two types of nodes were created this way: an "incidence" node that outputs the dot product (float) of the view direction and surface normal, and an "undulate" node that outputs a vector3f that is used for the Model Position Offset input on a GeometryModifier node. You can create your own custom nodes by selecting a group of nodes and clicking Compose Node Graph in the context menu.

To build the "incidence" node, combine the outputs of a ViewDirection node with a Normal node into a DotProduct node. This value will be used to calculate the Color and Opacity inputs in an UnlitSurface node. Try experimenting by redirecting the outputs of this node through Power nodes and a Remap node to get the visual effect you are looking for.

To build the "undulate" node, input the outputs of a Position node and a Time node into an Add node, and input the output of the Add node to the Position of the Noise3D node. Finally, input the output of the Noise3D node to the Model Position Offset on the GeometryModifier node, which will be used for your final Outputs node. You’ll want to adjust some of the values here - I also multiplied the output of the Position node using a CustomFloat node (20.00) and Multiply node, as well as set the amplitude of the Noise3D node to something that looked more like the video (0.02).

Let me know if you have any issues achieving this effect on your end!

Making shader graph same as wwdc24
 
 
Q