Merge pull request #3229 from benaadams/draw-types

Add Other Draw Modes

src/Engine/babylon.engine.ts

@@ -2425,45 +2425,73 @@
         }
 
         public draw(useTriangles: boolean, indexStart: number, indexCount: number, instancesCount?: number): void {
-            // Apply states
-            this.applyStates();
+            this.drawElementsType(useTriangles ? Material.TriangleFillMode : Material.WireFrameFillMode, indexStart, indexCount, instancesCount);
+        }
 
-            this._drawCalls.addCount(1, false);
-            // Render
-            var indexFormat = this._uintIndicesCurrentlySet ? this._gl.UNSIGNED_INT : this._gl.UNSIGNED_SHORT;
-            var mult = this._uintIndicesCurrentlySet ? 4 : 2;
-            if (instancesCount) {
-                this._gl.drawElementsInstanced(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, indexCount, indexFormat, indexStart * mult, instancesCount);
-                return;
-            }
+        public drawPointClouds(verticesStart: number, verticesCount: number, instancesCount?: number): void {
+            this.drawArraysType(Material.PointFillMode, verticesStart, verticesCount, instancesCount);
+        }
 
-            this._gl.drawElements(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, indexCount, indexFormat, indexStart * mult);
+        public drawUnIndexed(useTriangles: boolean, verticesStart: number, verticesCount: number, instancesCount?: number): void {
+            this.drawArraysType(useTriangles ? Material.TriangleFillMode : Material.WireFrameFillMode, verticesStart, verticesCount, instancesCount);
         }
 
