3D Wireframe Engine: Live-Tessellated Solids in WebGL
Genuine WebGL companion to the 2D canvas wireframe engine: orbit a real Three.js cube, pyramid, sphere, torus or icosahedron, retessellate it live and switch between wireframe, solid and point-cloud rendering.
The 2D original draws its wireframe cubes, pyramids, spheres and tori by hand: every vertex is rotated with matrix math, projected to the screen with a manual perspective divide, and the resulting faces are depth-sorted with a software painter's algorithm before the canvas strokes a single line. This 3D companion keeps the same idea — pick a solid, watch its vertices and faces — but hands the actual math to the GPU. A real Three.js scene builds each geometry from live parameters (so raising the tessellation slider genuinely subdivides the sphere or torus into more triangles, not just a cosmetic relabel), a hand-rolled drag-to-orbit and scroll-to-zoom camera replaces the fixed 2D viewpoint, and a render-mode toggle switches the same geometry between wireframe, lit solid shading and a raw point cloud — three different ways of looking at the identical mesh, with a live vertex/triangle counter confirming what changed.
Genuine WebGL rendering via Three.js r128: BoxGeometry, ConeGeometry, SphereGeometry, TorusGeometry and IcosahedronGeometry are rebuilt live from a tessellation parameter, lit with ambient + two directional lights for solid mode, and orbited with a hand-rolled spherical-coordinate camera driven by pointer drag and wheel/pinch zoom.
3D · WebGL (Three.js r128) · 60 FPS target · runs fully client-side, no install
The 2D page projects 3D vertices onto a flat canvas by hand — it never touches a GPU. This page renders the same family of solids with real WebGL through Three.js, so lighting, depth and triangle count are all genuine, and you can orbit the camera freely instead of watching a fixed auto-rotating projection.
For the sphere, torus and icosahedron it changes the number of segments (or subdivision level) used to build the geometry, so the live vertex and triangle readout in the panel goes up or down with it — it is not a cosmetic label, the mesh is rebuilt from scratch each time.
Wireframe draws only the mesh edges (closest to the 2D original's look), solid applies real per-pixel lighting from three lights so you can read the surface curvature, and points renders only the vertices as a point cloud — useful for seeing exactly how tessellation distributes vertices over the surface.