OWC 2012 (Open Web Camp)

3D Graphics with CSS3, jQuery,
CSS Shaders, and WebGL
OWC at PayPal
July 14, 2012
Oswald Campesato

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)

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)

CSS3 Flying Borg Cube (Demo #1)
• No toolkit for desktop version

• No toolkit for Android ICS Tablet

• PhoneGap/Cordova for iPad3

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 < 1
• “expand” if s1 or s4 is > 1

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

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

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)

CSS3 Bouncing Balls (Demo #2)
• jQuery css() function

• Simple JavaScript

• setTimeout() function

CSS3 Bouncing Cubes (Demo #3)

• jQuery clone() function


CSS3 Basic Pong Game (Demo #4)

• jQuery clone() function


• jQuery Mobile vmousemouse event

CSS3 Archimedean Spiral (Demo #5)

• Simple JavaScript

• CSS3 radial gradients

• CSS3 animation effects (keyframes)

CSS3 3D Animation (Demo #6)
• CSS3 3D rotate() function

• CSS3 3D scale() function

• CSS3 skew() function

• CSS3 matrix() function

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

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));

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;

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;
• }

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

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

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)

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

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 W3C CSS Shaders Specification for details

• Adobe CSS Shaders examples:
http://adobe.github.com/web-platform/samples/css-
shaders/

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/three.js/

• Code stability between versions

• Code sample: README file

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/

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/

A Torus in 2 Lines with tQuery.js
<script>
var world =
tQuery.createWorld().boilerplate().start();

var object =
tQuery.createTorus().addTo(world);
</script>

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

WebGL Demos and Samples
• Kaazing (multiple demos) racing car:
+ http://kaazing.com/demo

• Tony Parisi (code samples):
https://github.com/tparisi/WebGLBook

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

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)

OWC 2012 (Open Web Camp)

More Related Content

What's hot (7)

Similar to OWC 2012 (Open Web Camp) (20)

More from Oswald Campesato (20)

Recently uploaded (20)

OWC 2012 (Open Web Camp)