play-co · ghost · Mar 4, 2011 · Mar 4, 2011 · Mar 4, 2011 · Mar 5, 2011
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+*~
+test/philip.html5.org/tests.js
+.DS_Store
diff --git a/Makefile b/Makefile
@@ -0,0 +1,27 @@
+# WebGL-2D
+
+# Make sure $JSSHELL points to your js shell binary in .profile or .bashrc
+# Most targets use commands that need a js shell path specified
+JSSHELL ?= $(error Specify a valid path to a js shell binary in ~/.profile: export JSSHELL=C:\path\js.exe or /path/js)
+
+# Version number used in naming release files.
+VERSION ?= $(error Specify a version for your release (e.g., VERSION=0.5))
+
+# Run JSLINT
+check-lint:
+	${JSSHELL} -m -j -p -e "load('./support/jslint.js'); load('./support/jslint-cmdline.js'); runJslint(read('webgl-2d.js'));"
+
+WEBGL2DJS=webgl-2d.js
+TESTS=./test
+CANVASTESTS=${TESTS}/philip.html5.org
+CANVASTESTSJS=${CANVASTESTS}/tests.js
+
+${CANVASTESTSJS}: ${WEBGL2DJS}
+	@@cat webgl-2d.js ${CANVASTESTS}/tests-core.js > ${CANVASTESTSJS}
+	@@echo "Created ${CANVASTESTSJS}"
+
+# Create webgl-2d enabled tests.js
+tests: ${CANVASTESTSJS}
+
+clean:
+	rm ${CANVASTESTSJS}
diff --git a/README.md b/README.md
@@ -14,6 +14,13 @@ WebGL-2D is a proof of concept and attempts to ascertain performance improvement
 
 It should allow _most_ Canvas2D applications to be switched to a WebGL context.
 