-        public drawPointClouds(verticesStart: number, verticesCount: number, instancesCount?: number): void {
+        public drawElementsType(fillMode: number, indexStart: number, indexCount: number, instancesCount?: number): void {
             // Apply states
             this.applyStates();
+
             this._drawCalls.addCount(1, false);
+            // Render
 
+            const drawMode = this.DrawMode(fillMode);
+            var indexFormat = this._uintIndicesCurrentlySet ? this._gl.UNSIGNED_INT : this._gl.UNSIGNED_SHORT;
+            var mult = this._uintIndicesCurrentlySet ? 4 : 2;
             if (instancesCount) {
-                this._gl.drawArraysInstanced(this._gl.POINTS, verticesStart, verticesCount, instancesCount);
-                return;
+                this._gl.drawElementsInstanced(drawMode, indexCount, indexFormat, indexStart * mult, instancesCount);
+            } else {
+                this._gl.drawElements(drawMode, indexCount, indexFormat, indexStart * mult);
             }
-
-            this._gl.drawArrays(this._gl.POINTS, verticesStart, verticesCount);
         }
 
-        public drawUnIndexed(useTriangles: boolean, verticesStart: number, verticesCount: number, instancesCount?: number): void {
+        public drawArraysType(fillMode: number, verticesStart: number, verticesCount: number, instancesCount?: number): void {
             // Apply states
             this.applyStates();
             this._drawCalls.addCount(1, false);
 
+            const drawMode = this.DrawMode(fillMode);
             if (instancesCount) {
-                this._gl.drawArraysInstanced(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, verticesStart, verticesCount, instancesCount);
-                return;
+                this._gl.drawArraysInstanced(drawMode, verticesStart, verticesCount, instancesCount);
+            } else {
+                this._gl.drawArrays(drawMode, verticesStart, verticesCount);
+            }
+        }
+
+        private DrawMode(fillMode: number): number
+        {
+            switch (fillMode) {
+                // Triangle views
+                case Material.TriangleFillMode:
+                    return this._gl.TRIANGLES;
+                case Material.PointFillMode:
+                    return this._gl.POINTS;
+                case Material.WireFrameFillMode:
+                    return this._gl.LINES;
+                // Draw modes
+                case Material.PointListDrawMode:
+                    return this._gl.POINTS
+                case Material.LineListDrawMode:
+                    return this._gl.LINES;
+                case Material.LineLoopDrawMode:
+                    return this._gl.LINE_LOOP
+                case Material.LineStripDrawMode:
+                    return this._gl.LINE_STRIP
+                case Material.TriangleStripDrawMode:
+                    return this._gl.TRIANGLE_STRIP
+                case Material.TriangleFanDrawMode:
+                    return this._gl.TRIANGLE_FAN;
+                default:
+                    return this._gl.TRIANGLES;
             }
-
-            this._gl.drawArrays(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, verticesStart, verticesCount);
         }
 
         // Shaders

src/Engine/babylon.nullEngine.ts

@@ -277,6 +277,12 @@
         public draw(useTriangles: boolean, indexStart: number, indexCount: number, instancesCount?: number): void {
         }
 
+        public drawElementsType(fillMode: number, indexStart: number, indexCount: number, instancesCount?: number): void {
+        }
+
+        public drawArraysType(fillMode: number, verticesStart: number, verticesCount: number, instancesCount?: number): void {
+        }
+
         public _createTexture(): WebGLTexture {
             return {};
         }

src/Layer/babylon.highlightlayer.ts

@@ -691,12 +691,12 @@
             if (this.outerGlow) {
                 currentEffect.setFloat("offset", 0);
                 engine.setStencilFunction(Engine.NOTEQUAL);
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
             }
             if (this.innerGlow) {
                 currentEffect.setFloat("offset", 1);
                 engine.setStencilFunction(Engine.EQUAL);
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
             }
 
             // Restore Cache

src/Layer/babylon.layer.ts

@@ -152,11 +152,11 @@
             // Draw order
             if (!this.alphaTest) {
                 engine.setAlphaMode(this.alphaBlendingMode);
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
                 engine.setAlphaMode(Engine.ALPHA_DISABLE);
             }
             else {
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
             }
 
             this.onAfterRenderObservable.notifyObservers(this);

src/LensFlare/babylon.lensFlareSystem.ts

@@ -234,7 +234,7 @@
                 this._effect.setFloat4("color", flare.color.r * intensity, flare.color.g * intensity, flare.color.b * intensity, 1.0);
 
                 // Draw order
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
             }
 
             engine.setDepthBuffer(true);

src/Materials/Textures/Procedurals/babylon.proceduralTexture.ts

@@ -335,7 +335,7 @@
                     engine.clear(scene.clearColor, true, true, true);
 
                     // Draw order
-                    engine.draw(true, 0, 6);
+                    engine.drawElementsType(Material.TriangleFillMode, 0, 6);
 
                     // Mipmaps
                     if (face === 5) {
@@ -352,7 +352,7 @@
                 engine.clear(scene.clearColor, true, true, true);
 
                 // Draw order
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 6);
             }
 
             // Unbind

src/Materials/babylon.material.ts

@@ -151,9 +151,17 @@
     }
 
     export class Material implements IAnimatable {
+        // Triangle views
         private static _TriangleFillMode = 0;
         private static _WireFrameFillMode = 1;
         private static _PointFillMode = 2;
+        // Draw modes
+        private static _PointListDrawMode = 3;
+        private static _LineListDrawMode = 4;
+        private static _LineLoopDrawMode = 5;
+        private static _LineStripDrawMode = 6;
+        private static _TriangleStripDrawMode = 7;
+        private static _TriangleFanDrawMode = 8;
 
         public static get TriangleFillMode(): number {
             return Material._TriangleFillMode;
@@ -167,6 +175,30 @@
             return Material._PointFillMode;
         }
 
+        public static get PointListDrawMode(): number {
+            return Material._PointListDrawMode;
+        }
+
+        public static get LineListDrawMode(): number {
+            return Material._LineListDrawMode;
+        }
+
+        public static get LineLoopDrawMode(): number {
+            return Material._LineLoopDrawMode;
+        }
+
+        public static get LineStripDrawMode(): number {
+            return Material._LineStripDrawMode;
+        }
+
+        public static get TriangleStripDrawMode(): number {
+            return Material._TriangleStripDrawMode;
+        }
+
+        public static get TriangleFanDrawMode(): number {
+            return Material._TriangleFanDrawMode;
+        }
+
         private static _ClockWiseSideOrientation = 0;
         private static _CounterClockWiseSideOrientation = 1;
 
@@ -353,7 +385,7 @@
         }
 
         public set pointsCloud(value: boolean) {
-            this._fillMode = (value ? Material.PointFillMode : Material.TriangleFillMode);            
+            this._fillMode = (value ? Material.PointFillMode : Material.TriangleFillMode);
         }
 
         @serialize()

