Three.js: GLTFLoader: Simplified examples

[donmccurdy]

The current glTF examples are functioning as unit tests more than anything else – the code is complex to support all of the options and extensions, has a custom GUI, and isn’t a very easy reference for developers.

I’d like to clean that up: show just a few nice-looking example models and either put each example in a new page (as COLLADA does) or use dat.gui and reduce the complexity of the code.

But from a development perpective it’s helpful having all of the models and extensions to test... What’s a good way to organize this? Proposed:

• loaders / gltf/ (simple example with one model)
• loaders / gltf / animation (simple example with one animated model)
• loaders / gltf / advanced (complex example with many models and extension variations)

/cc @takahirox

[Mugen87]

I like this proposal. Three examples with different emphases (basic, animation, advanced) sounds reasonable.

[takahirox]

I was gonna propose the same thing.
The current glTF example is too complicated and includes bad manner, for example creating a new scene and renderer when switching model.
We should simplify.

I'll think again how to organize tomorrow (I'm about to sleep now!) but personally prefer less examples for good maintenance. Maybe "simple example with one animated model" and, if necessary, another one for develop purpose. (I think animated one can cover non-animated one)

[mrdoob]

👍

[harry-liu]

pls show how to manage the memory when switch models in new gltf examples

[looeee]

@harry-liu that's not the purpose of the GLTF example.

See these examples for details of memory management: https://threejs.org/examples/?q=memory

[harry-liu]

@looeee thanks, but still dont know how to use gltf loader to manage memory

[looeee]

@harry-liu GLTFLoader doesn't manage memory, it just loads models. If you need any more help with this please ask over on the forum: https://discourse.threejs.org/

[takahirox]

How about making only one simple example using Project 'polly'.

Here is the master? https://github.com/KhronosGroup/glTF-Blender-Exporter/tree/master/polly

Users can see (almost?) all glTF 2.0 features.

Adding another model (or example) for extensions would be also ok.

[donmccurdy]

The issue with Polly is that it's 50MB and (at least on my laptop) can only run at ~45fps. There's also a transparency issue that isn't webgl-friendly.

Here are more examples featured on Sketchfab: https://sketchfab.com/features/gltf

And a bunch more animated ones: https://sketchfab.com/models?features=downloadable+animated+staffpicked&sort_by=-likeCount

And there are the ROME models. :)

We can just pick something with a CC license and include attribution, I assume?

Some ideas in no order:

| name | size | animated | screenshot |
|---|---|---|---|
| DamagedHelmet | 4mb | — | |
| guardians_of_the_galaxy | 14mb | ✅ | |
| WaterBottle | 9mb | — | |
| ftm | 55mb | — | |
| busterDrone | 20mb | ✅ | |
| hiih | 12mb | — | |
| shift_happens | 19mb | ✅ | |

[Mugen87]

I suggest to use models < 10 MB. DamagedHelmet would be ideal for a basic example.

[mrdoob]

Agreed. I vote for Damaged Helmet too 👍

[donmccurdy]

Ok, let's start with DamagedHelmet. Maybe later on we add a second example with animation that's under 10mb, for variety. 🙂

EDIT: Could make one on Mixamo easily enough...

[takahirox]

Yeah, that's a good start.