Canvas2d: Proper support of AlphaTest and AlphaBlend (Transparency)

 - For Sprite2d, you have to set BaseTexture.hasAlpha to true on the used texture to enable AlphaBlend, otherwise Opaque render mode is used. Blend is used because Sprite2d.useAlphaFromTexture is true by default, if you set it to false with the texture still with hasAlpha to true: AlphaTest render mode will be used instead.
 - Shapre2d primitives are either Opaque or Transparent.

src/Canvas2d/babylon.ellipse2d.ts

@@ -327,13 +327,13 @@
                 renderCache.fillIndicesCount = triCount * 3;
 
                 // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], true);
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
                 if (ei) {
                     renderCache.effectFillInstanced = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
                 }
 
                 // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], false);
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
                 renderCache.effectFill = engine.createEffect({ vertex: "ellipse2d", fragment: "ellipse2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
             }
 
@@ -366,13 +366,13 @@
                 renderCache.borderIndicesCount = (triCount* 3);
 
                 // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], true);
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
                 if (ei) {
                     renderCache.effectBorderInstanced = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
                 }
 
                 // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], false);
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
                 renderCache.effectBorder = engine.createEffect("ellipse2d", ei.attributes, ei.uniforms, [], ei.defines, null);
             }
 

src/Canvas2d/babylon.lines2d.ts

@@ -1037,13 +1037,13 @@
                 renderCache.fillIndicesCount = this._fillIB.length;
 
                 // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["position"], true);
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["position"], null, true);
                 if (ei) {
                     renderCache.effectFillInstanced = engine.createEffect("lines2d", ei.attributes, ei.uniforms, [], ei.defines, null);
                 }
 
                 // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["position"], false);
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["position"], null, false);
                 renderCache.effectFill = engine.createEffect("lines2d", ei.attributes, ei.uniforms, [], ei.defines, null);
             }
 
@@ -1054,13 +1054,13 @@
                 renderCache.borderIndicesCount = this._borderIB.length;
 
                 // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["position"], true);
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["position"], null, true);
                 if (ei) {
                     renderCache.effectBorderInstanced = engine.createEffect({ vertex: "lines2d", fragment: "lines2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
                 }
 
                 // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["position"], false);
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["position"], null, false);
                 renderCache.effectBorder = engine.createEffect({ vertex: "lines2d", fragment: "lines2d" }, ei.attributes, ei.uniforms, [], ei.defines, null);
             }
 

src/Canvas2d/babylon.prim2dBase.ts

@@ -1421,7 +1421,9 @@
                     this.addChild(child);
 
                     // Good time to patch the hierarchy, it won't go very far if there's no need to
-                    child._patchHierarchy(this.owner);
+                    if (this.owner != null) {
+                        child._patchHierarchy(this.owner);
+                    }
                 }
             }
 

src/Canvas2d/babylon.rectangle2d.ts

@@ -418,13 +418,13 @@
                 renderCache.fillIndicesCount = triCount * 3;
 
                 // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], true);
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, true);
                 if (ei) {
                     renderCache.effectFillInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
                 }
 
                 // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], false);
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_FILLPARTID, ["index"], null, false);
                 renderCache.effectFill = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
             }
 
@@ -457,13 +457,13 @@
                 renderCache.borderIndicesCount = triCount * 3;
 
                 // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], true);
+                let ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, true);
                 if (ei) {
                     renderCache.effectBorderInstanced = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
                 }
 
                 // Get the non instanced version
-                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], false);
+                ei = this.getDataPartEffectInfo(Shape2D.SHAPE2D_BORDERPARTID, ["index"], null, false);
                 renderCache.effectBorder = engine.createEffect("rect2d", ei.attributes, ei.uniforms, [], ei.defines, null);
             }
 

src/Canvas2d/babylon.renderablePrim2d.ts

@@ -350,15 +350,7 @@
          * The setter should be used only by implementers of new primitive type.
          */
         public get isAlphaTest(): boolean {
-            return this._isAlphaTest;
-        }
-
-        public set isAlphaTest(value: boolean) {
-            if (this._isAlphaTest === value) {
-                return;
-            }
-            this._isAlphaTest = value;
-            this._updateRenderMode();
+            return this._useTextureAlpha() || this._isPrimAlphaTest();
         }
 
         @dynamicLevelProperty(Prim2DBase.PRIM2DBASE_PROPCOUNT + 1, pi => RenderablePrim2D.isTransparentProperty = pi)