src/Mesh/babylon.linesMesh.ts

@@ -112,7 +112,7 @@
             var engine = this.getScene().getEngine();
 
             // Draw order
-            engine.draw(false, subMesh.indexStart, subMesh.indexCount);
+            engine.drawElementsType(Material.LineListDrawMode, subMesh.indexStart, subMesh.indexCount);
             return this;
         }
 

src/Mesh/babylon.mesh.ts

@@ -149,6 +149,17 @@
             return this._source;
         }
 
+        public get isUnIndexed(): boolean {
+            return this._unIndexed;
+        }
+
+        public set isUnIndexed(value: boolean) {
+            if (this._unIndexed !== value) {
+                this._unIndexed = value;
+                this._markSubMeshesAsAttributesDirty();
+            }
+        }
+
         /**
          * @constructor
          * @param {string} name The value used by scene.getMeshByName() to do a lookup.
@@ -1050,25 +1061,14 @@
             let scene = this.getScene();
             let engine = scene.getEngine();
 
-            // Draw order
-            switch (fillMode) {
-                case Material.PointFillMode:
-                    engine.drawPointClouds(subMesh.verticesStart, subMesh.verticesCount, instancesCount);
-                    break;
-                case Material.WireFrameFillMode:
-                    if (this._unIndexed) {
-                        engine.drawUnIndexed(false, subMesh.verticesStart, subMesh.verticesCount, instancesCount);
-                    } else {
-                        engine.draw(false, 0, subMesh.linesIndexCount, instancesCount);
-                    }
-                    break;
-
-                default:
-                    if (this._unIndexed) {
-                        engine.drawUnIndexed(true, subMesh.verticesStart, subMesh.verticesCount, instancesCount);
-                    } else {
-                        engine.draw(true, subMesh.indexStart, subMesh.indexCount, instancesCount);
-                    }
+            if (this._unIndexed || fillMode == Material.PointFillMode) {
+                // or triangles as points
+                engine.drawArraysType(fillMode, subMesh.verticesStart, subMesh.verticesCount, instancesCount);
+            } else if (fillMode == Material.WireFrameFillMode) {
+                // Triangles as wireframe
+                engine.drawElementsType(fillMode, 0, subMesh.linesIndexCount, instancesCount);
+            } else {
+                engine.drawElementsType(fillMode, subMesh.indexStart, subMesh.indexCount, instancesCount);
             }
 
             if (scene._isAlternateRenderingEnabled && !alternate) {
@@ -2115,6 +2115,7 @@
             }
 
             // Geometry
+            serializationObject.isUnIndexed = this.isUnIndexed;
             var geometry = this._geometry;
             if (geometry) {
                 var geometryId = geometry.id;
@@ -2375,6 +2376,7 @@
             }
 
             // Geometry
+            mesh.isUnIndexed = !!parsedMesh.isUnIndexed;
             mesh.hasVertexAlpha = parsedMesh.hasVertexAlpha;
 
             if (parsedMesh.delayLoadingFile) {

src/Particles/babylon.gpuParticleSystem.ts

@@ -151,7 +151,7 @@
             this._engine.bindTransformFeedbackBuffer(this._targetBuffer.getBuffer());
             this._engine.setRasterizerState(false);
             this._engine.beginTransformFeedback();
-            this._engine.drawPointClouds(0, this._capacity);
+            this._engine.drawArraysType(Material.PointListDrawMode, 0, this._capacity);
             this._engine.endTransformFeedback();
             this._engine.setRasterizerState(true);
             this._engine.bindTransformFeedbackBuffer(null);
@@ -163,7 +163,7 @@
             this._engine.bindVertexArrayObject(this._targetVAO, null);
 
             // Render
-            this._engine.drawPointClouds(0, this._capacity);            
+            this._engine.drawArraysType(Material.PointListDrawMode, 0, this._capacity);            
 
             // Switch VAOs
             let tmpVAO = this._sourceVAO;

src/Particles/babylon.particleSystem.ts

@@ -560,7 +560,7 @@
                 engine.setDepthWrite(true);
             }
 
-            engine.draw(true, 0, this.particles.length * 6);
+            engine.drawElementsType(Material.TriangleFillMode, 0, this.particles.length * 6);
             engine.setAlphaMode(Engine.ALPHA_DISABLE);
 
             return this.particles.length;

src/PostProcess/babylon.postProcessManager.ts

@@ -91,7 +91,7 @@
                     engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
 
                     // Draw order
-                    engine.draw(true, 0, 6);
+                    engine.drawElementsType(Material.TriangleFillMode, 0, 6);
 
                     pp.onAfterRenderObservable.notifyObservers(effect);
                 }
@@ -141,7 +141,7 @@
                     engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
 
                     // Draw order
-                    engine.draw(true, 0, 6);
+                    engine.drawElementsType(Material.TriangleFillMode, 0, 6);
 
                     pp.onAfterRenderObservable.notifyObservers(effect);
                 }

src/Rendering/babylon.boundingBoxRenderer.ts

@@ -85,7 +85,7 @@
                     this._colorShader.bind(worldMatrix);
 
                     // Draw order
-                    engine.draw(false, 0, 24);
+                    engine.drawElementsType(Material.LineListDrawMode, 0, 24);
                 }
 
                 // Front
@@ -95,7 +95,7 @@
                 this._colorShader.bind(worldMatrix);
 
                 // Draw order
-                engine.draw(false, 0, 24);
+                engine.drawElementsType(Material.TriangleFillMode, 0, 24);
             }
             this._colorShader.unbind();
             engine.setDepthFunctionToLessOrEqual();
@@ -131,7 +131,7 @@
             this._scene.resetCachedMaterial();
             this._colorShader.bind(worldMatrix);
 
-            engine.draw(false, 0, 24);
+            engine.drawElementsType(Material.TriangleFillMode, 0, 24);
 
             this._colorShader.unbind();
             engine.setDepthFunctionToLessOrEqual();

src/Rendering/babylon.edgesRenderer.ts

@@ -324,7 +324,7 @@
             this._lineShader.bind(this._source.getWorldMatrix());
 
             // Draw order
-            engine.draw(true, 0, this._indicesCount);
+            engine.drawElementsType(Material.TriangleFillMode, 0, this._indicesCount);
             this._lineShader.unbind();
             engine.setDepthWrite(true);
         }

src/Sprites/babylon.spriteManager.ts

@@ -250,12 +250,12 @@
             engine.setDepthFunctionToLessOrEqual();
             effect.setBool("alphaTest", true);
             engine.setColorWrite(false);
-            engine.draw(true, 0, max * 6);
+            engine.drawElementsType(Material.TriangleFillMode, 0, max * 6);
             engine.setColorWrite(true);
             effect.setBool("alphaTest", false);
 
             engine.setAlphaMode(Engine.ALPHA_COMBINE);
-            engine.draw(true, 0, max * 6);
+            engine.drawElementsType(Material.TriangleFillMode, 0, max * 6);
             engine.setAlphaMode(Engine.ALPHA_DISABLE);
         }