Building interactive 3D worlds

with WebGL

Bienvenue, Confoo

I’m Martin from Zurich, Software Engineer at Archilogic

What we’ll do in the next 45 minutes

  • What’s WebGL and what’s it good for?
  • WebGL 101
  • Building 3D worlds with Three.js
  • Wrap-up

What’s WebGL?

Plugin-free 3D content on the web!

WebGL

  • Released ‘11, stable since ‘13
  • very verbose, dated API
  • Based on OpenGL ES 2.0

WebGL 101

Geometry

box

Mesh

Camera

Renderer

Material

red

Scene

Let’s get buildin’

avgp.github.io/h2g2three

Wrap up

  • WebGL is a stable standard
  • Broad browser support nowadays
  • Can be used to enhance content, when spatial data is concerned

Thank you! Questions?

DevTalks Building interactive 3D worlds - Google Slides