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
