Successfully reported this slideshow.
Your SlideShare is downloading. ×

Leaving Flatland: getting started with WebGL

Upcoming SlideShare
5 tips for your HTML5 games
5 tips for your HTML5 games
Loading in …3
×

Check these out next

1 of 41 Ad
1 of 41 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Leaving Flatland: getting started with WebGL

  1. 1. Leaving Flatland Getting Started with WebGL Luz Caballero
  2. 2. Luz Caballero Web Opener at @gerbille
  3. 3. • What’s WebGL? • What can you use it for? • How it works • How you can get started ( w/examples)
  4. 4. What is WebGL?
  5. 5. OpenGL OpenGL ES WebGL
  6. 6. desktop mobile
  7. 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. 8. What can you use it for?
  9. 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. 10. data visualization
  11. 11. creative coding
  12. 12. art
  13. 13. 3D design environments
  14. 14. music videos
  15. 15. plotting mathematical functions
  16. 16. 3D models of objects/space
  17. 17. games
  18. 18. creating textures
  19. 19. How does WebGL work? or... why is it so awesome?
  20. 20. JavaScript WebGL JS API GPU (Compiled Program)
  21. 21. JavaScript WebGL JS API GLSL API Vertex Shader GLSL API Fragment Shader
  22. 22. What you need to know to get started
  23. 23. The 3D scene
  24. 24. Choosing a library - Three.js - PhiloGL - GLGE - J3D - TDL - ...
  25. 25. desktop mobile
  26. 26. WebGL inspector
  27. 27. Let’s see some code
  28. 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. 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. 30. // 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 ); }
  31. 31. function animate() {   requestAnimationFrame( animate );   render(); } function render() {   zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);   webglRenderer.render( scene, camera ); } </script>                                         
  32. 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. 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. 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. 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. 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. 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. 38. Thanks! @gerbille

Editor's Notes

  • \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

×