Reality Composer Pro 5 Color Cel Shader Node Graph

This is a 5 color cel shader node graph. It's an expanded version of the file I create in my in tutorial on building a cel shader. I do not plan to update this, it's just for instructional purposes, however you can use it however you see fit, just don't re-sell it please. It was created in Reality Composer Pro V1.0 packaged with Xcode 15 beta 8, and future updates to Reality Composer Pro / Xcode / visionOS might affect its compatibility.

This shader node graph can be used to easily create a cel shader with up to 5 colors, either with a hard-edge or with gradients between the colors. You can also shift the ratios of the colors by editing their 'factors.'

Disclaimers: Because it relies on the dot product of the normal and the view angle, your mesh must have correct normals. The shader calculation is based on one "infinite light" with a direction that is editable. The shader does not take into account shadows (or self-shadowing); this is evident in the eyesockets of the skull seen in the product images. This is the shader only - does not include the models (all of the models shown are models from Apple's library, or are primitives).

How to use:

Open or import into Reality Composer Pro. Assign the material to your mesh (or a Reality Composer Pro primitive).

Set the "light" position in the LightDirection node in the main material. The rest of the settings are in the "_5ColorCelShader" Node Graph.

I've left some common sense values set in the node graph. You can set up to five colors in the color picker, each color will be added in a ratio according to that color's 'factor' divided by the sum of all the colors' and transitions' 'factors'. To use fewer colors, just set that color's 'factor' to 0. There is also a transition between each color for creating a gradient between the two colors. Again, you can control how much of the shader is colored in this gradient by setting the transition's factor. There is also a boolean to remove all the gradient's with a single click by checking the 'aaIgnoreTransitions' checkbox.

If you'd like to purchase a slightly simpler version, see my 3 Color Cel Shader Node Graph, which just has three colors that you set, along with thresholds, and no gradients.

Play around with it and if you have any questions or make something cool, let me know on Twitter!

Feel free to do whatever you want with this item, just don't re-sell it.

💜 @mrdeerwhale