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.