elm-explorations/webgl/1.0.0

NOTE: the latest version is 1.1.3

WebGL.Settings.Blend

Blenders

add : Factor -> Factor -> 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 -> 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 -> Setting

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

Blend Factors

type Factor

Custom Blenders

{ r : Float
, g : Float
, b : Float
, a : Float
, color : Blender
, alpha : Blender
}
-> 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.

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.