Leaving Flatland: getting started with WebGL

Leaving Flatland
Getting Started with WebGL

Luz Caballero

Luz Caballero

Web Opener at

@gerbille

• What’s WebGL?

• What can you use it for?

• How it works

• How you can get started ( w/examples)

<canvas id=‘c’ width=‘100’ height=‘100’></canvas>

document.getElementById(‘c’).getContext(‘webgl’) **

** in some browsers the context’s ‘experimental-webgl’, be sure to include both

- data visualization
- creative coding
- art
- 3D design environments
- music videos
- plotting mathematical functions and models
- modeling 3D objects and space
- creating textures
- physical simulations
- efﬁcient processing of any kind of large data
- ...

plotting mathematical functions

How does WebGL work?
or... why is it so awesome?

JavaScript

WebGL JS API

GPU (Compiled Program)

JavaScript

WebGL JS API

GLSL API Vertex Shader

GLSL API Fragment Shader

What you need to know to get started

Choosing a library

- Three.js
- PhiloGL
- GLGE
- J3D
- TDL
- ...

function init() {
  container = document.createElement( 'div' );
  document.body.appendChild( container );

  // camera
  camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
  camera.position.z = 75;

  // scene
  scene = new THREE.Scene();

  // lights
  var ambient = new THREE.AmbientLight( 0xffffff );
  scene.add( ambient );

  // more lights
  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
  directionalLight.position.set( 0, -70, 100 ).normalize();
  scene.add( directionalLight );
}

// renderer
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = "relative";
container.appendChild( webglRenderer.domElement );

// loader
var loader = new THREE.JSONLoader(),
callbackModel = function( geometry ) { createScene( geometry,  90,
FLOOR, -50, 105 ) };
loader.load( { model: "obj/church/church.js", callback: callbackModel } );

function createScene( geometry, x, y, z, b ) {
  zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
  zmesh.position.set( 0, 16, 0 );
  zmesh.scale.set( 1, 1, 1 );
  scene.add( zmesh );
}

function onDocumentMouseMove(event) {
  mouseX = ( event.clientX - windowHalfX );
  mouseY = ( event.clientY - windowHalfY );
}

function animate() {
  requestAnimationFrame( animate );
  render();
}

function render() {
  zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);
  webglRenderer.render( scene, camera );
}
</script>

<!DOCTYPE html>
<html>
  <head>
  <title>Learning WebGL lesson 11 in PhiloGL</title>
  <link href="path/to/file.css" type="text/css" rel="stylesheet"
media="screen" />
  <script src="path/to/PhiloGL.js"></script>
  <script src="path/to/index.js"></script>
  </head>

  <body onload="webGLStart();">
  <canvas id="lesson11-canvas" width="500" height="500"></canvas>
  
  </body>
</html>

function webGLStart() {
  var pos, $ = function(d) { return document.getElementById(d); };

  //Create moon
  var moon = new PhiloGL.O3D.Sphere({
  nlat: 30,
  nlong: 30,
  radius: 2,
  textures: 'moon.gif'
  });

//Create application
  PhiloGL('lesson11-canvas', {
  camera: {
  position: {
  x: 0, y: 0, z: -7
  }
  },
  textures: {
  src: ['moon.gif'],
  parameters: [{
  name: 'TEXTURE_MAG_FILTER',
  value: 'LINEAR'
  }, {
  name: 'TEXTURE_MIN_FILTER',
  value: 'LINEAR_MIPMAP_NEAREST',
  generateMipmap: true
  }]
  },
  events: {
  onDragStart: function(e) {
  pos = {
  x: e.x,
  y: e.y
  };
  },
  onDragMove: function(e) {
  var z = this.camera.position.z,
  sign = Math.abs(z) / z;

  moon.rotation.y += -(pos.x - e.x) / 100;
  moon.rotation.x += sign * (pos.y - e.y) / 100;
  moon.update();
  pos.x = e.x;
  pos.y = e.y;
  },
  onMouseWheel: function(e) {
  e.stop();
  var camera = this.camera;
  camera.position.z += e.wheel;
  camera.update();
  }
  },

onError: function() {
  alert("There was an error creating the app.");
  },
  onLoad: function(app) {
  //Unpack app properties
  var gl = app.gl,
  program = app.program,
  scene = app.scene,
  canvas = app.canvas,
  camera = app.camera;

//get light config from forms
  lighting = $('lighting'),
  ambient = {
  r: $('ambientR'),
  g: $('ambientG'),
  b: $('ambientB')
  },
  direction = {
  x: $('lightDirectionX'),
  y: $('lightDirectionY'),
  z: $('lightDirectionZ'),

  r: $('directionalR'),
  g: $('directionalG'),
  b: $('directionalB')
  };
  //Basic gl setup
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clearDepth(1.0);
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
  gl.viewport(0, 0, canvas.width, canvas.height);

//Add object to the scene
  scene.add(moon);

  //Draw the scene
  draw();

  function draw() {
  //clear the screen
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  //Setup lighting
  var lights = scene.config.lights;
  lights.enable = lighting.checked;
  lights.ambient = {
  r: +ambient.r.value,
  g: +ambient.g.value,
  b: +ambient.b.value
  };
  lights.directional = {
  color: {
  r: +direction.r.value,
  g: +direction.g.value,
  b: +direction.b.value
  },
  direction: {
  x: +direction.x.value,
  y: +direction.y.value,
  z: +direction.z.value
  }
  };

  //render moon
  scene.render();
  //Animate
  Fx.requestAnimationFrame(draw);
  }
  }
  });
}

Some more resources
- An Introduction to WebGL @ dev.Opera
- PhiloGL
- PhiloGL tutorial
- WebGL w/o a library @ dev.Opera
- Porting 3D models to WebGL @ dev.Opera
- News and resources @ the Learning WebGL blog
- WebGL w/o a library @ Learning WebGL
- Three.js
- Three.js tutorial
- WebGL FAQ
- The Khronos WebGL forum

Leaving Flatland: getting started with WebGL

More Related Content

What's hot

Viewers also liked

Similar to Leaving Flatland: getting started with WebGL

More from gerbille

Recently uploaded

Leaving Flatland: getting started with WebGL

Editor's Notes