QuadFrameRenderer WIP

Playground/debug.html

@@ -41,6 +41,9 @@
     <script src="http://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>
 
+    <script src="http://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="http://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>    
+
     <script src="http://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>

Playground/frame.html

@@ -29,6 +29,9 @@
     <script src="http://www.babylonjs.com/lib/babylon.roadProceduralTexture.min.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>
+    
+    <script src="http://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="http://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>
 
     <script src="http://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>

Playground/index.html

@@ -41,6 +41,9 @@
     <script src="http://www.babylonjs.com/lib/babylon.starfieldProceduralTexture.min.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.woodProceduralTexture.min.js"></script>
 
+    <script src="http://www.babylonjs.com/lib/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="http://www.babylonjs.com/lib/babylon.digitalRainPostProcess.min.js"></script>
+
     <script src="http://www.babylonjs.com/lib/babylon.glTFFileLoader.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.objFileLoader.js"></script>
     <script src="http://www.babylonjs.com/lib/babylon.stlFileLoader.js"></script>

Tools/Gulp/config.json

@@ -208,6 +208,7 @@
       "../../src/Cameras/babylon.stereoscopicCameras.js",
       "../../src/PostProcess/babylon.hdrRenderingPipeline.js",
       "../../src/Rendering/babylon.edgesRenderer.js",
+      "../../src/Rendering/babylon.quadframeRenderer.js",
       "../../src/PostProcess/babylon.tonemapPostProcess.js",
       "../../src/Probes/babylon.reflectionProbe.js",
       "../../src/Particles/babylon.solidParticle.js",

src/Rendering/babylon.quadframeRenderer.ts

