Are 3D mockups dead?

3D mockups are great.

Look at these bags, for instance.

They are able to shape the artwork precisely to the object in question, enhancing photorealism and bringing new possibilities to the workbench.

They were always tricky to make, though. Nonetheless, it was completely possible... until now?

Fasten your seat belts. Let's dive deep into it. I promise it's gonna be fun :)

Three-dimensional troubles

What's the matter?

Photoshop's 3D features date back to 2007, version CS3. 15 years! I can only imagine how ahead of their time they were. But as time went on, issues started to arise:

• ​They lack so many modern features compared to actual 3D software, limiting the potential of mockups.
• ​Compatibility with 3D file types is bad. For instance, the 3D cameras are always off in terms of the position, rotation, FOV. etc. It can be just a bit, but enough to make the mockup creator cry in pain. I speak from experience, mind you!
• ​Slow. Buggy. Really confusing to use.

Nevertheless, you could work around them and make 3D mockups. Mockups creators, users and creatives around the world in happy state.

Until...

The REAL BAD news

For some reason, Adobe refused to fix and improve the 3D tools across the years.

They basically abandoned the idea. Because they abandoned it, it started to become a roadblock to other areas of Photoshop.

It usually happens with apps: you have to maintain a feature if you want it to keep it working with modern hardware and software.

(we can argue life itself works that way...)

A wise decision — although controvesial — was made: Adobe decided to discontinue the 3D features completely.

Which brings some problems to the mockup scene... and oh boy we're in trouble. 3D mockups already have problems loading and working in latest versions of Photoshop.

Soon, they will be completely useless.

Can we do something about it?

A bunch of crazy experiments were made in the previous months.

I'm skipping lots of details about the research and development process, but it has been a WILD ride. Really.

I've never though any of this was even remotely possible.

Take a look! 🔍 ↓

Hi, ZMOK!

martyr⁠— labs™ presents ZMOK: a renderer that works with Photoshop files, allowing the manipulation of compatible 3D mockups.

Upcoming is some technical info about the project. It's a bit geared towards computer geeks, but not so much that anybody can still find it interesting to know.

I decided to use electron and javascript for this project because:

• I'm used to it.
• It gets the job done.
• With proper libraries and proper coding, it can be fast.
• I'm a one man army. I need something simple and easier to maintain in Windows and macOS at the same time.

Speaking of macOS: I don't have a Mac. I had to build a hackintosh with my old computer to make the macOS version of the app. Worth the effort :)

The main libraries used for the project:

• ​three.js: a general purpose 3D library that gets rid of the complications of learning 3D programming the hardcore way. Used to set the scene, models, textures, and render process.
• ​psd.js: loads the artwork from the PSD mockup to be used as the texture of the 3D model. Works REALLY fast, even beating native implementations. I'm delighted this exists.
• ​sharp: image manipulation library. Needed to save the resulting render to the disk. Again, the performance and features of it are unbelievable.

I got into the project concerned about the speed. But these libraries have proven to be so good in fact the whole rendering process is faster than the original Photoshop 3D.

Demo and features

To sum up, compared to Photoshop 3D:

• Works faster
• Render quality is higher
• ​Supports transparency. More on that below. Total game changer.
• Compatible with modern 3D files, specifically GLB/glTF. Goodbye camera position and FOV problems.
• Open source

Transparency is a huge feature

To understand it better, see this comparison:

Photoshop 3D doesn't have a feature to render transparent parts in a 3D object given a certain texture.

For 3D mockups, having that would be incredibly useful.

See this post about the update to the Sealed Bags mockups. Now you can add stickers on top of the bags, all due to this feature.

With Photoshop 3D I can't do that. I would have to choose between making the whole bag looking like paper or plastic. I can't properly mask out the stickers (paper material) and leave the bag (plastic) behind.

ZMOK understands alpha compositing – transparency data, basically. It reads the artwork and renders every transparent pixel as it should.

A 100% transparent pixel means that part of the model will be 100% transparent. 90% means 90%, and so on.

This results in Photoshop being able to process the render produced by ZMOK and mask the edges and details properly. And with that, you can independently link different materials and effects to as many unique artwork layers as you want, each with their own style.

How you – the user or mockup creator – use this feature is a matter of creative direction.

Can I use classic/old 3D mockups with ZMOK?

Unfortunately, no.

Photoshop already breaks when trying to read old 3D mockups. There's an option you can enable to make them less prone to crash but it's a matter of time until they remove it completely, probably months.

Going to monumental lenghts to try to read the 3D objects inside a PSD mockup carries a huge risk of being worthless at the end of it all, given the circumstances.

ZMOK is and will only be compatible with mockups made particularly for it. They have to follow a specific file and layer structure.

I don't think Photoshop will break the necessary features that ZMOK depends on to work, so we'll be safe.

Adapting the old 3D mockups to work with ZMOK is definitely a possibility. It's hard work, and in most cases it can only be done by the mockup creator.

I want to make ZMOK mockups

Huh, well... I haven't taken the time to make a guide yet.

Reach me out and let me know you're interested. ZMOK is free to use in any project. You make your stuff, you sell them, you use the app, that's it. Support for your own assets is your responsability, though.

For now, that's all I have. I'm proud of ZMOK 🤗 and I hope you too!

Thank you for reading, and have a great day!