PhiloGL                           A WebGL Framework for                        data visualization, creative coding        ...
Friday, June 10, 2011
Data Visualization                            JavaScriptFriday, June 10, 2011
HTML DocumentFriday, June 10, 2011
How most people see a WebGL app:                                   WebGL CanvasFriday, June 10, 2011
How I see a WebGL app:                        Web Workers    File API                                       Forms         ...
ExamplesFriday, June 10, 2011
PhiloGL                        • Idiomatic JavaScript                        • Rich Module System                        •...
Idiomatic JavaScript                            Concise & ExpressiveFriday, June 10, 2011
Idiomatic JavaScript                               UniformsFriday, June 10, 2011
Idiomatic JavaScript             gl.uniform1i             gl.uniform2i             gl.uniform3i             gl.uniform4i  ...
Idiomatic JavaScript                        program.setUniform(name, value);Friday, June 10, 2011
Idiomatic JavaScript                                BuffersFriday, June 10, 2011
Idiomatic JavaScript                    //setup part...                    var positionLocation = gl.getAttribLocation(pro...
Idiomatic JavaScript                        //setup part...                        app.setBuffer(‘position’, {            ...
Idiomatic JavaScript                               TexturesFriday, June 10, 2011
Idiomatic JavaScript   //setup...   var texture = gl.createTexture();   var img = new Image();   img.onload = function () ...
Idiomatic JavaScript                        PhiloGL.IO.Textures({                          src: [‘image1.png’, ‘image2.png...
Idiomatic JavaScript                               ProgramsFriday, June 10, 2011
Idiomatic JavaScript              function getShader(gl, id) {                  var shaderScript = document.getElementById...
Idiomatic JavaScript                               DeclarativeFriday, June 10, 2011
Idiomatic JavaScript                          //Create application                          PhiloGL(canvasId, {           ...
Idiomatic JavaScript                            app.gl                            app.canvas                            ap...
Module System                            •   Core                            •   Math                            •   WebGL...
Module System                        Math classes have generic methods                              var v1 = new Vec3(0, 1...
Module System                                 Workers - Divide & Conquer                        var workerGroup = new Work...
Module System                        Rich and mobile-ready event system                                  onClick          ...
Module System                                       XHR and JSONP           new IO.XHR({             url: ‘http://some/que...
Module System                                           Tween                        var fx = new Fx({                    ...
Other ExamplesFriday, June 10, 2011
Complete documentation and examples.Friday, June 10, 2011
Thanks :)                                    Project page:                        http://senchalabs.github.com/philogl/   ...
Upcoming SlideShare
Loading in …5
×

PhiloGL - WebGLCamp Google HQs - June 2011

2,316 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
2,316
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PhiloGL - WebGLCamp Google HQs - June 2011

  1. 1. PhiloGL A WebGL Framework for data visualization, creative coding and game development Nicolas Garcia Belmonte - June 2011Friday, June 10, 2011
  2. 2. Friday, June 10, 2011
  3. 3. Data Visualization JavaScriptFriday, June 10, 2011
  4. 4. HTML DocumentFriday, June 10, 2011
  5. 5. How most people see a WebGL app: WebGL CanvasFriday, June 10, 2011
  6. 6. How I see a WebGL app: Web Workers File API Forms Images WebGL Canvas Audio Video 2D Canvas XHRFriday, June 10, 2011
  7. 7. ExamplesFriday, June 10, 2011
  8. 8. PhiloGL • Idiomatic JavaScript • Rich Module System • Flexible and Performance FocusedFriday, June 10, 2011
  9. 9. Idiomatic JavaScript Concise & ExpressiveFriday, June 10, 2011
  10. 10. Idiomatic JavaScript UniformsFriday, June 10, 2011
  11. 11. Idiomatic JavaScript gl.uniform1i gl.uniform2i gl.uniform3i gl.uniform4i gl.uniform1f gl.uniform2f ?! gl.uniformMatrix1fv gl.uniform1iv gl.uniform2iv gl.uniform3iv gl.uniform4iv gl.uniform1fv gl.uniform2fv gl.uniform3f gl.uniform3fv gl.uniformMatrix2fv gl.uniform4f gl.uniform4fv gl.uniformMatrix3fv gl.uniformMatrix4fvFriday, June 10, 2011
  12. 12. Idiomatic JavaScript program.setUniform(name, value);Friday, June 10, 2011
  13. 13. Idiomatic JavaScript BuffersFriday, June 10, 2011
  14. 14. Idiomatic JavaScript //setup part... var positionLocation = gl.getAttribLocation(program, ‘position’); gl.enableVertexAttribArray(positionLocation); var positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); //render part... gl.bindBuffer(gl.ARRAY_BUFFER, position); gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);Friday, June 10, 2011
  15. 15. Idiomatic JavaScript //setup part... app.setBuffer(‘position’, { size: 3, value: vertices }); //render... app.setBuffer(‘position’, true); //bind app.setBuffer(‘position’, false); //unbindFriday, June 10, 2011
  16. 16. Idiomatic JavaScript TexturesFriday, June 10, 2011
  17. 17. Idiomatic JavaScript //setup... var texture = gl.createTexture(); var img = new Image(); img.onload = function () { gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.bindTexture(gl.TEXTURE_2D, null); }; img.src = "nehe.gif"; //bind... gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture);Friday, June 10, 2011
  18. 18. Idiomatic JavaScript PhiloGL.IO.Textures({ src: [‘image1.png’, ‘image2.png’, ...], onComplete: function() { app.setTexture(‘image1.png’, true); //bind. } });Friday, June 10, 2011
  19. 19. Idiomatic JavaScript ProgramsFriday, June 10, 2011
  20. 20. Idiomatic JavaScript function getShader(gl, id) { var shaderScript = document.getElementById(id); if (!shaderScript) { return null; } var str = ""; Program.fromShaderSources var k = shaderScript.firstChild; while (k) { if (k.nodeType == 3) { str += k.textContent; } k = k.nextSibling; Program.fromShaderURIs } var shader; if (shaderScript.type == "x-shader/x-fragment") { shader = gl.createShader(gl.FRAGMENT_SHADER); } else if (shaderScript.type == "x-shader/x-vertex") { Program.fromShaderIds shader = gl.createShader(gl.VERTEX_SHADER); } else { return null; } gl.shaderSource(shader, str); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(gl.getShaderInfoLog(shader)); return null; } return shader; } var shaderProgram; function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert("Could not initialise shaders"); } gl.useProgram(shaderProgram); }Friday, June 10, 2011
  21. 21. Idiomatic JavaScript DeclarativeFriday, June 10, 2011
  22. 22. Idiomatic JavaScript //Create application PhiloGL(canvasId, { program: { from: uris, vs: shader.vs.glsl, fs: shader.fs.glsl }, camera: { position: { x: 0, y: 0, z: -50 } }, textures: { src: [arroway.jpg, earth.jpg] }, events: { onDragMove: function(e) { //do things... }, onMouseWheel: function(e) { //do things... } }, onError: function() { alert("There was an error creating the app."); }, onLoad: function(app) { /* Do things here */ } });Friday, June 10, 2011
  23. 23. Idiomatic JavaScript app.gl app.canvas app.camera app.scene app.events app.program app.textures app.framebuffers app.renderbuffersFriday, June 10, 2011
  24. 24. Module System • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • WorkersFriday, June 10, 2011
  25. 25. Module System Math classes have generic methods var v1 = new Vec3(0, 1, 2), v2 = new Vec3(1, 2, 3); v1.add(v2); //or... Vec3.add(v1, v2); //May just be {x, y, z}Friday, June 10, 2011
  26. 26. Module System Workers - Divide & Conquer var workerGroup = new WorkerGroup(‘worker.js’, 10); workerGroup.map(function(i) { //return a worker config }); workerGroup.reduce({ reduceFn: function(a, b) { //merge worker results } });Friday, June 10, 2011
  27. 27. Module System Rich and mobile-ready event system onClick onRightClick onTouchStart onTouchMove onTouchEnd onMouseWheel ...Friday, June 10, 2011
  28. 28. Module System XHR and JSONP new IO.XHR({ url: ‘http://some/query/’, onError: function() { alert(‘There was an error’); IO.JSONP({ }, url: ‘http://some/query/’, onProgress: function(e) { callbackKey: ‘fn’, if (e.total) { alert(e.loaded / e.total); onComplete: function(json) { } //handle data }, } onSuccess: function(data) { }); //handle data } }).send();Friday, June 10, 2011
  29. 29. Module System Tween var fx = new Fx({ duration: 1000, transition: Fx.Transition.Back.easeOut, onCompute: function(delta) { obj.height = Fx.compute(from, to, delta); }, onComplete: function() { alert(‘done!’); } }); Fx.requestAnimationFrameFriday, June 10, 2011
  30. 30. Other ExamplesFriday, June 10, 2011
  31. 31. Complete documentation and examples.Friday, June 10, 2011
  32. 32. Thanks :) Project page: http://senchalabs.github.com/philogl/ Twitter: Home page: @philogb http://philogb.github.com/Friday, June 10, 2011

×