@@ -0,0 +1,181 @@
+module BABYLON {
+
+    class Quadframe {
+        public ib: WebGLBuffer;
+        public buffers: { [key: string]: VertexBuffer; } = {};
+        public indicesCount: number;
+        public mesh: AbstractMesh;
+    }
+
+    export class QuadframeRenderer {
+        private _scene: Scene;
+        private _frames = new Array<Quadframe>();
+        private _lineShader: ShaderMaterial;
+
+        public color = BABYLON.Color3.White();
+
+        public constructor(scene: Scene) {
+            this._scene = scene;
+
+            scene.quadframeRenderers.push(this);
+
+            this._prepareRessources();
+        }
+
+        private _prepareRessources(): void {
+            if (this._lineShader) {
+                return;
+            }
+
+            this._lineShader = new ShaderMaterial("lineShader", this._scene, "simpleLine",
+                {
+                    attributes: ["position"],
+                    uniforms: ["worldViewProjection", "color"]
+                });
+
+            this._lineShader.disableDepthWrite = true;
+            this._lineShader.backFaceCulling = false;
+        }
+
+        public addMesh(mesh: AbstractMesh): void {
+            var frame = new Quadframe();
+            frame.mesh = mesh;
+
+            this._frames.push(frame);
+
+            this._generateQuadLines(frame);
+        }
+
+        public removeMesh(mesh: AbstractMesh): void {       
+            for (let index = 0; index < this._frames.length; index++) {
+
+                if (this._frames[index].mesh === mesh) {
+                    this._disposeFrame(this._frames[index]);
+                    this._frames.splice(index, 1);
+                    return;
+                }
+            }            
+        }
+
+        public render(): void {
+            if (!this._lineShader.isReady()) {
+                return;
+            }
+
+            var engine = this._scene.getEngine();
+            this._lineShader._preBind();
+
+            for (var index = 0; index < this._frames.length; index++) {
+                var frame = this._frames[index];
+
+                // VBOs
+                engine.bindBuffers(frame.buffers, frame.ib, this._lineShader.getEffect());
+
+                this._scene.resetCachedMaterial();
+                this._lineShader.setColor3("color", this.color);
+
+                this._lineShader.bind(frame.mesh.getWorldMatrix());
+
+                // Draw order
+                engine.draw(false, 0, frame.indicesCount);
+            }
+            this._lineShader.unbind();
+            engine.setDepthWrite(true);
+        }
+
+        private _disposeFrame(frame: Quadframe) {
+            frame.buffers[VertexBuffer.PositionKind].dispose();
+
+            this._scene.getEngine()._releaseBuffer(frame.ib);
+        }
+
+        public dispose(): void {
+            for (let index = 0; index < this._frames.length; index++) {
+                this._disposeFrame(this._frames[index]);
+            }
+            
+            this._lineShader.dispose();
+
+            var index = this._scene.quadframeRenderers.indexOf(this);
+
+            if (index !== -1) {
+                this._scene.quadframeRenderers.splice(index, 1);
+            }
+        }
+
+        private _checkInclusion(sourceIndices: number[], childIndices: number[], positions: number[] | Float32Array): number {
+            var includedIndices = [];
+            var sourceVector3 = Vector3.Zero();
+            var childVector3 = Vector3.Zero();
+
+            for (let index = 0; index < sourceIndices.length; index++) {
+
+                Vector3.FromArrayToRef(positions, sourceIndices[index], sourceVector3);
+                
+                for (let childIndex = 0; childIndex < childIndices.length; childIndex++) {
+                    Vector3.FromArrayToRef(positions, childIndices[childIndex], childVector3);
+
+                    if (childVector3.equalsWithEpsilon(sourceVector3)) {
+                        includedIndices.push(sourceIndices[index]);
+                    }
+                }
+            }
+            
+            if (includedIndices.length === 2) {
+                for (let index = 0; index < childIndices.length; index++) {
+                    if (includedIndices.indexOf(childIndices[index]) === -1) {
+                        return childIndices[index];
+                    }
+                }
+            }
+
+            return -1;
+        }
+
+        private _pumpPositions(positions: number[] | Float32Array, index: number, target: number[]) {
+            for (var coordinateIndex = 0; coordinateIndex < 3; coordinateIndex++) {
+                target.push(positions[index * 3 + coordinateIndex]);
+            }
+        }
+
+        private _generateQuadLines(frame: Quadframe): void {
+            var source = frame.mesh;
+            var positions = source.getVerticesData(VertexBuffer.PositionKind);
+            var indices = source.getIndices();            
+            var linesPositions = new Array<number>();
+            var linesIndices = new Array<number>();
+
+            // Go through faces
+            for (var index = 0; index < indices.length; index += 3) {
+                var sourceIndices = [indices[index], indices[index + 1], indices[index + 2]];
+
+                for (var childIndex = index + 3; childIndex < indices.length; childIndex += 3) {
+                    var childIndices = [indices[childIndex], indices[childIndex + 1], indices[childIndex + 2]];
+
+                    var fourthIndex = this._checkInclusion(sourceIndices, childIndices, positions);
+
+                    if (fourthIndex !== -1 && sourceIndices.indexOf(fourthIndex) === -1) {
+                        var currentCount = linesPositions.length / 3;
+
+                        this._pumpPositions(positions, indices[index], linesPositions);
+                        this._pumpPositions(positions, indices[index + 1], linesPositions);
+                        this._pumpPositions(positions, indices[index + 2], linesPositions);
+                        this._pumpPositions(positions, fourthIndex, linesPositions);
+
+                        linesIndices.push(currentCount); linesIndices.push(currentCount + 1);
+                        linesIndices.push(currentCount + 1); linesIndices.push(currentCount + 2);
+                        linesIndices.push(currentCount + 2); linesIndices.push(currentCount + 3);
+                        linesIndices.push(currentCount + 3); linesIndices.push(currentCount);
+                    }
+                }
+            }
+
+            // Merge into a single mesh
+            var engine = this._scene.getEngine();
+
+            frame.buffers[VertexBuffer.PositionKind] = new VertexBuffer(engine, linesPositions, VertexBuffer.PositionKind, false);
+            frame.ib = engine.createIndexBuffer(linesIndices);
+            frame.indicesCount = linesIndices.length;
+        }
+    }
+}

