Implemented the earcut library into the lighting engine. This will ma…

…ke polygon triangulation more efficient. Gulp now combines the lighting engine files and dependencies into a single file.
Jaloko · Nov 1, 2015 · 56cdcc8 · 56cdcc8
1 parent 0087f92
commit 56cdcc8
Show file tree

Hide file tree

Showing 14 changed files with 177 additions and 149 deletions.
diff --git a/dist/gl-matrix-min.js b/dist/gl-matrix-min.js
diff --git a/dist/le.min.js b/dist/le.min.js
diff --git a/examples/interactive_lights.html b/examples/interactive_lights.html
@@ -1,7 +1,6 @@
 <html>
     <head>
     	<link rel="stylesheet" type="text/css" href="css/main.css"/>
-        <script type="text/javascript" src="../dist/gl-matrix-min.js"></script>
         <script type="text/javascript" src="../dist/le.min.js"></script>
         <script type="text/javascript" src="js/stats.min.js"></script>
         <script type="text/javascript" src="js/interactive_lights.js"></script>

diff --git a/examples/regular_polygon_test.html b/examples/regular_polygon_test.html
@@ -1,7 +1,6 @@
 <html>
     <head>
     	<link rel="stylesheet" type="text/css" href="css/main.css"/>
-        <script type="text/javascript" src="../dist/gl-matrix-min.js"></script>
         <script type="text/javascript" src="../dist/le.min.js"></script>
         <script type="text/javascript" src="js/stats.min.js"></script>
         <script type="text/javascript" src="js/regular_polygon_test.js"></script>

diff --git a/examples/regular_polygon_test_shadows.html b/examples/regular_polygon_test_shadows.html
@@ -1,7 +1,6 @@
 <html>
     <head>
     	<link rel="stylesheet" type="text/css" href="css/main.css"/>
-        <script type="text/javascript" src="../dist/gl-matrix-min.js"></script>
         <script type="text/javascript" src="../dist/le.min.js"></script>
         <script type="text/javascript" src="js/stats.min.js"></script>
         <script type="text/javascript" src="js/regular_polygon_test_shadows.js"></script>

diff --git a/examples/regular_polygon_texture_test.html b/examples/regular_polygon_texture_test.html
@@ -1,7 +1,6 @@
 <html>
     <head>
     	<link rel="stylesheet" type="text/css" href="css/main.css"/>
-        <script type="text/javascript" src="../dist/gl-matrix-min.js"></script>
         <script type="text/javascript" src="../dist/le.min.js"></script>
         <script type="text/javascript" src="js/stats.min.js"></script>
         <script type="text/javascript" src="js/regular_polygon_texture_test.js"></script>

diff --git a/examples/rotating_rhombus.html b/examples/rotating_rhombus.html
@@ -1,7 +1,6 @@
 <html>
     <head>
     	<link rel="stylesheet" type="text/css" href="css/main.css"/>
-        <script type="text/javascript" src="../dist/gl-matrix-min.js"></script>
         <script type="text/javascript" src="../dist/le.min.js"></script>
         <script type="text/javascript" src="js/stats.min.js"></script>
         <script type="text/javascript" src="js/rotating_rhombus.js"></script>

