Complex Geometry in HTML!
summary
Builds a full first-person game entirely with HTML/CSS/JS and shows the exact techniques: using the DOMMatrix API to flatten transforms and convert local-to-world coordinates, generating lighting with normals and background-blend modes, producing soft ray casting shadows, and integrating WebGL sprites via billboarding. Demonstrates scalable triangles via overflow-hidden children so any mesh can be approximated, hits ~60fps on older mobile (practical limit ≈700–800 HTML faces), and uses LOD and visibility culling for performance.
AI-written summary · about
chapters (15)
- 0:00Start
- 5:553D Geometry: CSS 3D Transforms, in action
- 6:143D Geometry: Perspective Projection
- 6:533D Geometry: CSS Perspective
- 7:123D Geometry: Creating a basic scene - Camera
- 8:433D Geometry: Demo Time!
- 10:073D Geometry: CSS Matrix Transforms
- 11:023D Geometry: CSS Transforms Scene hierarchy
- 14:283D Geometry: lights & blend modes
- 14:473D Geometry: Shadows
- 15:23Advanced Geometry: Mixing with (real) 3D Content
- 17:02Performance?
- 17:24Advanced Geometry: Custom shapes with html css
- 19:14Lessons
- 21:18Closing Remarks
