The 3D web

or: “Web space” has a new meaning

Tere Tallinn!

Hi, I’m Martin!

I’m from Zurich & I’m the wizard in residence for Archilogic

Psssst: We’re hiring ;-)

Hi, I’m Martin!

I’m from Zurich & I’m the wizard in residence for Archilogic

Psssst: We’re hiring ;-)

me

Hi, I’m Martin!

I’m from Zurich & I’m the wizard in residence for Archilogic

Psssst: We’re hiring ;-)

haha, no j/k, I’m here

Our whirlwind tour for tonight

  • Who’s that guy talking?
  • What’s this 3D he’s talkin’ bout? Why do we bother?
  • WebGL 101
  • Virtual Reality & the web
  • Demo
  • Wrap up

Our whirlwind tour for tonight

  • Who’s that guy talking?
  • What’s this 3D he’s talkin’ bout? Why do we bother?
  • WebGL 101
  • Virtual Reality & the web
  • Demo
  • Wrap up

Why bother with 3D anyway?

Why bother with 3D anyway?

Not just for games - examples of 3D web content I

Not just for games - examples of 3D web content II

But…. can we use it?

Right, but now for real… can we?

WebGL 101

The basics

<html>

<body>

<canvas></canvas>

</body>

Canvas 2D context

Direct pixel access, wheeee!

..but...

1280 * 720 pixels = 921 600 pixels

~10ms (16ms - browser internal stuff) for 60fps

That leaves our code with ~0.000011 ms per pixel

..but...

1280 * 720 pixels = 921 600 pixels

~10ms (16ms - browser internal stuff) for 60fps

That leaves our code with ~0.000011 ms per pixel

GPUs to the rescue!

  • highly parallel architecture
  • can fill billions of pixels in parallel
  • Example: GTX 980
    • can fill 144,000,000 pixels / ms
    • 2048 cores to run our programs
    • running at 1126 MHz

*) using

WebGL 101: Pipeline

Vocabulary lesson

WebGL 101: Coordinates

WebGL 101: Coordinates 2

WebGL 101: Vertex

WebGL 101: Face

WebGL 101: Shaders

  • Basically functions
  • Vertex shader:

(originalVertex) => transformedVertex

  • Fragment shader:

(position) => colour

WebGL 101: Code! (1 / 3)

<canvas></canvas>

<script>

var canvas = document.querySelector(“canvas”),

ctx = canvas.getContext(“2d”);

// do 2D operations on the canvas

</script>

WebGL 101: Code! (1 / 3)

<canvas></canvas>

<script>

var canvas = document.querySelector(“canvas”),

ctx = canvas.getContext(“webgl”);

// do 2D operations on the canvas

</script>

WebGL 101: Code! (2 / 3)

var triangleVertexPositionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;

WebGL 101: Code (3 / 3)

var scene = new THREE.Scene(),

camera = new THREE.PerspectiveCamera(...),

renderer = new THREE.WebGLRenderer()

var box = new THREE.Mesh(...)

scene.add(box)

renderer.render(scene, camera) // rinse, repeat

Use a Three.js playground

Virtual Reality

Virtual Reality … shifts the perspective once more

And it becomes less dorky...

What can you do with it?

What can you do with it? II

WebVR with Three.js

var vrEffect = new THREE.VREffect(renderer),

vrControls = new THREE.VRControls()

vrControls.update()

vrEffect.render(scene, camera)

WebVR browsers

WebVR libraries & examples

Bleeding edge! Open challenges!

  • Problems
    • Simulator sickness
    • Interface design
    • Navigation
  • Opportunities
    • Education
    • Therapy
    • Entertainment

Design principles & best practices

Not many design guidelines yet

Google Cardboard Guidelines

Wrapup

  • WebGL has solid support
  • sensible when representing spatial data
  • enhance content with it
  • WebVR is the next step
  • A playground with lots of challenges!

Giving people superpowers

“... the computer is the most

remarkable tool that we've

ever come up with.

It's the equivalent of a bicycle for our minds

Giving people superpowers

“... VR is the second most

remarkable tool that we've

ever come up with.

It's the equivalent of a teleporter for our minds

Thanks for listening!

The 3D web - Topconf '15 - Google Slides