Merge pull request #353 from tsherif/OES_element_index_uint

Use OES_element_index_uint extension, if available
xeolabs · May 9, 2015 · 574e8ee · 574e8ee
2 parents cb72059 + 8636b0d
commit 574e8ee
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 13 deletions.
diff --git a/examples/features.json b/examples/features.json
@@ -187,6 +187,14 @@
                         "page": "optimization_textureAtlas"
                     }
                 ]
+            },
+            {
+                "nodes": [
+                    {
+                        "title": "OES_element_index_uint",
+                        "page": "optimization_uintIndex"
+                    }
+                ]
             }
         ]
     },

diff --git a/examples/index.html b/examples/index.html
@@ -265,7 +265,8 @@ <h1><a href="../index.html">SceneJS</a> / Examples</h1>
         "geometry_autoNormals",
 
         "#optimization",
-        "optimization_vertexSharing"
+        "optimization_vertexSharing",
+        "optimization_uintIndex"
     ],
 
 
@@ -498,7 +499,8 @@ <h1><a href="../index.html">SceneJS</a> / Examples</h1>
         "optimization_frustumClipping",
         "optimization_instancing",
         "optimization_textureAtlas",
-        "optimization_vertexSharing"
+        "optimization_vertexSharing",
+        "optimization_uintIndex"
     ],
 
     "Benchmarks": [

diff --git a/examples/optimization_uintIndex.html b/examples/optimization_uintIndex.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>SceneJS Example</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+    <style>
+        body {
+            background: white;
+            margin: 0;
+            -moz-user-select: -moz-none;
+            -khtml-user-select: none;
+            -webkit-user-select: none;
+        }
+    </style>
+
+    <script src="../api/latest/scenejs.js"></script>
+    <link href="css/styles.css" rel="stylesheet"/>
+
+<body>
+
+<div id="infoDark">
+    <a href="http://scenejs.org">SceneJS</a> - optimization - OES_element_index_uint<br>
+    This scene uses WebGL extension <a href="https://www.khronos.org/registry/webgl/extensions/OES_element_index_uint/" target="_blank">OES_element_index_uint</a> to render<br> 
+    this torus, which contains <span id="vertex-count"></span> vertices, in a single draw call.
+</div>
+
+<script>
+
+    // Point SceneJS to the bundled plugins
+    SceneJS.setConfigs({
+        pluginPath:"../api/latest/plugins"
+    });
+
+    var UINT_INDEX_ENABLED = (function() {
+        var canvas = document.createElement("canvas");
+        var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+        return !!(gl && gl.getExtension("OES_element_index_uint"));
+    })();
+
+    if (!UINT_INDEX_ENABLED) {
+        document.getElementById("infoDark").innerText = "Sorry, your browser does not support OES_element_index_uint!"
+    } else {
+        // Create scene
+        var scene = SceneJS.createScene({
+            nodes:[
+
+                // Mouse-orbited camera, implemented by plugin at
+                // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
+                {
+                    type:"cameras/orbit",
+                    yaw:30,
+                    pitch:-30,
+                    zoom:5,
+                    zoomSensitivity:10.0,
+
+                    nodes:[
+                        {
+                            type:"material",
+                            color:{ r:0.6, g:0.6, b:0.9 },
+                            nodes:[
+
+                                // Torus primitive, implemented by plugin at http://scenejs.org/api/latest/plugins/node/geometry/torus.js
+                                {
+                                    id: "torus",
+                                    type: "geometry/torus",
+                                    radius: 3.0,
+                                    tube: 1.5,
+                                    segmentsR: 800,
+                                    segmentsT: 800,
+                                    arc: Math.PI * 2,
+                                    wire: true
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        });
+
+        scene.getNode("torus", function(torus) {
+            document.getElementById("vertex-count").innerText = torus.nodes[0]._core.arrays.positions.length / 3;
+        });
+    }
+
+</script>
+</body>
+</html>
diff --git a/src/core/canvas.js b/src/core/canvas.js
@@ -91,6 +91,8 @@ SceneJS_Canvas.prototype.initWebGL = function () {
             SceneJS.errors.WEBGL_NOT_SUPPORTED,
             'Failed to get a WebGL context');
     }
+
+    this.UINT_INDEX_ENABLED = !!this.gl.getExtension("OES_element_index_uint");
 };
 
 

diff --git a/src/core/display/chunks/drawChunk.js b/src/core/display/chunks/drawChunk.js
@@ -21,8 +21,9 @@ SceneJS_ChunkFactory.createChunkType({
 
     drawAndPick:function (frameCtx) {
         var gl = this.program.gl;
+        var indexType = this.program.UINT_INDEX_ENABLED ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT;
         gl.uniform1i(frameCtx.pick ? this._depthModePick : this._depthModeDraw, frameCtx.depthMode);
-        gl.drawElements(this.core.primitive, this.core.indexBuf.numItems, gl.UNSIGNED_SHORT, 0);
+        gl.drawElements(this.core.primitive, this.core.indexBuf.numItems, indexType, 0);
         //frameCtx.textureUnit = 0;
     }
 });
diff --git a/src/core/display/display.js b/src/core/display/display.js
@@ -1028,7 +1028,11 @@ SceneJS_Display.prototype._doDrawList = function (params) {
     frameCtx.ambientColor = this._ambientColor;
     frameCtx.aspect = this._canvas.canvas.width / this._canvas.canvas.height;
 
-    // The extension needs to be re-queried in case the context was lost and has been recreated.
+    // The extensions needs to be re-queried in case the context was lost and has been recreated.
+    if (this._canvas.UINT_INDEX_ENABLED) {
+        gl.getExtension("OES_element_index_uint");
+    }
+
     var VAO = gl.getExtension("OES_vertex_array_object");
     frameCtx.VAO = (VAO) ? VAO : null;
     frameCtx.VAO = null;

diff --git a/src/core/display/program.js b/src/core/display/program.js
@@ -33,6 +33,12 @@ var SceneJS_Program = function(id, hash, source, gl) {
      */
     this.gl = gl;
 
+    /**
+     * Whether or not we can use UINT indices
+     * @type boolean
+     */
+    this.UINT_INDEX_ENABLED = !!gl.getExtension("OES_element_index_uint");
+
     /**
      * The drawing program
      * @type SceneJS._webgl.Program

diff --git a/src/core/scene/geometry.js b/src/core/scene/geometry.js
@@ -51,6 +51,7 @@ new (function () {
 
         var primitive = data.primitive || "triangles";
         var core = this._core;
+        var IndexArrayType = this._engine.canvas.UINT_INDEX_ENABLED ? Uint32Array : Uint16Array;
 
         core.primitive = this._getPrimitiveType(primitive);
 
@@ -75,7 +76,7 @@ new (function () {
             uv: data.uv ? new Float32Array(data.uv) : undefined,
             uv2: data.uv2 ? new Float32Array(data.uv2) : undefined,
             colors: data.colors ? new Float32Array(data.colors) : undefined,
-            indices: data.indices ? new Uint16Array(data.indices) : undefined
+            indices: data.indices ? new IndexArrayType(data.indices) : undefined
         };
 
         delete data.positions;

diff --git a/src/plugins/node/geometry/box.js b/src/plugins/node/geometry/box.js
@@ -78,14 +78,14 @@
                 0, 0, x, 0, x, y, 0, y, // v7-v4-v3-v2 bottom
                 0, 0, x, 0, x, y, 0, y    // v4-v7-v6-v5 back
             ]),
-            indices:new Uint16Array([
+            indices:[
                 0, 1, 2, 0, 2, 3, // front
                 4, 5, 6, 4, 6, 7, // right
                 8, 9, 10, 8, 10, 11, // top
                 12, 13, 14, 12, 14, 15, // left
                 16, 17, 18, 16, 18, 19, // bottom
                 20, 21, 22, 20, 22, 23   // back
-            ])
+            ]
         };
     }
 })();
diff --git a/src/plugins/node/geometry/cylinder.js b/src/plugins/node/geometry/cylinder.js
@@ -182,7 +182,7 @@
             positions : new Float32Array(positions),
             normals: new Float32Array(normals),
             uv : new Float32Array(uvs),
-            indices : new Uint16Array(indices)
+            indices : indices
         };
     }
 })();
diff --git a/src/plugins/node/geometry/plane.js b/src/plugins/node/geometry/plane.js
@@ -114,7 +114,7 @@
             positions:new Float32Array(positions),
             normals:new Float32Array(normals),
             uv:new Float32Array(uvs),
-            indices:new Uint16Array(indices)
+            indices:indices
         };
     }
 })();
diff --git a/src/plugins/node/geometry/sphere.js b/src/plugins/node/geometry/sphere.js
@@ -94,7 +94,7 @@
             positions : new Float32Array(positions),
             normals: new Float32Array(normals),
             uv : new Float32Array(uvs),
-            indices : new Uint16Array(indices)
+            indices : indices // Type will be decided internally
         };
     }
 })();
diff --git a/src/plugins/node/geometry/teapot.js b/src/plugins/node/geometry/teapot.js
@@ -5778,7 +5778,7 @@
             coreId:coreId,
             primitive:params.wire ? "lines" : "triangles",
             positions:new Float32Array(flatten(positions, 3)),
-            indices:new Uint16Array(flatten(reverse(indices))),
+            indices:flatten(reverse(indices)),
             normals:new Float32Array(flatten(calculateNormals(positions, indices), 3))
         };
     }

diff --git a/src/plugins/node/geometry/torus.js b/src/plugins/node/geometry/torus.js
@@ -118,7 +118,7 @@
             positions:new Float32Array(positions),
             normals:new Float32Array(normals),
             uv:new Float32Array(uvs),
-            indices:new Uint16Array(indices)
+            indices:indices
         };
     }
 

diff --git a/src/plugins/node/geometry/vectorText.js b/src/plugins/node/geometry/vectorText.js
@@ -115,7 +115,7 @@
             type:"geometry",
             primitive:"lines",
             positions:new Float32Array(positions),
-            indices:new Uint16Array(indices)
+            indices:indices
         };
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -91,6 +91,8 @@ SceneJS_Canvas.prototype.initWebGL = function () { @@
                 SceneJS.errors.WEBGL_NOT_SUPPORTED,
                 'Failed to get a WebGL context');
         }
+        this.UINT_INDEX_ENABLED = !!this.gl.getExtension("OES_element_index_uint");
     };
@@ Expand Down @@