My Mesh visualiser code takes so long to load the mesh files to the browser , is SSR a solution?

Questions
, , , , ,
1

I’m working on a 3D mesh viewer using .obj and .mtl files, but I’m running into performance issues — the browser takes a long time to load and render the mesh files, and it’s using a lot of my local PC’s resources which is logical. I’m wondering if using a server ( Remote Desktop) + nodejs +Server-Side Rendering (SSR) or some form of server-side processing could be a solution. Ideally, I’d like the server to handle all the heavy lifting — parsing, simplifying, and converting the mesh files (maybe to .glb), and then send a lightweight version to the client for viewing. Has anyone implemented something like this? Is SSR or another architecture better suited for this kind of task?

2

I would avoid Server-side Rendering (SSR) if possible. Most servers do not have discrete GPUs, servers that do are usually expensive, and there is no Node.js implementation of WebGL 2 or WebGPU anyway, so you’d be fighting a big uphill battle to do your rendering in a server environment.

If the OBJ/MTL files are known in advance and you can pre-generate thumbnail images, maybe that’s worthwhile, but ideally offline (once per model) and not on every page request like SSR. Depends on your application goals, whether this makes sense.

OBJ is a very old format, so there’s probably a lot you could do to optimize the files with tools like gltfpack or gltf-transform. It would be important to know what you’re optimizing — high vertex count? many meshes? many models? high-resolution textures? — as that would affect the needed optimizations and likely impacts.

2 Likes
3

I’d look into compressing the obj file. Not sure how much more lightweight can it get. I would also advise digging a little bit deeper into what a 3D asset actually is. It’s really not that complicated since it’s just a bunch of numbers. But for example, if you don’t have very specific defined normals, you can compute them on the client and cut the model in half basically. If you are not using textures but have uvs, you can cut that in half as well.

1 Like
4

Thank u for your reply , i tried with nodejs already but i didn’t get any big differnces on termes of how fast the meshs are imported to the web and still consume a lot of Local PC ressources , so i don’t think it is gonna work

Just to give u some context , i am in an internship and they asked me to program a mesh visulizer capable to render really big size meshs (bigger than 1GB)… my Code works just fine , it renders (200MB) mesh files to the web (Without mentioning the png and mtl files sizes) but since my PC is not tha powerful the fps i get is between 1 and 7 .. which is really bad (Consumes almost all of my memory and CPU) , so i thought of the idea of using the ressources of a remote PC (Server) and do all the hard work there and finally visulize the resualts in mu local PC (i think there is a mesh visuliser caller Nira uses this concept)

.. i thought SSR and Nodejs would help but i didn’t get any good results

5

Thank u for your comment
compressing is not the ideal solution in my case because i want to be able to visulise 1GB size mesh for exemple , that’s why i thought of using a remote PC ressources (Memory , CPU…)

6

Questions you may want to consider, or ask your project supervisors:

  1. How much of a problem is the current file size (which costs download time before rendering) vs. the low framerate (FPS) when rendering? Compression improves file size but not FPS. Other optimizations can improve FPS, but fundamentally this does mean editing the model.
  2. Is editing the model (i.e. creating an optimized version for web) an option in advance, or do you need to accept arbitrary input models?
  3. What is the vertex count and mesh count in your scene?

For that last question:

let meshCount = 0;
let vertexCount = 0;
scene.traverse((object) => {
  if (object.isMesh) {
    meshCount += 1;
    vertexCount += object.geometry.attributes.position.count;
  }
});
7

I think that the system that you are describing is extremely complicated and wouldn’t involve threejs. At that point it sounds like you just want to stream a video, basically a screen share from another computer. Since it wouldn’t need to run on the web, it could be built with something like unity or unreal.

2 Likes
8

A 1 gigabyte mesh (gltf) can get crunched waaay down with meshopt or gltf-transform.

If you post an example of one of your gigabyte datasets, I bet we can show you how to compress it and make it work well. You can put it in a google drive link or something.

9

Maybe look into converting the files to glb, by my little tests the load way faster. The conversions could probably be done by some server?