elm-explorations / webgl / WebGL.Settings.Blend

Blenders

add : Factor -> Factor -> WebGL.Settings.Setting

Add the color of the current Renderable (the source color) with whatever is behind it (the destination color). For example, here is the “default” blender:

add one zero

The resulting color will be (src * 1) + (dest * 0), which means we do not use the destination color at all! You can get a feel for all the different blending factors here.

subtract : Factor -> Factor -> WebGL.Settings.Setting

Similar to add, but it does (src * factor1) - (dest * factor2). For example:

subtract one one

This would do (src * 1) - (dest * 1) so you would take away colors based on the background.

reverseSubtract : Factor -> Factor -> WebGL.Settings.Setting

Similar to add, but it does (dest * factor2) - (src * factor1). This one is weird.

Blend Factors


type Factor

zero : Factor

one : Factor

srcColor : Factor

oneMinusSrcColor : Factor

dstColor : Factor

oneMinusDstColor : Factor

srcAlpha : Factor

oneMinusSrcAlpha : Factor

dstAlpha : Factor

oneMinusDstAlpha : Factor

srcAlphaSaturate : Factor

Custom Blenders

custom : { r : Basics.Float, g : Basics.Float, b : Basics.Float, a : Basics.Float, color : Blender, alpha : Blender } -> WebGL.Settings.Setting

It is possible to do some very fancy blending with custom. For example, you can blend the color value and the alpha values separately:

myBlender : Float -> Setting
myBlender alpha =
    custom
        { r = 0
        , g = 0
        , b = 0
        , a = alpha
        , color = customAdd one zero
        , alpha = customAdd one constantAlpha
        }


type Blender

A Blender mixes the color of the current Entity (the source color) with whatever is behind it (the destination color). You can get a feel for all the options here.

customAdd : Factor -> Factor -> Blender

customSubtract : Factor -> Factor -> Blender

customReverseSubtract : Factor -> Factor -> Blender

constantColor : Factor

This uses the constant r, g, b, and a values given to custom. If you use this Factor with add, the constant color will default to black.

Because of restriction in WebGL, you cannot create a Blender, that has one factor set to constantColor or oneMinusConstantColor and another set to constantAlpha or oneMinusConstantAlpha.

oneMinusConstantColor : Factor

constantAlpha : Factor

oneMinusConstantAlpha : Factor