Question 1

How do I set up Four with Vite?

Accepted Answer

Four has known compatibility issues with Vite because WebGPU code uses top-level await. To fix this, install and configure the vite-plugin-top-level-await plugin, as mentioned in the README's installation note under the Vite warning.

Question 2

Is Four better than three.js?

Accepted Answer

Four is better for minimal, performance-critical applications where you need control over WebGPU or instancing, but three.js has a larger ecosystem and more built-in features, making it better for projects requiring extensive assets or easier prototyping.

Question 3

How to use instancing in Four?

Accepted Answer

Instancing is enabled by default in Four. Specify the number of instances with Mesh.instances and use attributes with divisors for per-instance data, as shown in the instancing examples with both WebGL and WebGPU code snippets.

Question 4

Can Four handle 3D model loading?

Accepted Answer

Four does not include built-in model loaders. You need to implement custom parsing or use external libraries to load models, which adds overhead compared to frameworks like three.js with integrated loaders.

Question 5

What browsers support Four?

Accepted Answer

Four requires browsers that support WebGL 2 or WebGPU. WebGL 2 is widely supported in modern browsers, but WebGPU is still experimental and may not be available in all environments, so check compatibility tables for your target audience.

Question 6

How to implement post-processing effects?

Accepted Answer

Use RenderTargets for multi-pass rendering in Four. Create a render target with multiple attachments, bind it during rendering, apply custom shaders, and then unbind to the canvas, as demonstrated in the RenderTarget section for techniques like deferred rendering.

Four

What is Four?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Open Source Alternative To

Frequently Asked Questions