| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 Copyright 2010, 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 <!-- |
| 33 Sample demonstrating basic 2D vector curve rendering in 3D. |
| 34 --> |
| 35 |
| 36 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 37 "http://www.w3.org/TR/html4/loose.dtd"> |
| 38 <html> |
| 39 <head> |
| 40 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 41 <title> |
| 42 O3D GPU2D Sample: Basic Vector Shapes |
| 43 </title> |
| 44 <!-- Include sample javascript library functions--> |
| 45 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 46 |
| 47 <!-- Our javascript code --> |
| 48 <script type="text/javascript" id="o3dscript"> |
| 49 o3djs.require('o3djs.cameracontroller'); |
| 50 o3djs.require('o3djs.gpu2d'); |
| 51 o3djs.require('o3djs.io'); |
| 52 o3djs.require('o3djs.math'); |
| 53 o3djs.require('o3djs.rendergraph'); |
| 54 o3djs.require('o3djs.util'); |
| 55 |
| 56 // Events |
| 57 // init() once the page has finished loading. |
| 58 // unload() when the page is unloaded. |
| 59 window.onload = createClients; |
| 60 window.onunload = unload; |
| 61 |
| 62 // Globals |
| 63 var g_o3d; |
| 64 var g_math; |
| 65 var g_client; |
| 66 var g_pack; |
| 67 var g_viewInfo; |
| 68 var g_o3dElement; |
| 69 var g_finished = false; // for selenium testing. |
| 70 var g_clientWidth; |
| 71 var g_clientHeight; |
| 72 var g_path; |
| 73 var g_cameraController; |
| 74 |
| 75 /** |
| 76 * Remove any callbacks so they don't get called after the page has unloaded. |
| 77 */ |
| 78 function unload() { |
| 79 if (g_client) { |
| 80 g_client.cleanup(); |
| 81 |
| 82 // Clear the mouse events. |
| 83 onMouseUp(); |
| 84 } |
| 85 } |
| 86 |
| 87 function createClients() { |
| 88 o3djs.util.makeClients(init); |
| 89 } |
| 90 |
| 91 function init(clientElements) { |
| 92 // Initializes global variables and libraries. |
| 93 var o3dElement = clientElements[0]; |
| 94 g_o3dElement = o3dElement; |
| 95 g_o3d = o3dElement.o3d; |
| 96 g_math = o3djs.math; |
| 97 g_client = o3dElement.client; |
| 98 |
| 99 // Store the size of the plugin, so that we can adjust coordinates in |
| 100 // full-screen mode. This is necessary because we're not adjusting the aspect |
| 101 // ratio; we'd rather that the canvas filled the available area, rather than |
| 102 // staying a fixed size or aspect ratio. |
| 103 g_clientWidth = g_o3dElement.clientWidth; |
| 104 g_clientHeight = g_o3dElement.clientHeight; |
| 105 |
| 106 // Creates a pack to manage our resources/assets |
| 107 g_pack = g_client.createPack(); |
| 108 |
| 109 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 110 g_pack, |
| 111 g_client.root, |
| 112 g_client.renderGraphRoot); |
| 113 |
| 114 // Set the background color to light gray. |
| 115 g_viewInfo.clearBuffer.clearColor = [0.8, 0.8, 0.8, 1]; |
| 116 |
| 117 // Set up our CameraController. |
| 118 g_cameraController = o3djs.cameracontroller.createCameraController( |
| 119 [0, 0, 0], // centerPos |
| 120 500, // backpedal |
| 121 0, // heightAngle |
| 122 0, // rotationAngle |
| 123 g_math.degToRad(15), // fieldOfViewAngle |
| 124 updateViewAndProjectionMatrices); // opt_onChange |
| 125 g_cameraController.distancePerUnit = 100.0; |
| 126 updateViewAndProjectionMatrices(); |
| 127 |
| 128 // Set up event handlers for mouse interaction. |
| 129 o3djs.event.addEventListener(o3dElement, 'mousedown', onMouseDown); |
| 130 o3djs.event.addEventListener(o3dElement, 'mousemove', onMouseMove); |
| 131 o3djs.event.addEventListener(o3dElement, 'mouseup', onMouseUp); |
| 132 |
| 133 // Create a Path. |
| 134 g_path = o3djs.gpu2d.createPath(g_pack, g_viewInfo.zOrderedDrawList); |
| 135 g_client.root.addShape(g_path.shape); |
| 136 |
| 137 // Set the fill of the path. |
| 138 g_path.setFill(o3djs.gpu2d.createColor(g_pack, 0.8, 0.0, 0.3, 1.0)); |
| 139 |
| 140 // Draw something on the path. |
| 141 g_path.moveTo(25.0, -50.0); |
| 142 g_path.cubicTo(75.0, 50.0, 125.0, 25.0, 175.0, 50.0); |
| 143 g_path.cubicTo(125.0, -50.0, 75.0, -25.0, 25.0, -50.0); |
| 144 |
| 145 g_path.moveTo(-25.0, -50.0); |
| 146 g_path.cubicTo(-75.0, 50.0, -125.0, 25.0, -175.0, 50.0); |
| 147 g_path.cubicTo(-125.0, -50.0, -75.0, -25.0, -25.0, -50.0); |
| 148 g_path.close(); |
| 149 |
| 150 // Force an update. |
| 151 g_path.update(); |
| 152 |
| 153 g_finished = true; // for selenium testing. |
| 154 } |
| 155 |
| 156 /** |
| 157 * Event handler that gets called when a mouse click takes place in |
| 158 * the O3D element. It changes the state of the camera controller |
| 159 * based on which modifier keys are pressed. |
| 160 * @param {!Event} e The mouse down event. |
| 161 */ |
| 162 function onMouseDown(e) { |
| 163 if (e.button == 0) { |
| 164 if (!e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) { |
| 165 g_cameraController.setDragMode( |
| 166 o3djs.cameracontroller.DragMode.MOVE_CENTER_IN_VIEW_PLANE, e.x, e.y); |
| 167 } else if (e.metaKey || e.altKey) { |
| 168 g_cameraController.setDragMode( |
| 169 o3djs.cameracontroller.DragMode.SPIN_ABOUT_CENTER, e.x, e.y); |
| 170 } else if (!e.shiftKey && e.ctrlKey) { |
| 171 g_cameraController.setDragMode( |
| 172 o3djs.cameracontroller.DragMode.DOLLY_IN_OUT, e.x, e.y); |
| 173 } else if (e.shiftKey && !e.ctrlKey) { |
| 174 g_cameraController.setDragMode( |
| 175 o3djs.cameracontroller.DragMode.ZOOM_IN_OUT, e.x, e.y); |
| 176 } else if (e.shiftKey && e.ctrlKey) { |
| 177 g_cameraController.setDragMode( |
| 178 o3djs.cameracontroller.DragMode.DOLLY_ZOOM, e.x, e.y); |
| 179 } |
| 180 } |
| 181 } |
| 182 |
| 183 /** |
| 184 * Event handler that gets called when a mouse move event takes place |
| 185 * in the O3D element. It tells the camera controller that the mouse |
| 186 * has moved. |
| 187 * @param {!Event} e The mouse move event. |
| 188 */ |
| 189 function onMouseMove(e) { |
| 190 g_cameraController.mouseMoved(e.x, e.y); |
| 191 } |
| 192 |
| 193 /** |
| 194 * Event handler that gets called when a mouse up event takes place in |
| 195 * the O3D element. It tells the camera controller that the mouse has |
| 196 * been released. |
| 197 * @param {!Event} e The mouse up event. |
| 198 */ |
| 199 function onMouseUp(e) { |
| 200 g_cameraController.setDragMode( |
| 201 o3djs.cameracontroller.DragMode.NONE, e.x, e.y); |
| 202 } |
| 203 |
| 204 /** |
| 205 * Updates the view and projection matrices. |
| 206 */ |
| 207 function updateViewAndProjectionMatrices() { |
| 208 g_viewInfo.drawContext.view = g_cameraController.calculateViewMatrix(); |
| 209 |
| 210 // Set up a perspective transformation for the projection. |
| 211 g_viewInfo.drawContext.projection = g_math.matrix4.perspective( |
| 212 g_cameraController.fieldOfViewAngle * 2, // Frustum angle. |
| 213 g_o3dElement.clientWidth / g_o3dElement.clientHeight, // Aspect ratio. |
| 214 1, // Near plane. |
| 215 5000); // Far plane. |
| 216 } |
| 217 </script> |
| 218 </head> |
| 219 |
| 220 <body> |
| 221 <h1>O3D GPU2D Sample: Basic Vector Shapes</h1> |
| 222 <br/> |
| 223 <!-- Start of O3D plugin --> |
| 224 <div id="o3d" style="width: 800px; height: 600px;"></div> |
| 225 <!-- End of O3D plugin --> |
| 226 |
| 227 <p><p>See above for output. |
| 228 </body> |
| 229 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 652016:
Added the bulk of the algorithm for GPU accelerated 2D vector curve... (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src/o3d/
