A web application that generates 3D autostereograms from uploaded images, custom text, or geometric shapes.

• Multiple Input Methods: Upload images, enter custom text, or choose geometric shapes
• Customizable Parameters: Adjust pattern width, depth, eye separation, DPI, and output dimensions
• Display Presets: Optimized for MacBook 14" Retina, Full HD, and 2K displays
• Two Styles: Choose between grayscale and colored autostereograms
• Text-to-Autostereogram: Convert any text into a 3D stereogram
• Geometric Shapes: Create autostereograms from circles, squares, triangles, and stars
• Automatic depth map extraction from image brightness with edge enhancement
• Download generated autostereograms in PNG format

1. Upload Image: Choose an image file to convert
2. Text Input: Enter custom text (use \n for line breaks)
3. Geometric Shape: Select from circle, square, triangle, or star

1. Adjust Parameters: Fine-tune pattern width, depth, eye separation, DPI, font size, and output dimensions
2. Use Presets: Quick settings for MacBook 14" Retina (3024×1964), Full HD, or 2K displays
3. Choose Style: Select between grayscale or colorful autostereograms

1. Generate: Click "Generate Autostereogram" to create your image
2. View: Cross your eyes or look beyond the image until patterns align to see the 3D effect
3. Download: Save the result as a high-resolution PNG

npm install

npm run dev

npm run build

1. Depth Map Extraction: The uploaded image is converted to grayscale, where brightness represents depth
2. Edge Enhancement: Sobel edge detection enhances depth transitions for better 3D effects
3. Autostereogram Generation: Uses a random dot stereogram algorithm to create the 3D effect
4. Pattern Rendering: Generates repeating patterns that create the illusion when viewed correctly

• Use images with clear shapes and good contrast
• Simple shapes work better than complex detailed images
• Ensure distinct foreground and background elements
• Darker areas will appear closer in the 3D effect

• Keep text short and simple for best visibility
• Use bold, clear fonts (controlled by font size parameter)
• Multiple lines work well - separate with \n

• Try different parameter settings to find what works best
• Higher DPI creates finer patterns but larger file sizes
• Adjust eye separation based on your viewing distance
• MacBook 14" preset is optimized for full-screen wallpapers

• Built with React and TypeScript
• Uses HTML5 Canvas for image processing
• Implements custom autostereogram generation algorithms
• No external image processing libraries required