Leaving FlatlandGetting Started with WebGL   Luz Caballero
Luz CaballeroWeb Opener at       @gerbille
•   What’s WebGL?•   What can you use it for?•   How it works•   How you can get started ( w/examples)
What is WebGL?
OpenGL   OpenGL ES   WebGL
desktop   mobile
<canvas id=‘c’ width=‘100’ height=‘100’></canvas>document.getElementById(‘c’).getContext(‘webgl’) **                  ** i...
What can you use it for?
-   data visualization-   creative coding-   art-   3D design environments-   music videos-   plotting mathematical functi...
data visualization
creative coding
art
3D design environments
music videos
plotting mathematical functions
3D models of objects/space
games
creating textures
How does WebGL work? or... why is it so awesome?
JavaScriptWebGL JS API               GPU (Compiled Program)
JavaScriptWebGL JS APIGLSL API        Vertex ShaderGLSL API       Fragment Shader
What you need to know to get started
The 3D scene
Choosing a library  -   Three.js  -   PhiloGL  -   GLGE  -   J3D  -   TDL  -   ...
desktop   mobile
WebGL inspector
Let’s see some code
<script>    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();var SCREEN_WIDTH = window.innerWidth;var SCREEN_HEIGHT =...
function init() {  container = document.createElement( div );  document.body.appendChild( container );              // cam...
// rendererwebglRenderer = new THREE.WebGLRenderer();webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );webglRenderer.do...
function animate() {  requestAnimationFrame( animate );  render();}function render() {  zmesh.rotation.set(-mouseY/500 + 1...
<!DOCTYPE html><html>  <head>    <title>Learning WebGL lesson 11 in PhiloGL</title>    <link href="path/to/file.css" type=...
function webGLStart() {  var pos, $ = function(d) { return document.getElementById(d); };      //Create moon  var moon = n...
  //Create application  PhiloGL(lesson11-canvas, {    camera: {      position: {        x: 0, y: 0, z: -7      }    },    ...
      onError: function() {        alert("There was an error creating the app.");      },      onLoad: function(app) {    ...
//Add object to the scene      scene.add(moon);            //Draw the scene      draw();            function draw() {     ...
Some more resources-   An Introduction to WebGL @ dev.Opera-   PhiloGL-   PhiloGL tutorial-   WebGL w/o a library @ dev.Op...
Thanks!@gerbille
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
Upcoming SlideShare
Loading in...5
×

Leaving Flatland: getting started with WebGL

49,617

Published on

My presentation about WebGL at Open Web Camp 4

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
49,617
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

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
  • Leaving Flatland: getting started with WebGL

    1. 1. Leaving FlatlandGetting Started with WebGL Luz Caballero
    2. 2. Luz CaballeroWeb 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. JavaScriptWebGL JS API GPU (Compiled Program)
    21. 21. JavaScriptWebGL JS APIGLSL API Vertex ShaderGLSL 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. // 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×