Your SlideShare is downloading. ×
0
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Webgl para JavaScripters
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webgl para JavaScripters

2,798

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WebGL para JavaScripters Luz Caballero
  • 2. Luz Caballero - @gerbille Web Opener
  • 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. Qué es WebGL ?
  • 5. OpenGL OpenGL ES WebGL
  • 6. desktop mobile
  • 7. <canvas id=‘c’ width=‘100’ height=‘100’></canvas>document.getElementById(‘c’).getContext(‘webgl’)
  • 8. Para qué se puede usar?
  • 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. visualización de datos
  • 11. creative coding
  • 12. arte
  • 13. environments de diseño 3D
  • 14. videos de música
  • 15. graficación de funciones matemáticas
  • 16. modelado de objetos y espacios 3D
  • 17. juegos
  • 18. creación de texturas
  • 19. simulaciones físicas
  • 20. Cómo funciona?
  • 21. JavaScriptWebGL JS API GPU (Compiled Program)
  • 22. JavaScriptWebGL JS APIGLSL API Vertex ShaderGLSL API Fragment Shader
  • 23. Lo que hay que saber para empezar
  • 24. The 3D scene image source: http://computer.yourdictionary.com/graphics
  • 25. Choosing a library• Three.js• PhiloGL• GLGE• J3D• TDL• ...
  • 26. desktop mobile
  • 27. WebGL inspector
  • 28. Un poco de código
  • 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. 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.   //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.     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. //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. <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. 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. // 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. function animate() {  requestAnimationFrame( animate );  render();}function render() {  zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);  webglRenderer.render( scene, camera );}</script>                                         
  • 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. Thanks!@gerbille

×