Engin Yağız Hatay gave a presentation on graphics and animation capabilities in web browsers. He discussed several technologies including CSS3, Canvas, SVG, and WebGL, and when each is best suited. He provided details on HTML5 Canvas capabilities and limitations. Hatay also covered browser support for these technologies and recommended several JavaScript libraries that can be used to create graphics and animations, including PaperJS, ProcessingJS, and ThreeJS. He concluded with a discussion of tools and frameworks for mobile graphics development.
5. Graphics in Browser
• CSS3 /Canvas / SVG / WebGL / Flash
• Which one to use ?
• User Interfaces ?
• Rounded Corners, Shadows ?
• 3D ?
• Games, Fractals?
• Animations ?
• Scalable images ?
6. HTML5 - Canvas
• 2D Drawing platform
• All you need is plain JavaScript
• Created by Apple (Used for dashboard
widgets)
• Now it’s an HTML5 Standard
• «Resolution dependent bitmap»
Which means every visual is represented by
pixels (non-vectoral)
7. HTML5-Canvas (cont.)
• You can save the resulting image as a .png or
.jpg.
• There are no DOM nodes for anything you
draw. It is all pixels.
• Not suited for Web site or application user
interfaces.
• Requires you to manually redraw each
element in the interface
8. Some Details
• «Proxying canvases to workers»
• What is a worker ?
• Workers are unable to reach DOM elements
• So we need a proxy
• canvasProxy = canvas . transferControlToProxy()
• canvasProxy . setContext(context)
9. SVG
• Resolution independent
• Allows scaling for any screen resolution.
• Very good support for animations. Elements can be
animated using a declarative syntax, or via JavaScript.
• Better solution for Web application user interfaces
10. WebGL
• WebGL is a cross-platform web standard
• Low-level 3D graphics API based on OpenGL
ES 2.0 (Shaders/GLSL)
• Exposed through the HTML5 Canvas element
as Document Object Model interfaces.
• canvas context mode :
CanvasRenderingContext2D
WebGLRenderingContext
13. Libraries
• PaperJS – Hard to Debug – PaperScript
• Easel.js/Kinetic.js/Fabric.js
• ProcessingJS – Own language - .pde files
• RaphaelJS – SVG in every browser
• ThreeJS - http://threejs.org/ - 3D JS – WebGL
• SeriouslyJS – Interesting WebGL library
(Your shortcut to useful shaders – Great for
video and image manipulation)
14. Performance
• Hardware Acceleration
• Pre-rendering
Off-screen Canvas
• Batching canvas calls
Single draw call
• Renderers: special for
js,canvas and audio
Ex: Ejecta http://bit.ly/cQ743c
15. Tools
• JS Performance Monitor – Stats.js
https://github.com/mrdoob/stats.js
• Ai to Canvas – Drawing,Animation,Built-in
Events
http://visitmix.com/labs/ai2canvas/
16. Mobile Graphics / Creative Coding
openFrameworks (C++)
ProcessınG / Processıngjs
(Java/JS)
libCınder (C++)
Graphics Libraries (OpenGL, GLUT,)
Utilities (FreeType, Poco,Assimp)
Tools(OpenCV),MathLibraries
I/O,Sound,Video,Import-Export
Top IDEs (Processing has its own IDE)
Powerful
Large Communities (Processing & OF)
Cross Platform (Android/IOS/Mac/PC/Linux)