Sample models for KHR_materials_variants extension

[pushmatrix]

These are sample models for the KHR_materials_variants extension defined in KhronosGroup/glTF#1681

I've included the separate variant models alongside the model that has all variants packed into it. I included those separate ones in case authoring tools want to test the extension.

I wasn't sure whether to put all these models in the root 2.0 folder, or to put them in their own KHRMaterialsVariants folder.

[cx20]

I wasn't sure whether to put all these models in the root 2.0 folder, or to put them in their own KHRMaterialsVariants folder.

My personal opinion is that it is better to place the model in root to match the existing folder configuration.
Also, I think it's better to match the folder name with the file name.

Folder Name	File Name
Duck/glTF	Duck.gltf
Duck/glTF-Binary	Duck.glb

Here are the proposed changes.

before	after
2.0/KHRMaterialsVariants/chairs/glTF/chairs.gltf	2.0/MaterialsVariantsChairs/glTF/MaterialsVariantsChairs.gltf
2.0/KHRMaterialsVariants/chairs/glTF-Binary/chairs.glb	2.0/MaterialsVariantsChairs/glTF-Binary/MaterialsVariantsChairs.glb
2.0/KHRMaterialsVariants/chairs/screenshot/chairs.jpg	2.0/MaterialsVariantsChairs/screenshot/screenshot.jpg
2.0/KHRMaterialsVariants/helmet/glTF/helmet_combined.gltf	2.0/MaterialsVariantsHelmet/glTF/MaterialsVariantsHelmet.gltf
2.0/KHRMaterialsVariants/helmet/glTF-Binary/helmet_combined.glb	2.0/MaterialsVariantsHelmet/glTF-Binary/MaterialsVariantsHelmet.glb
2.0/KHRMaterialsVariants/shoes/glTF/shoes.gltf	2.0/MaterialsVariantsShoes/glTF/MaterialsVariantsShoes.gltf
2.0/KHRMaterialsVariants/shoes/glTF-Binary/shoes.glb	2.0/MaterialsVariantsShoes/glTF-Binary/MaterialsVariantsShoes.glb

There are a few different colored models in the folder, but I don't think you should put them in this repository if you mean the assumed results. This repository is already close to 1GB, and it's better to keep the model to a minimum.

[emackey]

I agree with @cx20. Also the samples here seem to be using the previous schema, they don't validate against the current schema.

Can we just do one test? I like the shoes the best, for variants. The chair will probably end up being our Sheen test model, and the helmet I don't think is necessary (unless the chair or helmet demonstrate something that the shoe doesn't do).

Also no need to put the individual non-variant versions in here, just the finished result. We're not demoing the merge tool here.

[pushmatrix]

Thanks @cx20 and @emackey. I've made those changes.

The helmet example was just to show that it's not just for digital commerce. It can be for games too. That's fine, I removed it and we can keep that for a blog post marketing the extension.

However, I want to keep the chair in there. Whereas the shoes are simplistic (only change base texture on 1 mesh), the chair represents a common ecommerce usecase where you have multiple pieces (in this case fabric & chair legs), and they can be configured differently. 2x fabric options and 2x wood bases make for 4 possible variants. This shows how you'd use the extension to represent that.

[cx20]

@pushmatrix Thank you for the change.

Please make one more change. Place the thumbnail image used to list the samples in the screenshot folder with the file name screenshot/screenshot.<jpg|png|gif>.

@emackey Are there any rules for adding models to the list page? Which category should we add it to, etc.
https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/README.md
https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/model-index.json

[pushmatrix]

@cx20 done and done 👍

[emackey]

@cx20 I've been wondering about organization lately. Thoughts welcome on #272.

[cx20]

BTW, When I was checking this model in gltf-vscode, I noticed that the Mesh data was stored in base64.
Perhaps you can reduce the size of the Mesh data file by some percentage by making it an external file in bin format.

"buffers": [
  {
    "name": "shoes-processed",
    "byteLength": 705680,
    "uri": "data:application/octet-stream;base64,aogOP6tfKT+SlAA/yHslPzkPIz98D...

[emackey]

[Off-topic comment] Oh no, what happened with the Three.js button sticking off the edge like that in VSCode? It doesn't look like that on my screens, I wonder how I can reproduce that...?

[cx20]

@emackey I have reported issues individually for gltf-vscode.
AnalyticalGraphicsInc/gltf-vscode#190

[cx20]

I experimentally added this model to gltf-test and confirmed that I can change the Variant in Babylon.js.

variant	image
midnight
street

---

I added the feature to change Variant by URL argument in Babylon.js sample of gltf-test.
Usage:
https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=MaterialsVariantsShoe&scale=10&type=glTF&variant=midnight
https://cx20.github.io/gltf-test/examples/babylonjs/index.html?category=tutorialModels&model=MaterialsVariantsShoe&scale=10&type=glTF&variant=street

[cx20]

I've confirmed that this extension works in three.js as well. See gltf-test for a sample code to display it.
The following is an example display in three.js.

variant	image
midnight
street

[emackey]

Thanks again @pushmatrix, this is finally merged.

[pragneshmali99]

Respected Sir,

How can i add "FB_material_variants" in gltf model json using THREE js GLTFLoader ?

Thanks & Regards,
Pragnesh Mali
email: [email protected]

[emackey]

Hi @pragneshmali99, this issue tracker is not part of ThreeJS. Please try asking on the ThreeJS forums or on StackOverflow or similar. Thanks!

[Rambo00780]

Hello @pushmatrix @cx20 @emackey
I am a 3d artist and new here. and I don't know how to code. But I want to add this variant feature to my model. Can anyone tell me how to do it? I have variation texture and the gltf model.

[elalish]

@Baldev007 We're actually nearly done adding this feature to the model-viewer editor. Hopefully by next week you'll have a UI in the materials tab to create/select variants and load new textures.

[Rambo00780]

@Baldev007 We're actually nearly done adding this feature to the model-viewer editor. Hopefully by next week you'll have a UI in the materials tab to create/select variants and load new textures.

@elalish Hello, thanks for adding the variant feature in the model-viewer editor. but when I click on the download scene sometimes nothing happens. Do you guys know why it happens?

[elalish]

@Baldev007 No, feel free to open an issue on our Github: https://github.com/google/model-viewer/issues, but please give complete repro steps. Also, check for errors/warnings in the JS console.