Webgl para JavaScripters

3,222 views
3,048 views

Published on

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

No Downloads
Views
Total views
3,222
On SlideShare
0
From Embeds
0
Number of Embeds
57
Actions
Shares
0
Downloads
25
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

×