webgl fundamentals

Thursday, November 3, 2011

Nicolas Garcia Belmonte, Sencha

@philogb

http://philogb.github.com/

WebGL Fundamentals

Agenda

What is WebGL ?

What can WebGL be used for ?

How can I get started with WebGL ?

What is WebGL ?

OpenGL

OpenGL ES

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

Interactive games

Data visualization

Creative coding

Physics simulations

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.

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)

Images

Examples

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

Thanks!

@philogb

http://philogb.github.com/

webgl fundamentals

Technology

webgl in native applications

datenvisualisierung mit webgl (three.js)

webgl - an overview

firefox webgl developer tools

babylon.js webgl paris

webgl - it's go time

opengl and webgl

introducción a webgl

webgl export - na-mic.org

webgl para javascripters

learning webglで学ぶwebgl入門

h5c3 meetup - accessibility & webgl

webgl -...

jsc webgl spider model

sv webgl/webvr gdc 2019 meetup - khronos group › ... ›...

webgl - university of pennsylvania

introduzione a webgl

webgl · title: webgl author: carlos samuel cantero...

wk6 webgl 2

hpc visualization with webgl