Render objects and polygons in a 3D space with SVG.
This demo uses the SVG spec 1.1, thus you will need Internet Explorer 9+ to see it.
Out of interest in learning about how 3D projections work, I set out to build a 3D scene renderer. I thought to use SVG because:
- It is a widely supported and very portable technology
- 3D vector rendering seemed simpler when I wanted to allow for DOM events on 3D surfaces/objects. This lets me "paint a 3D scene" without rendering
(window.width * window.height)pixels each frame.
Try it on your iPad / iPhone / Android / mobile device, too!
- Create standard environment events (click, drag, scroll) and some variables
- Initialize a "Building" as an example 3D object
- Read in some geometric variables, create a list of 3D polygons
- Generate random colors for each wall, since I don't care about color
- Setup the "camera" (focal point) with some variables built from the Building's 3D object
- Setup the
<SVGPolygonElement>s inside the<SVG>element - Calculate distances between each surface and the camera
- Distances are calculated with a single 3D point at the center of each 3D Polygon
- Rearrange each
<SVGPolygonElement>in the HTML by distance from the camera- Sets the rendering order of each surface, e.g. the back wall of the building gets rendered behind the front wall
- Calculate projections from each 3D point in each
<SVGPolygonElement>onto the 2D screen. - Handle dragging, scrolling, and zooming events and manipulate the rotation and zoom of the scene.
See the demo.
In case you can't view this demo, check out this video.