Upload File

gdd2009 client-o3 d-introduction

41

Upload: shuhang-li

Post on 19-Jan-2017

174 views

Category:

Internet


2 download

Report

TRANSCRIPT

Page 1: Gdd2009 client-o3 d-introduction
Page 2: Gdd2009 client-o3 d-introduction

O3D: Adding Interactive 3D Content to your site.Gregg Tavares

Page 3: Gdd2009 client-o3 d-introduction

Introducing O3D

O3D is a JavaScript API for doing hardware accelerated 3D graphics in a web page.

Page 4: Gdd2009 client-o3 d-introduction

Design Goals

Expressive and fastCapable of rendering a complex modern game

FlexibleMake no assumptions about target apps

PortableWrite once, run anywhere

Page 5: Gdd2009 client-o3 d-introduction

O3D Feature Highlights

Extensive access to the graphics hardware:User-supplied shader programs (HLSL/Cg)Multi-pass rendering and render-to-textureRender states

Image loaders for common formatsAnimation and SkinningEmbedded JS engine using Google Chrome's V8Flexible asset import path based on JSON

Page 6: Gdd2009 client-o3 d-introduction

Immediate vs Retained Mode APIs

Immediate mode:Graphics commands issued execute "immediately"All objects need to be drawn every frameExamples: Direct3D, OpenGL, HTML Canvas

Retained mode:Calls describe objects and hierarchiesHigh-level information about objects is retained between framesExamples: Most game engines, SVG, HTML DOM

Page 7: Gdd2009 client-o3 d-introduction

Immediate vs Retained mode example

Page 8: Gdd2009 client-o3 d-introduction

Immediate Mode

Page 9: Gdd2009 client-o3 d-introduction

Retained Mode

Page 10: Gdd2009 client-o3 d-introduction

The Graphics APIs Spectrum

O3D is a low-level, retained mode APIHas most of the flexibility of an immediate mode APIPerformance critical functionality (e.g. z-sorting, culling, animation) executed in native code.

Page 11: Gdd2009 client-o3 d-introduction

Transform Graph Detail

Page 12: Gdd2009 client-o3 d-introduction

A Rendergraph Example

Page 13: Gdd2009 client-o3 d-introduction

Programming with O3D

O3D is a low-level 3D graphics APIProgramming with it requires some level of understanding of 3D graphics principles

Provided JS utility libraries make programming easierThey serve as valuable sample code too!

Over time higher-level libraries will be developed

Page 14: Gdd2009 client-o3 d-introduction

O3D Application

Page 15: Gdd2009 client-o3 d-introduction

Loading assets in O3D

O3D does NOT have its own file format O3D can load zipped archive files (.tar.gz) containing:

Text (JSON)Image files (for textures)Binary Buffers (for mesh data, animation, etc)

The application can access file content data and make regular API calls to create O3D objects from itProvides a lot more flexibility over a fixed format

Page 16: Gdd2009 client-o3 d-introduction

Importing 3D models from DCC tools

Page 17: Gdd2009 client-o3 d-introduction

Making an Application with O3D

Page 18: Gdd2009 client-o3 d-introduction

Make the HTML for the webpage.Step 1: Setup

...<script type="text/javascript" src="../o3djs/base.js"></script><script type="text/javascript">o3djs.require('o3djs.util');o3djs.require('o3djs.math'); ...

<body onload="init();"><div id="o3d" style="width: 800px; height: 600px;"></div> ...

Page 19: Gdd2009 client-o3 d-introduction

Initialize and make a render graphStep 1: Setup cont. Initialize O3D

//Creates the client area.function init() { o3djs.util.makeClients(initStep2);}

