Skip to main content

Compositors

As seen before, an effect could be only applied to one renderable. What if I want to render something using multiple renderables?

The simplest example is dstOverSrc:

{-| Draw the dst renderable over the src renderable.
-}
dstOverSrc : Renderable -> Renderable -> Renderable
dstOverSrc src dst =

This is the default behavior when you list renderables in REGL.group. For example, REGL.group [] [A, B, C] is the same as dstOverSrc (dstOverSrc A B) C.

Commands like dstOverSrc are called compositors. They accept multiple renderables as inputs and output a renderable.

Compositors may also be nested.

Built-in Compositors​

dstOverSrc​

{-| Draw the dst renderable over the src renderable.
-}
dstOverSrc : Renderable -> Renderable -> Renderable
dstOverSrc src dst =

maskBySrc​

{-| Draw the dst renderable masked by the src renderable.
-}
maskBySrc : Renderable -> Renderable -> Renderable
maskBySrc src dst =

imgFade​

{-| Fading effect using a mask image.

Mask image is a gradient image, similar to [this](https://github.com/linsyking/elm-regl/blob/main/docs/asset/mask.jpg).

-}
imgFade : String -> Float -> Bool -> Renderable -> Renderable -> Renderable
imgFade mask t invert src dst =

linearFade​

{-| Linear fading effect.
-}
linearFade : Float -> Renderable -> Renderable -> Renderable
linearFade t src dst =