A modern, high-performance online tool for testing and creating seamless texture patterns for 3D rendering

Texture reCreator is a free, browser-based seamless texture tiling tool built for:

• 3D artists and game developers
• PBR / material authoring workflows
• Backgrounds and patterns for web & graphic design

Upload any texture, preview standard or mirror tiling in real time, and download a seamless texture ready for engines like Blender, Unreal Engine, Unity, and WebGL.

Visit the live application: https://akshaynikhare.github.io/Texture-reCreator/

Standard Tiling

Mirror Tiling (for seamless textures)

Final Result

Texture reCreator helps you test if your texture images will tile seamlessly in 3D applications:

1. Upload Your Texture - Drag and drop any image file
2. Choose Pattern Type:
   • Standard: Simple 2x2 grid repetition
   • Mirror: Flips edges to create seamless patterns
3. Adjust Tile Size - Use sliders to preview different tile sizes
4. Download Result - Save your perfectly tiled texture

The mirror tiling technique flips the image horizontally and vertically at the edges, eliminating visible seams when the texture repeats.

This makes Texture reCreator ideal for quickly checking if a photo, scan, or painted texture will loop cleanly as:

• a game environment texture
• a material in 3D renderers (Blender, Maya, 3ds Max, Cinema 4D, etc.)
• a repeating background on websites or UI components.

Common ways people use Texture reCreator:

• Game development – test ground, wall, and prop textures for visible seams
• 3D rendering – preview PBR albedo/diffuse maps before sending them to a material editor
• Environment art – quickly check tiling for foliage, rocks, bricks, and fabrics
• Web & UI design – create repeating backgrounds and subtle noise textures
• Education & tutorials – demonstrate how mirror tiling removes seams in textures

• Build Tool: Vite - Lightning-fast build tool
• JavaScript: ES6+ modules with modern syntax
• Canvas API: HTML5 Canvas for texture manipulation
• CSS: Modern CSS with CSS Grid, Flexbox, and CSS Variables
• Performance: Web Workers for heavy operations
• Architecture: Modular, maintainable code structure

• Node.js >= 18.0.0
• npm or yarn

# Clone the repository
git clone https://github.com/akshaynikhare/Texture-reCreator.git
cd Texture-reCreator

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The project automatically deploys to GitHub Pages using GitHub Actions:

1. Push to the main or master branch
2. GitHub Actions builds the project
3. Built files are deployed to GitHub Pages
4. Site is live at https://akshaynikhare.github.io/Texture-reCreator/

See Deployment Guide for detailed instructions.

Texture-reCreator/
├── src/
│   ├── core/              # Core texture processing logic
│   │   ├── canvasRenderer.js
│   │   └── textureManager.js
│   ├── ui/                # UI components
│   │   ├── controls.js
│   │   ├── dragDrop.js
│   │   └── themeManager.js
│   ├── utils/             # Utility functions
│   │   ├── helpers.js
│   │   ├── imageLoader.js
│   │   └── performance.js
│   ├── workers/           # Web Workers
│   │   └── imageProcessor.worker.js
│   ├── styles/            # Stylesheets
│   │   ├── main.css
│   │   └── theme.css
│   └── main.js            # Application entry point
├── docs/                  # Documentation
├── assets/                # Image assets
├── index.html             # Main HTML file
├── package.json           # Dependencies
└── vite.config.js         # Vite configuration

• Deployment Guide - GitHub Pages deployment instructions
• Contributing Guide - How to contribute

1. Open the application in your browser
2. Drag and drop a texture image onto the page
3. Choose between Standard or Mirror tiling
4. Adjust tile size using the sliders
5. Click the preview to download your texture

• Link/Unlink Dimensions: Click the chain icon to control width and height independently
• Theme Toggle: Click the theme button (top-right) to switch between light and dark modes
• Keyboard Accessible: Use Tab and arrow keys to navigate controls

• Debounced Updates: Slider changes are debounced to reduce unnecessary renders
• Optimized Canvas: Canvas operations are optimized for large images
• Memory Management: Automatic cleanup of object URLs and resources
• Web Workers: Heavy processing offloaded to background threads (when needed)

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

Contributions are welcome! Please read our Contributing Guide for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run linting (npm run lint)
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

Akshay Nikhare

• Website: akshay-nikhare.appspot.com
• GitHub: @akshaynikhare

• Thanks to all contributors who have helped improve this tool
• Inspired by the need for quick texture testing in 3D workflows
• Built with modern web technologies for optimal performance

• ✨ Complete modernization with Vite build system
• 🎨 New modern UI with glassmorphism design
• 🌓 Dark mode support with theme persistence
• 📱 Fully responsive mobile-friendly layout
• ⚡ Performance optimizations (debouncing, memory management)
• ♿ Accessibility improvements (ARIA labels, keyboard navigation)
• 📦 Modular ES6+ codebase
• 📚 Comprehensive documentation
• 🎯 Better UX with loading states and error handling

• Basic texture tiling functionality
• Standard and mirror tiling patterns
• Drag and drop support

Made with ❤️ for the 3D community