3D Asset Pack Preview Generator

About the Project

This project was created inspired by the amazing work of @Kenney. The source code of the pages and the style of them are his work. I didn't want to take credits of work that wasn't mine. If you want to support amazing free asset development go check his work or donate him.

The 3D Asset Pack Preview Generator is inspired by the workflow of creating well-organized and visually appealing asset packs for game development and 3D design. The goal is to make it easier for creators to present their work efficiently, with minimal manual effort.

📖 Guide · 🐛 Report an Issue · 💡 Suggest an Idea

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.