Quixel to Three.js converter

Resources
,
1

Maybe someone will find it useful, too. We needed to use some Quixel assets in a project, and Quixel/UE4 handle PBR a bit differently - holding each parameter in a separate texture instead of channels.

Merging 2K/4K textures in Photoshop took a bit god damn long, so this messy script does it for you (output textures are 1024, or any specified resolution, scaled with nearest neighbor interpolation for extra sharpness. :crossed_swords: )

Default values for roughness and metalness follow Three.js docs when Quixel doesn’t provide texture / values for them.

8 Likes
2

This is dope! Thanks for the share!

1 Like
3

Added a few high-quality PBR samples to the examples/ - they also now run in the codepen. :sparkles:

preview

2 Likes
4

Wow, those materials are amazing. Does the watermark come from Quixel?

By the way, I think you need to set the color map encoding and tone mapping correctly:

texture.encoding = THREE.sRGBEncoding; 

// any tonemapping except for linear/none
renderer.toneMapping = THREE.ACESFilmicToneMapping;

At least, I assume this is the case unless quixel has color maps in linear space.

1 Like
5

Quixels come without a watermark - these are custom materials, since I was adding UE4 and Unity support (ie. their PBR file naming conventions.) They are commercial though, so to be fair to the authors I kinda needed to add some small watermarking. I hope it doesn’t damage their looks too much though.

Thanks for the encoding tip - I did forget it, and it makes the rendering much more vivid! As for the toneMapping - I don’t know the settings of the materials, but with both encoding and tone mapping enabled, preview becomes a bit bland and materials lose a bit of that stylised Warcraft-y feeling.

6

Yeah, I understand. You could try some of the other tone mapping solutions, and also play around with the tone mapping exposure. You can also try setting renderer.physicallyCorrectLights = true.

However, you do need increase the light intensity and otherwise tweak your scene after making these changes. I find the best thing to do is set them all correctly to start, then build the scene that way. Once you already have a scene the way you like it’s probably not worth going back and changing it, except for the texture encoding.

As for the watermarks, fair enough. However, I’d never think to check wtlstudio.com because of them. Maybe put a note in the source code, or at the bottom of the scene, like: textures from wtlstudio.com (if that is the correct website)?