webgl fundamentals

Thursday, November 3, 2011

Nicolas Garcia Belmonte, Sencha

@philogb

http://philogb.github.com/

WebGL Fundamentals


http://philogb.github.com

http://philogb.github.com

Agenda


Agenda

What is WebGL ?

What can WebGL be used for ?

How can I get started with WebGL ?


What is WebGL ?


What is WebGL ?


http://localhost/~philogb/webgl/helloracer/



What is WebGL ?

OpenGL

OpenGL ES

WebGL


What is WebGL ?

JavaScript

GPU (Compiled Program)

WebGL JS API


What is WebGL ?JavaScript

Fragment Shader

WebGL JS API

Vertex ShaderGLSL API

GLSL API



Fragment Shader

WebGL JS API

Vertex ShaderGLSL API

GLSL API

[x1, y1, z1, x2, y2, z2, ...]

attributeuniform

uniform varying



Fragment Shader

Vertex Shader

[x1, y1, z1, x2, y2, z2, ...]

attributeuniform

uniform varying

Triangle Assembly

Rasterization


What is WebGL ?

Fragment Shader

Vertex Shader

Triangle Assembly

Rasterization



Interactive games

Data visualization

Creative coding

Physics simulations

Music videos

... very fast processing of any data.Thursday, November 3, 2011



http://localhost/~philogb/webgl/game/



http://hakim.se/experiments/html5/coil/







Interactive games













http://localhost/~philogb/webgl/ninepointfive/




Data visualization







http://chrysaora.com/



http://localhost/~philogb/webgl/fractal.html




Creative coding










http://localhost/~philogb/webgl/water/water.html



http://localhost/~philogb/webgl/particle/




Physics simulations










http://lights.elliegoulding.com/





Music videos






PhiloGL

A WebGL framework for data visualization, creative coding and

game development.


PhiloGL

http://senchalabs.github.com/philogl/


game development.




PhiloGL


game development.


http://localhost/philogl/PhiloGL/examples/worldFlights2/



PhiloGL



game development.





HTML Document


How most people see a WebGL app:

HTML DocumentWebGL Canvas


How we see a WebGL app:

WebGL Canvas

Web Workers

2D Canvas XHR(2)

Video

Audio

Images

Forms


Examples


http://localhost/philogl/PhiloGL/examples/histogram/

http://localhost/philogl/PhiloGL/examples/histogram/

http://localhost/philogl/PhiloGL/examples/temperatureAnomalies/

http://localhost/philogl/PhiloGL/examples/temperatureAnomalies/

PhiloGL


PhiloGL

Idiomatic JavaScript

Rich Module System

Flexible and Performance Focused



Concise & Expressive


//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 */ } });


CoreMathWebGLProgramShadersO3DCameraSceneEventFxIOWorkersMedia

Module System


Other Examples


http://localhost/philogl/PhiloGL/examples/quaternion/

http://localhost/philogl/PhiloGL/examples/quaternion/

http://localhost/philogl/PhiloGL/examples/metaballs/

http://localhost/philogl/PhiloGL/examples/metaballs/

http://localhost/philogl/PhiloGL/examples/explorer/



Thanks!


Thanks!

@philogb

http://philogb.github.com/





webgl fundamentals

Technology