SlideShare a Scribd company logo

OWC 2012 (Open Web Camp)

•Download as PPT, PDF•
•
Oswald Campesato
Oswald Campesato

This document discusses 3D graphics techniques using CSS3, jQuery, CSS shaders, and WebGL. It provides demonstrations of 3D effects created with only CSS3 and jQuery mobile code. CSS shaders and WebGL allow more complex 3D graphics by using vertex and fragment shaders. Toolkits like Three.js and tQuery.js simplify working with WebGL. The document recommends books and meetups for learning more about these technologies.

Related slideshows

D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
D3 js
D3 jsD3 js
D3 js
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
1 of 34
3D Graphics with CSS3, jQuery, CSS Shaders, and WebGL OWC at PayPal July 14, 2012 Oswald Campesato
Demo-Oriented Presentation • Mobile devices: Asus Prime Android Tablet (ICS) Sprint Nexus S 4G (ICS) iPad3 • Hybrid Mobile Apps: CSS3, jQuery, and jQuery Mobile Simple JavaScript PhoneGap (for iPad3)
CSS3 Flying Borg Cube (Demo #1) • CSS3 skew (for the three cube faces) • CSS3 3D linear/radial gradients • CSS3 3D transforms • CSS3 3D animation effects (keyframes)
CSS3 Flying Borg Cube (Demo #1) • No toolkit for desktop version • No toolkit for Android ICS Tablet • PhoneGap/Cordova for iPad3
CSS3 Matrix (1) • CSS3 matrix(a1,a2,a3,a4,a5,a6): a1 a3 a5 a2 a4 a6 0 0 1
CSS3 Matrix (2) • CSS3 Identity matrix(1, 0, 0, 1, 0, 0): 1 0 0 0 1 0 0 0 1
CSS3 Matrix (3) • CSS3 “scale” matrix(s1, 0, 0, s4, 0, 0): s1 0 0 0 s4 0 0 0 1 • “shrink” if s1 or s4 is < 1 • “expand” if s1 or s4 is > 1
CSS3 Matrix (4) • CSS3 “skew” matrix(a1, sy, sx, a4, 0, 0): a1 sx 0 sy a4 0 0 0 1 • “skew X” if sx != 0 • “skew Y” if sy != 0
CSS3 Matrix (5) • CSS3 “translate” matrix(a1, 0, 0, a4, tx, ty): a1 0 tx 0 a4 ty 0 0 1 • “translate X” if tx != 0 • “translate Y” if ty != 0
CSS3 Matrix (6) • CSS3 “rotate” matrix(ct, st, -st, ct, 0, 0): ct -st 0 st ct 0 0 0 1 • ct = cosine (t) and st = sine(t)
CSS3 Bouncing Balls (Demo #2) • jQuery css() function • Simple JavaScript • setTimeout() function
CSS3 Bouncing Cubes (Demo #3) • jQuery css() function • jQuery clone() function • setTimeout() function
CSS3 Basic Pong Game (Demo #4) • jQuery css() function • jQuery clone() function • setTimeout() function • jQuery Mobile vmousemouse event
CSS3 Archimedean Spiral (Demo #5) • jQuery css() function • Simple JavaScript • CSS3 radial gradients • CSS3 animation effects (keyframes)
CSS3 3D Animation (Demo #6) • CSS3 3D rotate() function • CSS3 3D scale() function • CSS3 skew() function • CSS3 matrix() function
CSS Shaders • CSS Shaders (“WebGL for CSS3”) use: + Vertex shaders (project points from 3D to 2D) + Fragment shaders (pixel coloring) • Shaders use a C-like language (GLSL) • W3C specification (early stage): https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/in
CSS Shaders in CSS selectors • #1: use the filter property in CSS Selectors and reference a Vertex Shader file: • -webkit-filter: custom( url(shaders/frequency1.vs), 10 10, phase 50.0, frequency -2.0, amplitude 10, txf rotateX(30deg));
CSS Shaders (GLSL code) • #2: define variables (matching the CSS names) in the shaders/frequency1.vs file: • uniform mat4 txf; • uniform float phase; • uniform float amplitude; • uniform float frequency; • const float PI = 3.1415; • const float degToRad = PI/180.0;
CSS Shaders (GLSL Code) • #3: GLSL transformation code: • void main() { • v_texCoord = a_texCoord; • vec4 pos = vec4(a_position, 1.0); • float phi = degToRad * phase; • pos.z = cos(pos.x * PI * 1.0 + phi); • gl_Position = u_projectionMatrix * txf * pos; • }
OpenGL (in brief) • + created in 1992 • + a cross-platform 3D drawing standard • + widely used in gaming • + computer-aided design apps • + counterpart to Microsoft’s Direct3D • + currently at specification version 4.0
WebGL (in brief) • "JavaScript meets OpenGL” • an API for 3D graphics • standardization: Khronos Group • a binding for OpenGL ES 2 in JavaScript • uses the programmable graphics pipeline • getContext("moz-webgl") on a canvas element
WebGL (when/why?) • highly flexible rendering effects • applied to 3D scenes • increases the realism of displays • less complex than OpenGL • security issues (according to Microsoft)
WebGL Shaders (2 Types) • WebGL vertex shaders: + perform transforms and + calculate 3D->2D projection • WebGL fragment shaders: + use linear interpolation to compute colors and apply them to pixels
HTML5 Apps with WebGL • + HTML for structure • + CSS for style • + JavaScript for logic • + GLSL for shaders
CSS Shaders and WebGL • CSS Vertex Shaders = WebGL Vertex Shaders • CSS Fragment Shaders != WebGL Fragment Shaders • Read the W3C CSS Shaders Specification for details • Adobe CSS Shaders examples: http://adobe.github.com/web-platform/samples/css- shaders/
Toolkits for WebGL • Three.js (a JS layer on top of WebGL) • tQuery.js (a layer on top of Three.js) • Other toolkits
Three.js (“Mr Doob”) • A JS layer of abstraction over WebGL • Download link (and code samples): https://github.com/mrdoob/three.js/ • Code stability between versions • Code sample: README file
How to Use Three.js • You need to do 3 things: + 1) create a scene (things people will see) + 2) create a camera (which can be moved) + 3) create a renderer (Canvas/WebGL/SVG) • Simple example (README file): https://github.com/mrdoob/three.js/
What is tQuery.js? • A jQuery plugin and layer over Three.js • tQuery = Three.js + jQuery • Simpler than Three.js • Download page (and code samples): http://jeromeetienne.github.com/tquery/
A Torus in 2 Lines with tQuery.js <script> var world = tQuery.createWorld().boilerplate().start(); var object = tQuery.createTorus().addTo(world); </script>
Multi-Media Fusion (Demo) • http://www.technitone.com/ • Uses the following 7 technologies: • WebGL and Web Sockets • Canvas, CSS3, and Javascript • Flash, and Web Audio API
WebGL Demos and Samples • Kaazing (multiple demos) racing car: + http://kaazing.com/demo • Tony Parisi (code samples): https://github.com/tparisi/WebGLBook
Open Source Projects • Projects on http://code.google.com/p: + css3-graphics and html5-canvas-graphics + css-shaders-graphics and css3-jQuery-graphics + svg-graphics and svg-filters-graphics + D3, jQuery, Raphael, Google Go + Dart, Easel.js, JavaFX 2.0
Books and Meetup • Upcoming Books (Q4/2012): 1) HTML5 Canvas and CSS3 Graphics Primer 2) jQuery, CSS3, and HTML5 for Mobile • WebGL meetup SF (Tony Parisi): http ://www.meetup.com/WebGL-Developers-Me / • “WebGL: Up and Running” (Tony Parisi)

More Related Content

OWC 2012 (Open Web Camp)

  • 1. 3D Graphics with CSS3, jQuery, CSS Shaders, and WebGL OWC at PayPal July 14, 2012 Oswald Campesato
  • 2. Demo-Oriented Presentation • Mobile devices: Asus Prime Android Tablet (ICS) Sprint Nexus S 4G (ICS) iPad3 • Hybrid Mobile Apps: CSS3, jQuery, and jQuery Mobile Simple JavaScript PhoneGap (for iPad3)
  • 3. CSS3 Flying Borg Cube (Demo #1) • CSS3 skew (for the three cube faces) • CSS3 3D linear/radial gradients • CSS3 3D transforms • CSS3 3D animation effects (keyframes)
  • 4. CSS3 Flying Borg Cube (Demo #1) • No toolkit for desktop version • No toolkit for Android ICS Tablet • PhoneGap/Cordova for iPad3
  • 5. CSS3 Matrix (1) • CSS3 matrix(a1,a2,a3,a4,a5,a6): a1 a3 a5 a2 a4 a6 0 0 1
  • 6. CSS3 Matrix (2) • CSS3 Identity matrix(1, 0, 0, 1, 0, 0): 1 0 0 0 1 0 0 0 1
  • 7. CSS3 Matrix (3) • CSS3 “scale” matrix(s1, 0, 0, s4, 0, 0): s1 0 0 0 s4 0 0 0 1 • “shrink” if s1 or s4 is < 1 • “expand” if s1 or s4 is > 1
  • 8. CSS3 Matrix (4) • CSS3 “skew” matrix(a1, sy, sx, a4, 0, 0): a1 sx 0 sy a4 0 0 0 1 • “skew X” if sx != 0 • “skew Y” if sy != 0
  • 9. CSS3 Matrix (5) • CSS3 “translate” matrix(a1, 0, 0, a4, tx, ty): a1 0 tx 0 a4 ty 0 0 1 • “translate X” if tx != 0 • “translate Y” if ty != 0
  • 10. CSS3 Matrix (6) • CSS3 “rotate” matrix(ct, st, -st, ct, 0, 0): ct -st 0 st ct 0 0 0 1 • ct = cosine (t) and st = sine(t)
  • 11. CSS3 Bouncing Balls (Demo #2) • jQuery css() function • Simple JavaScript • setTimeout() function
  • 12. CSS3 Bouncing Cubes (Demo #3) • jQuery css() function • jQuery clone() function • setTimeout() function
  • 13. CSS3 Basic Pong Game (Demo #4) • jQuery css() function • jQuery clone() function • setTimeout() function • jQuery Mobile vmousemouse event
  • 14. CSS3 Archimedean Spiral (Demo #5) • jQuery css() function • Simple JavaScript • CSS3 radial gradients • CSS3 animation effects (keyframes)
  • 15. CSS3 3D Animation (Demo #6) • CSS3 3D rotate() function • CSS3 3D scale() function • CSS3 skew() function • CSS3 matrix() function
  • 16. CSS Shaders • CSS Shaders (“WebGL for CSS3”) use: + Vertex shaders (project points from 3D to 2D) + Fragment shaders (pixel coloring) • Shaders use a C-like language (GLSL) • W3C specification (early stage): https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/in
  • 17. CSS Shaders in CSS selectors • #1: use the filter property in CSS Selectors and reference a Vertex Shader file: • -webkit-filter: custom( url(shaders/frequency1.vs), 10 10, phase 50.0, frequency -2.0, amplitude 10, txf rotateX(30deg));
  • 18. CSS Shaders (GLSL code) • #2: define variables (matching the CSS names) in the shaders/frequency1.vs file: • uniform mat4 txf; • uniform float phase; • uniform float amplitude; • uniform float frequency; • const float PI = 3.1415; • const float degToRad = PI/180.0;
  • 19. CSS Shaders (GLSL Code) • #3: GLSL transformation code: • void main() { • v_texCoord = a_texCoord; • vec4 pos = vec4(a_position, 1.0); • float phi = degToRad * phase; • pos.z = cos(pos.x * PI * 1.0 + phi); • gl_Position = u_projectionMatrix * txf * pos; • }
  • 20. OpenGL (in brief) • + created in 1992 • + a cross-platform 3D drawing standard • + widely used in gaming • + computer-aided design apps • + counterpart to Microsoft’s Direct3D • + currently at specification version 4.0
  • 21. WebGL (in brief) • "JavaScript meets OpenGL” • an API for 3D graphics • standardization: Khronos Group • a binding for OpenGL ES 2 in JavaScript • uses the programmable graphics pipeline • getContext("moz-webgl") on a canvas element
  • 22. WebGL (when/why?) • highly flexible rendering effects • applied to 3D scenes • increases the realism of displays • less complex than OpenGL • security issues (according to Microsoft)
  • 23. WebGL Shaders (2 Types) • WebGL vertex shaders: + perform transforms and + calculate 3D->2D projection • WebGL fragment shaders: + use linear interpolation to compute colors and apply them to pixels
  • 24. HTML5 Apps with WebGL • + HTML for structure • + CSS for style • + JavaScript for logic • + GLSL for shaders
  • 25. CSS Shaders and WebGL • CSS Vertex Shaders = WebGL Vertex Shaders • CSS Fragment Shaders != WebGL Fragment Shaders • Read the W3C CSS Shaders Specification for details • Adobe CSS Shaders examples: http://adobe.github.com/web-platform/samples/css- shaders/
  • 26. Toolkits for WebGL • Three.js (a JS layer on top of WebGL) • tQuery.js (a layer on top of Three.js) • Other toolkits
  • 27. Three.js (“Mr Doob”) • A JS layer of abstraction over WebGL • Download link (and code samples): https://github.com/mrdoob/three.js/ • Code stability between versions • Code sample: README file
  • 28. How to Use Three.js • You need to do 3 things: + 1) create a scene (things people will see) + 2) create a camera (which can be moved) + 3) create a renderer (Canvas/WebGL/SVG) • Simple example (README file): https://github.com/mrdoob/three.js/
  • 29. What is tQuery.js? • A jQuery plugin and layer over Three.js • tQuery = Three.js + jQuery • Simpler than Three.js • Download page (and code samples): http://jeromeetienne.github.com/tquery/
  • 30. A Torus in 2 Lines with tQuery.js <script> var world = tQuery.createWorld().boilerplate().start(); var object = tQuery.createTorus().addTo(world); </script>
  • 31. Multi-Media Fusion (Demo) • http://www.technitone.com/ • Uses the following 7 technologies: • WebGL and Web Sockets • Canvas, CSS3, and Javascript • Flash, and Web Audio API
  • 32. WebGL Demos and Samples • Kaazing (multiple demos) racing car: + http://kaazing.com/demo • Tony Parisi (code samples): https://github.com/tparisi/WebGLBook
  • 33. Open Source Projects • Projects on http://code.google.com/p: + css3-graphics and html5-canvas-graphics + css-shaders-graphics and css3-jQuery-graphics + svg-graphics and svg-filters-graphics + D3, jQuery, Raphael, Google Go + Dart, Easel.js, JavaFX 2.0
  • 34. Books and Meetup • Upcoming Books (Q4/2012): 1) HTML5 Canvas and CSS3 Graphics Primer 2) jQuery, CSS3, and HTML5 for Mobile • WebGL meetup SF (Tony Parisi): http ://www.meetup.com/WebGL-Developers-Me / • “WebGL: Up and Running” (Tony Parisi)