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

▶
web computer graphics
SMART_READER_LITE
LIVE PREVIEW

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

Sep 15, 2022 324 likes •614 views

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,

slide-1
SLIDE 1

MTAT.03.305 Computer Graphics Seminar

Introduction to Web GL, 2D and 3D web computer graphics

Yaroslava MALASH

Tartu, Estonia 2014

slide-2
SLIDE 2

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

slide-3
SLIDE 3

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

slide-4
SLIDE 4
  • 1. What is WebGL?
  • JavaScript API for rendering interactive 2D and 3D

graphics inside an HTML <canvas> element.

Browser Supports

Yaroslava Malash

slide-5
SLIDE 5

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

slide-6
SLIDE 6
  • 2. How do I run WebGL?

Yaroslava Malash http://en.wikipedia.org/wiki/OpenGL_ES

slide-7
SLIDE 7
  • 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

slide-8
SLIDE 8
  • 4. WebGL libraries

Yaroslava Malash

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

slide-9
SLIDE 9

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

slide-10
SLIDE 10

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

slide-11
SLIDE 11

Basic SVG shapes:

  • Rectangle
  • Circle
  • Ellipse
  • Line
  • Polygon
  • Polyline
  • Text
  • Stroking

More examples: http://www.w3schools.com/svg/svg_inhtml.asp

Yaroslava Malash

slide-12
SLIDE 12

How to use Raphael.js?

  • Download and include Raphael.js into your

html page

Your name

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

slide-13
SLIDE 13

Use Case:

Let’s create Interactive Map with Raphael.js

Yaroslava Malash

slide-14
SLIDE 14

Folder structure

Yaroslava Malash

slide-15
SLIDE 15

Index.HTML page

  • Create a simple html page

Yaroslava Malash

slide-16
SLIDE 16

SVG graphic

http://en.wikipedia.org/wiki/File:Blank_map_of_Europe_-_Atelier_graphique_colors.svg

Yaroslava Malash

slide-17
SLIDE 17

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
slide-18
SLIDE 18

var paths = { }

Yaroslava Malash

slide-19
SLIDE 19

Init.js

  • 1. Create a canvas for the Map

Yaroslava Malash

slide-20
SLIDE 20

Init.js

  • 2. Create event “Hover”

Yaroslava Malash

slide-21
SLIDE 21

Init.js

  • 3. Create event “Click”

Yaroslava Malash

slide-22
SLIDE 22

Init.js

  • 4. Add “close” button

Yaroslava Malash

slide-23
SLIDE 23

Index.html

Yaroslava Malash

slide-24
SLIDE 24

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

slide-25
SLIDE 25

Books

Yaroslava Malash

slide-26
SLIDE 26

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

slide-27
SLIDE 27
  • 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

slide-28
SLIDE 28

Thank you!

QUESTIONS?