Hi, I have plane with 200x100 loopcuts, when I export glb the size of the file is around 2MB than I again sub divided the mesh couple of times and now binary file is around 8MB. File size matters for me as I am using threejs to render the model and it will lead to performance issues.
How can I have more number of loop-cuts/subdivide mesh and still maintain the file size smaller?
I am using latest version of glTF exporter and blender.
You can try to compress your geoemtrie data via Draco. This can be done with gltf-pipeline 2.0.
node bin/gltf-pipeline.js -i model.gltf -d -s -o modelDraco.gltf
You can then load the file with THREE.GLTFLoader. But you need to inject an instance of THREE.DracoLoader first. The code for this looks like the following:
Are you seeing issues with the size of file being downloaded, or bad framerate when rendering? Compression will reduce the file size transferred to the browser, but if you’re worried about runtime performance that makes no difference — the compressed mesh has the same number of vertices in the end. Do you know how many vertices the subdivided mesh has?
Why do you need so many loopcuts? For very detailed geometry, baking a normal map is standard practice and performs better.
@Mugen87 I am already using DRACOLoader for compression but as @donmccurdy mentioned the compressed mesh will have same number number of vertices after rendering.
So due to large number of vertices the FPS is falling to 14 15 and it’s really poor on devices like chromebook.
Currently on a plane I am using around 200x200 loop-cuts and than using array modifier to increase the number of planes to 4 to 5. Loading the model using threejs and at each vertex I want to place some object. The sub-divided mesh has over 200000 vertices!!
Actually 200,000 vertices doesn’t sound like it should degrade FPS that much… but you’re duplicating the mesh 4-5 times, and then adding more objects at vertices? How many meshes, total, are in the scene? A demo is always helpful if you can share it.
If you’re just using the vertices as attachment points, and the meshes are just planes, then you’d be much better off keeping “simple” planes, using some math to compute where the vertices would be, and placing objects there. No need to render all those vertices if they’re just attachment points!
Actually the model is made up of some other objects too but the objects made of planes is major one. Soon I will try to create a similar model and share with you so that things will be more clear.
And I will try the alternative solutions you have mentioned above.
The reason for increase in file size was due to simple deform modifier. While creating a sample model I observed this change.
I have applied 50x25 loopcuts and used array modifier and added one more plane. On export, binary file size was 114Kbs and on the same object I added the simple deform modifier and applied it as shapekey now the file size is 382Kbs ( Almost 3 times ). Is simple deform modifier dividing the mesh again to bend the object and that is the reason file size is increasing 3 to 4 times?
I need bending for my animation and I am controlling it using morphInfluence in threejs.
plane50x25.glb (113.9 KB)
plane50x25-Bend.glb (381.8 KB)
plane50x25.blend (677.5 KB)
plane50x25-Bend.blend (744.0 KB)
I think it’s safe to call it just an “edge loop” (loop) rather than “loop cut”
I don’t understand are you trying to import, or export or what, but:
Hi, I have plane with 200x100 loopcuts
Maybe you don’t need a file you can do:
myPlane = new THREE.PlaneGeometry(1,1,200,100)
This would be much smaller than a file,
Thanks for the suggestion, I am not very familiar with the terms as I am new to blender and threejs.
File is not just about planes, I have over 24 objects, 3000000 vertices and multiple animations overall created in blender and using gltfLoader I am rendering them on browser. The files I uploaded are just samples to show the difference in filesize.