diff options
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r-- | assets/canvas-runtime.js | 810 |
1 files changed, 434 insertions, 376 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index dd909e26..ee9f24a4 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -4,11 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | 7 | // namespace for the Ninja Canvas Runtime | |
8 | var NinjaCvsRt = NinjaCvsRt || {}; | ||
8 | 9 | ||
9 | /////////////////////////////////////////////////////////////////////// | 10 | /////////////////////////////////////////////////////////////////////// |
10 | //Loading webGL/canvas data | 11 | //Loading webGL/canvas data |
11 | function initWebGl (rootElement, directory) { | 12 | NinjaCvsRt.initWebGl = function (rootElement, directory) { |
12 | var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); | 13 | var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); |
13 | if (ninjaWebGlData && ninjaWebGlData.data) { | 14 | if (ninjaWebGlData && ninjaWebGlData.data) { |
14 | for (var n=0; ninjaWebGlData.data[n]; n++) { | 15 | for (var n=0; ninjaWebGlData.data[n]; n++) { |
@@ -16,16 +17,16 @@ function initWebGl (rootElement, directory) { | |||
16 | } | 17 | } |
17 | } | 18 | } |
18 | //Creating data manager | 19 | //Creating data manager |
19 | cvsDataMngr = new CanvasDataManager(); | 20 | cvsDataMngr = new NinjaCvsRt.CanvasDataManager(); |
20 | //Loading data to canvas(es) | 21 | //Loading data to canvas(es) |
21 | cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); | 22 | cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); |
22 | } | 23 | }; |
23 | 24 | ||
24 | /////////////////////////////////////////////////////////////////////// | 25 | /////////////////////////////////////////////////////////////////////// |
25 | // Class ShapeRuntime | 26 | // Class ShapeRuntime |
26 | // Manages runtime shape display | 27 | // Manages runtime shape display |
27 | /////////////////////////////////////////////////////////////////////// | 28 | /////////////////////////////////////////////////////////////////////// |
28 | function CanvasDataManager() | 29 | NinjaCvsRt.CanvasDataManager = function () |
29 | { | 30 | { |
30 | this.loadGLData = function(root, valueArray, assetPath ) | 31 | this.loadGLData = function(root, valueArray, assetPath ) |
31 | { | 32 | { |
@@ -54,31 +55,12 @@ function CanvasDataManager() | |||
54 | var canvas = this.findCanvasWithID( id, root ); | 55 | var canvas = this.findCanvasWithID( id, root ); |
55 | if (canvas) | 56 | if (canvas) |
56 | { | 57 | { |
57 | new GLRuntime( canvas, jObj, assetPath ); | 58 | new NinjaCvsRt.GLRuntime( canvas, jObj, assetPath ); |
58 | } | 59 | } |
59 | } | 60 | } |
60 | } | 61 | } |
61 | } | 62 | } |
62 | } | 63 | }; |
63 | |||
64 | this.collectGLData = function( elt, dataArray ) | ||
65 | { | ||
66 | if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) | ||
67 | { | ||
68 | var data = elt.elementModel.shapeModel.GLWorld.export( true ); | ||
69 | dataArray.push( data ); | ||
70 | } | ||
71 | |||
72 | if (elt.children) | ||
73 | { | ||
74 | var nKids = elt.children.length; | ||
75 | for (var i=0; i<nKids; i++) | ||
76 | { | ||
77 | var child = elt.children[i]; | ||
78 | this.collectGLData( child, dataArray ); | ||
79 | } | ||
80 | } | ||
81 | } | ||
82 | 64 | ||
83 | this.findCanvasWithID = function( id, elt ) | 65 | this.findCanvasWithID = function( id, elt ) |
84 | { | 66 | { |
@@ -95,14 +77,14 @@ function CanvasDataManager() | |||
95 | if (foundElt) return foundElt; | 77 | if (foundElt) return foundElt; |
96 | } | 78 | } |
97 | } | 79 | } |
98 | } | 80 | }; |
99 | } | 81 | }; |
100 | 82 | ||
101 | /////////////////////////////////////////////////////////////////////// | 83 | /////////////////////////////////////////////////////////////////////// |
102 | // Class GLRuntime | 84 | // Class GLRuntime |
103 | // Manages runtime fora WebGL canvas | 85 | // Manages runtime fora WebGL canvas |
104 | /////////////////////////////////////////////////////////////////////// | 86 | /////////////////////////////////////////////////////////////////////// |
105 | function GLRuntime( canvas, jObj, assetPath ) | 87 | NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) |
106 | { | 88 | { |
107 | /////////////////////////////////////////////////////////////////////// | 89 | /////////////////////////////////////////////////////////////////////// |
108 | // Instance variables | 90 | // Instance variables |
@@ -122,6 +104,7 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
122 | this._initialized = false; | 104 | this._initialized = false; |
123 | 105 | ||
124 | this._useWebGL = false; | 106 | this._useWebGL = false; |
107 | this._assetPath = undefined; | ||
125 | 108 | ||
126 | // view parameters | 109 | // view parameters |
127 | this._fov = 45.0; | 110 | this._fov = 45.0; |
@@ -138,27 +121,30 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
138 | // all "live" materials | 121 | // all "live" materials |
139 | this._materials = []; | 122 | this._materials = []; |
140 | 123 | ||
141 | // provide the mapping for the asset directory | 124 | // provide the mapping for the asset directory |
142 | if (assetPath) | 125 | if (assetPath) { |
143 | { | 126 | this._assetPath = assetPath.slice(); |
144 | this._assetPath = assetPath.slice(); | 127 | if (this._assetPath[this._assetPath.length - 1] != '/') |
145 | if (this._assetPath[this._assetPath.length-1] != '/') | 128 | this._assetPath += '/'; |
146 | this._assetPath += '/'; | 129 | } |
147 | } | 130 | |
131 | if(this._assetPath !== undefined) { | ||
132 | RDGE.globals.engine.setAssetPath(this._assetPath); | ||
133 | } | ||
148 | 134 | ||
149 | /////////////////////////////////////////////////////////////////////// | 135 | /////////////////////////////////////////////////////////////////////// |
150 | // accessors | 136 | // accessors |
151 | /////////////////////////////////////////////////////////////////////// | 137 | /////////////////////////////////////////////////////////////////////// |
152 | this.getZNear = function() { return this._zNear; } | 138 | this.getZNear = function() { return this._zNear; }; |
153 | this.getZFar = function() { return this._zFar; } | 139 | this.getZFar = function() { return this._zFar; }; |
154 | this.getFOV = function() { return this._fov; } | 140 | this.getFOV = function() { return this._fov; }; |
155 | this.getAspect = function() { return this._aspect; } | 141 | this.getAspect = function() { return this._aspect; }; |
156 | this.getViewDistance = function() { return this._viewDist; } | 142 | this.getViewDistance = function() { return this._viewDist; }; |
157 | 143 | ||
158 | this.get2DContext = function() { return this._context; } | 144 | this.get2DContext = function() { return this._context; }; |
159 | 145 | ||
160 | this.getViewportWidth = function() { return this._canvas.width; } | 146 | this.getViewportWidth = function() { return this._canvas.width; }; |
161 | this.getViewportHeight = function() { return this._canvas.height; } | 147 | this.getViewportHeight = function() { return this._canvas.height; }; |
162 | 148 | ||
163 | /////////////////////////////////////////////////////////////////////// | 149 | /////////////////////////////////////////////////////////////////////// |
164 | // accessors | 150 | // accessors |
@@ -188,20 +174,20 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
188 | this.importObjects( root ); | 174 | this.importObjects( root ); |
189 | this.render(); | 175 | this.render(); |
190 | } | 176 | } |
191 | } | 177 | }; |
192 | 178 | ||
193 | this.init = function() | 179 | this.init = function() |
194 | { | 180 | { |
195 | var ctx1 = g_Engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle), | 181 | var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle), |
196 | ctx2 = g_Engine.getContext(); | 182 | ctx2 = RDGE.globals.engine.getContext(); |
197 | if (ctx1 != ctx2) console.log( "***** different contexts *****" ); | 183 | if (ctx1 != ctx2) console.log( "***** different contexts *****" ); |
198 | this.renderer = ctx1.renderer; | 184 | this.renderer = ctx1.renderer; |
199 | 185 | ||
200 | // create a camera, set its perspective, and then point it at the origin | 186 | // create a camera, set its perspective, and then point it at the origin |
201 | var cam = new camera(); | 187 | var cam = new RDGE.camera(); |
202 | this._camera = cam; | 188 | this._camera = cam; |
203 | cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar()); | 189 | cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar()); |
204 | cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], vec3.up()); | 190 | cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up()); |
205 | 191 | ||
206 | // make this camera the active camera | 192 | // make this camera the active camera |
207 | this.renderer.cameraManager().setActiveCamera(cam); | 193 | this.renderer.cameraManager().setActiveCamera(cam); |
@@ -210,17 +196,17 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
210 | this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); | 196 | this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); |
211 | 197 | ||
212 | // create an empty scene graph | 198 | // create an empty scene graph |
213 | this.myScene = new SceneGraph(); | 199 | this.myScene = new RDGE.SceneGraph(); |
214 | 200 | ||
215 | // load the scene graph data | 201 | // load the scene graph data |
216 | this.loadScene(); | 202 | this.loadScene(); |
217 | 203 | ||
218 | // Add the scene to the engine - necessary if you want the engine to draw for you | 204 | // Add the scene to the engine - necessary if you want the engine to draw for you |
219 | var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); | 205 | var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); |
220 | g_Engine.AddScene(name, this.myScene); | 206 | RDGE.globals.engine.AddScene(name, this.myScene); |
221 | 207 | ||
222 | this._initialized = true; | 208 | this._initialized = true; |
223 | } | 209 | }; |
224 | 210 | ||
225 | // main code for handling user interaction and updating the scene | 211 | // main code for handling user interaction and updating the scene |
226 | this.update = function(dt) | 212 | this.update = function(dt) |
@@ -233,7 +219,7 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
233 | this.elapsed += dt; | 219 | this.elapsed += dt; |
234 | 220 | ||
235 | // changed the global position uniform of light 0, another way to change behavior of a light | 221 | // changed the global position uniform of light 0, another way to change behavior of a light |
236 | rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]); | 222 | RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]); |
237 | 223 | ||
238 | // orbit the light nodes around the boxes | 224 | // orbit the light nodes around the boxes |
239 | if (this.light ) this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]); | 225 | if (this.light ) this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]); |
@@ -244,7 +230,7 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
244 | // now update all the nodes in the scene |