@@ -367,15 +359,7 @@
          * The setter should be used only by implementers of new primitive type.
          */
         public get isTransparent(): boolean {
-            return this._isTransparent || (this._opacity<1);
-        }
-
-        public set isTransparent(value: boolean) {
-            if (this._isTransparent === value) {
-                return;
-            }
-            this._isTransparent = value;
-            this._updateRenderMode();
+            return (this._opacity<1) || this._shouldUseAlphaFromTexture() || this._isPrimTransparent();
         }
 
         public get renderMode(): number {
@@ -390,8 +374,6 @@
         }) {
             super(settings);
 
-            this._isTransparent            = false;
-            this._isAlphaTest              = false;
             this._transparentPrimitiveInfo = null;
         }
 
@@ -492,7 +474,7 @@
             // At this stage we have everything correctly initialized, ModelRenderCache is setup, Model Instance data are good too, they have allocated elements in the Instanced DynamicFloatArray.
 
             // The last thing to do is check if the instanced related data must be updated because a InstanceLevel property had changed or the primitive visibility changed.
-            if (this._isFlagSet(SmartPropertyPrim.flagVisibilityChanged) || context.forceRefreshPrimitive || newInstance || (this._instanceDirtyFlags !== 0) || (this._globalTransformProcessStep !== this._globalTransformStep)) {
+            if (this._isFlagSet(SmartPropertyPrim.flagVisibilityChanged) || context.forceRefreshPrimitive || newInstance || (this._instanceDirtyFlags !== 0) || (this._globalTransformProcessStep !== this._globalTransformStep) || this._mustUpdateInstance()) {
 
                 this._updateInstanceDataParts(gii);
             }
@@ -626,6 +608,26 @@
             }
         }
 
+        protected _mustUpdateInstance(): boolean {
+            return false;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return false;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return false;
+        }
+
+        protected _isPrimAlphaTest(): boolean {
+            return false;
+        }
+
+        protected _isPrimTransparent(): boolean {
+            return false;
+        }
+
         private _updateInstanceDataParts(gii: GroupInstanceInfo) {
             // Fetch the GroupInstanceInfo if we don't already have it
             let rd = this.renderGroup._renderableData;
@@ -813,9 +815,10 @@
          * Get the info for a given effect based on the dataPart metadata
          * @param dataPartId partId in part list to get the info
          * @param vertexBufferAttributes vertex buffer attributes to manually add
+         * @param uniforms uniforms to manually add
          * @param useInstanced specified if Instanced Array should be used, if null the engine caps will be used (so true if WebGL supports it, false otherwise), but you have the possibility to override the engine capability. However, if you manually set true but the engine does not support Instanced Array, this method will return null
          */
-        protected getDataPartEffectInfo(dataPartId: number, vertexBufferAttributes: string[], useInstanced: boolean = null): { attributes: string[], uniforms: string[], defines: string } {
+        protected getDataPartEffectInfo(dataPartId: number, vertexBufferAttributes: string[], uniforms: string[] = null, useInstanced: boolean = null): { attributes: string[], uniforms: string[], defines: string } {
             let dataPart = Tools.first(this._instanceDataParts, i => i.id === dataPartId);
             if (!dataPart) {
                 return null;
@@ -841,7 +844,11 @@
                 defines += "#define Instanced\n";
             }
 
-            return { attributes: instancedArray ? vertexBufferAttributes.concat(att) : vertexBufferAttributes, uniforms: instancedArray ? [] : att, defines: defines };
+            return {
+                attributes: instancedArray ? vertexBufferAttributes.concat(att) : vertexBufferAttributes,
+                uniforms: instancedArray ? (uniforms != null ? uniforms : []) : ((uniforms != null) ? att.concat(uniforms) : (att!=null ? att : [])),
+                defines: defines
+            };
         }
 
         protected get modelRenderCache(): ModelRenderCache {
@@ -935,8 +942,6 @@
         private _transparentPrimitiveInfo: TransparentPrimitiveInfo;
 
         protected _instanceDataParts: InstanceDataBase[];
-        protected _isAlphaTest: boolean;
-        protected _isTransparent: boolean;
         private _renderMode: number;
     }
 

src/Canvas2d/babylon.shape2d.ts

@@ -88,8 +88,11 @@
                 }
             }
 
+            this._isTransparent = false;
+            this._oldTransparent = false;
             this.border = borderBrush;
             this.fill = fillBrush;
+            this._updateTransparencyStatus();
             this.borderThickness = settings.borderThickness;
         }
 
@@ -171,9 +174,28 @@
         }
 
         private _updateTransparencyStatus() {
-            this.isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity<1);
+            this._isTransparent = (this._border && this._border.isTransparent()) || (this._fill && this._fill.isTransparent()) || (this.actualOpacity < 1);
+            if (this._isTransparent !== this._oldTransparent) {
+                this._oldTransparent = this._isTransparent;
+                this._updateRenderMode();
+            }
+        }
+
+        protected _mustUpdateInstance(): boolean {
+            let res = this._oldTransparent !== this._isTransparent;
+            if (res) {
+                this._updateRenderMode();
+                this._oldTransparent = this._isTransparent;
+            }
+            return res;
+        }
+
+        protected _isPrimTransparent(): boolean {
+            return this._isTransparent;
         }
 
