Add Draw Modes

POINTS/LINES/LINE_LOOP/LINE_STRIP/TRIANGLE_STRIP/TRIANGLE_FAN

src/Engine/babylon.engine.ts

@@ -2408,45 +2408,42 @@
         }
 
         public draw(useTriangles: boolean, indexStart: number, indexCount: number, instancesCount?: number): void {
-            // Apply states
-            this.applyStates();
+            this.drawElementsType(useTriangles ? Engine.DrawType.TRIANGLES : Engine.DrawType.LINES, 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(Engine.DrawType.POINTS, 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 ? Engine.DrawType.TRIANGLES : Engine.DrawType.LINES, verticesStart, verticesCount, instancesCount);
         }
 
-        public drawPointClouds(verticesStart: number, verticesCount: number, instancesCount?: number): void {
+        public drawElementsType(type: Engine.DrawType, indexStart: number, indexCount: number, instancesCount?: number): void {
             // Apply states
             this.applyStates();
-            this._drawCalls.addCount(1, false);
 
+            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.drawArraysInstanced(this._gl.POINTS, verticesStart, verticesCount, instancesCount);
-                return;
+                this._gl.drawElementsInstanced(type, indexCount, indexFormat, indexStart * mult, instancesCount);
+            } else {
+                this._gl.drawElements(type, 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(type: Engine.DrawType, verticesStart: number, verticesCount: number, instancesCount?: number): void {
             // Apply states
             this.applyStates();
             this._drawCalls.addCount(1, false);
 
             if (instancesCount) {
-                this._gl.drawArraysInstanced(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, verticesStart, verticesCount, instancesCount);
-                return;
+                this._gl.drawArraysInstanced(type, verticesStart, verticesCount, instancesCount);
+            } else {
+                this._gl.drawArrays(type, verticesStart, verticesCount);
             }
-
-            this._gl.drawArrays(useTriangles ? this._gl.TRIANGLES : this._gl.LINES, verticesStart, verticesCount);
         }
 
         // Shaders
@@ -5400,4 +5397,16 @@
             }
         }
     }
+
+    export namespace Engine {
+        export enum DrawType {
+            POINTS = 0,
+            LINES = 1,
+            LINE_LOOP = 2,
+            LINE_STRIP = 3,
+            TRIANGLES = 4,
+            TRIANGLE_STRIP = 5,
+            TRIANGLE_FAN = 6,
+        }
+    }
 }

src/Engine/babylon.nullEngine.ts

@@ -258,6 +258,12 @@
         public draw(useTriangles: boolean, indexStart: number, indexCount: number, instancesCount?: number): void {
         }
 
+        public drawElementsType(type: Engine.DrawType, indexStart: number, indexCount: number, instancesCount?: number): void {
+        }
+
+        public drawArraysType(type: Engine.DrawType, 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(Engine.DrawType.TRIANGLES, 0, 6);
             }
             if (this.innerGlow) {
                 currentEffect.setFloat("offset", 1);
                 engine.setStencilFunction(Engine.EQUAL);
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Engine.DrawType.TRIANGLES, 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(Engine.DrawType.TRIANGLES, 0, 6);
                 engine.setAlphaMode(Engine.ALPHA_DISABLE);
             }
             else {
-                engine.draw(true, 0, 6);
+                engine.drawElementsType(Engine.DrawType.TRIANGLES, 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(Engine.DrawType.TRIANGLES, 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(Engine.DrawType.TRIANGLES, 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(Engine.DrawType.TRIANGLES, 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()
@@ -370,6 +402,33 @@
             this.markAsDirty(Material.MiscDirtyFlag);
         }
 
+        public static fillModeToDrawType(fillMode: number): Engine.DrawType {
+            switch (fillMode) {
+                // Triangle views
+                case Material.TriangleFillMode:
+                    return Engine.DrawType.TRIANGLES;
+                case Material.PointFillMode:
+                    return Engine.DrawType.POINTS;
+                case Material.WireFrameFillMode:
+                    return Engine.DrawType.LINES;
+                // Draw modes
+                case Material.PointListDrawMode:
+                    return Engine.DrawType.POINTS
+                case Material.LineListDrawMode:
+                    return Engine.DrawType.LINES;
+                case Material.LineLoopDrawMode:
+                    return Engine.DrawType.LINE_LOOP
+                case Material.LineStripDrawMode:
+                    return Engine.DrawType.LINE_STRIP
+                case Material.TriangleStripDrawMode:
+                    return Engine.DrawType.TRIANGLE_STRIP
+                case Material.TriangleFanDrawMode:
+                    return Engine.DrawType.TRIANGLE_FAN;
+                default:
+                    return Engine.DrawType.TRIANGLES;
+            }
+        }
+
         public _effect: Nullable<Effect>;
         public _wasPreviouslyReady = false;
         private _useUBO: boolean;

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(Engine.DrawType.LINES, subMesh.indexStart, subMesh.indexCount);
             return this;
         }
 

src/Mesh/babylon.mesh.ts

@@ -1050,25 +1050,15 @@
             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);
-                    }
+            var drawType: Engine.DrawType = Material.fillModeToDrawType(fillMode);
+            if (this._unIndexed || fillMode == Material.PointFillMode) {
+                // or triangles as points
+                engine.drawArraysType(drawType, subMesh.verticesStart, subMesh.verticesCount, instancesCount);
+            } else if (fillMode == Material.WireFrameFillMode) {
+                // Triangles as wireframe
+                engine.drawElementsType(drawType, 0, subMesh.linesIndexCount, instancesCount);
+            } else {
+                engine.drawElementsType(drawType, subMesh.indexStart, subMesh.indexCount, instancesCount);
             }
 
             if (scene._isAlternateRenderingEnabled && !alternate) {

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(Engine.DrawType.POINTS, 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(Engine.DrawType.POINTS, 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(Engine.DrawType.TRIANGLES, 0, this.particles.length * 6);
             engine.setAlphaMode(Engine.ALPHA_DISABLE);
 
             return this.particles.length;

src/PostProcess/babylon.postProcessManager.ts

@@ -95,7 +95,7 @@
                     engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
 
                     // Draw order
-                    engine.draw(true, 0, 6);
+                    engine.drawElementsType(Engine.DrawType.TRIANGLES, 0, 6);
 
                     pp.onAfterRenderObservable.notifyObservers(effect);
                 }
@@ -145,7 +145,7 @@
                     engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
 
                     // Draw order
-                    engine.draw(true, 0, 6);
+                    engine.drawElementsType(Engine.DrawType.TRIANGLES, 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(Engine.DrawType.LINES, 0, 24);
                 }
 
                 // Front
@@ -95,7 +95,7 @@
                 this._colorShader.bind(worldMatrix);
 
                 // Draw order
-                engine.draw(false, 0, 24);
+                engine.drawElementsType(Engine.DrawType.LINES, 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(Engine.DrawType.LINES, 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(Engine.DrawType.TRIANGLES, 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(Engine.DrawType.TRIANGLES, 0, max * 6);
             engine.setColorWrite(true);
             effect.setBool("alphaTest", false);
 
             engine.setAlphaMode(Engine.ALPHA_COMBINE);
-            engine.draw(true, 0, max * 6);
+            engine.drawElementsType(Engine.DrawType.TRIANGLES, 0, max * 6);
             engine.setAlphaMode(Engine.ALPHA_DISABLE);
         }