Permalink
Browse files

PeaksAndValleys 2.0

  • Loading branch information...
1 parent d8eb3f5 commit 08adb8e70eba40f5d61b2191fc5ab28c464c4bd2 Erik Oros committed Nov 3, 2012
Showing with 3,940 additions and 2,450 deletions.
  1. +2 −27 PeaksAndValleys/LICENSE
  2. +0 −8 PeaksAndValleys/NOTICE
  3. +141 −76 PeaksAndValleys/README.md
  4. +23 −7 PeaksAndValleys/config.xml
  5. +60 −61 PeaksAndValleys/css/styles.css
  6. BIN PeaksAndValleys/extra/FITC-DM-EO-PNV.pdf
  7. +50 −0 PeaksAndValleys/html/about.html
  8. +19 −0 PeaksAndValleys/html/bbm.html
  9. +283 −0 PeaksAndValleys/html/license.html
  10. +3 −52 PeaksAndValleys/{shaders/LICENSE → images/freewill/LICENSE.md}
  11. +3 −0 PeaksAndValleys/images/freewill/README.md
  12. BIN PeaksAndValleys/images/freewill/buttonblue.png
  13. BIN PeaksAndValleys/images/freewill/buttongreen.png
  14. BIN PeaksAndValleys/images/freewill/buttonred.png
  15. BIN PeaksAndValleys/images/freewill/buttonyellow.png
  16. BIN PeaksAndValleys/images/freewill/dpad.png
  17. BIN PeaksAndValleys/images/freewill/pad.png
  18. BIN PeaksAndValleys/images/icons.png
  19. 0 PeaksAndValleys/{js → images/skybox}/LICENSE
  20. +3 −2 PeaksAndValleys/{tx → images/skybox}/README.md
  21. BIN PeaksAndValleys/{tx/skybox2.png → images/skybox/skybox.png}
  22. +4 −0 PeaksAndValleys/images/swipemenu/README.md
  23. BIN PeaksAndValleys/images/swipemenu/icon_options.png
  24. BIN PeaksAndValleys/images/swipemenu/icon_reset.png
  25. BIN PeaksAndValleys/images/swipemenu/icon_rules.png
  26. BIN PeaksAndValleys/images/workshop/about-blue.png
  27. BIN PeaksAndValleys/images/workshop/about-yellow.png
  28. BIN PeaksAndValleys/images/workshop/audio-blue.png
  29. BIN PeaksAndValleys/images/workshop/audio-yellow.png
  30. BIN PeaksAndValleys/images/workshop/template.xcf
  31. +238 −124 PeaksAndValleys/index.html
  32. +133 −0 PeaksAndValleys/js/AssetManager.js
  33. +344 −0 PeaksAndValleys/js/Freewill.js
  34. +0 −91 PeaksAndValleys/js/GLCube.js
  35. +155 −52 PeaksAndValleys/js/GLSkybox.js
  36. +200 −486 PeaksAndValleys/js/GLTerrain.js
  37. +161 −0 PeaksAndValleys/js/GLTerrainWorker.js
  38. +0 −746 PeaksAndValleys/js/Game.js
  39. +0 −8 PeaksAndValleys/js/NOTICE
  40. +29 −44 PeaksAndValleys/js/Utils.js
  41. +284 −0 PeaksAndValleys/js/swipemenu.js
  42. +0 −420 PeaksAndValleys/js/virtualjoystick.js
  43. +1,258 −0 PeaksAndValleys/js/webworks.js
  44. +1 −0 PeaksAndValleys/json/terrain.json
  45. +26 −0 PeaksAndValleys/shaders/GLSkyboxF.c
  46. +29 −0 PeaksAndValleys/shaders/GLSkyboxV.c
  47. +38 −0 PeaksAndValleys/shaders/GLTerrainF.c
  48. +39 −0 PeaksAndValleys/shaders/GLTerrainV.c
  49. +0 −30 PeaksAndValleys/shaders/fragment-skybox.c
  50. +0 −28 PeaksAndValleys/shaders/fragment-sun.c
  51. +0 −80 PeaksAndValleys/shaders/fragment.c
  52. +0 −31 PeaksAndValleys/shaders/vertex-skybox.c
  53. +0 −31 PeaksAndValleys/shaders/vertex-sun.c
  54. +0 −46 PeaksAndValleys/shaders/vertex.c
  55. +201 −0 PeaksAndValleys/tools/preprocessor/LICENSE.md
  56. +63 −0 PeaksAndValleys/tools/preprocessor/README.md
  57. +9 −0 PeaksAndValleys/tools/preprocessor/config.json
  58. +141 −0 PeaksAndValleys/tools/preprocessor/dowork.js
  59. BIN PeaksAndValleys/tools/preprocessor/input.png
  60. BIN PeaksAndValleys/tx/dirt.png
  61. BIN PeaksAndValleys/tx/grass.png
  62. BIN PeaksAndValleys/tx/rock.png
  63. BIN PeaksAndValleys/tx/snow.png