+Check out a [LIVE DEMO!](http://weare.buildingsky.net/webgl-2d/example.html)
+
+![20110304-qfkhgf9hjin5uk3we9rmgpwtf8.jpg](https://img.skitch.com/20110304-qfkhgf9hjin5uk3we9rmgpwtf8.jpg)
+
+
+### Usage ###
+
 Switching your Canvas2D sketch to a WebGL2D is very simple and only requires one additional line of code:
 
     var cvs = document.getElementById("myCanvas");
@@ -28,9 +35,46 @@ WebGL-2D is a work in progress and currently supports a very small subset of the
 
 * strokeStyle
 * fillStyle
+* strokeRect
 * fillRect
 * translate
 * rotate
 * scale
 * save
 * restore
+* lineWidth
+* drawImage
+* createImageData
+* getImageData
+* putImageData
+* beginPath
+* closePath
+* moveTo
+* lineTo
+* rect
+* fill*
+* stroke* 
+
+*fill and stroke only work on straight line paths supported above, arc, and curves are not yet supported.
+
+All other properties or functions are currently stubbed. Properties are set to their defaults and functions are empty.
+
+### Benchmarks ###
+
+WebGL-2D should be faster than Canvas2D at certain things and slower at others.
+It is important that you know what to expect when using WebGL-2D with your
+project.
+
+The benchmarks directory contains benchmarks for testing performance
+
+**asteroidsbench/**
+
+[Kevin Roast](http://twitter.com/kevinroast) has graciously given permission to include this benchmark in the
+WebGL-2D project.
+
+This benchmark is perfect for testing real world canvas usage in game engine.
+It relies heavily on 9 arg drawImage cropping to implement scrolling
+backgrounds and stripstrip animations.
+
+Visit his [website](http://www.kevs3d.co.uk/) for other HTML5 canvas demos as
+well as the [asteroids game](http://www.kevs3d.co.uk/dev/asteroids/)
diff --git a/benchmarks/asteroidsbench/COPYING b/benchmarks/asteroidsbench/COPYING
@@ -0,0 +1,13 @@
+Copyright (c) 2011  All Rights Reserved - Kevin Roast http://www.kevs3d.co.uk/
+
+Kevin Roast has graciously given permission to include this benchmark in the
+WebGL-2D project.
+
+This benchmark is perfect for testing real world canvas usage in game engine.
+It relies heavily on 9 arg drawImage cropping to implement scrolling
+backgrounds and stripstrip animations.
+
+Visit his website http://www.kevs3d.co.uk/ for other HTML5 canvas demos as
+well as the asteroids game http://www.kevs3d.co.uk/dev/asteroids/
+
+Twitter @kevinroast http://twitter.com/kevinroast
diff --git a/benchmarks/asteroidsbench/images/asteroid1.png b/benchmarks/asteroidsbench/images/asteroid1.png
diff --git a/benchmarks/asteroidsbench/images/asteroid2.png b/benchmarks/asteroidsbench/images/asteroid2.png
diff --git a/benchmarks/asteroidsbench/images/asteroid3.png b/benchmarks/asteroidsbench/images/asteroid3.png
diff --git a/benchmarks/asteroidsbench/images/asteroid4.png b/benchmarks/asteroidsbench/images/asteroid4.png
diff --git a/benchmarks/asteroidsbench/images/bg3.jpg b/benchmarks/asteroidsbench/images/bg3.jpg
diff --git a/benchmarks/asteroidsbench/images/enemyship1.png b/benchmarks/asteroidsbench/images/enemyship1.png
diff --git a/benchmarks/asteroidsbench/images/player.png b/benchmarks/asteroidsbench/images/player.png
diff --git a/benchmarks/asteroidsbench/images/shield.png b/benchmarks/asteroidsbench/images/shield.png
diff --git a/benchmarks/asteroidsbench/index.html b/benchmarks/asteroidsbench/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+      <!-- Copyright (c) 2011  All Rights Reserved - Kevin Roast http://www.kevs3d.co.uk/ -->
+      <title>Asteroids HTML5 Canvas 2D Rendering and JavaScript Benchmark by Kevin Roast</title>
+      <script type="text/javascript" src="../../webgl-2d.js"></script>
+      <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
+      <script type="text/javascript" src="scripts/mathlib-min.js"></script>
+      <script type="text/javascript" src="scripts/gamelib-min.js"></script>
+      <script type="text/javascript" src="scripts/asteroids-min.js"></script>
+      <style type="text/css">
+         body { font-family: Arial, Helvetica; color: lightblue }
+         .title { padding-top: 6px; text-align: center; font-weight: bold; color: red }
+         P { padding-left: 2em; padding-top: 0; padding-bottom: 0; line-height: 1.2em }
+         P.left { padding-left: 1em; line-height: 1.4em }
+         .bold { font-weight: bold }
+         .small { text-align:center; font-size: 0.75em }
+         a, a:visited, a:active, a:hover { color: #ffffff }
+         .results { color: white }
+         .results-wrapper {display:none; border: 2px solid grey; background-color: #333333; margin-left: 1em}
+         .button-overlay { float: right }
+      </style>
+      <meta name="description" content="Asteroids HTML5 Canvas 2D Rendering and JavaScript Benchmark by Kevin Roast" />
+   </head>
+
+   <body onload="onloadHandler();" style="background-color: #000000">
+
+      <div class="title">Asteroids HTML5 Canvas 2D Rendering and JavaScript Benchmark</div>
+      <div style="padding: 12px; min-width: 900px">
+         <table align="center">
+            <tr>
+               <td>
+                  <canvas id="canvas" width="640" height="640" style="border: 2px solid #aaaaaa;"></canvas>
+               </td>
+               <td>
+                  <div>
+                     <p class="left bold">Benchmark Info:</p>
+                     <p>Tests the 2D canvas rendering performance for commonly used operations in HTML5 games: drawImage, drawImage scaling, alpha, composition, shadows and text functions.
+                  </div>
+                  <div id="results-wrapper" class="results-wrapper">
+                     <p class="left bold">Benchmark Results:</p>
+                     <div class="results" id="results"></div>
+                  </div>
+                  <div style="padding-top:12px">
+                     <p class="left">Run the test with <a href="http://www.google.co.uk/chrome" target="new">Chrome</a> or <a href="http://www.mozilla.com/firefox" target="new">FireFox</a> or <a href="http://www.apple.com/safari/download" target="new">Safari</a> or <a href="http://www.opera.com/download" target="new">Opera</a>.</p>
+                  </div>
+                  <div>
+                     <p class="left"><a href="../index.html">See more HTML5 Canvas demos!</a></p>
+                     <p class="left"><a href="../asteroids">Play the Asteroids game!</a></p>
+                  </div>
+               </td>
+            </tr>
+         </table>
+      </div>
+      <div class="small">
+      <a href="http://twitter.com/kevinroast" target="new">Follow me on Twitter</a>- Last updated: 9/9/2010</div>
+   </body>
+</html>
diff --git a/benchmarks/asteroidsbench/scripts/asteroids-min.js b/benchmarks/asteroidsbench/scripts/asteroids-min.js
diff --git a/benchmarks/asteroidsbench/scripts/gamelib-min.js b/benchmarks/asteroidsbench/scripts/gamelib-min.js