Lots of interest in this “reset button” for your room we built @Shopify that uses @apple’s new #RoomPlan API. Here’s how we built it… 👇 🧵1/12
@Shopify@Apple AR makes it easy to try new couches, but the couch already in your space can get in the way. What if every room had a reset button? Space Eraser models spaces in high-fidelity—capturing room-defining objects, their size, position, orientation… [2/12]
@Shopify@Apple Live pixel data combines with LiDAR depth data to enable a lifelike digital twin of your room that can be overlaid onto your real space using AR and then edited digitally… [3/12]
@Shopify@Apple With an empty room, shoppers can now swipe through room sets which leverage the orientation of existing furniture to arrange themselves automatically… [4/12]
@Shopify@Apple With a digital twin of your room and your furniture you could simply swipe your original sofa away to explore options that better match the rest of the room… [5/12]
@Shopify@Apple To determine if this would be possible today we explored two questions: how do we align the model produced by #RoomPlan with your room and how do we texture the model? [6/12]
@Shopify@Apple#RoomPlan outputs an untextured USDZ model composed of unit cubes; one for each door, window, wall, and room-defining object—but, surprise! Models don’t contain floor or ceiling elements. We align the model with the real world using ARWorldMap. [7/12]
@Shopify@Apple Since RoomPlan exports untextured models, we explored ways we might texture it automatically. The best way would be to localize and map the texture when capturing, but we make do with an aligned model and a real-time camera feed. [8/12]
@Shopify@Apple We reversed the graphics pipeline: instead of sampling from a texture and writing to the screen, we sample from the camera and write to a texture. RealityKit made this hard, so we used SceneKit instead. [9/12]
@Shopify@Apple This approach creates issues when furniture obscures a surface. In video above 👆, our couch obscured the wall. #RoomPlan provides bounding box references for room-defining objects. With this we can determine what parts of the texture to redact. [10/12]
@Shopify@Apple We can now use inpainting techniques to fill in the redacted texture. We were pleasantly surprised by the results produced by off-the-shelf tools like Photoshop and theinpaint.com. [11/12]
@Shopify@Apple AR and #RoomPlan are exciting tools for commerce. The ability to select and remove real objects from a scene brings us one step closer to a fully editable reality. Speaking of… time to bring back the dog ✌️[12/12]
• • •
Missing some Tweet in this thread? You can try to
force a refresh
Johnny Lee famously hacked a Wii Remote to turn a 2D screen into a 3D window. We revived this trick in Chrome using a standard webcam.
Here’s how we did it. 🧵👇
We send the webcam video through Google’s MediaPipe Face Mesh library to track our eyes.
We transformed the monitor into a virtual window by recreating the real world in our game engine with precise dimensions. The webcam is the origin of the world, and the virtual window has the exact same dimensions as the screen.
2/ Shopping is hard when you want something specific but aren’t sure where to find it. New models from @StabilityAI and @OpenAI can create a detailed image of anything you can imagine, so skip searching — ask for exactly what you want and print it on-demand! 🖨🌽
3/ The patterns in our prototype were created using the prompts you hear in the video and the tiling technique we developed. Each frame of animation is a real step of the generation process. You’re watching StableDiffusion dream in real time 💭👀
Traditional AR can’t tell you how a couch feels. Our team @Shopify explored "Reverse AR" to wrap a virtual room around a real thing. Sit on a couch in-store while seeing it in your space—best of both worlds!
👇 How we built it… 🧵1/12
At home, shoppers scan their space using @Apple’s #RoomPlan or a photogrammetry app like @RealityComposer_ or @Polycam3D. It only takes a few seconds. 🧵2/12
@Apple@Polycam3D In store, shoppers can instantly visualize their room around an object. Computer vision systems identify and segment furniture and people from the video stream and mask them into the virtual room. 🧵3/12