Problem exporting GLTF model with React

Questions
1

I’m running into a strange issue where when I run npm run build on my create-react-app project running three (using react-three-fiber) it builds everything except for the GLTF model.

Here is a simple codesandbox: https://codesandbox.io/s/goofy-hellman-wgz2e?fontsize=14&hidenavigation=1&theme=dark

And here are the chrome dev error messages when I open the index.html in the build folder:
Screen Shot 2020-09-09 at 1 16 01 PM

Any help would be appreciated!

Side note – what’s the best way to reduce the filesize of the .glb? The model is currently sitting at 4.4mb.

2

Quick stats on the model:

Screen Shot 2020-09-10 at 4.27.20 PM
Screen Shot 2020-09-10 at 4.27.20 PM1028×975 44.1 KB

Its size is 95% a single texture, so you really just need an image compressor. Unpack the .glb with glTF-Pipeline or similar, run the texture through https://squoosh.app/, and then repack it to a .glb with the same tool. Should get it down to 200-300kb pretty quickly. If you change the texture from PNG to JPG (which would also help reduce size) then you’d also have to edit the unpacked .gltf to update that file extension. There’s a VS Code extension for editing .gltf files that would help if you need to do that.

2 Likes
3

Thanks, will give it a go!

4

you need a server to run html, the browser doesnt allow you to make local fetch requests.

i dont understand what you mean by it doesnt build the gltf though? if you put the glb into public it will be part of the distro. alternatively you can import it, then it can be inside your “src” folder

import modelUrl from "./assets/model.glb"

const Foo() {
  const { nodes } = useLoader(GLTFLoader, modelUrl)

now the bundler is aware of the file, copies it into the bundle, but also gives you full cache control, so you can invalidate it.

as for shrinking assets, i always do this:

npx gltf-pipeline -i model.glb -o draco.glb --draco.compressionLevel=10

but then you also need the draco loader present in your public folder. here’s a full example: https://codesandbox.io/s/jovial-williamson-9p4j7 if you look into public you should see the “draco-gltf” folder, and you need to tell the loader about that, too (see Bottles.js).

1 Like
5

In this particular case Draco won’t help — the model’s size is all textures, and only 90kb of geometry, which is less than the size of the Draco decoder. So usually I’d recommend checking the source of the file’s size first — you can do that with gltf-transform inspect model.glb.

6

do you know of a tool that does all these things in one from the commandline?

7

I don’t know of any CLI tool that optimizes PNG/JPG textures within a glTF file, yet. I have some plans of doing that in glTF-Transform later this year. Otherwise gltfpack is probably the most flexible optimizer… it has a long list of options including:

  • convert images to KTX2
  • quantize geometry
  • meshopt compression
  • merging and instancing

EDIT: I’d also be glad to take PRs for KHR_draco_mesh_compression · Issue #9 · donmccurdy/glTF-Transform · GitHub. :wink:

8

It is a bit hard to optimize images from a CLI, though. Often lossless compression isn’t very effective, and lossy compression requires visual inspection and tradeoffs. I like squoosh.app/ for that.