WebGL para JavaScripters

Luz Caballero

Web Opener

Luz Caballero - @gerbille

Agenda

Que es WebGL? Para qu se puede usar? Cmo funciona? Lo que hay que saber para empezar Un poco de cdigo

Qu es WebGL ?

OpenGL OpenGL ES WebGL

desktop mobile

document.getElementById(c).getContext(webgl)

Para qu se puede usar?

Visualizacin de datos Creative coding Arte Environments de diseo 3D Videos de msica Graficacin de funciones matemticas Modelado de objectos y espacios 3D Creacin de texturas Simulaciones fsicas ...procesamiento rpido de cualquier tipo de

datos

visualizacin de datos

creative coding

arte

environments de diseo 3D

videos de msica

graficacin de funciones matemticas

modelado de objetos y espacios 3D

juegos

creacin de texturas

simulaciones fsicas

Cmo funciona?

JavaScript

GPU (Compiled Program)

WebGL JS API

JavaScript

Fragment Shader

WebGL JS API

Vertex ShaderGLSL API

GLSL API

Lo que hay que saber para empezar

image source: http://computer.yourdictionary.com/graphics

The 3D scene

Choosing a library

Three.js PhiloGL GLGE J3D TDL ...

desktop mobile

WebGL inspector

Un poco de cdigo

Learning WebGL lesson 11 in PhiloGL

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 applicationPhiloGL('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); } }});}

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 ); // cameracamera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );camera.position.z = 75; // scenescene = new THREE.Scene();

// lightsvar ambient = new THREE.AmbientLight( 0xffffff );scene.add( ambient ); // more lightsvar 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 );}

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