diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/canvas-runtime.js | 1376 | ||||
-rw-r--r-- | assets/descriptor.json | 41 | ||||
-rwxr-xr-x | assets/rdge-compiled.js | 90 | ||||
-rw-r--r-- | assets/shaders/plasma.frag.glsl | 4 |
4 files changed, 1453 insertions, 58 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> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No 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 | ||
9 | function 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 | /////////////////////////////////////////////////////////////////////// | ||
26 | function 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 | /////////////////////////////////////////////////////////////////////// | ||
95 | function 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; | ||