+        private _oldTransparent: boolean;
+        private _isTransparent: boolean;
         private _border: IBrush2D;
         private _borderThickness: number;
         private _fill: IBrush2D;

src/Canvas2d/babylon.sprite2d.ts

@@ -32,6 +32,8 @@
                 engine.setAlphaMode(Engine.ALPHA_COMBINE, true);
             }
 
+            effect.setBool("alphaTest", context.renderMode === Render2DContext.RenderModeAlphaTest);
+
             let pid = context.groupInfoPartData[0];
             if (context.useInstancing) {
                 if (!this.instancingAttributes) {
@@ -126,6 +128,7 @@
         static SPRITE2D_MAINPARTID = 1;
 
         public static textureProperty: Prim2DPropInfo;
+        public static useAlphaFromTextureProperty: Prim2DPropInfo;
         public static actualSizeProperty: Prim2DPropInfo;
         public static spriteLocationProperty: Prim2DPropInfo;
         public static spriteFrameProperty: Prim2DPropInfo;
@@ -142,9 +145,26 @@
 
         public set texture(value: Texture) {
             this._texture = value;
+            this._oldTextureHasAlpha = this._texture && this.texture.hasAlpha;
+        }
+
+        @dynamicLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Sprite2D.useAlphaFromTextureProperty = pi)
+        /**
+         * If true and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as a Transparent Primitive, if false and the texture has an Alpha Channel which is used (BaseTexture.hasAlpha = true) the Sprite2d will be rendered as Alpha Test. If false or if the Texture has no alpha or it's not used (BaseTexture.hasAlpha = false) the Sprite2d will be rendered as an Opaque Primitive
+         */
+        public get useAlphaFromTexture(): boolean {
+            return this._useAlphaFromTexture;
+        }
+
+        public set useAlphaFromTexture(value: boolean) {
+            if (this._useAlphaFromTexture === value) {
+                return;
+            }
+            this._useAlphaFromTexture = value;
+            this._updateRenderMode();
         }
 
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 2, pi => Sprite2D.actualSizeProperty = pi, false, true)
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Sprite2D.actualSizeProperty = pi, false, true)
         /**
          * Get/set the actual size of the sprite to display
          */
@@ -159,7 +179,7 @@
             this._actualSize = value;
         }
 
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 3, pi => Sprite2D.spriteLocationProperty = pi)
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Sprite2D.spriteLocationProperty = pi)
         /**
          * Get/set the sprite location (in pixels) in the texture
          */
@@ -171,7 +191,7 @@
             this._location = value;
         }
 
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 4, pi => Sprite2D.spriteFrameProperty = pi)
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, pi => Sprite2D.spriteFrameProperty = pi)
         /**
          * Get/set the sprite frame to display.
          * The frame number is just an offset applied horizontally, based on the sprite's width. it does not wrap, all the frames must be on the same line.
@@ -184,7 +204,7 @@
             this._spriteFrame = value;
         }
 
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 5, pi => Sprite2D.invertYProperty = pi)
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, pi => Sprite2D.invertYProperty = pi)
         /**
          * Get/set if the sprite texture coordinates should be inverted on the Y axis
          */
@@ -196,7 +216,7 @@
             this._invertY = value;
         }
 
-        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 6, pi => Sprite2D.spriteScaleFactorProperty = pi)
+        @instanceLevelProperty(RenderablePrim2D.RENDERABLEPRIM2D_PROPCOUNT + 7, pi => Sprite2D.spriteScaleFactorProperty = pi)
         /**
          * Get/set the sprite location (in pixels) in the texture
          */
@@ -326,7 +346,7 @@
             this.spriteFrame = 0;
             this.invertY = (settings.invertY == null) ? false : settings.invertY;
             this.alignToPixel = (settings.alignToPixel == null) ? true : settings.alignToPixel;
-            this.isTransparent = true;
+            this.useAlphaFromTexture = true;
 
             if (settings.spriteSize == null || !texture.isReady()) {
                 if (texture.isReady()) {
@@ -377,12 +397,12 @@
             renderCache.texture = this.texture;
 
             // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-            let ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], true);
+            let ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], true);
             if (ei) {
                 renderCache.effectInstanced = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
             }
 
-            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], false);
+            ei = this.getDataPartEffectInfo(Sprite2D.SPRITE2D_MAINPARTID, ["index"], ["alphaTest"], false);
             renderCache.effect = engine.createEffect("sprite2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
 
             return renderCache;
@@ -443,7 +463,26 @@
             return true;
         }
 
