I have been building VoxelDraft, a voxel editor that runs entirely in the browser without an account or installation.
The editor supports block painting, layers, keyframe animation, GIF recording, local projects, and exports for OBJ/MTL, GLB, VOX, Minecraft Schematic, and Roblox RBXL. This post covers the architecture choices that kept those features manageable.
Keep edit data serializable
The editable model is an array of plain voxel records rather than a collection of Three.js objects. That decision makes JSON backups, local persistence, undo and redo snapshots, sharing, and format conversion simpler. Three.js objects are derived render state, not the source of truth.
Render repeated cubes with InstancedMesh
Creating one mesh and one React component per cube becomes expensive as a model grows. VoxelDraft uses THREE.InstancedMesh where geometry and material can be shared. Pointer intersections return the instanced mesh and instance ID, which can be mapped back to the editable voxel record.
There are tradeoffs. Per-voxel colors need instance colors or grouping by material, and changing a single block still requires carefully updating the instance buffers. The reduction in draw calls is worth that complexity for repeated cube geometry.
Make exporters independent from the UI
The format exporters accept voxel records and produce a Blob. The UI is responsible for validation and triggering a download. VOX, Minecraft Schematic, and RBXL are generated directly. For GLB, the app builds a temporary Three.js scene and sends it to GLTFExporter.
Keeping binary generation separate from React event handlers makes exporters easier to test and reuse.
Move GIF encoding off the main thread
GIF encoding can freeze an editor, so gif.js runs its encoder in a Web Worker. The editor captures canvas frames, sends them to the encoder, and displays progress. Resolution, frame count, and FPS need sensible limits because all three affect memory use.
Start local-first, but provide backups
Projects are stored locally so the first editing session requires no backend or signup. This is convenient, but browser data can be cleared and storage is limited. The UI therefore offers JSON export for durable backups.
Pre-render the pages around the editor
An interactive editor is not a great search landing page by itself. The surrounding pages explain the workflow, formats, and use cases. A browser tool has two surfaces: the client-heavy workspace and the indexable pages that explain why someone should open it.
The practical lesson is to keep the data model simple, isolate exporters, move CPU-heavy work to workers, and give users a no-account path plus explicit backups.
Try the free browser voxel editor or read the voxel file formats guide.
Disclosure: I am the developer behind VoxelDraft.
Top comments (0)