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