Leaving Flatland: Getting Started with WebGL- SXSW 2012
Upcoming SlideShare
Loading in...5
×
 

Leaving Flatland: Getting Started with WebGL- SXSW 2012

on

  • 4,168 views

 

Statistics

Views

Total Views
4,168
Views on SlideShare
3,555
Embed Views
613

Actions

Likes
2
Downloads
47
Comments
0

10 Embeds 613

http://lanyrd.com 594
http://bundlr.com 6
http://localhost 4
http://us-w1.rockmelt.com 2
http://bo.lt 2
http://creative.magazine.tm 1
http://nodeslide.herokuapp.com 1
https://si0.twimg.com 1
http://dev.lanyrd.org 1
http://sxswi.bo.lt 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Leaving Flatland: Getting Started with WebGL- SXSW 2012 Leaving Flatland: Getting Started with WebGL- SXSW 2012 Presentation Transcript

  • Leaving Flatland: Getting Started with WebGLSXSW 2012 - Luz Caballero - Nicolas Garcia Belmonte
  • Nicolas Garcia Belmonte - @philogbI use Web Standards to create Data Visualizations.
  • Luz Caballero - @gerbilleI’m a Web Opener, I evangelize Web Standards.
  • Agenda• What is WebGL?• What can WebGL be used for?• How does WebGL work?• Getting started with WebGL
  • What is WebGL ?
  • OpenGL OpenGL ES WebGL
  • desktop mobile
  • <canvas id=‘c’ width=‘100’ height=‘100’></canvas>document.getElementById(‘c’).getContext(‘webgl’)
  • What can WebGL be used for?
  • • Data visualization• Creative coding• Art• 3D design environments• Music videos• Plotting math functions• 3D modeling of objects & space• Creating textures• ...fast processing of any data
  • data visualization
  • creative coding
  • art
  • 3D design environments
  • music videos
  • plotting mathematical functions
  • 3D models of objects/space
  • gamesoperasoftware.github.com/Emberwind
  • creating textures
  • How does WebGL work?
  • Vertex ShaderTriangle Assembly RasterizationFragment Shader image source: http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html
  • JavaScriptWebGL JS API GPU (Compiled Program)
  • JavaScript [x1, y1, z1, x2, y2, z2, ...]WebGL JS API attributeGLSL API Vertex Shader uniformGLSL API Fragment Shader uniform varying
  • Getting started
  • The 3D scene image source: http://computer.yourdictionary.com/graphics
  • Choosing a library• Three.js• PhiloGL• GLGE• J3D• ...
  • desktop mobile
  • PhiloGL
  • HTML Document
  • How most people see a WebGL App: WebGL Canvas HTML Document
  • How we see a WebGL App: Web Workers Forms Images WebGL Canvas Audio Video 2D Canvas XHR(2)
  • Examples
  • PhiloGL• Idiomatic JavaScript• Rich Module System• Flexible and Performance Focused• Complete documentation
  • Idiomatic JavaScript 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 */    }  });
  • Module System • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers • Media
  • Other Examples
  • 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
  • Thanks! @philogb @gerbille