View
@@ -186,7 +186,7 @@
same "printed page" as the copyright notice for easier
identification within third-party archives.
- Copyright [yyyy] [name of copyright owner]
+ Copyright 2012 Research In Motion
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -222,29 +222,4 @@ freely, subject to the following restrictions:
2. Altered source versions must be plainly marked as such, and must not
be misrepresented as being the original software.
- 3. This notice may not be removed or altered from any source distribution.
-
-
---------------------------------------------------
-This software includes virtualjoystick.js
-
-Copyright (c) 2011 Jerome Etienne, http://jetienne.com
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ 3. This notice may not be removed or altered from any source distribution.
View
@@ -1,8 +0,0 @@
-PeaksAndValleys
-Copyright (c) 2012 Research In Motion Limited (http://www.rim.com/)
-
-This software includes glMatrix (https://github.com/toji/gl-matrix)
-Copyright (c) 2012 Brandon Jones, Colin MacKenzie IV
-
-This software includes virtualjoystick.js (https://github.com/jeromeetienne/virtualjoystick.js)
-Copyright (c) 2011 Jerome Etienne, http://jetienne.com
View
@@ -1,76 +1,141 @@
-<h2>Tested On</h2>
-<p>
-<ul>
-<li>BlackBerry PlayBook OS 2.1.0.1032</li>
-<li>BlackBerry Dev Alpha 10.0.9.388</li>
-</ul>
-</p>
-<h2>Background</h2>
-<p>
-This sample's primary intent is to provide a number of WebGL concepts working in one place. This
-is not intended to be a market-ready application for end consumers. While it can be fun to run
-around the countryside, this is primarily a WebGL learning resource. Some key concepts include:
-<ul>
-<li>Rendering objects in solid colours.</li>
-<li>Rendering objects with textures applied.</li>
-<li>Blending texures and colours on a single object.</li>
-<li>Ambient and directional lighting.</li>
-<li>Skybox generation.</li>
-<li>Unoptimized* terrain generation.</li>
-<li>Touch controls.</li>
-</ul>
-* "Unoptimized" can apply to the majority of the code here.
-</p>
-<h2>Known Issues</h2>
-<p>
-<ul>
-<li>Frame rate can drop when a lot is viewed in the distance. The primary source of this appears to be the texture blending. Optimization of blending will need to be explored.</li>
-<li>There are some rendering artifacts of triangles in the distance.</li>
-<li>The virtual joystick controls can sometimes get "stuck". Tapping the screen to force a touchend event to be triggered can clear this. Investigation of the exact cause and a fix will need to be explored.</li>
-</ul>
-</p>
-<h2>Extras</h2>
-<h3>FITC-DM-EO.pdf</h3>
-<p>
-Is a presentation given at FITC 2012 in Toronto where the PeaksAndValleys application was discussed.
-These slides have been included for reference as they add a little colour to the code contained herein.
-This file is by no means required in order for the application to run.
-</p>
-<h2>Thank You!</h2>
-<p>
-Immense thanks to the following people. They might not know how much they helped me, but I appreciate it none the less.
-<br /><br />
-The fantastic people behind the lessons (and those that inspired the lessons) at <b>Learning WebGL</b>:
-<br />
-<a href="http://www.learningwebgl.com">http://www.learningwebgl.com</a>
-<br /><br />
-<b>Brandon Jones</b> (toji):
-<br />
-<a href="https://github.com/toji/gl-matrix">https://github.com/toji/gl-matrix</a>
-<br /><br />
-<b>Jerome Etienne</b> (jetienne):
-<br />
-<a href="https://github.com/jeromeetienne/virtualjoystick.js">https://github.com/jeromeetienne/virtualjoystick.js</a>
-<br /><br />
-<b>Chandler Prall</b>:
-<br />
-<a href="http://chandler.prallfamily.com/2011/06/blending-webgl-textures">http://chandler.prallfamily.com/2011/06/blending-webgl-textures</a>
-<br /><br />
-<b>Andrea Giammarch</b>:
-<br />
-<a href="http://webreflection.blogspot.ca/2010/09/fragment-and-vertex-shaders-my-way-to.html">http://webreflection.blogspot.ca/2010/09/fragment-and-vertex-shaders-my-way-to.html</a>
-<br /><br />
-<b>Paul Irish</b> for writing the blog, and <b>Erik Moller</b> for sharing the technique:
-<br />
-<a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating">http://paulirish.com/2011/requestanimationframe-for-smart-animating</a>
-<br /><br />
-<b>Ricardo Cabello</b> (mrdoob) for my initial foray with Three.js.
-Though it isn't used here, my initial trials helped me understand
-a number of concepts. Will definitely be revisiting this:
-<br />
-<a href="https://github.com/mrdoob/three.js">https://github.com/mrdoob/three.js</a>
-<br /><br />
-The <b>Valve Developer Community</b> for helping me create a skybox beyond MS Paint:
-<br />
-<a href="https://developer.valvesoftware.com/wiki/Skybox_(2D)_with_Terragen">https://developer.valvesoftware.com/wiki/Skybox_(2D)_with_Terragen</a>
-</p>
+# Background
+
+> This sample's primary intent is to provide a number of WebGL concepts
+> working in one place. This is not intended to be a market-ready application
+> for end consumers. While it can be fun to run around the countryside, this
+> is primarily a WebGL learning resource.
+>
+> If you have any feedback or find any issues, please feel free to report
+> them in the Issues section, or contact me directly via Twitter:
+> @WaterlooErik
+
+## Key Features
+
+### Image As A Heightmap
+
+> Previously, PeaksAndValleys generated a static 150x150 vertex landscape
+> with randomized heights. The result was a random map on each run, but in a
+> fixed region.
+>
+> The most current version processes an image to obtain height data, and
+> corresponding normal and texture data. To minimize on-device processing
+> requirements during startup, the *preprocessor* tool was created to convert
+> a supplied image to the required data as a JSON string.
+>
+> For more information on leveraging this tool, please refer to README.md in
+> the tools/preprocessor folder.
+
+### Endless Terrain
+
+> This release of PeaksAndValleys continuosly renders an area of 48 vertices
+> in all directions around the camera's current position. The end result does
+> produce terrain 'popping' into view; something that will be addressed down
+> the road.
+>
+> To achieve this, Web Workers were used to process the existing data and
+> create new vertex and normal arrays on the fly. Once ready, these arrays
+> are passed back to the primary application thread and the corresponding
+> buffers are updated with the new data.
+>
+> When near the borders of the terrain / image, the Web Worker wraps around
+> to retrieve information from the opposite end of the data to ensure the
+> user can technically keep walking forever.
+
+### Colour Shaders
+
+> The default fragment shader for the terrain will use the height of each
+> vertex being rendered and colour it accordingly with sand, grass, rock, and
+> snow (lowest to highest.)
+
+### Ambient And Directional Lighting
+
+> Currently, there is a static sun in the sky producing light in the
+> direction (0, -1, 1). The normal of each vertex is then used in conjunction
+> with this lighting direction to generate shadows across the landscape.
+
+### Texture Shaders / Seamless Skybox
+
+> The skybox is simply a 2x2x2 box that continually moves with the camera.
+> By rendering the skybox *first* with gl.disable(gl.DEPTH_TEST) then turning
+> depth-testing back on with gl.enable(gl.DEPTH_TEST) and rendering the
+> terrain, even though the skybox is directly infront of the camera,
+> everything else still gets rendered "on top" of the skybox. The end result
+> is that regardless of how far away the terrain is, the skybox is always
+> rendered behind it.
+>
+> The texture for the skybox was created using Terragen, and is a basic,
+> seamless texture designed to look appropriate when textured onto a cube.
+
+### Multitouch Controls
+
+> In the initial version of PeaksAndValleys, Jerome Etienne's
+> *virtualjoystick.js* was used as a basis for camera movement and rotation.
+> Since then, I had created a ControlsOverlay.js for use with a Cocos2d-HTML5
+> sample and have adapted that into *Freewill.js* for this release of
+> PeaksAndValleys.
+>
+> These new controls allow for multiple Joysticks and Buttons to be placed
+> onscreen with the goal of simplicity.
+
+### HTML5 Audio *(TODO)*
+
+> Once license appropriate samples are produced, this sample will be
+> augmented to include backgroudn music and sound effects. Currently this
+> must be done withi HTML5 audio, however once *Web Audio API* is supported,
+> it will be implemented in favour of <audio> elements.
+
+### Social Integration *(TODO)*
+
+> Currently, there is very minimal integration with BlackBerry Messenger in
+> that the application will register with BBM when the action is chosen from
+> the dropdown menu.
+>
+> Future plans include: take a screenshot and set as BBM profile picture,
+> chat integration, and invite to download.
+>
+> In addition to BlackBerry Messenger, if the Scoreloop SDK becomes available
+> for BlackBerry 10 WebWorks applications, that will also be looked at for
+> integration into this sample.
+
+### Monetization *(TODO)*
+
+> The BlackBerry platform has a number of payment services to help developers
+> monetize their application, however as of November 2nd, support has not yet
+> been added for these.
+
+### Multiplayer *(TODO)*
+
+> This is not currently implemented, but integration of Socket.io and a
+> backend Node.js server are definitely on my mind.
+
+### Cut Scenes *(TODO)*
+
+> They are a very common component in many games and a sample implementation
+> will be included in the future.
+
+# Tested With
+
+> * BlackBerry 10 WebWorks SDK 1.0.2.9
+> * BlackBerry Dev Alpha B, 10.0.9.388
+
+# Known Issues
+
+> * Noticing pretty heavy performance issues when I include the following in *styles.css* for *canvas.joystick* and *canvas.button*.
+> -webkit-transition: opacity 200ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
+> Continuing to investigate, but if anyone has thoughts, I'm happy to hear them.
+> * After selection from the swipedown menu, you must use the right-most red button to re-invoke the swipedown menu.
+> * BlackBerry Messenger registers, but no additional functionality is implemented yet.
+> * Audio was taken out for licensing reasons, looking to have some problem-free tracks soon.
+
+# Thank You!
+
+> Immense thanks to the following people. They might not know how much they
+> helped me, but I appreciate it none the less.
+> * The fantastic people behind the lessons (and those that inspired the lessons) at [Learning WebGL](http://www.learningwebgl.com)
+> * [Brandon Jones (toji)](https://github.com/toji/gl-matrix)
+> * [Jerome Etienne (jetienne)](https://github.com/jeromeetienne/virtualjoystick.js)
+> * [Chandler Prall](http://chandler.prallfamily.com/2011/06/blending-webgl-textures)
+> * [Andrea Giammarch](http://webreflection.blogspot.ca/2010/09/fragment-and-vertex-shaders-my-way-to.html)
+> * [Paul Irish and Erik Moller](http://paulirish.com/2011/requestanimationframe-for-smart-animating)
+> * [Ricardo Cabello (mrdoob)](https://github.com/mrdoob/three.js)
+> * The [Valve Developer Community](https://developer.valvesoftware.com/wiki/Skybox)
View
@@ -18,13 +18,29 @@
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
- version="1.0.0">
- <access uri="*" subdomains="true" />
+ id="com.oros.pnv"
+ version="2.0.0">
+
+ <name>PeaksAndValleys</name>
<author>Erik Oros</author>
<content src="index.html" />
- <name>PeaksAndValleys</name>
- <feature id="blackberry.app.event" />
- <feature id="blackberry.identity" />
- <feature id="blackberry.invoke" />
- <feature id="blackberry.invoke.BrowserArguments" />
+ <access uri="*" subdomains="true" />
+
+ <!-- PlayBook -->
+ <rim:orientation mode="landscape" />
+
+ <!-- BB10 -->
+ <feature id="blackberry.app.orientation">
+ <param name="mode" value="landscape" />
+ </feature>
+
+ <!-- Required permissions. -->
+ <rim:permissions>
+ <rim:permit>bbm_connect</rim:permit>
+ </rim:permissions>
+
+ <!-- Required features. -->
+ <feature id="blackberry.app" />
+ <feature id="blackberry.bbm.platform" />
+ <feature id="blackberry.event" />
</widget>
Oops, something went wrong.

0 comments on commit 08adb8e

Please sign in to comment.