SlideShare a Scribd company logo
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 css() function

• jQuery clone() function

• setTimeout() function
CSS3 Basic Pong Game (Demo #4)
• jQuery css() function

• jQuery clone() function

• setTimeout() function

• jQuery Mobile vmousemouse event
CSS3 Archimedean Spiral (Demo #5)
• jQuery css() function

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

More Related Content

What's hot

D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
Keenan Holloway
 
D3 js
D3 jsD3 js
D3 js
Ynon Perek
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
Blazing Cloud
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
PSTechSerbia
 
Trident International Graphics Workshop 2014 1/5
Trident International Graphics Workshop 2014 1/5Trident International Graphics Workshop 2014 1/5
Trident International Graphics Workshop 2014 1/5
Takao Wada
 
Sceneform SDK на практиці - UA Mobile 2019
Sceneform SDK на практиці - UA Mobile 2019Sceneform SDK на практиці - UA Mobile 2019
Sceneform SDK на практиці - UA Mobile 2019
Eugene Kurko
 
The Ring programming language version 1.9 book - Part 46 of 210
The Ring programming language version 1.9 book - Part 46 of 210The Ring programming language version 1.9 book - Part 46 of 210
The Ring programming language version 1.9 book - Part 46 of 210
Mahmoud Samir Fayed
 

What's hot (7)

D3 data visualization
D3 data visualizationD3 data visualization
D3 data visualization
 
D3 js
D3 jsD3 js
D3 js
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics WebGL and three.js - Web 3D Graphics
WebGL and three.js - Web 3D Graphics
 
Trident International Graphics Workshop 2014 1/5
Trident International Graphics Workshop 2014 1/5Trident International Graphics Workshop 2014 1/5
Trident International Graphics Workshop 2014 1/5
 
Sceneform SDK на практиці - UA Mobile 2019
Sceneform SDK на практиці - UA Mobile 2019Sceneform SDK на практиці - UA Mobile 2019
Sceneform SDK на практиці - UA Mobile 2019
 
The Ring programming language version 1.9 book - Part 46 of 210
The Ring programming language version 1.9 book - Part 46 of 210The Ring programming language version 1.9 book - Part 46 of 210
The Ring programming language version 1.9 book - Part 46 of 210
 

Similar to OWC 2012 (Open Web Camp)

Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
Oswald Campesato
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
Denise Jacobs
 
Hardboiled Web Design
Hardboiled Web DesignHardboiled Web Design
Hardboiled Web Design
Vincent Smedinga
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
Oswald Campesato
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise Jacobs
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
Denise Jacobs
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
Denise Jacobs
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
Oswald Campesato
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
Oswald Campesato
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
Justin Lee
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3
Gil Fink
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
 
Iagc2
Iagc2Iagc2
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
Mike Wilcox
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
Mongo db washington dc 2014
Mongo db washington dc 2014Mongo db washington dc 2014
Mongo db washington dc 2014
ikanow
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
Dave Balmer
 

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

Svcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobileSvcc 2013-css3-and-mobile
Svcc 2013-css3-and-mobile
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
Hardboiled Web Design
Hardboiled Web DesignHardboiled Web Design
Hardboiled Web Design
 
SVGD3Angular2React
SVGD3Angular2ReactSVGD3Angular2React
SVGD3Angular2React
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
HTML5 for ASP.NET Developers
HTML5 for ASP.NET DevelopersHTML5 for ASP.NET Developers
HTML5 for ASP.NET Developers
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
Iagc2
Iagc2Iagc2
Iagc2
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Thats Not Flash?
Thats Not Flash?Thats Not Flash?
Thats Not Flash?
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
Mongo db washington dc 2014
Mongo db washington dc 2014Mongo db washington dc 2014
Mongo db washington dc 2014
 
Rockstar Graphics with HTML5
Rockstar Graphics with HTML5Rockstar Graphics with HTML5
Rockstar Graphics with HTML5
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Recently uploaded

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 

Recently uploaded (20)

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 

OWC 2012 (Open Web Camp)

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