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)