Download - OWC 2012 (Open Web Camp)
![Page 1: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/1.jpg)
3D Graphics with CSS3, jQuery, CSS Shaders, and WebGL
OWC at PayPalJuly 14, 2012
Oswald Campesato
![Page 2: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/2.jpg)
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)
![Page 3: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/3.jpg)
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)
![Page 4: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/4.jpg)
CSS3 Flying Borg Cube (Demo #1)
• No toolkit for desktop version
• No toolkit for Android ICS Tablet
• PhoneGap/Cordova for iPad3
![Page 5: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/5.jpg)
CSS3 Matrix (1)
• CSS3 matrix(a1,a2,a3,a4,a5,a6):
a1 a3 a5 a2 a4 a6 0 0 1
![Page 6: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/6.jpg)
CSS3 Matrix (2)
• CSS3 Identity matrix(1, 0, 0, 1, 0, 0):
1 0 0 0 1 0 0 0 1
![Page 7: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/7.jpg)
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
![Page 8: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/8.jpg)
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
![Page 9: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/9.jpg)
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
![Page 10: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/10.jpg)
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)
![Page 11: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/11.jpg)
CSS3 Bouncing Balls (Demo #2)
• jQuery css() function
• Simple JavaScript
• setTimeout() function
![Page 12: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/12.jpg)
CSS3 Bouncing Cubes (Demo #3)
• jQuery css() function
• jQuery clone() function
• setTimeout() function
![Page 13: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/13.jpg)
CSS3 Basic Pong Game (Demo #4)
• jQuery css() function
• jQuery clone() function
• setTimeout() function
• jQuery Mobile vmousemouse event
![Page 14: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/14.jpg)
CSS3 Archimedean Spiral (Demo #5)
• jQuery css() function
• Simple JavaScript
• CSS3 radial gradients
• CSS3 animation effects (keyframes)
![Page 15: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/15.jpg)
CSS3 3D Animation (Demo #6)
• CSS3 3D rotate() function
• CSS3 3D scale() function
• CSS3 skew() function
• CSS3 matrix() function
![Page 16: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/16.jpg)
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/index.html
![Page 17: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/17.jpg)
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));
![Page 18: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/18.jpg)
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;
![Page 19: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/19.jpg)
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;• }
![Page 20: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/20.jpg)
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
![Page 21: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/21.jpg)
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
![Page 22: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/22.jpg)
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)
![Page 23: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/23.jpg)
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
![Page 24: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/24.jpg)
HTML5 Apps with WebGL
• + HTML for structure• + CSS for style• + JavaScript for logic• + GLSL for shaders
![Page 25: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/25.jpg)
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/
![Page 26: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/26.jpg)
Toolkits for WebGL
• Three.js (a JS layer on top of WebGL)
• tQuery.js (a layer on top of Three.js)
• Other toolkits
![Page 27: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/27.jpg)
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
![Page 28: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/28.jpg)
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/
![Page 29: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/29.jpg)
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/
![Page 30: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/30.jpg)
A Torus in 2 Lines with tQuery.js
<script> var world = tQuery.createWorld().boilerplate().start();
var object = tQuery.createTorus().addTo(world);</script>
![Page 31: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/31.jpg)
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
![Page 32: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/32.jpg)
WebGL Demos and Samples
• Kaazing (multiple demos) racing car:+ http://kaazing.com/demo
• Tony Parisi (code samples):https://github.com/tparisi/WebGLBook
![Page 33: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/33.jpg)
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
![Page 34: OWC 2012 (Open Web Camp)](https://reader035.vdocuments.net/reader035/viewer/2022081412/5442b6beb1af9f2d0a8b46cc/html5/thumbnails/34.jpg)
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-Meetup/• “WebGL: Up and Running” (Tony Parisi)