src/Rendering/babylon.renderingGroup.ts

@@ -81,37 +81,40 @@
          * @param customRenderFunction Used to override the default render behaviour of the group.
          * @returns true if rendered some submeshes.
          */
-        public render(customRenderFunction: (opaqueSubMeshes: SmartArray<SubMesh>, transparentSubMeshes: SmartArray<SubMesh>, alphaTestSubMeshes: SmartArray<SubMesh>) => void): boolean {
+        public render(customRenderFunction: (opaqueSubMeshes: SmartArray<SubMesh>, transparentSubMeshes: SmartArray<SubMesh>, alphaTestSubMeshes: SmartArray<SubMesh>) => void): void {
             if (customRenderFunction) {
                 customRenderFunction(this._opaqueSubMeshes, this._alphaTestSubMeshes, this._transparentSubMeshes);
-                return true;
+                return;
             }
 
-            if (this._opaqueSubMeshes.length === 0 && this._alphaTestSubMeshes.length === 0 && this._transparentSubMeshes.length === 0) {
-                if (this.onBeforeTransparentRendering) {
-                    this.onBeforeTransparentRendering();
-                }
-                return false;
-            }
             var engine = this._scene.getEngine();
             
             // Opaque
-            this._renderOpaque(this._opaqueSubMeshes);
+            if (this._opaqueSubMeshes.length !== 0) {
+                this._renderOpaque(this._opaqueSubMeshes);
+            }
 
             // Alpha test
-            engine.setAlphaTesting(true);
-            this._renderAlphaTest(this._alphaTestSubMeshes);
-            engine.setAlphaTesting(false);
+            if (this._alphaTestSubMeshes.length !== 0) {
+                engine.setAlphaTesting(true);
+                this._renderAlphaTest(this._alphaTestSubMeshes);
+                engine.setAlphaTesting(false);
+            }
+
+            // Quadframe
+            for (let index = 0; index < this._scene.quadframeRenderers.length; index++) {
+                this._scene.quadframeRenderers[index].render();
+            }
 
             if (this.onBeforeTransparentRendering) {
                 this.onBeforeTransparentRendering();
             }
 
             // Transparent
-            this._renderTransparent(this._transparentSubMeshes);
-            engine.setAlphaMode(Engine.ALPHA_DISABLE);
-            
-            return true;
+            if (this._transparentSubMeshes.length === 0) {
+                this._renderTransparent(this._transparentSubMeshes);
+                engine.setAlphaMode(Engine.ALPHA_DISABLE);
+            }
         }
 
         /**

src/Rendering/babylon.renderingManager.ts

@@ -157,11 +157,7 @@
                         observable.notifyObservers(info, renderingGroupMask);
                     }
 
-                    if (!renderingGroup.render(customRenderFunction)) {
-                        this._renderingGroups.splice(index, 1);
-                        needToStepBack = true;
-                        this._renderSpritesAndParticles();
-                    }
+                    renderingGroup.render(customRenderFunction);
 
                     // Fire POSTTRANSPARENT stage
                     if (observable) {

src/Shaders/simpleLine.fragment.fx

@@ -0,0 +1,5 @@
+uniform vec3 color;
+
+void main(void) {
+	gl_FragColor = vec4(color, 1.0);
+}

src/Shaders/simpleLine.vertex.fx

@@ -0,0 +1,9 @@
+// Attributes
+attribute vec3 position;
+
+// Uniforms
+uniform mat4 worldViewProjection;
+
+void main(void) {
+	gl_Position = worldViewProjection * vec4(position, 1.0);
+}

src/babylon.scene.ts

@@ -428,6 +428,7 @@
         // Layers
         public layers = new Array<Layer>();
         public highlightLayers = new Array<HighlightLayer>();
+        public quadframeRenderers = new Array<QuadframeRenderer>();
 
         // Skeletons
         public skeletonsEnabled = true;