Your SlideShare is downloading. ×
OWC 2012 (Open Web Camp)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

OWC 2012 (Open Web Camp)

1,016
views

Published on

Published in: Technology, Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,016
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 MobileSimple JavaScriptPhoneGap (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 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)