View
3.318
Download
6
Embed Size (px)
DESCRIPTION
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