Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa

67 %
33 %
Information about Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Design

Published on March 4, 2014

Author: fitc_slideshare

Source: slideshare.net

Description

Presented live at FITC Amsterdam 2014 on Feb 24-25, 2014
More details can be found at www.FITC.ca

Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Modern web browsers are capable of producing some amazing audiovisual candy, through new capabilities like HTML5, fast JavaScript, WebGL and Web Audio API. In this session, Carlos talks in detail about his work developing interactive 3D experiences using these technologies.

He will take an in-depth look at the production of high-end WebGL projects including Lights, HelloRun and Racer-S, to discuss the graphics, audio and input development techniques used.

He shows how to take advantage of the three.js engine to deliver immersive 3D visuals running at high performance on desktop and mobile browsers.

This presentation will also cover music visualization and sound effects, using Web Audio API for sound processing and analysis.

Carlos also discusses the integration of a broad range of input technologies like touch, mouse, keyboard, accelerometer and Leap Motion controller, along with some interesting lessons learned.

Developing Interactive 3D Experiences in HTML5 Carlos Ulloa HelloEnjoy.com FITC Amsterdam 2014

@C4RL05

GFX AUDIO INPUT

Developing Interactive 3D Experiences in HTML5

1-CLICK

WORK FLOW

Workflow first & then performance

Test early First build in 2 weeks

Test often One or two builds per week

Prototype From concept & design

GFX

GAME LOOP

Optimise your game loop

Object Pooling Minimise garbage collection

Spread & interpolate over frames

TIME

Frame Rate Independent

requestAnimationFrame

deltaTime Since the last frame

Multiply by deltaTime to update values per second instead of per frame

Cap deltaTime < 0.1 second

timeScale Multiplies deltaTime

Keep Sync with music & video

THREE.JS

Examples threejs.org/examples

Source Code three.js/src

Docs threejs.org/docs

ASSET PIPELINE

MATH

VEC QUAT MTRX

VECTORS

Vectors Represent position, direction, velocity, acceleration, forces…

( x, y, z ) Not very intuitive on multiple axes

object.position Local position

object.scale Local scale

|a| Magnitude

|a| = 1 Normalized

+

DOT PRODUCT

Dot Product

|a| |b| cos Dot Product

+ CROSS PRODUCT

Cross Product

|a| |b| sin Cross Product

QUATERNIONS

Quaternions Represent rotations

object.quaternion Local rotation

Multiply quaternions to rotate a vector or another rotation

Slerp quaternions to interpolate rotations

Avoid Euler on multiple axes

MATRICES

Matrices Represent transformations i.e. position, rotation, scale

object.matrix Local transform

object.matrixWorld Global transform

Multiply matrices to transform a vector or another matrix

Transform methods lookAt, translateXYZ, rotateXYZ, localToWorld, worldToLocal

OBJECTS

HIERARCHY

GROUPS

PIVOTS

Children methods getDescendants, traverse

Helper Objects Arrow, Axis, Bounding Box, Camera, Grid, Lights

MESHES

Geometry Build your own

Vertex Color Paint, bake or create in code

TEXTURES

Mip Maps Smaller versions of the texture

Offset & Repeat Transform textures

Anisotropy Fix mip map artifacts

Wrap Repeat, Clamp, Mirror

Clamp Wrap Fix artifacts on texture seams

RGBA Use all channels

LIGHTS

Dynamic Lights Real-time surface illumination

Baked Lights Better quality & performance

Lightmaps Global illumination

Vertex Bake Quality depends on geometry

CAMERA

Avoid default camera settings

Near Plane Occlusion & fill rate performance

Far Plane Horizon pop up & removed geometry

FRUSTUM CULLING

Near Far

Bounding Sphere

FOV Vertical angle

FOV

FOV Different for each scene

POST PROCESSING

FXAA

8X

8X

SSAO

Cry Engine

GLOW

VIGNETTE

OPTIMISE

Profile & measure Understand what’s going on

GPU CPU

GPU

GPU? Faster in lower res

GPU Many pixels, fill rate bound

CPU

CPU? Faster with objects disabled

CPU Many objects, many draw calls

DRAW CALLS

Minimise state changes & draw calls

Batching Combine meshes with same material

Batch Static Always combine static objects

Combine Materials Use vertex & textures to differentiate

Texture Atlas Combine textures

Multiple Passes Multiple draw calls

SHADERS

Objects < Vertices < Pixels

Vertex Instead of fragment

Precission Colors & normals

Alpha Test Instead of Alpha Blend

Fragment Math Avoid pow, sin, cos

Vector Math Dot & Cross Product

LOD

Level of detail Simpler far away objects

Optimised geometries or materials

Sprites & particle systems

Skybox & Rings for very distant objects

MOBILE

Mobile < Desktop

Low Polycount > 500

Overdraw Depends on the GPU

Fill Rate devicePixelRatio

Upscale For higher resolutions

Downscale For higher quality renders

Simple Shaders Minimise fragment complexity

No Bumps Avoid normal mapping

No Lights Avoid dynamic lighting or shadows

No Fog Only on vertex shader

No Post Avoid full screen effects

lowp getShaderPrecisionFormat

AUDIO

WEB AUDIO

Audio Processing & analysis

Audio Node Web Audio API building block

Panner Node for positional audio

Logarithmic scale for spectrum analysis

INPUT

KEYBOARD

Analog Simulate key pressure

Each key on its own

Combine keys to create axes

MOUSE

Pointer Lock Relative mouse movement

Relative Mouse Accumulated deltas

DPI & different screen sizes

Sensitivity Users ignore settings

TOUCH

Relative touch controls

Orientation How users hold the device?

Secondary touch support

LEAP MOTION

Smooth Introduces lag

Calibration Don’t leave it to the user

Relative Real time calibration

Slides helloenjoy.com/docs/3DJSDev.pdf

DANK U helloenjoy.com

Add a comment

Related presentations

Related pages

Developing Interactive 3D Experiences in HTML5 - FITC

Developing Interactive 3D Experiences in HTML5 ... In this session, Carlos talks in detail about his work developing interactive 3D experiences using ...
Read more

Interactive 3d | LinkedIn

Business Development at Qube Interactive 3D Software Past Ops Improvement Project at Housekeep, Managing Director at KhangaRue Media, ...
Read more

Data Visualization and Game Design in WebGL and HTML5 - FITC

Data Visualization and Game Design in WebGL and HTML5 ... Developing Interactive 3D Experiences in HTML5 ... With Carlos Ulloa . HTML5 ...
Read more

FITC Amsterdam 2014 | HelloEnjoy™

FITC Amsterdam 2014. ... for the afternoon and is titled Developing Interactive 3D Experiences in HTML5. ... I'm Carlos Ulloa, an interactive ...
Read more

*drawlogic » 3d - web, mobile, game + interactive ...

... I also still like developing in C++ which is very ... deliver sophisticated 3D experiences across almost ... Carlos Ulloa is of course ...
Read more

*drawlogic - web, mobile, game + interactive development

Carlos Ulloa of Papervision 3D ... and even marketing interactive 3d, ... to deliver when you need really deeply immersive 3d experiences in the ...
Read more

Towards Interactive 3D Graphics in Chemistry Publications ...

Share Towards Interactive 3D Graphics in Chemistry Publications. ... which can provide interactive ... 3D Experiences in HTML5 with Carlos Ulloa.
Read more

Web Designer - Issue 240 2015 by Enitre - issuu

... Issue 240 2015, Author: Enitre, Name: web_designer_-_issue_240_2015 ... Mielke, Carlos Ulloa ... experiences > Interactive music videos ...
Read more