3D Asset Pack Preview Generator

About the Project

This tool has been developed to speed up and enhance the creation of 3D asset packs. The tool is meant for generating previews for each 3D model that you have in your asset pack and create a .json file. With those previews and the .json files, Astro will be used to create an index.html page to preview the details and the information of the asset pack.

This repository contains two interconnected tools for managing 3D asset packs:

1. Godot Tool: A standalone application that generates previews of 3D models and creates a .json file with all the necessary metadata for an asset pack. This tool integrates seamlessly with the Astro Webpage Generator by providing the required previews and metadata, which are then used to build a professional and visually appealing webpage for showcasing the asset pack.
2. Astro Webpage Generator: A static site generator built with Astro that uses the previews and metadata from the Godot tool to create an attractive webpage for showcasing the asset pack.

Both tools are lightweight and require only Godot and Astro to work.

Features

Godot Tool

• Render previews of 3D models.
• Automatically generate a .json file containing:
  • Model details (e.g., vertex count, author, license).
  • Preview image paths.
  • Customizable metadata (editable outside the Godot editor).
• Modular functionality to enable or disable specific features.

Availability:

• Download on GitHub
• Available on the Godot Asset Library

Astro Webpage Generator

• Transform the .json file and previews generated by the Godot tool into a clean, professional webpage.
• Fully static and highly customizable.
• Supports filtering and searching through asset pack contents.

Screenshots

Godot Tool

Astro Webpage Example

Getting Started

Prerequisites

• Godot 4.x: Download it from godotengine.org.

• Astro: Ensure you have pnpm installed. You can install it from pnpm.io. Then, install Astro using:

  pnpm install astro

Installation

Clone the Repository

git clone https://github.com/aitordsgn03/Asset-Pack-Preview-Generator.git

Using the Godot Tool

1. Open the Godot project:

   • Launch Godot 4.x.
   • Open the godot-tool/ directory.

2. Load 3D Models:

   • Drag and drop your .glb, .obj, or other supported formats into the tool. Place these models in the "models" folder.
   • 

3. Render Previews:

   • Adjust the camera or lighting if needed.
   • By clicking in the Main Controller element you will be able to select the resolution, padding, and output directory of the images.
   • 

4. Generate Metadata:

   • Click the Metadata Generator.
   • Fill out details such as author, license, version, website, and description.
   • 

5. Export:

   • Run the project by clicking the Play icon.
   • Reveal the project documents and copy them to another folder.
   • 

Generating the Webpage

1. Navigate to the astro-web/ directory:

   cd astro-web/

2. Install dependencies:

   pnpm install

3. Add Previews and Metadata:

   • Place .png preview images in src/assets/images/.
   • Place the .json metadata file in src/data/.

4. Run the Development Server:

   pnpm run dev

   This command will start a local server for previewing your webpage.

5. Build the Static Site:
   Once you’re happy with your webpage:

   pnpm run build

   The output will be in the dist/ directory.

6. Deploy the Site:
   Upload the contents of the dist/ folder to your hosting provider, such as GitHub Pages, Netlify, or Vercel.

Contributing

Contributions are welcome! Whether it's fixing bugs, improving documentation, or adding features, your help is appreciated.

1. Fork the repository.
2. Create a new branch for your feature or fix:

   git switch -c feature/my-feature

3. Commit your changes:

   git commit -m "Add: My Feature"

4. Push to your branch:

   git push origin feature/my-feature

5. Open a pull request.

Authors

• Artizau

Special Thanks to Kenney for his awesome work and for being the inspiration of this project.

Tech Stack

• Godot 4: For creating the 3D model preview and metadata generator.
• Astro: For building the static website.
• pnpm: For efficient dependency management.