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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 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.