Successfully reported this slideshow.
3D Graphics with CSS3, jQuery,   CSS Shaders, and WebGL          OWC at PayPal           July 14, 2012        Oswald Campe...
Demo-Oriented Presentation• Mobile devices:Asus Prime Android Tablet (ICS)Sprint Nexus S 4G (ICS)iPad3• Hybrid Mobile Apps...
CSS3 Flying Borg Cube (Demo #1)• CSS3 skew (for the three cube faces)• CSS3 3D linear/radial gradients• CSS3 3D transforms...
CSS3 Flying Borg Cube (Demo #1)• No toolkit for desktop version• No toolkit for Android ICS Tablet• PhoneGap/Cordova for i...
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 ...
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 !...
CSS3 Matrix (5)• CSS3 “translate” matrix(a1, 0, 0, a4, tx, ty):  a1 0       tx  0    a4 ty  0     0     1• “translate X” i...
CSS3 Matrix (6)• CSS3 “rotate” matrix(ct, st, -st, ct, 0, 0): ct    -st    0 st     ct    0 0       0    1• ct = cosine (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 vmous...
CSS3 Archimedean Spiral (Demo #5)• jQuery css() function• Simple JavaScript• CSS3 radial gradients• CSS3 animation effects...
CSS3 3D Animation (Demo #6)• CSS3 3D rotate() function• CSS3 3D scale() function• CSS3 skew() function• CSS3 matrix() func...
CSS Shaders• CSS Shaders (“WebGL for CSS3”) use: + Vertex shaders (project points from 3D to 2D) + Fragment shaders (pixel...
CSS Shaders in CSS selectors• #1: use the filter property in CSS Selectors and reference a Vertex Shader file:• -webkit-fi...
CSS Shaders (GLSL code)• #2: define variables (matching the CSS names)  in the shaders/frequency1.vs file:• uniform mat4 t...
CSS Shaders (GLSL Code)• #3: GLSL transformation code:• void main() {• v_texCoord = a_texCoord;• vec4 pos = vec4(a_positio...
OpenGL (in brief)•   + created in 1992•   + a cross-platform 3D drawing standard•   + widely used in gaming•   + computer-...
WebGL (in brief)•   "JavaScript meets OpenGL”•   an API for 3D graphics•   standardization: Khronos Group•   a binding for...
WebGL (when/why?)•   highly flexible rendering effects•   applied to 3D scenes•   increases the realism of displays•   les...
WebGL Shaders (2 Types)• WebGL vertex shaders:  + perform transforms and  + calculate 3D->2D projection• WebGL fragment sh...
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...
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/t...
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 b...
What is tQuery.js?• A jQuery plugin and layer over Three.js• tQuery = Three.js + jQuery• Simpler than Three.js• Download p...
A Torus in 2 Lines with tQuery.js<script> var world =     tQuery.createWorld().boilerplate().start();  var object =    tQu...
Multi-Media Fusion (Demo)• http://www.technitone.com/•   Uses the following 7 technologies:•   WebGL and Web Sockets•   Ca...
WebGL Demos and Samples• Kaazing (multiple demos) racing car:+ http://kaazing.com/demo• Tony Parisi (code samples):https:/...
Open Source Projects• Projects on http://code.google.com/p:+ css3-graphics and html5-canvas-graphics+ css-shaders-graphics...
Books and Meetup• Upcoming Books (Q4/2012):1) HTML5 Canvas and CSS3 Graphics Primer2) jQuery, CSS3, and HTML5 for Mobile• ...
Upcoming SlideShare
Loading in …5
×

OWC 2012 (Open Web Camp)

1,560 views

Published on

Published in: Technology, Education
  • Be the first to comment

OWC 2012 (Open Web Camp)

  1. 1. 3D Graphics with CSS3, jQuery, CSS Shaders, and WebGL OWC at PayPal July 14, 2012 Oswald Campesato
  2. 2. Demo-Oriented Presentation• Mobile devices:Asus Prime Android Tablet (ICS)Sprint Nexus S 4G (ICS)iPad3• Hybrid Mobile Apps:CSS3, jQuery, and jQuery MobileSimple JavaScriptPhoneGap (for iPad3)
  3. 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. 4. CSS3 Flying Borg Cube (Demo #1)• No toolkit for desktop version• No toolkit for Android ICS Tablet• PhoneGap/Cordova for iPad3
  5. 5. CSS3 Matrix (1)• CSS3 matrix(a1,a2,a3,a4,a5,a6): a1 a3 a5 a2 a4 a6 0 0 1
  6. 6. CSS3 Matrix (2)• CSS3 Identity matrix(1, 0, 0, 1, 0, 0): 1 0 0 0 1 0 0 0 1
  7. 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. 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. 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. 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. 11. CSS3 Bouncing Balls (Demo #2)• jQuery css() function• Simple JavaScript• setTimeout() function
  12. 12. CSS3 Bouncing Cubes (Demo #3)• jQuery css() function• jQuery clone() function• setTimeout() function
  13. 13. CSS3 Basic Pong Game (Demo #4)• jQuery css() function• jQuery clone() function• setTimeout() function• jQuery Mobile vmousemouse event
  14. 14. CSS3 Archimedean Spiral (Demo #5)• jQuery css() function• Simple JavaScript• CSS3 radial gradients• CSS3 animation effects (keyframes)
  15. 15. CSS3 3D Animation (Demo #6)• CSS3 3D rotate() function• CSS3 3D scale() function• CSS3 skew() function• CSS3 matrix() function
  16. 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. 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. 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. 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. 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. 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. 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. 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. 24. HTML5 Apps with WebGL• + HTML for structure• + CSS for style• + JavaScript for logic• + GLSL for shaders
  25. 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. 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. 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. 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. 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. 30. A Torus in 2 Lines with tQuery.js<script> var world = tQuery.createWorld().boilerplate().start(); var object = tQuery.createTorus().addTo(world);</script>
  31. 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. 32. WebGL Demos and Samples• Kaazing (multiple demos) racing car:+ http://kaazing.com/demo• Tony Parisi (code samples):https://github.com/tparisi/WebGLBook
  33. 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. 34. Books and Meetup• Upcoming Books (Q4/2012):1) HTML5 Canvas and CSS3 Graphics Primer2) jQuery, CSS3, and HTML5 for Mobile• WebGL meetup SF (Tony Parisi):http ://www.meetup.com/WebGL-Developers-Me /• “WebGL: Up and Running” (Tony Parisi)

×