+        protected _mustUpdateInstance(): boolean {
+            let res = this._oldTextureHasAlpha !== (this.texture != null && this.texture.hasAlpha);
+            this._oldTextureHasAlpha = this.texture != null && this.texture.hasAlpha;
+            if (res) {
+                this._updateRenderMode();
+            }
+            return res;
+        }
+
+        protected _useTextureAlpha(): boolean {
+            return this.texture!=null && this.texture.hasAlpha;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return this.texture!=null && this.texture.hasAlpha && this.useAlphaFromTexture;
+        }
+
         private _texture: Texture;
+        private _oldTextureHasAlpha: boolean;
+        private _useAlphaFromTexture: boolean;
         private _location: Vector2;
         private _spriteScaleFactor: Vector2;
         private _spriteFrame: number;

src/Canvas2d/babylon.text2d.ts

@@ -225,6 +225,10 @@
                 return this._fontTexture;
             }
 
+            if (this.fontName == null || this.owner == null || this.owner.scene == null) {
+                return null;
+            }
+
             this._fontTexture = FontTexture.GetCachedFontTexture(this.owner.scene, this.fontName, this._fontSuperSample);
             return this._fontTexture;
         }
@@ -326,14 +330,15 @@
 
             super(settings);
 
-            this.fontName         = (settings.fontName==null) ? "12pt Arial" : settings.fontName;
-            this._fontSuperSample = (settings.fontSuperSample!=null && settings.fontSuperSample);
-            this.defaultFontColor = (settings.defaultFontColor==null) ? new Color4(1,1,1,1) : settings.defaultFontColor;
-            this._tabulationSize  = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
-            this._textSize        = null;
-            this.text             = text;
-            this.size             = (settings.size==null) ? null : settings.size;
-            this.isTransparent    = true;
+            this.fontName            = (settings.fontName==null) ? "12pt Arial" : settings.fontName;
+            this._fontSuperSample    = (settings.fontSuperSample!=null && settings.fontSuperSample);
+            this.defaultFontColor    = (settings.defaultFontColor==null) ? new Color4(1,1,1,1) : settings.defaultFontColor;
+            this._tabulationSize     = (settings.tabulationSize == null) ? 4 : settings.tabulationSize;
+            this._textSize           = null;
+            this.text                = text;
+            this.size                = (settings.size==null) ? null : settings.size;
+
+            this._updateRenderMode();
         }
 
         protected levelIntersect(intersectInfo: IntersectInfo2D): boolean {
@@ -370,12 +375,12 @@
             renderCache.ib = engine.createIndexBuffer(ib);
 
             // Get the instanced version of the effect, if the engine does not support it, null is return and we'll only draw on by one
-            let ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], true);
+            let ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, true);
             if (ei) {
                 renderCache.effectInstanced = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
             }
 
-            ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], false);
+            ei = this.getDataPartEffectInfo(Text2D.TEXT2D_MAINPARTID, ["index"], null, false);
             renderCache.effect = engine.createEffect("text2d", ei.attributes, ei.uniforms, ["diffuseSampler"], ei.defines, null);
 
             return renderCache;
@@ -470,6 +475,14 @@
             this._charCount = count;
         }
 
+        protected _useTextureAlpha(): boolean {
+            return this.fontTexture != null && this.fontTexture.hasAlpha;
+        }
+
+        protected _shouldUseAlphaFromTexture(): boolean {
+            return true;
+        }
+
         private _fontTexture: FontTexture;
         private _tabulationSize: number;
         private _charCount: number;

src/Materials/Textures/babylon.fontTexture.ts

@@ -137,6 +137,8 @@
             this._texture = scene.getEngine().createDynamicTexture(textSize, textSize, false, samplingMode);
             var textureSize = this.getSize();
 
+            this.hasAlpha = true;
+
             // Recreate a new canvas with the final size: the one matching the texture (resizing the previous one doesn't work as one would expect...)
             this._canvas = document.createElement("canvas");
             this._canvas.width = textureSize.width;

src/Shaders/sprite2d.fragment.fx

@@ -1,11 +1,16 @@
 varying vec2 vUV;
 varying float vOpacity;
+uniform bool alphaTest;
 uniform sampler2D diffuseSampler;
 
 void main(void) {
 	vec4 color = texture2D(diffuseSampler, vUV);
-	if (color.a < 0.05) {
-		discard;
+
+	if (alphaTest)
+	{
+		if (color.a < 0.95) {
+			discard;
+		}
 	}
 	color.a *= vOpacity;
 	gl_FragColor = color;

src/Shaders/text2d.fragment.fx

@@ -6,7 +6,5 @@ uniform sampler2D diffuseSampler;
 
 void main(void) {
 	vec4 color = texture2D(diffuseSampler, vUV);
-	if (color.a < 0.05)
-		discard;
 	gl_FragColor = color*vColor;
 }