{"id":48248891,"url":"https://github.com/activeguild/render-image-depth","last_synced_at":"2026-04-04T20:44:18.770Z","repository":{"id":326517690,"uuid":"1105876336","full_name":"activeguild/render-image-depth","owner":"activeguild","description":null,"archived":false,"fork":false,"pushed_at":"2025-12-12T05:08:21.000Z","size":443,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-13T13:36:18.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://render-image-depth.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/activeguild.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-28T09:36:29.000Z","updated_at":"2025-12-12T05:08:25.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/activeguild/render-image-depth","commit_stats":null,"previous_names":["activeguild/render-image-depth"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/activeguild/render-image-depth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Frender-image-depth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Frender-image-depth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Frender-image-depth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Frender-image-depth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/activeguild","download_url":"https://codeload.github.com/activeguild/render-image-depth/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/activeguild%2Frender-image-depth/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31413282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-04T20:44:15.733Z","updated_at":"2026-04-04T20:44:18.763Z","avatar_url":"https://github.com/activeguild.png","language":"TypeScript","readme":"# 3D Depth Visualizer\n\nA Next.js application that transforms 2D images into interactive 3D visualizations using AI-powered depth estimation. Upload an image, generate a depth map, and explore it in a beautiful 3D layered representation.\n\n\u003cimg width=\"1681\" height=\"935\" alt=\"スクリーンショット 2025-11-28 22 52 43\" src=\"https://github.com/user-attachments/assets/39aab6a9-6f1d-44e3-a99a-3e29f67dedd8\" /\u003e\n\n\n## Features\n\n- **Image Upload**: Drag and drop or select an image from your device\n- **AI Depth Estimation**: Uses `transformers.js` (Depth Anything model) to generate high-quality depth maps directly in the browser—no server required\n- **Layered 3D Visualization**: Automatically splits the image into depth-based layers for a stunning parallax effect\n- **Interactive Controls**:\n  - Adjust displacement scale (0-5) to control the 3D depth intensity\n  - Modify layer count (2-20) to fine-tune the depth separation\n  - Orbit, zoom, and pan around the 3D scene with mouse controls\n- **Real-time Preview**: See changes instantly as you adjust parameters\n- **Modern UI**: Sleek dark mode design with glassmorphism effects and compact sidebar\n- **Sample Images**: Includes example images to get started quickly\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+ installed\n- Modern web browser with WebGL support\n\n### Installation\n\n1.  Clone the repository:\n\n    ```bash\n    git clone \u003crepository-url\u003e\n    cd render-image-depth\n    ```\n\n2.  Install dependencies:\n\n    ```bash\n    npm install\n    ```\n\n3.  Run the development server:\n\n    ```bash\n    npm run dev\n    ```\n\n4.  Open [http://localhost:3000](http://localhost:3000) with your browser.\n\n### Usage\n\n1. **Upload an Image**: Click the upload area or drag and drop an image file (JPG, PNG, WebP)\n2. **Wait for Processing**: The AI model will automatically generate a depth map (this may take a few moments on first load as the model downloads)\n3. **Explore in 3D**: Once processing is complete, interact with the 3D visualization:\n   - **Left Click + Drag**: Rotate the view\n   - **Right Click + Drag**: Pan the view\n   - **Scroll**: Zoom in/out\n4. **Adjust Parameters**: Use the sidebar controls to modify the scale and layer count for different effects\n\n## Tech Stack\n\n- **Next.js 15**: React framework with App Router\n- **React Three Fiber**: React renderer for Three.js\n- **@react-three/drei**: Useful helpers for React Three Fiber\n- **Three.js**: 3D graphics library\n- **Transformers.js**: Client-side AI inference (Depth Anything model)\n- **Tailwind CSS**: Utility-first CSS framework\n- **TypeScript**: Type-safe development\n\n## How It Works\n\n1. **Image Processing**: When you upload an image, it's loaded into the browser\n2. **Depth Estimation**: The Depth Anything model analyzes the image and generates a grayscale depth map where brighter pixels represent closer objects\n3. **Layer Separation**: The depth map is divided into layers based on depth ranges (configurable via layer count)\n4. **3D Rendering**: Each layer is rendered as a separate transparent plane positioned at different Z-coordinates, creating a parallax effect\n5. **Interactive Display**: React Three Fiber handles the 3D scene with orbit controls for user interaction\n\n## Project Structure\n\n```\nsrc/\n├── app/\n│   ├── page.tsx           # Main application page with UI\n│   └── layout.tsx         # Root layout\n├── components/\n│   └── Scene.tsx          # 3D scene component with layered rendering\n├── utils/\n│   └── depth.ts           # Depth estimation using transformers.js\n└── types/\n    └── three.d.ts         # TypeScript definitions for Three.js\n```\n\n## Performance Tips\n\n- The AI model (~400MB) downloads on first use and is cached by the browser\n- Fewer layers (3-8) render faster but with less depth detail\n- Higher layer counts (15-20) provide smoother depth transitions but may impact performance\n- The canvas is optimized to prevent unnecessary resizing and re-rendering\n\n## Troubleshooting\n\n### Model Loading Issues\n- Ensure you have a stable internet connection for the initial model download\n- Check browser console for any CORS or network errors\n\n### Canvas Display Issues\n- If the 3D preview appears too large or overflows, try refreshing the page\n- The canvas sizing has been optimized to respect parent container dimensions\n\n### Performance Issues\n- Reduce the layer count for better performance\n- Close other browser tabs to free up memory\n- Use a device with dedicated GPU for best results\n\n## License\n\nThis project is open source and available under the MIT License.\n\n## Acknowledgments\n\n- **Depth Anything**: State-of-the-art monocular depth estimation model\n- **Transformers.js**: Enabling AI models to run in the browser\n- **React Three Fiber**: Making Three.js accessible in React\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiveguild%2Frender-image-depth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factiveguild%2Frender-image-depth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factiveguild%2Frender-image-depth/lists"}