Interactive 3D SVG Visibility and Shading

Project information

Scalable Vector Graphics – SVG – is a format that describes two-dimensional vector graphics. This format is broadly used as a default way for describing 2D vector graphics. Rendering projections of three-dimensional scenes is not a functionality the creators had in mind when developing this format. Therefore, attempting to emulate the behavior of a 3D renderer using the .svg format causes some difficulties. The project analyzed the possibilities the SVG standard offers for rendering three-dimensional scenes. Attention was focused on the problem related to the correct visibility of elements in the scene and the implementation of basic lighting models (ambient and diffuse components were considered) in scenes consisting of triangular elements.

svg three.js shading JavaScript BSP tree