1Introduction
Clients ask for 3D websites because the best of them are unforgettable. The same technique, applied without purpose, produces sites that are slow on phones, tiring to use and difficult for search engines and assistive technology to read.
This paper treats the decision as a design question with measurable constraints. It reviews the technology and the relevant standards, then analyses three iBOY builds.
2Background: rendering and standards
Browsers expose the GPU through WebGL 2.0 [1] and, more recently, WebGPU, which offers a modern interface closer to native graphics APIs [2]. Research on scene representation has moved quickly: neural radiance fields synthesise novel views of a captured scene [3], and 3D Gaussian splatting achieves real-time rendering of such scenes [4], which points towards photographic 3D in ordinary web pages.
Performance and accessibility constraints are just as well defined. Core Web Vitals measure loading, responsiveness and visual stability [5]. WCAG 2.2 requires a way to pause moving content that starts automatically and lasts more than five seconds, and recommends allowing motion triggered by interaction to be disabled [6]. Operating systems expose a reduced motion preference that pages can read [7], and the Intersection Observer API lets a page know when an element is on screen [8].
Research on learning adds a caution. Tversky, Morrison and Betrancourt found that animation often failed to outperform equivalent static graphics, and argued it helps when it matches the structure of what it shows and is easy to perceive [9]. Mayer's coherence principle similarly recommends removing material that does not support the message [10].
3Method
We reviewed three builds qualitatively against four questions: does the 3D or motion carry information the page needs, is the main content and action available without waiting for it, does motion stop when off screen or when reduced motion is requested, and is the text readable as ordinary HTML. No lab performance measurements are reported in this paper.
4Case analysis
CONCEPT, an architecture website iBOY built as concept work, uses a short opening sequence, sculptural gold forms on a warm stone palette and a numbered presentation of selected works. Here the spatial and material qualities are the argument for a premium practice, so motion carries meaning.
MAKSH Architects designs architecture, interiors, landscapes and turnkey homes from studios in Bangalore, Hosur and Chennai. Its site deliberately avoids heavy 3D: large photography, generous space, a numbered list of nine disciplines and one consistent call to action. The photographs already carry the emotion, so a scene would compete with them.
The iBOY website uses a short intro film that plays once per visit, with the header revealed when it ends and returning visitors landing directly on the final frame. Its About page uses a WebGL particle scene. Every animation loop pauses when off screen through Intersection Observer, and a still frame replaces motion when reduced motion is requested.
5Findings
Across the three builds, 3D and motion were justified when they expressed something the page needed to communicate, such as form, material or sequence, and unjustified when they decorated content that photography or typography already served. In every justified case, the build kept content and the main action independent of the scene, paused loops off screen, and honoured reduced motion.
6Implementation: a render loop that respects the visitor
Two small pieces of code implement most of the findings. The first chooses the best renderer the browser offers and falls back to a still image. The second runs the render loop only while the canvas is visible and never when the visitor has asked for reduced motion [8] [7].
export type Renderer = 'webgpu' | 'webgl2' | 'static-image';
export function pickRenderer(canvas: HTMLCanvasElement): Renderer {
if ('gpu' in navigator) return 'webgpu';
if (canvas.getContext('webgl2')) return 'webgl2';
return 'static-image';
}export function visibleLoop(canvas: HTMLCanvasElement, draw: (time: number) => void) {
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
let frame = 0;
let visible = false;
const tick = (time: number) => {
draw(time);
frame = visible ? requestAnimationFrame(tick) : 0;
};
const observer = new IntersectionObserver(([entry]) => {
visible = entry.isIntersecting && !reduced.matches;
if (visible && !frame) frame = requestAnimationFrame(tick);
if (!visible) draw(0); // leave a complete still frame
});
observer.observe(canvas);
return () => { observer.disconnect(); cancelAnimationFrame(frame); };
}Key findings
- 01Detect WebGPU, then WebGL 2.0, then fall back to a still image.
- 02Run the loop only while the canvas is on screen.
- 03Draw one complete still frame under reduced motion.
7Limitations
Three cases from one studio cannot establish general rules, and without field performance data the analysis cannot quantify cost. Future work should pair this framework with lab and field measurements of loading and responsiveness on mid-range phones.
8Conclusion
The web platform can now render rich 3D in real time. The design discipline is to use it where spatial form is the message, keep the content and the next step independent of the scene, and treat motion as something every visitor can stop.
Key findings
- 01Use 3D where form, material or sequence is the message.
- 02Keep text, content and the main action independent of the scene.
- 03Pause loops off screen and honour the reduced motion preference.
- 04Measure loading and responsiveness on real mid-range phones.
Questions and answers
- Does a 3D website hurt SEO?
- Not if the text is ordinary HTML rendered alongside the scene. Search engines read page text, so keep headings, copy and links outside the canvas.
- What is Gaussian splatting?
- A rendering method that represents a captured scene as many small 3D Gaussians and can display it in real time, published at SIGGRAPH in 2023.
- Should I use WebGL or WebGPU?
- WebGL 2.0 has the widest support today. WebGPU offers a more modern interface and better performance for demanding scenes where it is available.
References
- [1]Khronos Group (2017). WebGL 2.0 Specification. Khronos Group. registry.khronos.org/webgl/specs/latest/2.0/
- [2]W3C GPU for the Web Working Group (2024). WebGPU. W3C Candidate Recommendation. www.w3.org/TR/webgpu/
- [3]Mildenhall, B., Srinivasan, P. P., Tancik, M., and others (2020). NeRF: Representing scenes as neural radiance fields for view synthesis. European Conference on Computer Vision 2020. arxiv.org/abs/2003.08934
- [4]Kerbl, B., Kopanas, G., Leimkuehler, T., and Drettakis, G. (2023). 3D Gaussian splatting for real-time radiance field rendering. ACM Transactions on Graphics, 42(4). arxiv.org/abs/2308.04079
- [5]Google Chrome team (2024). Web Vitals. web.dev. web.dev/articles/vitals
- [6]W3C Accessibility Guidelines Working Group (2023). Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation. www.w3.org/TR/WCAG22/
- [7]W3C CSS Working Group (2021). Media Queries Level 5 (prefers-reduced-motion). W3C Working Draft. www.w3.org/TR/mediaqueries-5/
- [8]W3C Web Applications Working Group (2023). Intersection Observer. W3C Working Draft. www.w3.org/TR/intersection-observer/
- [9]Tversky, B., Morrison, J. B., and Betrancourt, M. (2002). Animation: Can it facilitate?. International Journal of Human-Computer Studies, 57(4), 247 to 262. doi.org/10.1006/ijhc.2002.1017
- [10]Mayer, R. E. (2009). Multimedia Learning (2nd edition). Cambridge University Press. doi.org/10.1017/CBO9780511811678
Cite this paper
Jaiganesh D (2026). Real-time 3D on the web: a case study in performance, accessibility and purpose. iBOY Research Notes, Paper 04. https://www.iboyhub.com/blog/real-time-3d-on-the-web-performance-and-accessibility
Projects examined
Jaiganesh D
Founder of iBOY Innovation Hub, a creative technology studio from Tamil Nadu, India, established in 2025. Writes about what the studio learns while designing and building real websites, products and AI systems.