aboutsummaryrefslogtreecommitdiff
path: root/assets/canvas-runtime.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r--assets/canvas-runtime.js1563
1 files changed, 1563 insertions, 0 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
new file mode 100644
index 00000000..fd823f35
--- /dev/null
+++ b/assets/canvas-runtime.js
@@ -0,0 +1,1563 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7
8
9///////////////////////////////////////////////////////////////////////
10//Loading webGL/canvas data
11function initWebGl (rootElement, directory) {
12 var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', ''));
13 if (ninjaWebGlData && ninjaWebGlData.data) {
14 for (var n=0; ninjaWebGlData.data[n]; n++) {
15 ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]);
16 }
17 }
18 //Creating data manager
19 cvsDataMngr = new CanvasDataManager();
20 //Loading data to canvas(es)
21 cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory);
22}
23
24///////////////////////////////////////////////////////////////////////
25// Class ShapeRuntime
26// Manages runtime shape display
27///////////////////////////////////////////////////////////////////////
28function CanvasDataManager()
29{
30 this.loadGLData = function(root, valueArray, assetPath )
31 {
32 if (assetPath)
33 this._assetPath = assetPath.slice();
34
35 var value = valueArray;
36 var nWorlds = value.length;
37 for (var i=0; i<nWorlds; i++)
38 {
39 var importStr = value[i];
40 var startIndex = importStr.indexOf( "id: " );
41 if (startIndex >= 0)
42 {
43 var endIndex = importStr.indexOf( "\n", startIndex );
44 if (endIndex > 0)
45 {
46 var id = importStr.substring( startIndex+4, endIndex );
47 var canvas = this.findCanvasWithID( id, root );
48 if (canvas)
49 {
50 var rt = new GLRuntime( canvas, importStr, assetPath );
51 }
52 }
53 }
54 }
55 }
56
57 this.collectGLData = function( elt, dataArray )
58 {
59 if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
60 {
61 var data = elt.elementModel.shapeModel.GLWorld.export( true );
62 dataArray.push( data );
63 }
64
65 if (elt.children)
66 {
67 var nKids = elt.children.length;
68 for (var i=0; i<nKids; i++)
69 {
70 var child = elt.children[i];
71 this.collectGLData( child, dataArray );
72 }
73 }
74 }
75
76 this.findCanvasWithID = function( id, elt )
77 {
78 var cid = elt.getAttribute( "data-RDGE-id" );
79 if (cid == id) return elt;
80
81 if (elt.children)
82 {
83 var nKids = elt.children.length;
84 for (var i=0; i<nKids; i++)
85 {
86 var child = elt.children[i];
87 var foundElt = this.findCanvasWithID( id, child );
88 if (foundElt) return foundElt;
89 }
90 }
91 }
92}
93
94///////////////////////////////////////////////////////////////////////
95// Class GLRuntime
96// Manages runtime fora WebGL canvas
97///////////////////////////////////////////////////////////////////////
98function GLRuntime( canvas, importStr, assetPath )
99{
100 ///////////////////////////////////////////////////////////////////////
101 // Instance variables
102 ///////////////////////////////////////////////////////////////////////
103 this._canvas = canvas;
104 this._context = null;
105 this._importStr = importStr;
106
107 this.renderer = null;
108 this.myScene = null;
109 this.light = null;
110 this.light2 = null;
111 this._rootNode = null;
112
113 this._firstRender = true;
114 this._initialized = false;
115
116 this._useWebGL = false;
117
118 // view parameters
119 this._fov = 45.0;
120 this._zNear = 0.1;
121 this._zFar = 100.0;
122 this._viewDist = 5.0;
123
124 this.elapsed = 0;
125
126 this._aspect = canvas.width/canvas.height;
127
128 this._geomRoot = null;
129
130 // all "live" materials
131 this._materials = [];
132
133 // provide the mapping for the asset directory
134 if (assetPath)
135 {
136 this._assetPath = assetPath.slice();
137 if (this._assetPath[this._assetPath.length-1] != '/')
138 this._assetPath += '/';
139 }
140
141 ///////////////////////////////////////////////////////////////////////
142 // accessors
143 ///////////////////////////////////////////////////////////////////////
144 this.getZNear = function() { return this._zNear; }
145 this.getZFar = function() { return this._zFar; }
146 this.getFOV = function() { return this._fov; }
147 this.getAspect = function() { return this._aspect; }
148 this.getViewDistance = function() { return this._viewDist; }
149
150 this.get2DContext = function() { return this._context; }
151
152 this.getViewportWidth = function() { return this._canvas.width; }
153 this.getViewportHeight = function() { return this._canvas.height; }
154
155 ///////////////////////////////////////////////////////////////////////
156 // accessors
157 ///////////////////////////////////////////////////////////////////////
158 this.loadScene = function()
159 {
160 // parse the data
161 // the GL runtime must start with a "sceneData: "
162 var index = importStr.indexOf( "scenedata: " );
163 if (index >= 0)
164 {
165 this._useWebGL = true;
166
167 var rdgeStr = importStr.substr( index+11 );
168 var endIndex = rdgeStr.indexOf( "endscene\n" );
169 if (endIndex < 0) throw new Error( "ill-formed WebGL data" );
170 var len = endIndex - index + 11;
171 rdgeStr = rdgeStr.substr( 0, endIndex );
172
173 this.myScene.importJSON( rdgeStr );
174 this.importObjects( importStr );
175 this.linkMaterials( this._geomRoot );
176 this.initMaterials();
177 this.linkLights();
178 }
179 else
180 {
181 this._context = this._canvas.getContext( "2d" );
182 this.importObjects( importStr );
183 this.render();
184 }
185 }
186
187 this.init = function()
188 {
189 var ctx1 = g_Engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
190 ctx2 = g_Engine.getContext();
191 if (ctx1 != ctx2) console.log( "***** different contexts *****" );
192 this.renderer = ctx1.renderer;
193
194 // create a camera, set its perspective, and then point it at the origin
195 var cam = new camera();
196 this._camera = cam;
197 cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
198 cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], vec3.up());
199
200 // make this camera the active camera
201 this.renderer.cameraManager().setActiveCamera(cam);
202
203 // change clear color
204 this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
205
206 // create an empty scene graph
207 this.myScene = new SceneGraph();
208
209 // load the scene graph data
210 this.loadScene();
211
212 // Add the scene to the engine - necessary if you want the engine to draw for you
213 var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" );
214 g_Engine.AddScene(name, this.myScene);
215
216 this._initialized = true;
217 }
218
219 // main code for handling user interaction and updating the scene
220 this.update = function(dt)
221 {
222 if (this._initialized)
223 {
224 if (!dt) dt = 0.2;
225
226 dt = 0.01; // use our own internal throttle
227 this.elapsed += dt;
228
229 // changed the global position uniform of light 0, another way to change behavior of a light
230 rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
231
232 // orbit the light nodes around the boxes
233 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)]);
234 if (this.light2) this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
235
236 this.updateMaterials();
237
238 // now update all the nodes in the scene
239 this.myScene.update(dt);