In mid-july 2024, after finishing the installation of some track lights in the home office. I decided it is time to build a light design app to help myself, as well as all those people who will eventually miscalculate how much light they will need for their own space.

I was browsing react-three-fiber's new documentation site and found a path tracing package. It is the perfect time to build it, it has never been easier to do ray-tracing just in the browser (and it even works on mobile devices!)

In order to let the user focus on exploring the effect of different type of light fixtures, the furniture placement part should be automated. Furnitures defines activity zones, an important factor in light design on where to shine more lights.

It turns out this is a super fun constraint, I get to create responsive designs for each room that should work in every possible dimensions.

In the app, there are 5 categories for the light fixtures – table, floor, wall, ceiling, and LED strip. For table, ceiling, and floor lamps, I designed 5 fixtures that can symbolize most of the lights we will use in homes.

They also have different position and rotation correction behavior, for example, a floor light should always sit on the floor and no rotation is allowed apart from the Y axis (up axis).

Building The App

Building the app is as exciting as designing it. In the following paragraphs I will discuss some notable architectural design choices in the code.

Data Structure

A custom JSON schema is created to record the user data (inputs), instead of just using the scene graph, or saving it as a GLTF JSON file. This allows me to write other kinds of visualization for the design. For example, I can write a SVG renderer that renders the top-down view of the room.

Two Zustand Stores

One for the user data which needs to be persisted, and one for application states. Application state is often ephemeral and even a bit arbitrary (such as, who is being selected. ). As I don't have to persist app state across sessions or reloads, it is less boilerplate than using slices with minimal overhead.

gltf-react-three

The furnitures and the light fixture models are prepared in Blender. Each room is exported as a single GLTF file, gltf-react-three is then used to create JSX representation of the objects, this allows me to write formulas that position the furnitures in a responsive way.