# D016 - WebGL Uses Plain Three Not R3F

> D016 - WebGL Uses Plain Three Not R3F: a note from the Obsidian vault behind https://saifsiddiqui.in.

Canonical URL: https://saifsiddiqui.in/hi/brain/d016-webgl-uses-plain-three-not-r3f/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/brain/d016-webgl-uses-plain-three-not-r3f/ · kn: https://saifsiddiqui.in/kn/brain/d016-webgl-uses-plain-three-not-r3f/ · ur: https://saifsiddiqui.in/ur/brain/d016-webgl-uses-plain-three-not-r3f/ · te: https://saifsiddiqui.in/te/brain/d016-webgl-uses-plain-three-not-r3f/ · ar: https://saifsiddiqui.in/ar/brain/d016-webgl-uses-plain-three-not-r3f/ · hi-Latn: https://saifsiddiqui.in/hi-latn/brain/d016-webgl-uses-plain-three-not-r3f/

**Type:** decision  
**Status:** accepted  
**Created:** 2026-07-17  
**Tags:** decision, webgl, performance

## D016: Hero uses plain three.js, not R3F

**Context:** The spec specified React Three Fiber (R3F) for the [WebGL Hero](/brain/webgl-hero/) with a `< ~120KB gz` budget. In practice those conflict: R3F v9 dynamic-imports the whole `three` namespace → measured **241KB gz**, double the budget.

**Decision:** Rewrote the scene as **plain three.js with named imports**, **129KB gz**, same visual, same React lifecycle. Accepted (shipped in [Phase 3A - WebGL and Graph](/brain/phase-3a-webgl-and-graph/)).

**Why:** Honors the "performance is a feature" principle ([North Star - Site as Proof](/brain/north-star-site-as-proof/)) without changing the look. 129KB is marginally over the ~120KB target but is **lazy, post-LCP, desktop-only** (degraded devices download none of it), so real-world impact is negligible, desktop LCP measured 0.6s.

**Open option (Saif's call):** the shader is simple enough to run on **raw WebGL (~3KB)**, dropping ~126KB. Recommended if we want the budget met with huge margin; the only cost is a bit more bespoke GL boilerplate and less future scene flexibility (unlikely to matter for one static field). If chosen, update this note.

**Trade-offs:** plain three = manual scene wiring vs R3F ergonomics; fine for a single field. Supersedes the "R3F" mention in the stack table + [WebGL Hero](/brain/webgl-hero/).

## से लिंक किया गया

- [Open Questions](/hi/brain/open-questions/)
- [Phase 3A - WebGL and Graph](/hi/brain/phase-3a-webgl-and-graph/)
- [Portfolio Brain](/hi/brain/portfolio-brain/)
- [Roadmap](/hi/brain/roadmap/)
- [WebGL Hero](/hi/brain/webgl-hero/)

सभी नोट्स: [/hi/brain/](/hi/brain/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages