AquaVida - Interactive 3D Fishtank

Welcome to AquaVida, a stunning and interactive 3D virtual fishtank built with Next.js, Three.js, and generative AI. Watch procedurally animated fish swim in a serene environment, and bring your own creations to life by adding fish generated by AI or from your own images!

You can see me demo this sample project in this video.

✨ Features

• 🐠 Real-time 3D Environment: A beautiful and dynamic fishtank rendered in real-time using Three.js.
• 🐟 Procedural Animation: A configurable number of fish swim with natural, procedurally generated patterns.
• 🤖 AI-Powered Fish Generation: Generate unique, new fish on the fly using the power of Google's Gemini model via Genkit.
• 📸 Custom Fish from Camera: Use your device's camera to snap a picture and instantly turn it into a fish in the tank.
• 🖼️ Custom Fish from Upload: Upload any image from your device to create a custom fish.
• 🔄 Interactive Controls: Easily reset the simulation, change the number of fish, and manage your aquatic world.

🛠️ How It's Built

AquaVida is a modern web application that demonstrates the integration of real-time 3D graphics and generative AI. It was built inside Firebase Studio.

The core technologies used are:

• Next.js: A React framework for building server-rendered and static web applications.
• Three.js: A cross-browser JavaScript library and API used to create and display animated 3D computer graphics in a web browser.
• Genkit: An open-source framework from Google that helps you build, deploy, and monitor production-ready AI flows.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Firebase: Used for hosting the application.

🚀 Getting Started: Running Locally

To get AquaVida running on your local machine, follow these steps.

Prerequisites

• Node.js: Make sure you have Node.js (v18 or later) installed. You can download it from nodejs.org.
• Git: You'll need Git to clone the repository.

1. Clone the Repository

First, clone this repository to your local machine.

git clone <your-repo-url>
cd <repository-directory>

2. Install Dependencies

Install the necessary npm packages.

npm install

3. Set Up Environment Variables

The AI-powered fish generation feature uses the Google Gemini API. To use it, you need to provide an API key.

1. Create a new file named .env.local in the root of the project directory.
2. Add your Google AI API key to the file. You can get a key from Google AI Studio.

# .env.local
GOOGLE_API_KEY="your_google_api_key_here"

Note: Without this key, the core application will still run, but the "Generate AI Fish" feature will fail.

4. Run the Development Servers

This project requires two separate development servers to be running at the same time:

1. The Next.js Frontend Server: This serves the main application.
2. The Genkit AI Server: This runs the AI flows that the application calls.

• To start the Next.js server, run the following command in your terminal:

  npm run dev

  Your application will be available at http://localhost:9002.

• To start the Genkit server, open a second terminal window and run:

  npm run genkit:dev

  This will start the Genkit development server, allowing the frontend to communicate with your AI flows.

You should now have the full AquaVida experience running locally!

📂 Project Structure

Here is a brief overview of the key directories in this project:

• /src/app/: Contains the main page and layout for the Next.js application.
• /src/components/: Contains all the React components.
  • /src/components/aqua-vida/: Core components for the fishtank application itself (FishTank, Controls, etc.).
  • /src/components/ui/: General-purpose UI components.
• /src/ai/: Contains all the Genkit AI code.
  • /src/ai/flows/: The specific AI flows, like generating a fish image.
• /public/: Static assets like images and fonts would go here.
• /docs/: Contains project documentation like the blueprint.