Rendering

Published: September 03, 2019
Edited: November 06, 2020

The following properties determine how the active texture, and/or the descendants textures, are being rendered.

NameTypeDefaultDescription
alphaFloat1Opacity: 0 = transparent, 1 = opaque
visibleBooleantrueEnable / disable rendering
colorHex0xFFFFFFFFColor (ARGB)
colorTopHex0xFFFFFFFFTop color of a color gradient.
colorBottomHex0xFFFFFFFFBottom color of a color gradient.
colorLeftHex0xFFFFFFFFLeft color of a color gradient. (overwrites: colorUl, colorBl)
colorRightHex0xFFFFFFFFRight color of a color gradient. (overwrites: colorUr, colorBr)
colorUlHex0xFFFFFFFFTop-left color of a color gradient.
colorUrHex0xFFFFFFFFTop-right color of a color gradient.
colorBlHex0xFFFFFFFFBottom-left color of a color gradient.
colorBrHex0xFFFFFFFFBottom-right color of a color gradient.
clippingBooleanfalseEnables clipping (only for rectangular)
zIndexInteger0z-Index sets render priority
forceZIndexContextBooleanfalseEnables a z-index context
shaderObject{}Sets a non-default shader

Visibility

The visibility of an element can be toggled using the visible property. When an element is invisible, it will not be rendered (saving performance). Notice that off screen elements are also not rendered, so it's not necessary to manually hide those to save performance.

The alpha property defines the opacity. Setting alpha to 0 also prevents the element from being rendered. Alpha affects the opacity all descendants as well.

Color

The color can be used to colorize the currently active texture. You can specify different directions / corner points to create a gradient. Check more on textures to see colorization in action.

Clipping

When clipping is activated, everything outside of the dimensions of this element is not rendered. In that sense the effect is similar to overflow:hidden in CSS. In Lightning it might even give a performance boost, because descendants outside of the clipping region are detected and don't have to be rendered.

Clipping is implemented using the ultra performant WebGL scissor operation. A consequence of that is that it does not work for non-rectangular areas. So if the element is rotated (by itself or any of its ancestors), clipping will not be performed. If you are running into this case, use the advanced renderToTexture, which, as a side effect, also causes clipping.

Z-indexing

Lightning also supports z-indexing, similar to CSS. It alters the order in which the textures are being rendered as you'd expect. In Lightning, a z-index context is created by:

  • setting a non-zero zIndex
  • setting forceZIndexContext (can be handy in combination with zIndex: 0)
  • setting renderToTexture

Shader

The shader can affect the way that textures of the element and descendants are being rendered:

class LiveDemo extends lng.Application {
    static _template() {
        return {
            shader: {type: lng.shaders.Grayscale, amount: 0.9},
            LilLightning:{ x: 100, y: 50, src: '/Lightning/img/LngDocs_LilLightningIdle.png'},
            Header: {
                rect: true, w: window.innerWidth, h: 50, color: 0xff005500
            },
            SubLilLightning: {
                x: 400, y: 50, src: '/Lightning/img/LngDocs_LilLightningIdle.png',
                shader: null // Reset shader to default.
            },
            SubLilLightning2: {
                x: 400, y: 250, src: '/Lightning/img/LngDocs_LilLightningIdle.png',
                shader: {type: lng.shaders.Inversion} // Reset shader to other.
            }
        }
    };
}

const app = new LiveDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());
PHP Code Snippets Powered By : XYZScripts.com