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. 

My first three.js app body { margin: 0; } canvas { width: 100%; height: 100% } // Our Javascript will go here. 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 {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 

Coordinates 

(0, 0) X Y Viewport Coordinates 2D 

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

No content

Near plane Far plane 

Near plane Far plane 

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 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 ▶ 

function createLineWithPointsAndColor( points: THREE.Vector3[], color: number) { const geometry = new THREE.Geometry(); for (const p of points) { geometry.vertices.push(p); } const material = new THREE.LineBasicMaterial({ color }); return new THREE.Line(geometry, material); } Rendering Lanes 

Understanding
 the scene graph 

… … 

Transformations … … 

(.39, 0, -.6) Transformations • Each object defines 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 defines 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 defines 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 defines 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 ▶ 

No content

No content

No content

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