hello cssconf asia!

Joshua Koo

  • Overview

  • Three.js

  • How to use

  • Why CSS3DRenderer

  • Some History

  • Under the Hood

  • The Future

THREE.CSS3DRenderer

three.js !?

Javascript Library for WebGL?

"Great things doesn't belong alone"

- Joosh 2014

"mrdoob"

Basics of three.js

  • Scene
  • Objects (Meshes with Materials, Lights, Groups)
  • Camera (Perspective, Orthographic)
  • Renderer (CanvasRenderer, WebGLRenderer, SVGRenderer, SoftwareRenderer)
var scene = new THREE.Scene();
var object = new THREE.Object();
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera( 75, aspect, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

scene.add( object );

renderer.render( scene, camera );

Working with the CSS3DRenderer

  • include three.js

  • include CSS3DRenderer

  • create/get some dom elements

  • wrap them in CSS3DObjects or CSS3DSprites

  • add to scene

  • add animation or interactivity

  1. Lightweight

  2. DOM Elements

  3. No Materials / Shaders / Meshes

  4. CSS-able

  5. Use DOM event handlers

  6. Mobile Friendly

  7. Performant

Benefits?

a slice of history

cool, but how does it work?

3D Transforms

Matrices

References: Transforms and Perspective

Learn more? : Making WebGL Dance

Limitations

Browser Bugs

Rasterization

Layer Limits

 

Browser Bugs

IE preserve-3d

 

 

Solution: "CSS3DRenderIE" herehere and here

Intersection Problems

Solution: Avoid

Rasterization Artifacts

Solution: upscale

Layer Limits

Performance == understanding how the browser renders

link, link

another slice of history: current, past

Layer Limits Experiment

Paul Lewis - Bye Bye Layer Hacks, Hello will-change

“MAKING LAYERS CONSIDERED DANGEROUS”

Can CSS3DRenderer render Meshes?

Pushing the Limits

Pushing the Limits

is this the end of CSS3DRenderer?

Still Practical

More Demos

Closing Thoughts

  • Three.js isn't just for WebGL

  • Its not CSS3DRenderer vs ...

  • Often ideas aren't restricted to plateforms

  • CSS3DRenderer still have practical use

  • & it has a special place for me

Thank you!

Joshua Koo

@blurspline