WebGL para JavaScripters                  Luz Caballero
Luz Caballero - @gerbille        Web Opener
Agenda• Que es WebGL?• Para qué se puede usar?• Cómo funciona?• Lo que hay que saber para empezar• Un poco de código
Qué es WebGL ?
OpenGL   OpenGL ES   WebGL
desktop   mobile
<canvas id=‘c’ width=‘100’ height=‘100’></canvas>document.getElementById(‘c’).getContext(‘webgl’)
Para qué se puede usar?
•   Visualización de datos•   Creative coding•   Arte•   Environments de diseño 3D•   Videos de música•   Graficación de fu...
visualización de datos
creative coding
arte
environments de diseño 3D
videos de música
graficación de funciones matemáticas
modelado de objetos y espacios 3D
juegos
creación de texturas
simulaciones físicas
Cómo funciona?
JavaScriptWebGL JS API               GPU (Compiled Program)
JavaScriptWebGL JS APIGLSL API        Vertex ShaderGLSL API       Fragment Shader
Lo que hay que saber   para empezar
The 3D scene          image source: http://computer.yourdictionary.com/graphics
Choosing a library• Three.js• PhiloGL• GLGE• J3D• TDL• ...
desktop   mobile
WebGL inspector
Un poco de código
<!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() {     ...
<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...
Resources•   An Introduction to WebGL @ dev.Opera•   PhiloGL•   PhiloGL tutorial•   WebGL w/o a library @ dev.Opera•   Por...
Thanks!@gerbille
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Upcoming SlideShare
Loading in...5
×

Webgl para JavaScripters

2,832

Published on

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

No Downloads
Views
Total Views
2,832
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Webgl para JavaScripters

  1. 1. WebGL para JavaScripters Luz Caballero
  2. 2. Luz Caballero - @gerbille Web Opener
  3. 3. Agenda• Que es WebGL?• Para qué se puede usar?• Cómo funciona?• Lo que hay que saber para empezar• Un poco de código
  4. 4. Qué es 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’)
  8. 8. Para qué se puede usar?
  9. 9. • Visualización de datos• Creative coding• Arte• Environments de diseño 3D• Videos de música• Graficación de funciones matemáticas• Modelado de objectos y espacios 3D• Creación de texturas• Simulaciones físicas• ...procesamiento rápido de cualquier tipo de datos
  10. 10. visualización de datos
  11. 11. creative coding
  12. 12. arte
  13. 13. environments de diseño 3D
  14. 14. videos de música
  15. 15. graficación de funciones matemáticas
  16. 16. modelado de objetos y espacios 3D
  17. 17. juegos
  18. 18. creación de texturas
  19. 19. simulaciones físicas
  20. 20. Cómo funciona?
  21. 21. JavaScriptWebGL JS API GPU (Compiled Program)
  22. 22. JavaScriptWebGL JS APIGLSL API Vertex ShaderGLSL API Fragment Shader
  23. 23. Lo que hay que saber para empezar
  24. 24. The 3D scene image source: http://computer.yourdictionary.com/graphics
  25. 25. Choosing a library• Three.js• PhiloGL• GLGE• J3D• TDL• ...
  26. 26. desktop mobile
  27. 27. WebGL inspector
  28. 28. Un poco de código
  29. 29. <!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>
  30. 30. 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  });
  31. 31.   //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();      }    },
  32. 32.     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);
  33. 33. //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);      }    }  });}
  34. 34. <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();
  35. 35. 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 );}
  36. 36. // rendererwebglRenderer = new THREE.WebGLRenderer();webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );webglRenderer.domElement.style.position = "relative";container.appendChild( webglRenderer.domElement );// loadervar loader = new THREE.JSONLoader(),loader.load( { model: "obj/church/church.js", callback: createScene } );                                         function createScene( geometry ) {  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 );}
  37. 37. function animate() {  requestAnimationFrame( animate );  render();}function render() {  zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);  webglRenderer.render( scene, camera );}</script>                                         
  38. 38. 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• WebGL-dev mailing list
  39. 39. 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.

×