Support for Layer.alphaTest

dist/preview release/what's new.md

@@ -8,6 +8,7 @@
     - StandardMaterial now supports Parallax and Parallax Occlusion Mapping ([nockawa](https://github.com/nockawa))
     - Animations blending. See [demo here](http://www.babylonjs-playground.com/#2BLI9T#3). More [info here](NEED DOC!) ([deltakosh](https://github.com/deltakosh))
   - **Updates**
+    - Support for Layer.alphaTest ([deltakosh](https://github.com/deltakosh))
     - New scene.pointerDownPredicate, scene.pointerMovePredicate, scene.pointerUpPredicate to define your own predicates for meshes picking selection ([deltakosh](https://github.com/deltakosh))
     - New OnPickTrigger support for spritesManager ([deltakosh](https://github.com/deltakosh))
     - New SPS method `digest()` ([jerome](https://github.com/jbousquie))    

src/Layer/babylon.layer.js

@@ -31,29 +31,42 @@ var BABYLON;
             this._indexBuffer = scene.getEngine().createIndexBuffer(indices);
             // Effects
             this._effect = this._scene.getEngine().createEffect("layer", ["position"], ["textureMatrix", "color", "scale", "offset"], ["textureSampler"], "");
+            this._alphaTestEffect = this._scene.getEngine().createEffect("layer", ["position"], ["textureMatrix", "color", "scale", "offset"], ["textureSampler"], "#define ALPHATEST");
         }
         Layer.prototype.render = function () {
+            var currentEffect = this.alphaTest ? this._alphaTestEffect : this._effect;
             // Check
-            if (!this._effect.isReady() || !this.texture || !this.texture.isReady())
+            if (!currentEffect.isReady() || !this.texture || !this.texture.isReady())
                 return;
             var engine = this._scene.getEngine();
+            if (this.onBeforeRender) {
+                this.onBeforeRender();
+            }
             // Render
-            engine.enableEffect(this._effect);
+            engine.enableEffect(currentEffect);
             engine.setState(false);
             // Texture
-            this._effect.setTexture("textureSampler", this.texture);
-            this._effect.setMatrix("textureMatrix", this.texture.getTextureMatrix());
+            currentEffect.setTexture("textureSampler", this.texture);
+            currentEffect.setMatrix("textureMatrix", this.texture.getTextureMatrix());
             // Color
-            this._effect.setFloat4("color", this.color.r, this.color.g, this.color.b, this.color.a);
+            currentEffect.setFloat4("color", this.color.r, this.color.g, this.color.b, this.color.a);
             // Scale / offset
-            this._effect.setVector2("offset", this.offset);
-            this._effect.setVector2("scale", this.scale);
+            currentEffect.setVector2("offset", this.offset);
+            currentEffect.setVector2("scale", this.scale);
             // VBOs
-            engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, this._effect);
+            engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, currentEffect);
             // Draw order
-            engine.setAlphaMode(this.alphaBlendingMode);
-            engine.draw(true, 0, 6);
-            engine.setAlphaMode(BABYLON.Engine.ALPHA_DISABLE);
+            if (!this._alphaTestEffect) {
+                engine.setAlphaMode(this.alphaBlendingMode);
+                engine.draw(true, 0, 6);
+                engine.setAlphaMode(BABYLON.Engine.ALPHA_DISABLE);
+            }
+            else {
+                engine.draw(true, 0, 6);
+            }
+            if (this.onAfterRender) {
+                this.onAfterRender();
+            }
         };
         Layer.prototype.dispose = function () {
             if (this._vertexBuffer) {

src/Layer/babylon.layer.ts

@@ -6,7 +6,10 @@
         public scale = new Vector2(1, 1);
         public offset = new Vector2(0, 0);
         public onDispose: () => void;
+        public onBeforeRender: () => void;
+        public onAfterRender: () => void;
         public alphaBlendingMode = Engine.ALPHA_COMBINE;
+        public alphaTest: boolean;
 
         private _scene: Scene;
         private _vertexDeclaration = [2];
@@ -14,6 +17,7 @@
         private _vertexBuffer: WebGLBuffer;
         private _indexBuffer: WebGLBuffer;
         private _effect: Effect;
+        private _alphaTestEffect: Effect;
 
         constructor(public name: string, imgUrl: string, scene: Scene, isBackground?: boolean, color?: Color4) {
             this.texture = imgUrl ? new Texture(imgUrl, scene, true) : null;
@@ -49,37 +53,58 @@
                 ["position"],
                 ["textureMatrix", "color", "scale", "offset"],
                 ["textureSampler"], "");
+
+            this._alphaTestEffect = this._scene.getEngine().createEffect("layer",
+                ["position"],
+                ["textureMatrix", "color", "scale", "offset"],
+                ["textureSampler"], "#define ALPHATEST");
         }
 
         public render(): void {
+            var currentEffect = this.alphaTest ? this._alphaTestEffect : this._effect;
+
             // Check
-            if (!this._effect.isReady() || !this.texture || !this.texture.isReady())
+            if (!currentEffect.isReady() || !this.texture || !this.texture.isReady())
                 return;
 
             var engine = this._scene.getEngine();
 
+            if (this.onBeforeRender) {
+                this.onBeforeRender();
+            }
+
             // Render
-            engine.enableEffect(this._effect);
+            engine.enableEffect(currentEffect);
             engine.setState(false);
 
+
             // Texture
-            this._effect.setTexture("textureSampler", this.texture);
-            this._effect.setMatrix("textureMatrix", this.texture.getTextureMatrix());
+            currentEffect.setTexture("textureSampler", this.texture);
+            currentEffect.setMatrix("textureMatrix", this.texture.getTextureMatrix());
 
             // Color
-            this._effect.setFloat4("color", this.color.r, this.color.g, this.color.b, this.color.a);
+            currentEffect.setFloat4("color", this.color.r, this.color.g, this.color.b, this.color.a);
 
             // Scale / offset
-            this._effect.setVector2("offset", this.offset);
-            this._effect.setVector2("scale", this.scale);
+            currentEffect.setVector2("offset", this.offset);
+            currentEffect.setVector2("scale", this.scale);
 
             // VBOs
-            engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, this._effect);
+            engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, currentEffect);
 
             // Draw order
-            engine.setAlphaMode(this.alphaBlendingMode);
-            engine.draw(true, 0, 6);
-            engine.setAlphaMode(Engine.ALPHA_DISABLE);
+            if (!this._alphaTestEffect) {
+                engine.setAlphaMode(this.alphaBlendingMode);
+                engine.draw(true, 0, 6);
+                engine.setAlphaMode(Engine.ALPHA_DISABLE);
+            }
+            else {
+                engine.draw(true, 0, 6);
+            }
+
+            if (this.onAfterRender) {
+                this.onAfterRender();
+            }
         }
 
         public dispose(): void {

src/Shaders/layer.fragment.fx

@@ -8,5 +8,10 @@ uniform vec4 color;
 void main(void) {
 	vec4 baseColor = texture2D(textureSampler, vUV);
 
+#ifdef ALPHATEST
+	if (baseColor.a < 0.4)
+		discard;
+#endif
+
 	gl_FragColor = baseColor * color;
 }