How to Upload and Retrieve Game Objects (With Transform, Mesh, and Animation) in Unity WebGL at runtime

Hello, Unity community!

I’m currently working on a Unity WebGL project with the following requirements:

Game Object Interaction:

I need to allow users to import game objects from their local file system.
Once imported, users should be able to modify the object’s transform (position, rotation, scale)within the Unity Game.
Uploading to the Server:

After the user makes modifications, I need to upload the game object (with its updated transform, mesh, and animation data) to my server.
The game object’s data should be stored on the server for future use and can be accessed later.
Retrieving and Reusing Game Objects in a New Session:

In a new WebGL session, I want the game object to be retrieved from the server along with its updated transform, mesh, and animation data, and placed back into the scene exactly as it was in the previous session.

Questions/Challenges:
Uploading the Game Object: How can I efficiently serialize the game object (including its transform, mesh, and animations) into a format that can be uploaded to the server? Should I use JSON, a binary format, or something else?

Server-Side Handling: What is the best way to store these game objects on the server? Should I save the data as individual components (transform data, mesh data, animation clips) or as a combined object?

Retrieving the Game Object: Once the object is uploaded, how can I reconstruct it in the new Unity WebGL session? What approach should I take to restore its transform, mesh, and animation data?

Cross-session Compatibility: How do I ensure that the game object will load and appear exactly the same in different WebGL sessions, maintaining the integrity of its data?

If anyone has experience with similar workflows or can provide insight into how to best approach this, I’d greatly appreciate it!

The real question is: what do you intend to create here? It sounds like you could spare yourself a lot of trouble by architecting this somewhat differently.

There is no such thing as “importing game objects”. The user cannot create game objects as files that are loadable at runtime, at least not without also using Unity to create such prefab assets. Such an asset could not reference anything in your project and there is no established way of importing it, ie you can’t import a .unitypackage at runtime for instance.

There is also no such thing as a “local file system” on the Web. Sure, it can still be done. You can pop up a “file open” dialog in the browser by making direct API calls but this will only work on Windows, respectively you’d have to research and hopefully also find a way to do this on Mac, and perhaps Linux too. And then you’d have to verify this works in all popular browsers in all supported versions of the OS.

Efficiently in terms of size, speed, something else?

There is no simple way to serialize everything. You’d have to serialize the transform data, the mesh data, and the animation keyframes separately. This order is in increasing complexity. For mesh, you can get access to the vertex buffer and just serialize that. No idea how to go about keyframes.

From the user side loading that data, I bet you don’t even need a game object. I suppose you’re looking for the user to import a mesh with animations. In that case you need a runtime FBX importer which also happens to support the web platform (not a given). Or use the OBJ format. But … can you expect users to understand how to create meshes and animations and save them in a format that your app can load?

Create a new gameobject. Apply the transform data. Add a MeshFilter and MeshRenderer component to it. Create a Mesh instance from the data and assign it to the MeshFilter. Assign a (pre-existing) material to the renderer. Again, not sure about animations.

By deserializing the data. Unless you do something wrong in the serialization process, it should appear as is.

1 Like

Thanks for the detailed response! I’m using the Trilib package to import the mesh and data, and that’s working fine. Now, I’m unsure about the best way to send this data to the server for WebGL—what’s the most efficient approach in terms of performance?

Also, is there any package that could help with this process?

Any advice would be greatly appreciated!