A software rendered 3D Wireframe Cube demo for HTML5. No 3D libraries and no HTML Canvas are used. The 3D transformations and 3Dโ2D calculations are done in the JavaScript code.
This demo modulates the the vertices of SVG polygons on the DOM to produce a rotating 3D cube. No HTML Canvas is used. The rendered triangles are in fact <polygon>
elements nested within an <svg>
element. The value of the points
attribute for each <polygon>
is changed every frame (using setInterval
) based on the the 2D coordinates obtained from the 3Dโ2D projection of the triangles in 3D space calculated explicitly in the JavaScript.
This demo was inspired by One Lone Coder / javidx9's brilliant video tutorial on building a 3D engine from scratch in C++. If you are new to 3D graphics or software rendering, I highly recommend you watch his tutorial here.