WebGL Inspirational Showcase

Christian Dittrich, creatale GmbH

WebDev BBQ, 16.12.2014

OpenGL ES 2.0 in the browser

Caniuse: Global 74.64%, Germany 85.46%

3D in the browser? Why?

Getting started

Three.js (example)

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
	requestAnimationFrame( render );
	cube.rotation.x += 0.1;
	cube.rotation.y += 0.1;
	renderer.render(scene, camera);
};
render();

Game Engines

PlayCanvas

voxel.js

Turbulenz

and many more

Additional skills needed

Maths (linear algebra)

Shader development

Modelling

Animating

Texturing

Additional problems

Navigating in 3D (don't do this)

Occlusion (leads to confusion in data presentation)

Graphics card can be anonther performance bottleneck

More than OpenGL

CSS3D (Caniuse: Global 87.52%, Germany 94.49%)

Hardware accelerated compositing

3D in the browser? Why? (2)

Amazing effects without Flash

New use cases

Information visualization

Presentations

... and certainly games!

Grand Theft Ambulance

Drone-Ops

Battle Feast (mobile!)

Get creative!