3D shapes using SVG or WebGL
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?
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).
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.
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.
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
精彩评论