Lumitrail - AR sketchpad

Inspiration

I've always liked those light painting photos where people draw shapes in the air with a flashlight. The drawing only lives in the photo though. I wanted to see if I could make it stay in the room, so you could walk around it like a real object. Most AR drawing apps need you to download something from the app store, so I wanted to try doing it fully in the browser instead.

What it does

Lumitrail turns your phone into a pen that draws light in 3D space.

• Open the site on a supported Android phone and tap Start

• A small dot on the screen is your pen

• Hold the screen and move your phone, not your finger, to draw

• Let go to stop, then walk around and look at your drawing from any angle

Your strokes stay anchored in the real room, so they don't move when you move. You can also change the brush thickness, and the lines have a soft glow so they look like real light.

How we built it

It's built with Three.js and WebXR, using plain JavaScript and HTML with no backend at all. Everything runs on the phone inside the browser, and it's hosted as a static site on Vercel. WebXR uses the phone's ARCore support to understand the room and keep the drawing in place.

Challenges we ran into

The first big one was explaining how to draw. Most people try to draw with their finger on the screen, but in Lumitrail you move the phone itself. Adding the pen dot in the middle of the screen made that click for people. I also had a few tricky bugs where the app loaded differently on different phones, so I added a check at the start to tell users if their phone supports AR. iPhones don't support WebXR in the browser yet, so for now it works on Android phones with ARCore.

Accomplishments that we're proud of

It runs straight from a link with nothing to install. Seeing your own drawing float in your living room for the first time is a really fun moment, and people get it in a couple of seconds.

What we learned

I learned a lot about how AR works in the browser, how phones track their position in a room, and how to make 3D lines look smooth and glowing without slowing the phone down. I also learned that a good hint on screen can matter more than any feature.

What's next for Lumitrail

More colors and brush styles, saving and sharing your drawings, and drawing with your hand in front of the camera instead of moving the phone.

Built With

• arcore
• css
• html
• javascript
• so-you-can-walk-around-them-and-see-your-drawing-from-every-side.-no-app-to-install
• three.js
• webxr