Learning on Web Dev Open is free for all.

Immersive Web > Three.js, R3F, and when to use neitherWhen raw WebGL is the right answer
Phase 07Three.js, R3F, and when to use neither343 of 434

When raw WebGL is the right answer

A full-screen background field does not need a scene graph, a loader, a material system or six hundred kilobytes.

Concept14 minAI pair

A surprising share of what people ship 3D libraries for is a single full-screen triangle with a fragment shader on it: gradient fields, grain, noise backgrounds, transitions, scroll-reactive washes of colour. None of that touches a scene graph, a camera, a material system or a loader, and shipping a general-purpose engine to run it costs your visitors a few hundred kilobytes of parse and execute before anything appears.

The cutoff is roughly this: if you have geometry, more than one object, loading, lighting or interaction, take the library: reimplementing frustum culling and glTF parsing is not a good use of your life. If you have one quad and some maths, write the WebGL. It is about eighty lines of setup you will understand permanently after writing it twice.

The other reason to know the raw layer is diagnostic. When a library-based scene misbehaves, being able to reason about buffers, uniforms, texture units and context state is what turns an inexplicable black screen into an ordinary bug.

You should now be able to

  • Identify effects that are one quad and one shader
  • Weigh a library against its transfer and parse cost
Ask the community

Loading…