How to use Gltf Extension?

I wanted to use Gltf Extensions mentions in Documentation.

I wanted to load my model with meshPhysicalMaterial properties but I don’t want to keep replacing for every mesh when it loads. So the Other way is to extend MeshStandardMaterial.

These are the property/extension I want to use … But I don’t know how to add extension .
image

Any regarding this would be helpful.

Thank you.

The GLTFLoader already parses these extensions and returns a MeshPhysicalMaterial accordingly.

(Minus the KHR_materials_pbrSpecularGlossiness one which is deprecated)

1 Like

If the model doesn’t use any of these extensions yet but you want to ensure it loads with MeshPhysicalMaterial anyway, a quick way to add one would be to open the model on https://gltf.report/ and run this script:

import { MaterialsSpecular } from '@gltf-transform/extensions';

const specularExtension = document.createExtension(MaterialsSpecular);
const specular = specularExtension.createSpecular();

for (const material of document.getRoot().listMaterials()) {
	material.setExtension('KHR_materials_specular', specular);
}

It won’t affect the appearance but does require MeshPhysicalMaterial. Note that MeshPhysicalMaterial is a more expensive material to render. You could do something similar by setting transmission or clearcoat in Blender.

Thank you for replying,

@donmccurdy that gltf report is a Great Project. Absolutely loved it. :heart_eyes:

and sorry, I don’t know how to make gltfLoader parse data or use those extensions, so it returns MeshPhysicalMaterial while loading model every time. Is there documentation or example I can refer to.

Here is a basic jsFiddle which load gltf model. If you wish please modify in this.
https://jsfiddle.net/seeon/ce58o43k/38/

Thankyou,
Seeon

1 Like

GLTFLoader does not have an option to force it to return MeshPhysicalMaterial, if that’s what you’re asking? The glTF file must be configured so that it requires MeshPhysicalMaterial, otherwise it will return MeshStandardMaterial. The gltf.report script above is one way of doing that.

Replacing the material after the model loads is also fine. I think something like this would copy all the original properties:

const nextMaterial = new MeshPhysicalMaterial();
MeshStandardMaterial.prototype.copy.call(mesh.material, nextMaterial);
mesh.material = nextMaterial;

Yes, I was referring to loading MeshPhysicalMaterial by default.

At first, I thought to Extend MeshStandardMaterial and all those properties for each Mesh but later in GLTFLoader I found these extensions so wanted to know what they were and how can I use it.

But Certainly the one you mention for replacing is Easier and Better than doing it myself.

A small doubt : if we export a model from blender with those properties(like Clearcoat) in Principled BSDF shader, will it return MeshPhysicalMaterial in Threejs ?

Blender only supports exporting some of those properties — clearcoat and transmission — today. But yes, if you set clearcoat>0 or transmission>0 in Blender Principled BSDF it should will load as MeshPhysicalMaterial in three.js, because that’s required to represent those materials.

1 Like