Note / 2026-10-28

Blender Scroll Films vs Live WebGL: Which One to Use for a Product Page

Pre-rendered image sequences and live three.js scenes trade off differently on weight, quality and mobile. The rule we use, with sizes from our own builds.

Two ways to put a 3D object on a page

A live scene renders in the browser from a model file. A scroll film renders in Blender ahead of time and plays back as images or video. Both are valid, and the choice depends on the device.

Live WebGL

Live scenes respond to the visitor and can be tiny: a scripted reformer model ships at 0.37 MB, and a cloth simulation is baked to a 124 KB mesh. The cost is GPU work on the visitor's device and a build that needs a weight budget.

Pre-rendered film

A rendered sequence looks exactly as designed on every device, with no GPU risk. It is heavier for the same visual length: our real-estate demo sends phones a 120-frame AVIF sequence of about 1.2 MB, against about 0.76 MB for the live desktop scene.

How we choose

Live on desktop where the model is small and interaction matters; a film on phones where the GPU is the risk. Often both: the real-estate demo does exactly that, with the choice made by device.