diff --git a/gulpfile.js b/gulpfile.js
@@ -5,6 +5,9 @@ var uglify = require('gulp-uglify');
 var header = require('gulp-header');
 var addsrc = require('gulp-add-src');
 var fs = require('fs');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
 
 var config = {
     js: [
@@ -27,36 +30,74 @@ var config = {
         "src/scenes/Scene.js"
     ],
     tasks: {
-        default: ['clean', 'regular-build', 'example-stats'],
-        dev: ['clean', 'dev-build', 'example-stats']
+        default: ['clean-bundle', 'regular-build', 'dependencies', 'regular-combine', 'regular-clean', 'example-stats'],
+        dev: ['clean-bundle', 'dev-build', 'dependencies', 'dev-combine', 'dev-clean', 'example-stats']
     }
 }
 
-gulp.task('clean', function(){
+// Delete the final bundled file
+gulp.task('clean-bundle', function(){
     return del(['dist/le.min.js']);
-    return del(['dist/gl-matrix-min.js']);
 });
 
-gulp.task('regular-build', ['clean'], function(){
+// Combine the lighting engine source into a single file
+gulp.task('regular-build', ['clean-bundle'], function(){
     return gulp.src(config.js)
-    .pipe(uglify())
-    .pipe(concat('le.min.js'))
-    .pipe(header('/*' + fs.readFileSync('LICENSE', 'utf8') + '*/\n'))
-    .pipe(addsrc('node_modules/gl-matrix/dist/gl-matrix-min.js'))
-    .pipe(gulp.dest('dist'));
+        .pipe(uglify())
+        .pipe(concat('le.js'))
+        .pipe(header('/*' + fs.readFileSync('LICENSE', 'utf8') + '*/\n'))
+        .pipe(gulp.dest('dist'));
 });
 
-gulp.task('dev-build', ['clean'], function(){
+// Combine the lighting engine source into a single file
+gulp.task('dev-build', ['clean-bundle'], function(){
     return gulp.src(config.js)
-    .pipe(concat('le.min.js'))
-    .pipe(header('/*' + fs.readFileSync('LICENSE', 'utf8') + '*/\n'))
-    .pipe(addsrc('node_modules/gl-matrix/dist/gl-matrix-min.js'))
-    .pipe(gulp.dest('dist'));
+        .pipe(concat('le.js'))
+        .pipe(header('/*' + fs.readFileSync('LICENSE', 'utf8') + '*/\n'))
+        .pipe(gulp.dest('dist'));
 });
 
+// Minify dependencies and put them in the dist folder
+gulp.task('dependencies', function() {
+    // Start with earcut
+    return browserify({ entries: ['node_modules/earcut/src/earcut.js'], standalone: "earcut" })
+        .bundle()
+        .pipe(source('earcut.min.js'))
+        .pipe(buffer())
+        .pipe(uglify())
+        .pipe(header('/*' + fs.readFileSync('node_modules/earcut/LICENSE', 'utf8') + '*/\n'))
+        // Finish with gl-matrix
+        .pipe(addsrc('node_modules/gl-matrix/dist/gl-matrix-min.js'))
+        .pipe(gulp.dest('dist'));
+});
+
+// Combine lighting engine build with dependencies into a single file
+gulp.task('regular-combine', ['regular-build', 'dependencies'], function() {
+    return gulp.src(['dist/gl-matrix-min.js', 'dist/earcut.min.js', 'dist/le.js'])
+        .pipe(concat('le.min.js'))
+        .pipe(gulp.dest('dist'));
+});
+
+// Combine lighting engine build with dependencies into a single file
+gulp.task('dev-combine', ['dev-build', 'dependencies'], function() {
+    return gulp.src(['dist/gl-matrix-min.js', 'dist/earcut.min.js', 'dist/le.js'])
+        .pipe(concat('le.min.js'))
+        .pipe(gulp.dest('dist'));
+});
+
+// Clean the seperate files
+gulp.task('regular-clean', ['regular-combine'], function(){
+    return del(['dist/le.js', 'dist/gl-matrix-min.js', 'dist/earcut.min.js']);
+});
+
+gulp.task('dev-clean', ['dev-combine'], function(){
+    return del(['dist/le.js', 'dist/gl-matrix-min.js', 'dist/earcut.min.js']);
+});
+
+// Add the examples stats dependency
 gulp.task('example-stats', function(){
     return addsrc('node_modules/stats-js/build/stats.min.js')
-    .pipe(gulp.dest('examples/js'));
+        .pipe(gulp.dest('examples/js'));
 });
 
 gulp.task('default', config.tasks.default);

diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
   "version": "0.2.0",
   "private": "true",
   "dependencies": {
-    "gl-matrix" : "^2.3.1"
+    "gl-matrix": "^2.3.1",
+    "earcut": "^2.0.6"
   },
   "devDependencies": {
     "del": "^2.0.2",
@@ -19,7 +20,10 @@
     "gulp-add-src": "^0.2.0",
     "gulp-header": "^1.7.1",
     "node-fs": "^0.1.7",
-    "stats-js": "^1.0.0-alpha1"
+    "stats-js": "^1.0.0-alpha1",
+    "browserify": "12.0.1",
+    "vinyl-source-stream": "1.1.0",
+    "vinyl-buffer": "1.0.0"
   },
   "yuidoc": {
     "name": "Lighting Engine API Documentation",

diff --git a/src/extras/Vertices.js b/src/extras/Vertices.js
@@ -21,8 +21,7 @@ LE.Vertices = {
             {x: faceSize, y: faceSize},
             {x: faceSize, y: 0}
         ];
-        var renderVerts = JSON.parse(JSON.stringify(vertices));
-        return { vertices: vertices, renderVerts: renderVerts };
+        return vertices;
     },
     /**
      * Creates and returns the vertices for a rectangle
@@ -40,8 +39,7 @@ LE.Vertices = {
             {x: width, y: height},
             {x: width, y: 0}
         ];
-        var renderVerts = JSON.parse(JSON.stringify(vertices));
-        return { vertices: vertices, renderVerts: renderVerts };
+        return vertices;
     },
     /**
      * Creates and returns the vertices for a rhombus
@@ -57,8 +55,7 @@ LE.Vertices = {
         vertices.push({x: Math.sin(LE.Utilities.degToRad(angle)) * faceSize, y: Math.cos(LE.Utilities.degToRad(angle)) * faceSize });
         vertices.push({x: vertices[1].x + faceSize, y: vertices[1].y});
         vertices.push({x: vertices[0].x + faceSize, y: vertices[0].y});
-        var renderVerts = JSON.parse(JSON.stringify(vertices));
-        return { vertices: vertices, renderVerts: renderVerts };
+        return vertices;
     },
     /**
      * Creates and returns the vertices for a parallelogram
@@ -75,8 +72,7 @@ LE.Vertices = {
         vertices.push({x: Math.sin(LE.Utilities.degToRad(angle)) * width, y: Math.cos(LE.Utilities.degToRad(angle)) * height });
         vertices.push({x: vertices[1].x + width, y: vertices[1].y});
         vertices.push({x: vertices[0].x + width, y: vertices[0].y});
-        var renderVerts = JSON.parse(JSON.stringify(vertices));
-        return { vertices: vertices, renderVerts: renderVerts };
+        return vertices;
     },
     /**
      * Creates and returns the vertices for a trapezium - TO DO
@@ -122,40 +118,18 @@ LE.Vertices = {
             console.error("A regular polygon cannot have less than 3 vertices.")
         }
         var vertices = [];
-        var renderVerts = [];
         // Half faceSize because it starts of the center of the polygon. We want the faceSize to be
         // the entire width/height
         for(var i = 0; i < numberOfVertices; i++) {
             vertices.push( { x: (Math.sin(i/numberOfVertices*2*Math.PI) * faceSize / 2), 
                 y: (Math.cos(i/numberOfVertices*2*Math.PI) * faceSize / 2)} );
-            renderVerts.push( { x: (Math.sin(i/numberOfVertices*2*Math.PI) * faceSize / 2), 
-                y: (Math.cos(i/numberOfVertices*2*Math.PI) * faceSize / 2)} );
-            // Required because using WebGL TRIANGLE_STRIP render function
-            // Needed for both shadows and shape render
-            if(numberOfVertices > 4) {
-                if(i % 3 == 0) {
-                    vertices.push( { x: 0, y: 0 } );
-                    renderVerts.push( { x: 0, y: 0 } );
-                }  
-            }
-        }
-
-        // This should work for all vertex lengths now
-        if(vertices.length >= 7) {
-            if(vertices.length % 4 == 0) {
-                renderVerts.push( { x: 0, y: 0 } );
-            }
         }
 
         var size = LE.Utilities.sizeFromVerts(vertices);
         for(var i = 0; i < vertices.length; i++) {
             vertices[i].x += size.width / 2;
             vertices[i].y += size.height / 2;
         }
-        for(var i = 0; i < renderVerts.length; i++) {
-            renderVerts[i].x += size.width / 2;
-            renderVerts[i].y += size.height / 2;
-        }
-        return { vertices: vertices, renderVerts: renderVerts };
+        return vertices;
     }
 }
diff --git a/src/objects/Polygon.js b/src/objects/Polygon.js
@@ -15,9 +15,6 @@ LE.Polygon = function(parameters) {
     if(parameters == null) {
         parameters = { };
     }
-    if(parameters.vertices == null) {
-        parameters.vertices = { vertices: null, renderVerts: null };
-    }
     /**
      * @property x
      * @type Number 
@@ -40,16 +37,9 @@ LE.Polygon = function(parameters) {
      * @private
      * @property vertices
      * @type Object
-     * @default LE.Vertices.regularPolygon(50, 3).vertices
-     */
-    this.vertices = parameters.vertices.vertices || LE.Vertices.regularPolygon(50, 3).vertices,
-    /**
-     * @private
-     * @property renderVerts
-     * @type Object
-     * @default LE.Vertices.regularPolygon(50, 3).renderVerts
+     * @default LE.Vertices.regularPolygon(50, 3)
      */
-    this.renderVerts = parameters.vertices.renderVerts || LE.Vertices.regularPolygon(50, 3).renderVerts,
+    this.vertices = parameters.vertices || LE.Vertices.regularPolygon(50, 3),
     /**
      * @private
      * @property centerPoint

diff --git a/src/objects/Texture.js b/src/objects/Texture.js
@@ -7,17 +7,14 @@
  * @param {Number} [parameters.x=0] X position
  * @param {Number} [parameters.y=0] Y position
  * @param {Number} [parameters.rotation=0] Rotation
- * @param {Object} [parameters.vertices=LE.Vertices.square(50, 50).vertices] Vertices
+ * @param {Object} [parameters.vertices=LE.Vertices.square(50, 50)] Vertices
  * @param {String} parameters.textureURL Texture URL
  */
 LE.Texture = function(parameters) {
     // Stop error if no parameters given
     if(parameters == null) {
         console.error("The Texture class requires the textureURL parameter.");
     }
-    if(parameters.vertices == null) {
-        parameters.vertices = { vertices: null, renderVerts: null };
-    }
     /**
      * @property x
      * @type Number 
@@ -40,16 +37,9 @@ LE.Texture = function(parameters) {
      * @private
      * @property vertices
      * @type Object
-     * @default LE.Vertices.square(50, 50).vertices
-     */
-    this.vertices = parameters.vertices.vertices || LE.Vertices.square(50, 50).vertices
-    /**
-     * @private
-     * @property renderVerts
-     * @type Object
-     * @default LE.Vertices.square(50, 50).renderVerts
+     * @default LE.Vertices.square(50, 50)
      */
-    this.renderVerts = parameters.vertices.renderVerts || LE.Vertices.square(50, 50).renderVerts
+    this.vertices = parameters.vertices || LE.Vertices.square(50, 50)
     /**
      * @private
      * @property centerPoint

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
@@ -335,14 +335,6 @@ LE.WebGLRenderer.prototype.renderLightsAndShadows = function() {
                     // and rotations.
                     var vertices = [];
                     for(var i = 0; i < this.scene.shadowObjects[so].vertices.length; i++) {
-                        // Skipping every third vertex because they are not needed to build the shadows.
-                        // Also only doing this for shapes with more than 4 vertices because triangles and rectangles
-                        // render fine
-                        if(this.scene.shadowObjects[so].vertices.length > 4) {
-                            if(i % 4 == 1) {
-                                continue;
-                            }
-                        }
                         vertices.push({x: this.scene.shadowObjects[so].vertices[i].x + this.scene.shadowObjects[so].x,
                                        y: this.scene.shadowObjects[so].vertices[i].y + this.scene.shadowObjects[so].y});
                     }
@@ -492,9 +484,11 @@ LE.WebGLRenderer.prototype.renderObject = function(array, i) {
     this.camera.translate(cp.x, cp.y, 0.0);
     this.camera.rotate(LE.Utilities.degToRad(array[i].rotation), 0, 0, 1);
     this.camera.translate(-cp.x, -cp.y, 0.0);
+
+    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.scene.objectIndexBuffers[array[i].bufferIndex]);
     this.setMatrixUniforms(this.shaders.selected);  
+    this.gl.drawElements(this.gl.TRIANGLES, this.scene.objectIndexBuffers[array[i].bufferIndex].numItems, this.gl.UNSIGNED_SHORT, 0);
 
-    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, this.scene.objectBuffers[array[i].bufferIndex].numItems);
     this.camera.mvPopMatrix();
     this.camera.translate(-matrixPos.x, -matrixPos.y, 0.0);
     this.gl.disable(this.gl.BLEND);