Introducing Displacement - A whole new sense of depth

Starting today, our materials have an extra sense of depth. Now, when you put a tile in your space, you can get a much more accurate presentation of what it’ll look like.

It’s a big technical lift to generate displacement maps (the textures that make these swatches 3D) at scale and across material types. As Brennan, our 3D engineer and artist explains:

You have to account for the real-world depth of the material surface in a way that flat images can’t by themselves capture, we have to generate them from source data that is much richer and more complete than any photo contains to account for inconsistencies in lighting, resolution, confusing artifacts like gloss and shadow, the frequencies of the detail and so on. Our rendering uses six images per material because that’s just how much information goes into every single surface - every material has 6.3 million pixels of data, running in real time in AR on your phone.

This is the first step of advancements that we were able to unlock by moving from a photography to procedurally generated pipeline, as mentioned in a previous post:

Remember when I said that photographs don’t make super good normal maps? What’s happening in that conversion process is that we’re trying to guess from a 2D image with light what the 3D terrain might be. Humans are pretty good at this, we see a shadow and understand concavity, we see a highlight and understand protrusion - and the computer is doing something similar to the best of its ability, but again it’s only ever a guess and the results are based on pixel data which is altered a dozen times before they get seen by the machine.

But when we procedurally generate this data it’s just ‘real’ inside the process, the data is pure and clean because the source of it is right here and full fat.

So we can generate really good normal maps, that’s great, but we can also make an even more extreme version with this clean depth data: something called a displacement map.

In the Primer app, these textures give tiles a much more realistic feel. As you move around your space, you can get a better sense of how these products will look in real life:

Download Primer on the iOS App Store to start designing your space.