Webgl para JavaScripters
Upcoming SlideShare
Loading in...5
×
 

Webgl para JavaScripters

on

  • 3,266 views

 

Statistics

Views

Total Views
3,266
Views on SlideShare
3,228
Embed Views
38

Actions

Likes
3
Downloads
23
Comments
0

7 Embeds 38

http://candidosalesg.wordpress.com 20
http://candidosg.com 5
https://twitter.com 5
http://flavors.me 3
http://jp.flavors.me 2
http://fr.flavors.me 2
http://de.flavors.me 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webgl para JavaScripters Webgl para JavaScripters Presentation Transcript

  • 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 funciones matemáticas• Modelado de objectos y espacios 3D• Creación de texturas• Simulaciones físicas• ...procesamiento rápido de cualquier tipo de datos
  • 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="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);      }    }  });}
  • <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 );}
  • // 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 );}
  • function animate() {  requestAnimationFrame( animate );  render();}function render() {  zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);  webglRenderer.render( scene, camera );}</script>                                         
  • 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
  • Thanks!@gerbille