| OLD | NEW |
|---|
| (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 <!-- |
| 33 In this tutorial, we show how to create bitmap and how to draw |
| 34 image on both bitmap and texture. |
| 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 Bitmap Draw Image Demo |
| 43 </title> |
| 44 <script type="text/javascript" src="o3djs/base.js"></script> |
| 45 <script type="text/javascript"> |
| 46 o3djs.require('o3djs.util'); |
| 47 o3djs.require('o3djs.math'); |
| 48 o3djs.require('o3djs.io'); |
| 49 o3djs.require('o3djs.rendergraph'); |
| 50 o3djs.require('o3djs.primitives'); |
| 51 o3djs.require('o3djs.effect'); |
| 52 |
| 53 // Events |
| 54 // Run the init() once the page has finished loading. |
| 55 window.onload = init; |
| 56 |
| 57 // global variables |
| 58 var g_o3d; |
| 59 var g_math; |
| 60 var g_client; |
| 61 var g_pack; |
| 62 var g_viewInfo; |
| 63 var g_finished = false; // for selenium testing |
| 64 var g_eye; |
| 65 var g_target; |
| 66 var g_up; |
| 67 |
| 68 function makeShape(texture, effect) { |
| 69 // Create a Material for the effect. |
| 70 var myMaterial = g_pack.createObject('Material'); |
| 71 |
| 72 // Set the material's drawList for opaque objects. |
| 73 myMaterial.drawList = g_viewInfo.performanceDrawList; |
| 74 |
| 75 // Apply our effect to this material. |
| 76 myMaterial.effect = effect; |
| 77 |
| 78 // Create the parameters the effect needs on the material. |
| 79 effect.createUniformParameters(myMaterial); |
| 80 |
| 81 // Creates a quad. |
| 82 var myShape = o3djs.primitives.createPlane(g_pack, |
| 83 myMaterial, |
| 84 3, // width |
| 85 3, // height |
| 86 1, // quads across |
| 87 1); // quads down |
| 88 |
| 89 // Get the material's sampler parameter and put a sampler on it. |
| 90 var sampler_param = myMaterial.getParam('texSampler0'); |
| 91 var sampler = g_pack.createObject('Sampler'); |
| 92 sampler_param.value = sampler; |
| 93 |
| 94 // Set the texture to use. |
| 95 sampler.texture = texture; |
| 96 |
| 97 // adjust the scale of our transform to match the aspect ratio of |
| 98 // the texture. Of course we could also have waited until now to build |
| 99 // our plane and set its width and height to match instead of scaling |
| 100 // here. |
| 101 var textureWidth = texture.width; |
| 102 var textureHeight = texture.height; |
| 103 var hScale = 1; |
| 104 var vScale = 1; |
| 105 if (textureWidth > textureHeight) { |
| 106 vScale = textureHeight / textureWidth; |
| 107 } else if (textureHeight > textureWidth) { |
| 108 hScale = textureWidth / textureHeight; |
| 109 } |
| 110 // We now attach our quad to the root of the transform graph. |
| 111 // We do this after the texture has loaded, otherwise we'd be attempting |
| 112 // to display something invalid. |
| 113 |
| 114 // Make a transform for each quad. |
| 115 var transform = g_pack.createObject('Transform'); |
| 116 |
| 117 transform.translate(0, 0, 0); |
| 118 transform.scale(hScale, 1, vScale); |
| 119 transform.addShape(myShape); |
| 120 transform.parent = g_client.root; |
| 121 |
| 122 return myShape; |
| 123 } |
| 124 |
| 125 /** |
| 126 * Creates the client area. |
| 127 */ |
| 128 function init() { |
| 129 o3djs.util.makeClients(initStep2); |
| 130 } |
| 131 |
| 132 /** |
| 133 * Initializes O3D, loads the effect, and loads a tar.gz archive containing |
| 134 * a bunch of image files. We'll create bitmaps from them. |
| 135 * And use drawImage function to create texture as well as mipmaps. |
| 136 */ |
| 137 function initStep2(clientElements) { |
| 138 // Initialize global variables and libraries. |
| 139 var o3dElement = clientElements[0]; |
| 140 g_o3d = o3dElement.o3d; |
| 141 g_math = o3djs.math; |
| 142 g_client = o3dElement.client; |
| 143 |
| 144 // Create a pack to manage our resources/assets |
| 145 g_pack = g_client.createPack(); |
| 146 |
| 147 // Create the render graph for a view. |
| 148 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 149 g_pack, |
| 150 g_client.root, |
| 151 g_client.renderGraphRoot); |
| 152 |
| 153 // Set up an orthographic projection. |
| 154 var proj_matrix = g_math.matrix4.perspective( |
| 155 g_math.degToRad(45), |
| 156 g_client.width / g_client.height, |
| 157 0.1, |
| 158 100); |
| 159 |
| 160 // Create the view matrix which tells the camera which way to point to. |
| 161 g_eye = [0, 4, 0]; |
| 162 g_target = [0, 0, 0]; |
| 163 g_up = [0, 0, -1]; |
| 164 var view_matrix = g_math.matrix4.lookAt(g_eye, g_target, g_up); |
| 165 |
| 166 g_viewInfo.drawContext.view = view_matrix; |
| 167 g_viewInfo.drawContext.projection = proj_matrix; |
| 168 |
| 169 // Create and load the effect. |
| 170 var effect = g_pack.createObject('Effect'); |
| 171 o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader'); |
| 172 |
| 173 // Start a request for loading the tar.gz archive containing a bunch of |
| 174 // image files. We'll then make textures from each one... |
| 175 var loadInfo = o3djs.io.loadArchive( |
| 176 g_pack, |
| 177 './assets/bmp_mip.o3dtgz', |
| 178 callback); |
| 179 function callback(archiveInfo, exception) { |
| 180 if (!exception) { |
| 181 var rawdata1 = archiveInfo.getFileByURI('yellow_grid.jpg', true); |
| 182 var bitmap1 = g_pack.createBitmapFromRawData(rawdata1); |
| 183 var rawdata2 = archiveInfo.getFileByURI('four_pixel.png', true); |
| 184 var bitmap2 = g_pack.createBitmapFromRawData(rawdata2); |
| 185 var rawdata_hi = archiveInfo.getFileByURI('hi.jpg', true); |
| 186 var bitmap_hi = g_pack.createBitmapFromRawData(rawdata_hi); |
| 187 var bitmap = g_pack.createBitmap(300, 300, g_o3d.Texture.XRGB8); |
| 188 // draw image on bitmap. |
| 189 // draw on top left corner. |
| 190 bitmap.drawImage(bitmap1, 0, 0, 300, 300, 0, 0, 150, 150); |
| 191 // draw out of boundary. |
| 192 bitmap.drawImage(bitmap1, 0, 0, 200, 200, 150, -50, 200, 200); |
| 193 // set src or dest width or height to negative can flip the bitmap. |
| 194 bitmap.drawImage(bitmap1, 0, 0, 150, 150, 150, 300, -150, -150); |
| 195 // scale 4 pixels up. |
| 196 bitmap.drawImage(bitmap2, 0, 0, 2, 2, 150, 150, 150, 150); |
| 197 bitmap.drawImage(bitmap_hi, 0, 0, 100, 100, 100, 100, 100, 100); |
| 198 |
| 199 var texture = g_pack.createTexture2D(300, 300, g_o3d.Texture.XRGB8, |
| 200 0, false); |
| 201 if (texture) { |
| 202 // draw image on texture. |
| 203 texture.drawImage(bitmap, 0, 0, 300, 300, 0, 0, 300, 300, 0); |
| 204 |
| 205 // draw image on different mip-maps. |
| 206 texture.drawImage(bitmap1, 0, 0, 300, 300, 0, 0, 150, 150, 1); |
| 207 texture.drawImage(bitmap2, 0, 0, 2, 2, 0, 0, 75, 75, 2); |
| 208 |
| 209 makeShape(texture, effect); |
| 210 } |
| 211 } |
| 212 } |
| 213 o3djs.event.addEventListener(o3dElement, 'wheel', scrollMe); |
| 214 } |
| 215 |
| 216 function scrollMe(e) { |
| 217 g_eye = g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, g_eye); |
| 218 g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_eye, g_target, g_up); |
| 219 } |
| 220 </script> |
| 221 </head> |
| 222 <body> |
| 223 <h1>Bitmap Draw Image Demo</h1> |
| 224 This tutorial shows how to create bitmap and how to draw image |
| 225 on both bitmap and texture. |
| 226 <br/> |
| 227 Scroll wheel to see different mipmaps. |
| 228 <br/> |
| 229 <!-- Start of O3D plugin --> |
| 230 <div id="o3d" style="width: 600px; height: 600px"></div> |
| 231 <!-- End of O3D plugin --> |
| 232 </body> |
| 233 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
