xcoderealitykitvisionosreality-composer-pro

RealityComposerPro: Gradient between 2 textures in Shader Graph


I'm working with VisionOS and Reality Composer Pro.

Does anyone know how could I mix together 2 images files in an horizontal gradient? and with a float value I would like to move the center of the gradient from left to right.

I guess I need to use the Ramp-horizontal node, but I'm confused how can I use the textureCoordinate to change the center of the gradient from a float value


Solution

  • Compositing two images using a gradient mask

    There are a lot of ways of how to compose two images via horizontal ramp in the ShaderGraph of RCP 2.0. However, I want to show the traditional compositing technique using the Over math. All you need to know is that the gradient will act as an alpha channel. And the control parameter for offsetting the white part of gradient left-right will be the U-axis of the Multiply node.

    enter image description here

    The deciphering of the Over formula looks like this:

    //   Fg + Bg * (1 - A)
    
    //   Fg       – foreground image with premultiplied alpha   (RGB * A)
    //   Bg       – background image                            (RGB)
    //   A        – Fg's alpha                                  (A)
    //   1 - A    – alpha's inversion                           (!A)
    

    Our ramp alpha mask doesn't have a center in the conventional sense. The gradient has a white color (where premultiplied FG image is 100% opaque) and a black color (where premultiplied FG image is 100% transparent) that are controlled mathematically using the multiply, add, gamma or invert operators.


    enter image description here

    Unfortunately, such an approach has a significant drawback: you can move the gradient mask in a non-linear manner. Read further to find out how to improve this.

    enter image description here


    Alternative solution

    The alternative solution would be to use Split Horizontal node because this node will allow you to move the mask in the normalized space in the range 0.0...1.0, i.e. in a linear manner. However, you will not be able to blur the boundary between the white and black colors of the mask, because at the moment the list of 250+ nodes doesn't contain a single node from the Filtering category, that is, the transition between FG and BG in this case will be harsh (not-smooth).

    enter image description here