diff options
| author | yux@google.com <yux@google.com@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-07-15 01:07:36 +0000 |
|---|---|---|
| committer | yux@google.com <yux@google.com@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-07-15 01:07:36 +0000 |
| commit | 128ff759facb55e3c0c1326e97c00b325ac3f484 (patch) | |
| tree | 868fda83a815ac414abac1466091faced5bc3eb1 /o3d/samples | |
| parent | 267088ffb702c649bfd2c1123f1f9c3f391b69d2 (diff) | |
| download | chromium_src-128ff759facb55e3c0c1326e97c00b325ac3f484.zip chromium_src-128ff759facb55e3c0c1326e97c00b325ac3f484.tar.gz chromium_src-128ff759facb55e3c0c1326e97c00b325ac3f484.tar.bz2 | |
expose bitmap in js.
Review URL: http://codereview.chromium.org/150058
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@20700 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'o3d/samples')
| -rw-r--r-- | o3d/samples/MANIFEST | 1 | ||||
| -rw-r--r-- | o3d/samples/assets/bmp_mip.o3dtgz | bin | 0 -> 105972 bytes | |||
| -rw-r--r-- | o3d/samples/bitmap-draw-image.html | 234 | ||||
| -rw-r--r-- | o3d/samples/build.scons | 1 |
4 files changed, 236 insertions, 0 deletions
diff --git a/o3d/samples/MANIFEST b/o3d/samples/MANIFEST index 181a43a..ef3a61c 100644 --- a/o3d/samples/MANIFEST +++ b/o3d/samples/MANIFEST @@ -2,6 +2,7 @@ archive-textures.html assets/android.png assets/archive_textures.o3dtgz assets/block.png +assets/bmp_mip.o3dtgz assets/brush.png assets/dome1.o3dtgz assets/dome2.o3dtgz diff --git a/o3d/samples/assets/bmp_mip.o3dtgz b/o3d/samples/assets/bmp_mip.o3dtgz Binary files differnew file mode 100644 index 0000000..b7a0c52 --- /dev/null +++ b/o3d/samples/assets/bmp_mip.o3dtgz diff --git a/o3d/samples/bitmap-draw-image.html b/o3d/samples/bitmap-draw-image.html new file mode 100644 index 0000000..038cd32 --- /dev/null +++ b/o3d/samples/bitmap-draw-image.html @@ -0,0 +1,234 @@ +<!--
+Copyright 2009, Google Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+ * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+ * Neither the name of Google Inc. nor the names of its
+contributors may be used to endorse or promote products derived from
+this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
+
+<!--
+In this tutorial, we show how to create bitmap and how to draw
+image on both bitmap and texture.
+-->
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<title>
+Bitmap Draw Image Demo
+</title>
+<script type="text/javascript" src="o3djs/base.js"></script>
+<script type="text/javascript">
+o3djs.require('o3djs.util');
+o3djs.require('o3djs.math');
+o3djs.require('o3djs.io');
+o3djs.require('o3djs.rendergraph');
+o3djs.require('o3djs.primitives');
+o3djs.require('o3djs.effect');
+
+// Events
+// Run the init() once the page has finished loading.
+window.onload = init;
+
+// global variables
+var g_o3d;
+var g_math;
+var g_client;
+var g_pack;
+var g_viewInfo;
+var g_finished = false; // for selenium testing
+var g_eye;
+var g_target;
+var g_up;
+
+function makeShape(texture, effect) {
+ // Create a Material for the effect.
+ var myMaterial = g_pack.createObject('Material');
+
+ // Set the material's drawList for opaque objects.
+ myMaterial.drawList = g_viewInfo.performanceDrawList;
+
+ // Apply our effect to this material.
+ myMaterial.effect = effect;
+
+ // Create the parameters the effect needs on the material.
+ effect.createUniformParameters(myMaterial);
+
+ // Creates a quad.
+ var myShape = o3djs.primitives.createPlane(g_pack,
+ myMaterial,
+ 3, // width
+ 3, // height
+ 1, // quads across
+ 1); // quads down
+
+ // Get the material's sampler parameter and put a sampler on it.
+ var sampler_param = myMaterial.getParam('texSampler0');
+ var sampler = g_pack.createObject('Sampler');
+ sampler_param.value = sampler;
+
+ // Set the texture to use.
+ sampler.texture = texture;
+
+ // adjust the scale of our transform to match the aspect ratio of
+ // the texture. Of course we could also have waited until now to build
+ // our plane and set its width and height to match instead of scaling
+ // here.
+ var textureWidth = texture.width;
+ var textureHeight = texture.height;
+ var hScale = 1;
+ var vScale = 1;
+ if (textureWidth > textureHeight) {
+ vScale = textureHeight / textureWidth;
+ } else if (textureHeight > textureWidth) {
+ hScale = textureWidth / textureHeight;
+ }
+ // We now attach our quad to the root of the transform graph.
+ // We do this after the texture has loaded, otherwise we'd be attempting
+ // to display something invalid.
+
+ // Make a transform for each quad.
+ var transform = g_pack.createObject('Transform');
+
+ transform.translate(0, 0, 0);
+ transform.scale(hScale, 1, vScale);
+ transform.addShape(myShape);
+ transform.parent = g_client.root;
+ g_finished = true;
+ return myShape;
+}
+
+/**
+ * Creates the client area.
+ */
+function init() {
+ o3djs.util.makeClients(initStep2);
+}
+
+/**
+ * Initializes O3D, loads the effect, and loads a tar.gz archive containing
+ * a bunch of image files. We'll create bitmaps from them.
+ * And use drawImage function to create texture as well as mipmaps.
+ */
+function initStep2(clientElements) {
+ // Initialize global variables and libraries.
+ var o3dElement = clientElements[0];
+ g_o3d = o3dElement.o3d;
+ g_math = o3djs.math;
+ g_client = o3dElement.client;
+
+ // Create a pack to manage our resources/assets
+ g_pack = g_client.createPack();
+
+ // Create the render graph for a view.
+ g_viewInfo = o3djs.rendergraph.createBasicView(
+ g_pack,
+ g_client.root,
+ g_client.renderGraphRoot);
+
+ // Set up an orthographic projection.
+ var proj_matrix = g_math.matrix4.perspective(
+ g_math.degToRad(45),
+ g_client.width / g_client.height,
+ 0.1,
+ 100);
+
+ // Create the view matrix which tells the camera which way to point to.
+ g_eye = [0, 4, 0];
+ g_target = [0, 0, 0];
+ g_up = [0, 0, -1];
+ var view_matrix = g_math.matrix4.lookAt(g_eye, g_target, g_up);
+
+ g_viewInfo.drawContext.view = view_matrix;
+ g_viewInfo.drawContext.projection = proj_matrix;
+
+ // Create and load the effect.
+ var effect = g_pack.createObject('Effect');
+ o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');
+
+ // Start a request for loading the tar.gz archive containing a bunch of
+ // image files. We'll then make textures from each one...
+ var loadInfo = o3djs.io.loadArchive(
+ g_pack,
+ './assets/bmp_mip.o3dtgz',
+ callback);
+ function callback(archiveInfo, exception) {
+ if (!exception) {
+ var rawdata1 = archiveInfo.getFileByURI('shaving_cream_300x300.jpg', true);
+ var bitmap1 = g_pack.createBitmapFromRawData(rawdata1);
+ var rawdata2 = archiveInfo.getFileByURI('four_pixel.png', true);
+ var bitmap2 = g_pack.createBitmapFromRawData(rawdata2);
+ var rawdata_hi = archiveInfo.getFileByURI('hi.jpg', true);
+ var bitmap_hi = g_pack.createBitmapFromRawData(rawdata_hi);
+ var bitmap = g_pack.createBitmap(300, 300, g_o3d.Texture.XRGB8);
+ // draw image on bitmap.
+ // scale down on top left corner.
+ bitmap.drawImage(bitmap1, 0, 0, 300, 300, 0, 0, 150, 150);
+ // scale up on top right corner.
+ bitmap.drawImage(bitmap1, 0, 0, 100, 100, 150, 0, 150, 150);
+ // flip and draw part of the img on bottom left.
+ bitmap.drawImage(bitmap1, 150, 0, 150, 150, 149, 299, -150, -150);
+ // draw out of boundary.
+ bitmap.drawImage(bitmap1, 0, 0, 300, 300, 150, 150, 300, 300);
+ // draw o3d.
+ bitmap.drawImage(bitmap_hi, 0, 0, 100, 50, 100, 125, 100, 50);
+
+ var texture = g_pack.createTexture2D(300, 300, g_o3d.Texture.XRGB8,
+ 0, false);
+ if (texture) {
+ // draw image on texture.
+ texture.drawImage(bitmap, 0, 0, 300, 300, 0, 0, 300, 300, 0);
+
+ // draw image on different mip-maps.
+ texture.drawImage(bitmap1, 0, 0, 300, 300, 0, 0, 150, 150, 1);
+ texture.drawImage(bitmap2, 0, 0, 2, 2, 0, 0, 75, 75, 2);
+
+ makeShape(texture, effect);
+ }
+ }
+ }
+ o3djs.event.addEventListener(o3dElement, 'wheel', scrollMe);
+}
+
+function scrollMe(e) {
+ g_eye = g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, g_eye);
+ g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_eye, g_target, g_up);
+}
+</script>
+</head>
+<body>
+<h1>Bitmap Draw Image Demo</h1>
+This tutorial shows how to create bitmap and how to draw image
+on both bitmap and texture mipmap.
+<br/>
+Scroll wheel to see different mipmaps.
+<br/>
+<!-- Start of O3D plugin -->
+<div id="o3d" style="width: 600px; height: 600px"></div>
+<!-- End of O3D plugin -->
+</body>
+</html>
\ No newline at end of file diff --git a/o3d/samples/build.scons b/o3d/samples/build.scons index 04f8be7..8ca4018 100644 --- a/o3d/samples/build.scons +++ b/o3d/samples/build.scons @@ -118,6 +118,7 @@ samples = [ '2d.html', 'animated-scene.html', 'animation.html', + 'bitmap-draw-image.html', 'billboards.html', 'canvas-texturedraw.html', 'canvas.html', |