3D shapes using SVG or WebGL

Question

Hi I want to render an interactive 3D sphere in browser. The texture on it will be of a world map, so basically I am trying to create a globe which is rotatable in any direction using map. I am comfortable in rendering 2D images using SVG but not sure how to render 3D shapes in SVG. Is it possible to render a 3D shape in SVG, if yes, how? If not, is WebGl a better option?

`I want to render an interactive 3D sphere in browser` - which browser? — RobertO, May 23 '11 at 10:38

score 11 · Answer 1 · answered May 24 '11 at 08:17

11

Have a look at three.js which abstracts the implementation a bit (comes with WebGL/SVG/Canvas backends).

SVG is a 2d vector graphics format, but you can project 3d shapes onto 2d, so it's possible to render 3d objects with SVG, it's just a bit of work (best left to javascript libraries).

answered May 24 '11 at 08:17

Erik Dahlström

59,452
12
120
139

"SVG is a 2d vector graphics format, but you can project 3d shapes onto 2d". I agree but is it possible to make them interactive? can I rotate the 3d sphere which I create in svg? – alter May 25 '11 at 10:05
3

Any shape in svg can be interactive, but SVG itself has no clue that certain shapes are representing a 3d object. Here's a simple example (3d cube with mouseover handlers): http://apike.ca/prog_svg_threed.html – Erik Dahlström May 26 '11 at 07:10

score 10 · Accepted Answer · answered May 26 '11 at 03:42

10

WebGL is your best bet because of performance. You might be able to leverage (or at least learn from) demos like http://www.chromeexperiments.com/globe (see http://data-arts.appspot.com/globe-search). There are also other globe demos at http://www.chromeexperiments.com.

answered May 26 '11 at 03:42

brainjam

18,863
8
57
82

That's the best solution. It requires quite a lot of code and some OpenGL/GLSL/math knowledge though. – Artefact2 May 26 '11 at 05:14

score 4 · Answer 3 · answered Jun 16 '11 at 02:02

4

If you use SVG then shading is going to be a problem. Proper shading is not really possible in SVG, though you might be able to fake it a few select circumstances. For 3D definitely use WebGL if you have more than a dozen or so polygons in the model.

answered Jun 16 '11 at 02:02

posfan12

2,541
8
35
57

This is such a key point that for me it makes webGL not the better solution, but the *only* solution. Even if you manage to hack it together you'll spend much more time making it looks even slightly non-lego-like (not to mention work properly - clipping etc) in svg, than the extra time you'll spend making the webGL match SVG for interactivity. – Thomas Browne Dec 17 '12 at 13:01
@posfan12 I'm looking for help with a question. Searching SO, you are the only person to offer an opinion on shading SVG graphics. Please take a look at http://stackoverflow.com/questions/13905255/how-to-change-color-of-a-composite-svg-oject – Matt Stevens Dec 18 '12 at 02:05

score 2 · Answer 4 · answered Apr 16 '12 at 17:13

You must transform all point with a projection USe this to change point2D(x,y) in point3D(x,y,z):

  // Language Javascript

  // object Point 

  function Point(x,y,z){
    this.x = x;
    this.y = y;
    this.z = z; 
  }

 // Projection convert point 2D in 3D

  function ProjectionPoint(point){
    if ( !(point instanceof Point) )
    throw new TypeError("ProjectionPoint: incorrect type parameter");

    return { x: (point.x<<8)/(point.z+Zorig)+Xorig, 
             y: (point.y<<8)/(point.z+Zorig)+Yorig, 
             z:point.z  } 
 }

Make sure, you have defined your origine point under the variable Xorig, Yorig, Zorig

3D shapes using SVG or WebGL

4 Answers4