Leaving Flatland: getting started with WebGL
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Leaving Flatland: getting started with WebGL

  • 47,374 views
Uploaded on

My presentation about WebGL at Open Web Camp 4

My presentation about WebGL at Open Web Camp 4

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
47,374
On Slideshare
2,169
From Embeds
45,205
Number of Embeds
10

Actions

Shares
Downloads
20
Comments
0
Likes
2

Embeds 45,205

http://www.html5gamedevelopment.org 27,875
http://www.html5gamedevelopment.com 17,165
http://www.scoop.it 121
http://translate.googleusercontent.com 34
http://webcache.googleusercontent.com 3
http://html5gamedevelopment.beta.com 3
http://meatspin.com&_=1353219648617 HTTP 1
http://meatspin.com&_=1352338326241 HTTP 1
https://si0.twimg.com 1
https://www.hackthissite.org 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Leaving FlatlandGetting Started with WebGL Luz Caballero
  • 2. Luz CaballeroWeb Opener at @gerbille
  • 3. • What’s WebGL?• What can you use it for?• How it works• How you can get started ( w/examples)
  • 4. What is WebGL?
  • 5. OpenGL OpenGL ES WebGL
  • 6. desktop mobile
  • 7. <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
  • 8. What can you use it for?
  • 9. - data visualization- creative coding- art- 3D design environments- music videos- plotting mathematical functions and models- modeling 3D objects and space- creating textures- physical simulations- efficient processing of any kind of large data- ...
  • 10. data visualization
  • 11. creative coding
  • 12. art
  • 13. 3D design environments
  • 14. music videos
  • 15. plotting mathematical functions
  • 16. 3D models of objects/space
  • 17. games
  • 18. creating textures
  • 19. How does WebGL work? or... why is it so awesome?
  • 20. JavaScriptWebGL JS API GPU (Compiled Program)
  • 21. JavaScriptWebGL JS APIGLSL API Vertex ShaderGLSL API Fragment Shader
  • 22. What you need to know to get started
  • 23. The 3D scene
  • 24. Choosing a library - Three.js - PhiloGL - GLGE - J3D - TDL - ...
  • 25. desktop mobile
  • 26. WebGL inspector
  • 27. Let’s see some code
  • 28. <script>    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();var SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT = window.innerHeight;var FLOOR = 0;var container;var camera, scene;var webglRenderer;var zmesh, geometry;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;document.addEventListener( mousemove, onDocumentMouseMove, false );init();animate();
  • 29. 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 );}
  • 30. // rendererwebglRenderer = new THREE.WebGLRenderer();webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );webglRenderer.domElement.style.position = "relative";container.appendChild( webglRenderer.domElement );// loadervar 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 );}
  • 31. function animate() {  requestAnimationFrame( animate );  render();}function render() {  zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);  webglRenderer.render( scene, camera );}</script>                                         
  • 32. <!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>    <!-- more html elements here... -->  </body></html>
  • 33. 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  });
  • 34.   //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();      }    },
  • 35.     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);
  • 36. //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);      }    }  });}
  • 37. 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
  • 38. Thanks!@gerbille