Generate seamless, customizable Perlin noise heightmaps for game development and 3D terrain modeling. Use this free, browser-based tool to export heightmap images.
AI Generation Prompt
Technical Specification: Perlin Noise Terrain Heightmap Generator
Overview
A single-file, browser-based utility for generating, previewing, and exporting procedural Perlin noise heightmaps. Designed for game developers and 3D artists, this tool allows for real-time manipulation of noise parameters.
Core Features
- Real-Time Canvas Rendering: High-performance procedural noise generation using the Canvas API.
- Adjustable Parameters:
- Seed: Randomize the underlying terrain structure.
- Scale: Control the zoom/size of the features.
- Octaves: Layer multiple noise passes for detailed surfaces.
- Persistence: Control how much each octave contributes to the overall shape.
- Lacunarity: Adjust the frequency gaps between octaves.
- Export System: One-click download as a high-resolution PNG file.
- Visual Feedback: Instant update on slider move with debounced generation for performance.
User Interface Layout
- Header: Simple, clean application title with a brief usage instruction.
- Main Tool Area:
- Left Sidebar: Contains labeled sliders for all parameters (Seed, Scale, Octaves, Persistence, Lacunarity). Includes an 'Apply Random Seed' button and a 'Download PNG' primary action button.
- Main Canvas Display: Centered, large viewport area displaying the generated heightmap. Includes a subtle CSS shadow for a 'floating' card aesthetic.
- Color Palette:
- Background: Off-white (#F8FAFC).
- Sidebar/Controls: Crisp white (#FFFFFF) with subtle border (#E2E8F0).
- Primary Buttons: Vivid Blue (#2563EB) with white text.
- Text: Slate/Grey (#1E293B) for maximum readability.
Design & Interaction
- Aesthetic: Modern, airy SaaS design. Use generous whitespace, rounded corners (8px radius), and soft drop shadows.
- Transitions: All UI interactions (button hovers, slider movement feedback) must be smooth (200ms ease).
- Responsiveness:
- Desktop: Sidebar on the left, canvas on the right.
- Mobile/Tablet: Sidebar shifts to the top (stacked), canvas fills the remainder of the vertical space.
Developer Directives (Strict Requirements)
- Single File: All HTML, CSS, and JS must reside in one file. No external frameworks like React or Vue. Use CDN links for any necessary non-local assets.
- No Storage: ABSOLUTELY NO usage of
localStorage,sessionStorage, or cookies. Keep all state variables in memory. - Light Mode Only: Do not implement a dark mode switch. The design must be high-contrast, clean, and vibrant.
- Performance: Utilize
requestAnimationFramefor rendering loops to ensure the browser does not freeze during adjustment. - Sandbox Compatibility: Ensure the app runs in a null-origin iframe. Do not attempt to use
alert(),prompt(), orconfirm(). Use DOM-based modal elements if interaction is required.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a Perlin noise heightmap?
A Perlin noise heightmap is a procedural texture used to simulate natural, organic-looking surfaces like terrain, clouds, and rock formations. By layering multiple frequencies of noise, developers create realistic elevation maps where pixel intensity represents altitude. This method is widely preferred in game development and 3D rendering because it produces deterministic, randomized patterns that are coherent and aesthetically pleasing. It is computationally efficient and provides an excellent foundation for sculpting landscapes.
How can I use these heightmaps in game engines?
Once you generate and download a heightmap from this tool, you can import the image directly into game engines like Unity, Unreal Engine, or Godot. These engines utilize heightmaps in their terrain systems to automatically displace vertices and create physical landscapes based on the gray-scale values. For optimal results, ensure the exported image resolution matches your engine's requirements. Many developers use these maps as a base, then use engine-specific tools to perform further sculpting or texturing to finalize the terrain for their specific game design needs.
Does this tool require account registration?
This utility operates entirely within your web browser, meaning there is no account, subscription, or login required to access any of its features. We prioritize user privacy and convenience by ensuring that all processing happens locally on your machine without external dependencies. Because it runs client-side, you do not need to upload your settings or data to a server. You can generate, modify, and export as many heightmaps as you like instantly, maintaining a seamless workflow without the friction of traditional software sign-up processes.
Can I export the terrain as an image file?
Yes, this tool includes a high-resolution export feature that allows you to download your generated heightmap as a standard PNG image file. This format is widely compatible across all major image editing software, 3D modeling programs, and game engine terrain editors. The export function captures the exact canvas rendering, preserving the fine details of your custom Perlin noise configuration. Simply adjust your parameters until you are satisfied with the terrain layout, and click the export button to save the file to your computer for immediate use.
