Modeling the Physical World with Three.js

Modeling the Physical  World with Three.js Berlin.js · June 21,
2018

Patrick Dubroy @dubroy lyft.com/level5

• Opened Dec. 1 • 18 engineers now - Goal
of 35 in 2018 - Space for ~100 in 2019 • HD Mapping & localization • Frontend: viz + internal tools • We are hiring!

Three.js • Raw WebGL is very low-level • Three.js provides:
- Scene graph API - Math library (Vector3, Matrix4, Quaternion, etc.) - Other helpers for audio, animation, etc.

<!DOCTYPE html> <head> <title>My first three.js app</title> <style> body {
margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <script src="js/three.js"></script> <script> // Our Javascript will go here. </script> Hello Three.js

const {innerWidth, innerHeight} = window; const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); Creating a scene

const geometry = new THREE.BoxGeometry(1, 1, 1); const material =
new THREE.MeshBasicMaterial({ color: 0x648fff }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; Creating an object

function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01;
renderer.render(scene, camera); } animate(); Rendering the scene ▶

const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); Creating a scene

Coordinates

(0, 0) X Y Viewport Coordinates 2D

(0, 0) X Y Viewport (0, 0, 0) X Y
Viewport Z Coordinates 2D 3D

Near plane Far plane

const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); Creating a scene Field of view (degrees) Aspect ratio Distance to  near plane Distance to  far plane

const geometry = new THREE.BoxGeometry(1, 1, 1); const material =
new THREE.MeshBasicMaterial({ color: 0x648fff }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; Creating an object

Demo: Map Visualization ▶

Understanding  the scene graph

… …

Transformations … …

(.39, 0, -.6) Transformations • Each object deﬁnes its own
coordinate system or frame • An object’s pose is its position and rotation relative to its parent - obj.rotation / obj.position … … (1.2, 0, 1.9)

• Each object deﬁnes its own coordinate system or frame
• An object’s pose is its position and rotation relative to its parent - obj.rotation / obj.position Transformations … … (.39, 0, -.6) (1.2, 0, 1.9) (-.39, 0, .6) (-1.2, 0, -1.9)

• Each object deﬁnes its own coordinate system or frame
• An object’s pose is its position and rotation relative to its parent - obj.rotation / obj.position - obj.matrix Transformations … … (.39, 0, -.6) (1.2, 0, 1.9) (-.39, 0, .6) (-1.2, 0, -1.9)

… … vec.applyMatrix4(lidar.matrix); const m = new THREE.Matrix4() .getInverse(camera.matrix); vec.applyMatrix4(m);

Demo: Colored Point Cloud ▶

More:  threejs.org Cartographer point cloud viewer We are hiring frontend
engineers in Munich: lyft.com/level5 Thanks!

Modeling the Physical World with Three.js

Modeling the Physical World with Three.js

Patrick Dubroy

More Decks by Patrick Dubroy

Other Decks in Programming

Featured

Transcript