Visualize In Space

• 

  Front page

• 

  mobile view of placing furniture in space

• 

  Start of visualization

Inspiration

When I go to homesense or furniture shopping I don't know what a piece of furniture would look like in a space.

What it does

Visualize In Space allows users to photograph any room or space, then overlay photos of items with automatic background removal to see exactly how furniture, decor, or other objects would look in that environment before making purchasing decisions.

How we built it

The application was built using React with TypeScript for the frontend, Vite for fast development, TailwindCSS for styling, and WebGL/Canvas for real-time image processing and compositing, all running entirely in the browser without requiring any backend services.

Challenges we ran into

The biggest challenge was implementing accurate automatic background removal using only client-side processing, as well as creating smooth drag-and-drop interactions with real-time image compositing while maintaining good performance across different devices.

Accomplishments that we're proud of

Successfully created a fully functional web application that performs complex image processing entirely in the browser, delivering professional-quality results with an intuitive user interface that works seamlessly on both desktop and mobile devices. It was done in one shot.

What we learned

I gained deep insights into WebGL shader programming and client-side image processing techniques.

What's next for Visualize In Space

I want to add the ability to add multiple furniture. Save multiple spaces and add furniture to vraious spaces.

Built With

• react
• tailwindcss
• typescript
• vite
• webgl