web computer graphics Yaroslava MALASH Tartu, Estonia 2014 - PowerPoint PPT Presentation

MTAT.03.305 Computer Graphics Seminar Introduction to Web GL, 2D and 3D web computer graphics Yaroslava MALASH Tartu, Estonia 2014

Background • International 2d year Master student at Tartu University • Faculty of Computer Science, Software Engineering Curriculum • 4 years experience of: Web application development and web-design • Hobby: Mountain ski – advance level, 3D graphic – beginner Yaroslava Malash

Outline 1. What’s WebGL? 2. How do I run WebGL? 3. What is WebGL used for? 4. WebGL libraries Use Case: Raphael.js Use Case: Three.js 5. Live Demo examples 6. References and Links Yaroslava Malash

1. What is WebGL? - JavaScript API for rendering interactive 2D and 3D graphics inside an HTML <canvas> element. Browser Supports Yaroslava Malash

Web GL basics • Web GL is an API • WebGL is based on OpenGL ES 2.0 • WebGL combines with other web content • WebGL is built for dynamic web applications • WebGL is cross-platform • WebGL is royalty free Yaroslava Malash

2. How do I run WebGL? http://en.wikipedia.org/wiki/OpenGL_ES Yaroslava Malash

3. What is WebGL used for? • 3D graphics in the browser • Interactive music videos • Data Visualization • 3D design environments • Creating physical simulation • 3D modeling of objects Yaroslava Malash

4. WebGL libraries • Three.js – http://threejs.org/ - is a lightweight 3D engine • Raphael.js - http://raphaeljs.com/ - is JS library, simplify works with vectors in Web not comprehensive list! Yaroslava Malash

Raphael.js Raphael.js – JavaScript library, that should simplify your work with vector graphics on Web. Use: SVG W3C Recommendation Currently support: Firefox 3.0+, Safari 3.0 +, Chrome 5.0, Opera 9.5+ and Explorer 6.0+!!! Yaroslava Malash

What’s SVG? • SVG stands for Scalable Vector Graphics. • SVG defines graphics in XML format. Input <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Sorry, your browser does not support inline SVG. </svg> Output ? Yaroslava Malash

Basic SVG shapes: • Rectangle • Circle • Ellipse • Line • Polygon • Polyline • Text • Stroking More examples: http://www.w3schools.com/svg/svg_inhtml.asp Yaroslava Malash

How to use Raphael.js? • Download and include Raphael.js into your html page // Creates canvas 320 × 200 at 10, 50 var paper = Raphael(10, 50, 320, 200); // Creates circle at x = 50, y = 40, with radius 10 var circle = paper.circle(50, 40, 10); // Sets the fill attribute of the circle to red (#f00) circle.attr("fill", "#f00"); // Sets the stroke attribute of the circle to white circle.attr("stroke", "#fff"); Your name

Use Case: Let’s create Interactive Map with Raphael.js Yaroslava Malash

Folder structure Yaroslava Malash

Index.HTML page • Create a simple html page Yaroslava Malash

SVG graphic http://en.wikipedia.org/wiki/File:Blank_map_of_Europe_-_Atelier_graphique_colors.svg Yaroslava Malash

Paths.js Paths.js – is a file where we will store the contours and the name of each country 1. Create a new object var paths = { } 2. Open SVG file in Notepad++ 3. Add all countries into our paths object

var paths = { } Yaroslava Malash

Init.js 1. Create a canvas for the Map Yaroslava Malash

Init.js 2. Create event “Hover” Yaroslava Malash

Init.js 3. Create event “Click” Yaroslava Malash

Init.js 4. Add “close” button Yaroslava Malash

Index.html Yaroslava Malash

Examples: • http://codepen.io/anon/pen/Clmev • http://www.senchalabs.org/philogl/PhiloGL/e xamples/temperatureAnomalies • http://www.cake23.de/traveling-wavefronts- lit-up.html Your name

Books Yaroslava Malash

Three.js • 3D Javascript Library • Renderers: WebGL, <canvas>, <svg> and more • Features: Scenes, Cameras, Geometry, 3D Model Loaders, Lights, Materials, Shaders, Particles, Animation, Math Utilities Example of code: http://davidscottlyons.com/threejs/presentations/frontporch14/#slide-16 Yaroslava Malash

5. References and Links • WebGL demo https://www.youtube.com/embed/KDQbXLXM_l4 • WedGL specification https://www.khronos.org/registry/webgl/specs/1.0/ • Dev.Opera https://dev.opera.com/articles/introduction-to- webgl-part-1/ • Three.js tutorials - http://aerotwist.com/tutorials/getting- started-with-three-js/ • WebGL blog http://learningwebgl.com/ • Three.js official webpage - http://threejs.org/ Yaroslava Malash

Thank you! QUESTIONS?