🎉 Welcome to the Displacement Texture Freebie Pack! 🎉

This GitHub repository offers a sample glimpse into the full Displacement Texture Pack available on Gumroad. For a Three.js tutorial on how to add a fractal glass distortion effect on top of a scene, I've created these seamless textures and decided to make them available. You can use this sample pack to follow along with the tutorial. If you want to support my work, you can get the full pack, which allows me to create more educational material and assets for everyone.

📺 Video Tutorial

📦 About This Pack

This freebie pack contains

• Two carefully selected textures from the full version. One is for the fractal glass distortion effect, and the other one resembles a photocopy texture.
• All textures are seamless and can easily be tiled.
• Each texture is available in 1K, 2K, and 4K to accommodate different performance and quality needs.
• All textures are available in JPEG and PNG. The 4K versions of the textures are also available as PSD files to be used with the displacement filter in Photoshop.
• All the textures are available in a darker tone (=normal) and an inverted version (=light)
• For web contexts, all resolutions are also available as compressed JPEGs for shorter loading times.
• A setup demonstrating how to implement these textures in a Three.js scene using custom shaders for displacement is also included. You can also refer to the Codepen version (coming soon) to play around with the code.

🔍 Full Displacement Texture Pack Preview

🔍 Freebie Displacement Texture Pack Preview

🔧 Usage

While I designed the textures for the Three.js Tutorial and their use in Photoshop, you can obviously use them in any context where a grayscale texture can be helpful.

📘 Additional Resources

• YouTube Tutorial: A detailed tutorial will soon be available, guiding you through the process of integrating these textures into your projects. This will be particularly helpful for those new to working with shaders and displacement maps.
• Codepen Template: A Codepen template is available for a hands-on learning experience.

🌟 Full Version Features

If you find the textures in this freebie pack useful, consider exploring the Full Displacement Texture Pack on Gumroad (coming soon). It includes a much wider range of textures in all the variations that you can explore in the freebie, from 1K compressed JPEGs to 4K PSD files.

📢 Connect and Support

Stay updated on new releases and content by following my social media channels and subscribing to my mailing list:

• YouTube
• Instagram
• Twitter
• Gumroad

Thank you for your interest in support!

📁 Texture Folder Structure

Here, you can see an overview of the folder structure for this project:

+---1K
|   +---compressed
|   |   +---light
|   |   |       ml-dpt-01-1K_light_compressed.jpeg
|   |   |       ...
|   |   |       ml-dpt-22-1K_light_compressed.jpeg
|   |   |       
|   |   \---normal
|   |           ml-dpt-01-1K_normal_compressed.jpeg
|   |           ..
|   |           ml-dpt-22-1K_normal_compressed.jpeg
|   |           
|   +---jpeg
|   |   +---light
|   |   |       ml-dpt-01-1K_light.jpeg
|   |   |       ...
|   |   |       ml-dpt-22-1K_light.jpeg
|   |   |       
|   |   \---normal
|   |           ml-dpt-01-1K_normal.jpeg
|   |           ...
|   |           ml-dpt-22-1K_normal.jpeg
|   |           
|   \---png
|       +---light
|       |       ml-dpt-01-1K_light.png
|       |       ...
|       |       ml-dpt-22-1K_light.png
|       |       
|       \---normal
|               ml-dpt-01-1K_normal.png
|               ...
|               ml-dpt-22-1K_normal.png
|               
+---2K
|   +---compressed
|   |   +---light
|   |   |       ml-dpt-01-2K_light_compressed.jpeg
|   |   |       ...
|   |   |       ml-dpt-22-2K_light_compressed.jpeg
|   |   |       
|   |   \---normal
|   |           ml-dpt-01-2K_normal_compressed.jpeg
|   |           ...
|   |           ml-dpt-22-2K_normal_compressed.jpeg
|   |           
|   +---jpeg
|   |   +---light
|   |   |       ml-dpt-01-2K_light.jpeg
|   |   |       ...
|   |   |       ml-dpt-22-2K_light.jpeg
|   |   |       
|   |   \---normal
|   |           ml-dpt-01-2K_normal.jpeg
|   |           ...
|   |           ml-dpt-22-2K_normal.jpeg
|   |           
|   \---png
|       +---light
|       |       ml-dpt-01-2K_light.png
|       |       ...
|       |       ml-dpt-22-2K_light.png
|       |       
|       \---normal
|               ml-dpt-01-2K_normal.png
|               ...
|               ml-dpt-22-2K_normal.png
|               
\---4K
    +---compressed
    |   +---light
    |   |       ml-dpt-01-4K_light_compressed.jpeg
    |   |       ...
    |   |       ml-dpt-22-4K_light_compressed.jpeg
    |   |       
    |   \---normal
    |           ml-dpt-01-4K_normal_compressed.jpeg
    |           ...
    |           ml-dpt-22-4K_normal_compressed.jpeg
    |           
    +---jpeg
    |   +---light
    |   |       ml-dpt-01-4K_light.jpeg
    |   |       ...
    |   |       ml-dpt-22-4K_light.jpeg
    |   |       
    |   \---normal
    |           ml-dpt-01-4K_normal.jpeg
    |           ...
    |           ml-dpt-22-4K_normal.jpeg
    |           
    +---png
    |   +---light
    |   |       ml-dpt-01-4K_light.png
    |   |       ...
    |   |       ml-dpt-22-4K_light.png
    |   |       
    |   \---normal
    |           ml-dpt-01-4K_normal.png
    |           ...
    |           ml-dpt-22-4K_normal.png
    |           
    \---psd
        +---light
        |       ml-dpt-01-4K_light.psd
        |       ...
        |       ml-dpt-22-4K_light.psd
        |       
        \---normal
                ml-dpt-01-4K_normal.psd
                ...
                ml-dpt-22-4K_normal.psd