KEMBAR78
Leaving Flatland: getting started with WebGL | KEY
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)
What is WebGL?
OpenGL   OpenGL ES   WebGL
desktop   mobile
<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
What can you use it for?
-   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
-   ...
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?
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
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 = 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();
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>
    <!-- more html elements here... -->
  </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
Thanks!

@gerbille

Leaving Flatland: getting started with WebGL

  • 1.
    Leaving Flatland Getting Startedwith WebGL Luz Caballero
  • 2.
  • 3.
    What’s WebGL? • What can you use it for? • How it works • How you can get started ( w/examples)
  • 4.
  • 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 youuse 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.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
    3D models ofobjects/space
  • 17.
  • 18.
  • 19.
    How does WebGLwork? or... why is it so awesome?
  • 21.
    JavaScript WebGL JS API GPU (Compiled Program)
  • 22.
    JavaScript WebGL JS API GLSLAPI Vertex Shader GLSL API Fragment Shader
  • 23.
    What you needto know to get started
  • 24.
  • 25.
    Choosing a library - Three.js - PhiloGL - GLGE - J3D - TDL - ...
  • 26.
    desktop mobile
  • 27.
  • 28.
  • 30.
    <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();
  • 31.
    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 ); }
  • 32.
    // 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 ); }
  • 33.
    function animate() {   requestAnimationFrame(animate );   render(); } function render() {   zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);   webglRenderer.render( scene, camera ); } </script>                                         
  • 35.
    <!DOCTYPE html> <html>   <head>     <title>LearningWebGL 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>
  • 36.
    function webGLStart() {   varpos, $ = function(d) { return document.getElementById(d); };        //Create moon   var moon = new PhiloGL.O3D.Sphere({     nlat: 30,     nlong: 30,     radius: 2,     textures: 'moon.gif'   });
  • 37.
      //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();       }     },
  • 38.
        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);
  • 39.
    //Add object tothe 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);       }     }   }); }
  • 40.
    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
  • 41.