function initStep2(clientElements) { g_o3dElement = clientElements[0]; g_math = o3djs.math; g_client = g_o3dElement.client; g_pack = g_client.createPack(); g_root = g_pack.createObject('Transform'); g_viewInfo = o3djs.rendergraph.createBasicView( g_pack, g_root, g_client.renderGraphRoot); ...

Page 20: Gdd2009 client-o3 d-introduction

Set the view and projection matricesStep 1: Setup Cont. Make a Camera

var g_eye = [15, 25, 50];var g_target = [0, 10, 0];var g_up = [0, 1, 0];

function updateProjection() { g_viewInfo.drawContext.projection = g_math.matrix4.perspective( g_math.degToRad(45), // field of view. g_o3dWidth / g_o3dHeight, // aspect ratio 0.1, // Near plane. 5000); // Far plane.}

function updateCamera() { g_viewMatrix = g_math.matrix4.lookAt(g_eye, g_target, g_up); g_viewInfo.drawContext.view = g_viewMatrix;}

Page 21: Gdd2009 client-o3 d-introduction

Make some materials. Step 2: Put something on the screen.

var redMaterial = o3djs.material.createBasicMaterial( g_pack, g_viewInfo, [0.2, 1, 0.2, 1]); // green

var checkerMaterial = o3djs.material.createMaterialFromFile( g_pack, 'shaders/checker.shader', g_viewInfo.performanceDrawList);

g_globalParams = o3djs.material.createAndBindStandardParams(g_pack);

g_globalParams.lightWorldPos.value = [30, 60, 40]; g_globalParams.lightColor.value = [1, 1, 1, 1];

Page 22: Gdd2009 client-o3 d-introduction

Start simple. A plane and a cylinder.Step 2: Put something on screen.

// Create a ground plane. var shape = o3djs.primitives.createPlane( g_pack, checkerMaterial, 100, 100, 10, 10); var transform = g_pack.createObject('Transform'); transform.parent = g_root; transform.addShape(shape);

// Create a cylinder. var shape = o3djs.primitives.createCylinder( g_pack, redMaterial, 2.5, 5, 20, 1, g_math.matrix4.translation([0, 2.5, 0])); g_playerTransform = g_pack.createObject('Transform'); g_playerTransform.parent = g_root; g_playerTransform.addShape(shape);

Page 23: Gdd2009 client-o3 d-introduction

Track the state of the keyboard.Step 3: Let the user move something.

var g_keyDown = []; // which keys are down by key code.

function initStep2(...) { ... o3djs.event.addEventListener(o3dElement, 'keydown', onKeyDown); o3djs.event.addEventListener(o3dElement, 'keyup', onKeyUp);}

function onKeyDown(e) { g_keyDown[e.keyCode] = true; }

function onKeyUp(e) { g_keyDown[e.keyCode] = false; }

Page 24: Gdd2009 client-o3 d-introduction

Setup an on render callback.Step 3: Per frame processing.

initStep2(...) { ... g_client.setRenderCallback(onRender);}

function onRender(renderEvent) { var elapsedTime = renderEvent.elapsedTime; handleMoveKeys(elapsedTime);};

Page 25: Gdd2009 client-o3 d-introduction

Let the user move the player with the keyboardStep 3: Move something.

function handleMoveKeys(elapsedTime) { var directionX = 0; var directionZ = 0;

if (g_keyDown[37] || g_keyDown[65]) { directionX = -1; } if (g_keyDown[39] || g_keyDown[68]) { directionX = 1; } if (g_keyDown[38] || g_keyDown[87]) { directionZ = -1; } if (g_keyDown[40] || g_keyDown[83]) { directionZ = 1; }

g_playerXPosition += directionX; g_playerZPosition += directionZ;

g_playerTransform.identity(); g_playerTransform.translate( g_playerXPosition, 0, g_playerZPosition);}

Page 26: Gdd2009 client-o3 d-introduction

Step 4: Make it frame rate independent

var MOVE_VELOCITY = 25; // in units per second.

function handleMoveKeys(elapsedTime) { ...

g_playerXPosition += MOVE_VELOCITY * directionX * elapsedTime; g_playerZPosition += MOVE_VELOCITY * directionZ * elapsedTime;

g_playerTransform.identity(); g_playerTransform.translate( g_playerXPosition, 0, g_playerZPosition);}

Page 27: Gdd2009 client-o3 d-introduction

Compute a move matrix.Step 5: Make it move relative to the camera.

function computeMoveMatrixFromViewMatrix(viewMatrix) { var cameraMatrix = g_math.matrix4.inverse(viewMatrix); var xAxis = g_math.cross([0, 1, 0], cameraMatrix[2].slice(0, 3)); var zAxis = g_math.cross(xAxis, [0, 1, 0]); return [ xAxis.concat(0), [0, 1, 0, 0], zAxis.concat(0), [0, 0, 0, 1]];}

function updateCamera() { ... g_moveMatrix = computeMoveMatrixFromViewMatrix(g_viewMatrix);};

Page 28: Gdd2009 client-o3 d-introduction

Use the move matrix to move the playerStep 5: Make it move relative to the camera.

function handleMoveKeys(elapsedTime) { ... var moveTranslation = g_math.matrix4.transformPoint( g_moveMatrix, [MOVE_VELOCITY * directionX * elapsedTime, 0, MOVE_VELOCITY * directionZ * elapsedTime]);

g_playerXPosition += moveTranslation[0]; g_playerZPosition += moveTranslation[2];

g_playerTransform.identity(); g_playerTransform.translate( g_playerXPosition, 0, g_playerZPosition);}

Page 29: Gdd2009 client-o3 d-introduction

Easy. Just set the target.Step 6: Make the camera follow the player.

function moveCamera() { g_target = [g_playerXPosition, 10, g_playerZPosition]; updateCamera();}

function onRender(renderEvent) { moveCamera();};

Page 30: Gdd2009 client-o3 d-introduction

Make it play catch up.Step 7: Smooth the camera movement.

function moveCamera() { var newTarget = [g_playerXPosition, 10, g_playerZPosition]; g_target = g_math.lerpVector(g_target, newTarget, 0.03); updateCamera();}

Page 31: Gdd2009 client-o3 d-introduction

Make him jumpStep 8: Add some action.

function handleMoveKeys(elapsedTime) { ... if (g_canJump) { if (g_keyDown[32]) { g_jumping = true; g_canJump = false; g_playerYVelocity = JUMP_VELOCITY; } } else { if (g_jumping) { g_playerYVelocity += GRAVITY * elapsedTime; g_playerYPosition += g_playerYVelocity * elapsedTime; if (g_playerYPosition <= 0) { g_playerYPosition = 0; g_jumping = false; } } else { if (!g_keyDown[32]) { g_canJump = true; } } } ... g_playerTransform.translate( g_playerXPosition, g_playerYPosition, g_playerZPosition);}

Page 32: Gdd2009 client-o3 d-introduction

Create a particle emitterStep 9: Add effects.

function initStep2(clientElements) { ... g_particleSystem = o3djs.particles.createParticleSystem(g_pack, g_viewInfo); g_poofEmitter = g_particleSystem.createParticleEmitter(); g_poofEmitter.setState(o3djs.particles.ParticleStateIds.ADD); g_poofEmitter.setColorRamp( [1, 1, 1, 0.3, 1, 1, 1, 0]); g_poofEmitter.setParameters({ numParticles: 30, lifeTime: 0.5, startTime: 0, startSize: 5, endSize: 10, spinSpeedRange: 10}, function(index, parameters) { var angle = Math.random() * 2 * Math.PI; parameters.velocity = g_math.matrix4.transformPoint( g_math.matrix4.rotationY(angle), [25, 2.5, 0]); parameters.acceleration = g_math.mulVectorVector( parameters.velocity, [-1.5, 1, -1.5]); }); g_poof = g_poofEmitter.createOneShot(g_root);

Page 33: Gdd2009 client-o3 d-introduction

Make a poof of dust when he lands.Step 9: Add Effects

function handleMoveKeys(elapsedTime) { ... if (g_jumping) { g_playerYVelocity += GRAVITY * elapsedTime; g_playerYPosition += g_playerYVelocity * elapsedTime; if (g_playerYPosition <= 0) { g_playerYPosition = 0; g_poof.trigger( [g_playerXPosition, g_playerYPosition, g_playerZPosition]); g_jumping = false; }

Page 34: Gdd2009 client-o3 d-introduction

Step 10: Load a character.function initStep2(...) { ... var transform = g_pack.createObject('Transform'); g_playerTransform = transform; var playerPack = g_client.createPack(); o3djs.scene.loadScene(g_client, playerPack, g_playerTransform, 'assets/character.o3dtgz', initStep3);}

function initStep3(playerPack, playerParent, exception) { o3djs.pack.preparePack(playerPack, g_viewInfo); o3djs.material.bindParams(playerPack, g_globalParams); g_playerTransform.parent = g_root; ...}

Page 35: Gdd2009 client-o3 d-introduction

Making him point in the direction of movement.Step 11: Orient the character.

var g_playerDirection = 0;...function handleMoveKeys(elapsedTime) { ... if (directionX != 0 || directionZ != 0) { var moveTranslation = ... var targetDirection = Math.atan2(moveTranslation[0], moveTranslation[2]); g_playerDirection = g_math.lerpRadian( g_playerDirection, targetDirection, 0.2); ... }

g_playerTransform.identity(); g_playerTransform.translate( g_playerXPosition, g_playerYPosition, g_playerZPosition); g_playerTransform.rotateY(g_playerDirection);}

Page 36: Gdd2009 client-o3 d-introduction

Setup an animation parameter.Step 12: Animate the character.

var IDLE_START_TIME = 247 / 30;var IDLE_END_TIME = 573 / 30;var IDLE_TIME_RANGE = IDLE_END_TIME - IDLE_START_TIME;var g_animTimer = IDLE_START_TIME;function initStep2(...) { ... var paramObject = playerPack.createObject('ParamObject'); g_animParam = paramObject.createParam('animTime', 'ParamFloat'); o3djs.scene.loadScene(g_client, playerPack, g_playerTransform, 'assets/character.o3dtgz', initStep3, {opt_animSource: g_animParam}); ...

Page 37: Gdd2009 client-o3 d-introduction

Update the animation parameter.Step 12: Animate the character.

function onRender(renderEvent) { ... handleAnimation(elapsedTime);};

function handleAnimation(elapsedTime) { g_animTimer += elapsedTime; if (g_animTimer >= IDLE_END_TIME) { g_animTimer = g_math.modClamp(g_animTimer, IDLE_TIME_RANGE, IDLE_START_TIME); } g_animParam.value = g_animTimer;}

Page 38: Gdd2009 client-o3 d-introduction

Walk, Jump, More Idles...Step 13: Add more animation.

Repeat step 12 for various actions. See step13.html

diff step12.html and step13.html to see what changed.

Page 39: Gdd2009 client-o3 d-introduction

Step 14: Load a background.function initStep2(...) { ... var loader = o3djs.loader.createLoader(initStep3); loader.loadScene(g_client, playerPack, g_playerTransform, 'assets/character.o3dtgz', prepareScene, {opt_animSource: g_animParam}); var worldPack = g_client.createPack(); g_worldTransform = worldPack.createObject('Transform'); loader.loadScene(g_client, worldPack, g_worldTransform, 'assets/background.o3dtgz', prepareScene) loader.finish();}function prepareScene(pack, sceneRoot, exception) { o3djs.pack.preparePack(pack, g_viewInfo); o3djs.material.bindParams(pack, g_globalParams); sceneRoot.parent = g_root;}function initStep3(...) {

Page 40: Gdd2009 client-o3 d-introduction

Questions?

http://code.google.com/apis/o3d

Page 41: Gdd2009 client-o3 d-introduction

Painel Dallas II fixar o kit porta de correr. O1 Guia 04 O2 Roldana 04 O3 20 Parafuso Ø3,5x12mm CF O3 O3 O3 Colocar o parafuso centralizado no furo oblongo para poder ajustar. 5mm

O3 Regional Oximetry - masimo.com · The O3 Regional Oximetry platform has been expanded to allow monitoring of infant and neonatal patients O3 may help clinicians

Article O3 Comparison

Lisa H. Coleman (SAIC) - David A. Rutan (AS&M) - CERES...8 0.4375 0.4975 22857 20101 1 O3 & H2O 1 O3 & H2O 9 0.4975 0.5950 20101 16807 1 O3 & H2O 1 O3 & H2O 10 0.5950 0.6896 16807

Aqua O3 2011 V5.1 Info

EYE OF THE BEHOLDER II LEVEL MAPS - Fighting Fantasy · 2012. 4. 12. · D Crystal Tower Level 2 Q8 0O3 || O3 R ¬ ¬ ¬ O3 Q [] 0O3QD O3 == 0 0 0 O3 [] F 0 0FF[]|| 00 0 F ¬0 ¬00

Lab o3 Electronica

O3 Spa Unit in Wyoming

Stress-controlled Pb(Zr0.52Ti0.48)O3 thick films by ... · Stress-controlled Pb(Zr0.52Ti0.48)O3 thick films by thermal expansion mismatch between substrate and Pb(Zr0.52Ti0.48)O3

O3 Training Academy

Comments O3

Gdd2009 gwt gwt-architecture-best-practices

O3 Germ Free

PL Free Will O3

Executive Summary o3

Gdd2009 open social-introduction-of-google-friend-connect

O3 Ozone Bleaching Highlights

Early O3 LIGO Data

Hg, O3 abs ext - NASA › sgg › chatfield › WhyStudyHgAloft.pdf · • Study O3 but also key O3 processes • O3 production and loss can be quantified by measuring NOx, HCHO,

o3 - apps.lib.whu.edu.cn

o3 Magazine issue 7

Characterisation and Mechanoluminescence studies of ... · Sr O3 2.7907 Sr O3 2.8417 4 0.051 Sr Mg 3.9252 Sr Mg 3.9274 8 0.0022 Si O3 1.6248 Si O3 1.6319 8 0.0071 Si O1 1.6444 Si

Dated: o3]oR1202/ - Delhi

Welcome to O3 - Websede · 2008. 7. 30. · O3 - Manual de Usuario Final Bienvenido a O3 9 Bienvenido a O3 O3 es una herramienta de vital importancia para los análisis empresariales

Adventskransen o3

Edu Final O3

O3 Projecto3project.github.io/en/download/document/SDN_WorldCongress201… · Trend on Future Information Networking Innovation through O3 User-oriented SDN O3 Technologies for SDN

Analisis Pb dan O3

o3 Magazine issue 2

NORTH N1 CAMPUS O3 - University of Connecticut · jorgensen center bookstore admissions werth residence tower. north campus. n1 n3 n2 n4 n1 o3 o3 o3 o3 h2 c4 h1 c2 o2 c6 o3 c7 h3

O3-DPACS system

O3 update - LIGO Scientific Collaboration · O3 update GW190425: An unusual compact binary merger Mid-O3 essential commissioning p.6 First "exceptional" O3 discovery p.12... and the

Server Side JavaScript: Ajax.org O3

O3 Magazine

Gdd2009 open-web