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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

OWC 2012 (Open Web Camp)

1,053

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,053
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)

×