2018 - 2020

Room Planner @ Wayfair

I worked as part of the Room Planner team at Wayfair as an iOS Engineer. I along with my colleagues worked on solving the problem of planning your room and purchases before you actually buy the furniture. Planning out large purchases like furniture is hard and this is especially the case when you don’t know the exact dimensions of the furniture and whether or not how you imagine the pieces coming together in your head actually matches how they come together when they are in the room.

This tool let’s you skip the mental visualizations and measuring and gives you a reasonable approximation of what it will look like when you plan out your purchases in a virtual room. This helps customers and the company lessen the chances of buying something you are going to return.

Stacking With Metal

Solving the problem of stacking was pretty fun. The conventional way to solve stacking is to use hit testing in order to see where the user has panned over with their finger. By hit test I mean using the point location to run a hit test on all nodes to see if they are present at this point and then seeing if any hit nodes can be stacked on and if the normals at that surface are pointing up. This is quite a lot of steps and the problem with this approach is that it needs to be run every time the user moves their finger even one pixel from where they previously panned. This also becomes more complicated with differences in how we interpret the geometry of any piece of virtual furniture.

I created an alternative way of finding stackable surfaces given the knowledge that the map does not change during the stacking phase of the user experience. Whenever stacking is detected I use Metal in order to create a position lookup table represented as an image. In it I only render surfaces that have normals pointing upwards on stackable geometry to a saved image only at the beginning of stacking. This image is a position map of all stackable surfaces in 3D that this item can be placed on. In short RGB color values represent normalized XYZ coordinates. This picture represents an in-place lookup table. Then all subsequent times the user moves their finger they are simply using the 2D coordinates of their pan to lookup the 3D stackable position if there is one. Black has been reserved to represent a non stackable position in which case the last valid position the item was in will be its given position.

Another benefit of this approach is that geometries from nodes that cannot be stacked on are not rendered into the lookup table at all. If you look at the render gif above the chair cannot have items stacked on it and so it is totally removed from the lookup table render.

No Hit Testing Required

This Metal technique can also be used to position objects on walls and using a second lookup table for the rotation of the object at its origin. This negates the need for hit testing planes and relies solely on the actual geometry represented in the scene.

There were many interesting challenges related to my time at Wayfair but this one stood out as something worth mentioning as an unconventional solution to a common problem. I evangelized the use of Metal at Wayfair and was the first one to add Metal code to the Wayfair codebase.