Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(365)

Side by Side Diff: samples/o3d-webgl-samples/simpleviewer/simpleviewer.html

Issue 1798006: Thanks to gman, fixed o3d.webgl.createClient and o3d-webgl Client to handle... (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/o3d/
Patch Set: Created 10 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | samples/o3d-webgl/client.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Property Changes:
Added: svn:mime-type
+ text/html
Added: svn:eol-style
+ LF
OLDNEW
(Empty)
1 <!--
2 Copyright 2009, Google Inc.
3 All rights reserved.
4
5 Redistribution and use in source and binary forms, with or without
6 modification, are permitted provided that the following conditions are
7 met:
8
9 * Redistributions of source code must retain the above copyright
10 notice, this list of conditions and the following disclaimer.
11 * Redistributions in binary form must reproduce the above
12 copyright notice, this list of conditions and the following disclaimer
13 in the documentation and/or other materials provided with the
14 distribution.
15 * Neither the name of Google Inc. nor the names of its
16 contributors may be used to endorse or promote products derived from
17 this software without specific prior written permission.
18
19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 -->
31
32 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
33 "http://www.w3.org/TR/html4/loose.dtd">
34 <html>
35 <head>
36 <title>
37 Simple Scene Viewer
38 </title>
39 <style type="text/css">
40 html, body {
41 margin: 0;
42 padding: 0;
43 border: 0;
44 height: 100%;
45 }
46 </style>
47 </head>
48 <body onload="init();" onunload="uninit();">
49 <script type="text/javascript" src="../../o3d-webgl/base.js"></script>
50 <script type="text/javascript" src="../../o3djs/base.js"></script>
51 <script type="text/javascript" id="o3dscript">
52 o3djs.base.o3d = o3d;
53 o3djs.require('o3djs.webgl');
54 o3djs.require('o3djs.util');
55 o3djs.require('o3djs.math');
56 o3djs.require('o3djs.quaternions');
57 o3djs.require('o3djs.rendergraph');
58 o3djs.require('o3djs.pack');
59 o3djs.require('o3djs.arcball');
60 o3djs.require('o3djs.scene');
61
62 var g_root;
63 var g_o3d;
64 var g_math;
65 var g_quaternions;
66 var g_client;
67 var g_aball;
68 var g_thisRot;
69 var g_lastRot;
70 var g_pack = null;
71 var g_mainPack;
72 var g_viewInfo;
73 var g_lightPosParam;
74 var g_loadingElement;
75 var g_o3dWidth = -1;
76 var g_o3dHeight = -1;
77 var g_o3dElement;
78 var g_finished = false; // for selenium
79
80 var g_camera = {
81 farPlane: 5000,
82 nearPlane:0.1
83 };
84
85 var g_dragging = false;
86
87 function startDragging(e) {
88 g_lastRot = g_thisRot;
89
90 g_aball.click([e.x, e.y]);
91
92 g_dragging = true;
93 }
94
95 function drag(e) {
96 if (g_dragging) {
97 var rotationQuat = g_aball.drag([e.x, e.y]);
98 var rot_mat = g_quaternions.quaternionToRotation(rotationQuat);
99 g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat);
100
101 var m = g_root.localMatrix;
102 g_math.matrix4.setUpper3x3(m, g_thisRot);
103 g_root.localMatrix = m;
104 }
105 }
106
107 function stopDragging(e) {
108 g_dragging = false;
109 }
110
111 function updateCamera() {
112 var up = [0, 1, 0];
113 g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
114 g_camera.target,
115 up);
116 g_lightPosParam.value = g_camera.eye;
117 }
118
119 function updateProjection() {
120 // Create a perspective projection matrix.
121 g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
122 g_math.degToRad(45), g_o3dWidth / g_o3dHeight, g_camera.nearPlane,
123 g_camera.farPlane);
124 }
125
126 function scrollMe(e) {
127 if (e.deltaY) {
128 var t = 1;
129 if (e.deltaY > 0)
130 t = 11 / 12;
131 else
132 t = 13 / 12;
133 g_camera.eye = g_math.lerpVector(g_camera.target, g_camera.eye, t);
134
135 updateCamera();
136 }
137 }
138
139 function enableInput(enable) {
140 document.getElementById("url").disabled = !enable;
141 document.getElementById("load").disabled = !enable;
142 }
143
144 function loadFile(context, path) {
145 function callback(pack, parent, exception) {
146 enableInput(true);
147 if (exception) {
148 alert("Could not load: " + path + "\n" + exception);
149 g_loadingElement.innerHTML = "loading failed.";
150 } else {
151 g_loadingElement.innerHTML = "loading finished.";
152 // Generate draw elements and setup material draw lists.
153 o3djs.pack.preparePack(pack, g_viewInfo);
154 var bbox = o3djs.util.getBoundingBoxOfTree(g_client.root);
155 g_camera.target = g_math.lerpVector(bbox.minExtent, bbox.maxExtent, 0.5);
156 var diag = g_math.length(g_math.subVector(bbox.maxExtent,
157 bbox.minExtent));
158 g_camera.eye = g_math.addVector(g_camera.target, [0, 0, 1.5 * diag]);
159 g_camera.nearPlane = diag / 1000;
160 g_camera.farPlane = diag * 10;
161 setClientSize();
162 updateCamera();
163 updateProjection();
164
165 // Manually connect all the materials' lightWorldPos params to the context
166 var materials = pack.getObjectsByClassName('o3d.Material');
167 for (var m = 0; m < materials.length; ++m) {
168 var material = materials[m];
169 var param = material.getParam('lightWorldPos');
170 if (param) {
171 param.bind(g_lightPosParam);
172 }
173 }
174
175 g_finished = true; // for selenium
176
177 // Comment out the next line to dump lots of info.
178 if (false) {
179 o3djs.dump.dump('---dumping context---\n');
180 o3djs.dump.dumpParamObject(context);
181
182 o3djs.dump.dump('---dumping root---\n');
183 o3djs.dump.dumpTransformTree(g_client.root);
184
185 o3djs.dump.dump('---dumping render root---\n');
186 o3djs.dump.dumpRenderNodeTree(g_client.renderGraphRoot);
187
188 o3djs.dump.dump('---dump g_pack shapes---\n');
189 var shapes = pack.getObjectsByClassName('o3d.Shape');
190 for (var t = 0; t < shapes.length; t++) {
191 o3djs.dump.dumpShape(shapes[t]);
192 }
193
194 o3djs.dump.dump('---dump g_pack materials---\n');
195 var materials = pack.getObjectsByClassName('o3d.Material');
196 for (var t = 0; t < materials.length; t++) {
197 o3djs.dump.dump (
198 ' ' + t + ' : ' + materials[t].className +
199 ' : "' + materials[t].name + '"\n');
200 o3djs.dump.dumpParams(materials[t], ' ');
201 }
202
203 o3djs.dump.dump('---dump g_pack textures---\n');
204 var textures = pack.getObjectsByClassName('o3d.Texture');
205 for (var t = 0; t < textures.length; t++) {
206 o3djs.dump.dumpTexture(textures[t]);
207 }
208
209 o3djs.dump.dump('---dump g_pack effects---\n');
210 var effects = pack.getObjectsByClassName('o3d.Effect');
211 for (var t = 0; t < effects.length; t++) {
212 o3djs.dump.dump (' ' + t + ' : ' + effects[t].className +
213 ' : "' + effects[t].name + '"\n');
214 o3djs.dump.dumpParams(effects[t], ' ');
215 }
216 }
217 }
218 }
219
220 g_pack = g_client.createPack();
221
222 // Create a new transform for the loaded file
223 var parent = g_pack.createObject('Transform');
224 parent.parent = g_client.root;
225 if (path != null) {
226 g_loadingElement.innerHTML = "Loading: " + path;
227 enableInput(false);
228 try {
229 o3djs.scene.loadScene(g_client, g_pack, parent, path, callback);
230 } catch (e) {
231 enableInput(true);
232 g_loadingElement.innerHTML = "loading failed : " + e;
233 }
234 }
235
236 return parent;
237 }
238
239 function setClientSize() {
240 var newWidth = parseInt(g_client.width);
241 var newHeight = parseInt(g_client.height);
242
243 if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) {
244 g_o3dWidth = newWidth;
245 g_o3dHeight = newHeight;
246
247 updateProjection();
248
249 // Sets a new area size for arcball.
250 g_aball.setAreaSize(g_o3dWidth, g_o3dHeight);
251 }
252 }
253
254 /**
255 * Called every frame.
256 */
257 function onRender() {
258 // If we don't check the size of the client area every frame we don't get a
259 // chance to adjust the perspective matrix fast enough to keep up with the
260 // browser resizing us.
261 setClientSize();
262 }
263
264 /**
265 * Creates the client area.
266 */
267 function init() {
268 // o3djs.webgl.makeClients(initStep2);
269 // The following call enables a debug WebGL context, which makes
270 // debugging much easier.
271 o3djs.webgl.makeClients(initStep2, undefined, undefined, undefined, undefined, undefined, true);
272 }
273
274 /**
275 * Initializes O3D and loads the scene into the transform graph.
276 * @param {Array} clientElements Array of o3d object elements.
277 */
278 function initStep2(clientElements) {
279 var path = window.location.href;
280 var index = path.lastIndexOf('/');
281 // Point at the parent directory's assets directory for the moment
282 path = path.substring(0, index+1) + '../../simpleviewer/assets/cube/scene.json ';
283 var url = document.getElementById("url").value = path;
284 g_loadingElement = document.getElementById('loading');
285
286 g_o3dElement = clientElements[0];
287 g_o3d = g_o3dElement.o3d;
288 g_math = o3djs.math;
289 g_quaternions = o3djs.quaternions;
290 g_client = g_o3dElement.client;
291
292 g_mainPack = g_client.createPack();
293
294 // Create the render graph for a view.
295 g_viewInfo = o3djs.rendergraph.createBasicView(
296 g_mainPack,
297 g_client.root,
298 g_client.renderGraphRoot);
299
300 g_lastRot = g_math.matrix4.identity();
301 g_thisRot = g_math.matrix4.identity();
302
303 var root = g_client.root;
304
305 g_aball = o3djs.arcball.create(100, 100);
306 setClientSize();
307
308 // Set the light at the same position as the camera to create a headlight
309 // that illuminates the object straight on.
310 var paramObject = g_mainPack.createObject('ParamObject');
311 g_lightPosParam = paramObject.createParam('lightWorldPos', 'ParamFloat3');
312 g_camera.target = [0, 0, 0];
313 g_camera.eye = [0, 0, 5];
314 updateCamera();
315
316 doload()
317
318 o3djs.event.addEventListener(g_o3dElement, 'mousedown', startDragging);
319 o3djs.event.addEventListener(g_o3dElement, 'mousemove', drag);
320 o3djs.event.addEventListener(g_o3dElement, 'mouseup', stopDragging);
321 o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollMe);
322
323 g_client.setRenderCallback(onRender);
324 }
325
326 /**
327 * Removes any callbacks so they don't get called after the page has unloaded.
328 */
329 function uninit() {
330 if (g_client) {
331 g_client.cleanup();
332 }
333 }
334
335 function doload() {
336 if (g_root) {
337 g_root.parent = null;
338 g_root = null;
339 }
340 if (g_pack) {
341 g_pack.destroy();
342 g_pack = null;
343 }
344 var url = document.getElementById('url').value;
345 g_root = loadFile(g_viewInfo.drawContext, url);
346 }
347 </script>
348 <table width="100%" style="height:100%;">
349 <tr><td valign="middle" align="center" height="100%">
350 <table width="100%" style="height:100%;"><tr><td height="100%">
351 <h1>
352 Simple Scene Viewer
353 </h1>
354 <table id="container" width="90%" style="height:60%;" border="2"><tr><td height= "100%">
355 <div id="o3d" style="width: 100%; height: 100%;"></div>
356 </td></tr></table>
357 <p>
358 </p>
359
360 <input type="text" id="url" size="100">
361 <input type="button" id="load" onclick="doload();" value="load"><BR>
362
363 Drag The Mouse To Rotate<br/>
364 Scrollwheel To Zoom<br/>
365 Resize The Window To Resize The View
366 <div style="color: red;" id="loading"></div>
367 </td></tr></table>
368 </td></tr></table>
369 </body>
370 </html>
371
372
OLDNEW
« no previous file with comments | « no previous file | samples/o3d-webgl/client.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698