# glTF: How can I minimize file size which has highly subdivided mesh or large number of loopcuts?

**URL:** <https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972>\
**Category:** Questions\
**Tags:** draco, gltf-exporter\
**Created:** [May 30, 2018, 11:55am UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972 "2018-05-30T11:55:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kishor\_Patil](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@Kishor\_Patil](https://discourse.threejs.org/u/Kishor_Patil)\
**Post date:** [May 30, 2018, 11:55am UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/1 "2018-05-30T11:55:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 30, 2018, 12:14pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/2 "2018-05-30T12:14:04Z")

</div>

You can try to compress your geoemtrie data via Draco. This can be done with [gltf-pipeline 2.0](https://github.com/AnalyticalGraphicsInc/gltf-pipeline/tree/2.0).

```auto
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:

> <https://github.com/mrdoob/three.js/blob/73716d6ec06ee3878209eb53238efc4186038cf0/examples/webgl_loader_gltf_extensions.html#L272-L273>

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 30, 2018, 2:03pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/3 "2018-05-30T14:03:28Z")

</div>

> [@Kishor\_Patil](#):
>
> File size matters for me as I am using threejs to render the model and it will lead to performance issues.

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.

---

<div class="post-metadata">

**Author:** ![Kishor\_Patil](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@Kishor\_Patil](https://discourse.threejs.org/u/Kishor_Patil)\
**Post date:** [May 30, 2018, 6:01pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/4 "2018-05-30T18:01:42Z")

</div>

@Mugen87 I am already using DRACOLoader for compression but as @donmccurdy mentioned the compressed mesh will have same number number of vertices after rendering.

> [@donmccurdy](#):
>
> Are you seeing issues with the size of file being downloaded, or bad framerate when rendering?

So due to large number of vertices the FPS is falling to 14 15 and it’s really poor on devices like chromebook.

> [@donmccurdy](#):
>
> Why do you need so many loopcuts? For very detailed geometry, baking a normal map is standard practice and performs better

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!!

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 30, 2018, 6:34pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/5 "2018-05-30T18:34:50Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Kishor\_Patil](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@Kishor\_Patil](https://discourse.threejs.org/u/Kishor_Patil)\
**Post date:** [May 30, 2018, 6:48pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/6 "2018-05-30T18:48:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kishor\_Patil](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@Kishor\_Patil](https://discourse.threejs.org/u/Kishor_Patil)\
**Post date:** [May 31, 2018, 12:45pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/7 "2018-05-31T12:45:06Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/1d161d50a3c58728a926ff306b1999fd1bd53ec5.glb) (113.9 KB)  
[plane50x25-Bend.glb](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/764fce8075552427c01a2ba25e40edaa25b7b5a9.glb) (381.8 KB)  
[plane50x25.blend](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/075f7d6da2bc86aafc6fd6da9bc7f3426568007f.blend) (677.5 KB)  
[plane50x25-Bend.blend](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f91ad35907b5315923ce43b8ea08c2a0551f7575.blend) (744.0 KB)

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 31, 2018, 5:32pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/8 "2018-05-31T17:32:01Z")

</div>

I think it’s safe to call it just an “edge loop” (loop) rather than “loop cut”

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 31, 2018, 5:33pm UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/9 "2018-05-31T17:33:44Z")

</div>

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:

```javascript
myPlane = new THREE.PlaneGeometry(1,1,200,100)

```

This would be much smaller than a file,

---

<div class="post-metadata">

**Author:** ![Kishor\_Patil](https://avatars.discourse-cdn.com/v4/letter/k/6a8cbe/32.png) [@Kishor\_Patil](https://discourse.threejs.org/u/Kishor_Patil)\
**Post date:** [June 1, 2018, 10:13am UTC](https://discourse.threejs.org/t/gltf-how-can-i-minimize-file-size-which-has-highly-subdivided-mesh-or-large-number-of-loopcuts/2972/10 "2018-06-01T10:13:32Z")

</div>

Thanks for the suggestion, I am not very familiar with the terms as I am new to blender and threejs.

> [@pailhead](#):
>
> Maybe you don’t need a file you can do:

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.