Build a 3D Aquarium Using WebGL

[](https://postimg.cc/2Ly1ZnbG)

This digital "Equarium" loads its decorations and fish at runtime using Unity, the echo3D API and WebGL. The echo3D platform allows the app to select and display multitudes of different fish types without requiring any asset bundling or inclusion in the app build itself. New critters can be added by uploading to your echo3D project without increasing the app footprint. The full demo can also be found on echo3D's GitHub.

Because fish are randomly selected, scaled and textured no two aquariums will ever be exactly the same!

Register

Don't have an API Key? Make sure to register for FREE at echo3D

Setup

1. Clone this project repository locally
2. Also download Unity (2020.3 LTS version strongly recommended) if you don't have that yet!

Two projects are required so create one additional project after signing in via the console (one project is created upon sign up).

Upload models to echo3D

1. From the project root, open the Models/Critters folder and upload all files to one project. This will be your 'fish' project.
2. From Models/Decor, upload all files to your other project. This will be your 'Static models' Project

Populate Globals.cs

1. Enter the API and security keys for each project within the Globals.cs file located in Assets/Scripts/
2. Enter the entry IDs for the hammerhead shark and all static models. You can find the entryIDs via the echo3D web console.

Running the app

After completing setup, open the project with Unity. Follow the instructions on our documentation page to set up your API key in Unity. Run the editor or build the app (WebGL is the only tested build target for this app!). Within a browser sounds will not play until you interact with the window. Increase the music volume with "P" and decrease with "L". Reload the page / re-run the editor app to load different fish and try to see them all!

---

**Scan this QR code or click this** [**link**](https://go.echo3d.co/vvSH) **to see it in AR!**

---

Notes

Due to browser limitations models loaded via this app will not respond to changes in metadata made via the echo3D platform (Scale, rotation etc.). Refreshing the app will re-fetch models with reflected changes.

Credits

This demo implements features or assets from the following Unity Asset Store packages:

• Thalassophobia: Stylized Oceans
• Everloop

A big thanks to mdsn and their terrific aquarium gurgle sound!

Learn More

Refer to our documentation to learn more about how to use Unity and echo3D.

Support

Feel free to reach out at [e-mail] or join our community channel on Slack.

More Tutorials

To learn how to make other similar projects, try one of these:

• Make a Valentine's Day Slideshow in AR (No code)
• Get a Quarantine DogΓǪin AR! (No Code and Free)
• Quick and Easy AR Retail Apps with echo3D!
• How to Create 3D Content and See It In AR (No Code and Free)

---

echo3D (www.echo3D.co; Techstars 19') is a cloud platform for 3D/AR/VR that provides tools and network infrastructure to help developers & companies quickly build and deploy 3D apps, games, and content.