Merge pull request #584 from elsassph/feat/alpha-hidden-optimisation

Feature: don't render very transparent elements

Author: michielvandergeest

docs/RenderEngine/Elements/Rendering.md

@@ -33,6 +33,18 @@ You can set the visibility of an element in the following ways:
 * Using the `visible` property. If  the value of this property is set to 'false',  the element is not rendered (which saves performance). If an element is invisible, the off-screen elements are invisible as well, so you do not have to hide those manually to maintain a good performance.
 * Using the `alpha` property, which defines the opacity of an element and its descendants. If the value of this property is set to 0 (zero), the element is not rendered.
 
+### Alpha-based Performance Optimization
+
+Lightning automatically optimizes rendering performance by skipping elements with very low alpha values. Elements with an effective alpha of `0.001` or less are considered invisible and are automatically excluded from:
+
+* Rendering operations
+* Mouse hit testing and interaction detection
+
+This optimization helps improve performance by avoiding unnecessary rendering work for elements that are effectively invisible to users, while still allowing for texture loading and smooth fade-in/fade-out animations.
+
+Note: actual alpha test is `< 0.002` to avoid floating point errors when animating to `0.001`.
+
+
 ## Color
 
 

src/tree/core/ElementCore.mjs

@@ -19,6 +19,8 @@
 
 import FlexTarget from "../../flex/FlexTarget.mjs";
 
+const MIN_ALPHA_RENDER = 0.002;
+
 export default class ElementCore {
 
     constructor(element) {
@@ -1821,7 +1823,7 @@ export default class ElementCore {
             this.sortZIndexedChildren();
         }
 
-        if (this._outOfBounds < 2 && this._renderContext.alpha) {
+        if (this._outOfBounds < 2 && this._renderContext.alpha >= MIN_ALPHA_RENDER) {
             let renderState = this.renderState;
 
             if ((this._outOfBounds === 0) && this._displayedTextureSource) {
@@ -1861,7 +1863,7 @@ export default class ElementCore {
             this.sortZIndexedChildren();
         }
 
-        if (this._outOfBounds < 2 && this._renderContext.alpha) {
+        if (this._outOfBounds < 2 && this._renderContext.alpha >= MIN_ALPHA_RENDER) {
             let renderState = this.renderState;
 
             let mustRenderChildren = true;
@@ -2197,7 +2199,7 @@ export default class ElementCore {
 
     collectAtCoord(x, y, children) {
         // return when branch is hidden
-        if (this._renderContext.alpha === 0) {
+        if (this._renderContext.alpha < MIN_ALPHA_RENDER) {
             return;
         }