ZeroDayArcade / HTML5_3D-Wireframe-Cube

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

Home Page:https://zerodayarcade.com/demos/3d-wireframe

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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