← Back to Projects

fun

Voxel Sphere Prototype

A React and Three.js experiment that generates a rounded voxel sphere, renders only visible faces, and merges geometry for more efficient real-time display.

This project was a rendering experiment focused on building a rounded 3D form from voxels using React and Three.js.

Rather than rendering every face of every voxel, the system checks which parts of the structure are actually exposed and only generates the visible faces. This reduces unnecessary geometry and makes the rendered result more efficient.

The voxel data is then merged into a single geometry, helping performance further and making the scene easier to render in real time.

The finished shape is displayed as a rotating voxel sphere-like form, with alternating vertex colours and an on-screen FPS monitor to help evaluate performance during rendering.

Key Features

  • Rounded voxel sphere generation
  • Visible-face-only voxel rendering
  • Merged geometry for improved rendering efficiency
  • Alternating voxel colour pattern
  • Real-time rotation and FPS monitoring

Challenges

  • Determining which voxel faces should actually be rendered
  • Building a curved form from a voxel-based structure
  • Reducing geometry overhead by merging many voxel meshes together
  • Balancing visual detail with real-time rendering performance