Skip to content

A software rendered 3D Wireframe Cube demo for HTML. No 3D libraries and no Canvas used

License

Notifications You must be signed in to change notification settings

ZeroDayArcade/HTML5_3D-Wireframe-Cube

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Wireframe Cube - JavaScript Software Rendering

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.


3dwf


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.

See the Live Demo