I have some GLB models that I’d like to make some simple modifications to. I am able to import them into the editor, but when I re-export them, they don’t have any textures. For example, pick a GLB from this repository, download, and import into the editor. Then, just export it right away, start a new project, and import the file you exported. The result is flat black with no texture.
Is this supposed to work? If so, what am I missing? If not, is this documented? (The “Help” menu in the editor is pretty sparse.) Maybe I could save it in another format? I’m trying to load the result in CesiumJS, if that helps.
(I would also be happy to hear about other tools that would make it easy to just rotate an existing model – I’m trying to figure it out in Blender but not really getting anywhere…)
I’ve tested with a318.glb and I can confirm the issue. There are also many warnings in the console.
THREE.ShaderMaterial not supported.
@donmccurdy GLTFLoader creates materials of type ShaderMaterial but GLTFExporter can’t process them. Is this an intended limitation?
glTF has two PBR workflows: metal/rough and spec/gloss. The latter is not supported by three.js builtin materials, so GLTFLoader must use a ShaderMaterial instead. I think support for GLTFExporter could be added (detect material.isGLTFSpecularGlossinessMaterial and go from there) but it isn’t there now, so you’d need to avoid using the KHR_materials_pbrSpecularGlossiness extension to export successfully.
1 Like
It sounds like the steps I followed should have worked but it would have to be textured using metal/rough reflectivity modeling (?), and the repo I happened upon does not? I’m new at all of this stuff – I just wanted to put a plane on my globe without propellers! – so I’m still getting some of the lingo straight.
Anyway, I should be able to do this in Three if I find a model with the correct lighting model? Is there a simple way to convert the one to the other? You’ll note that that repo also includes Blender source files – maybe I should export from Blender in a different (better-supported) format?
Both of these statements are incorrect.
Click on the blurred text for additional information if interested:
Three.js has a feature called onBeforeCompile. Built-in materials can support anything and have been able to do so for the past few versions of three. Thus, GLTFLoader is not limited to the ShaderMaterial.
This example shows how to modify THREE.MeshNormalMaterial with onBeforeCompile, you can do the same modification on MeshStandardMaterial.
This example shows how to do GLTFLoader with MeshStandardMaterial but uses a proposed alternative to onBeforeCompile (it’s just a preference thing, i like to write less, declarative code, but the same thing can be done with onBeforeCompile, with the proposal, there is no conflict, you can use the method you prefer).
Could this question possible be rephrased as:
Should this be a limitation?
and be asked on github?
Click on the blurred text if interested in additional information
I think there are proposals on github that suggest a workaround for this limitation. Either way, it would be good to establish if this is by design or not, there, so people can make more informed calls when deciding to spend their free time submitting PRs.
I am curious about this designed limitation, and would like if i encountered some breadcrumbs when searching on github, rather than having to look in an additional place. For example, there is already a proposal on github that removes this limitation.
I should have looked more carefully at the repo before replying, sorry. The issue mentioned above about spec/gloss PBR materials is not related after all.
All of your models are using glTF 1.0, an older version of the format that is only supported through LegacyGLTFLoader and ShaderMaterial. You will not be able to export that back out in any case, there is no exporter that supports it. Instead, export from Blender with KhronosGroup/glTF-Blender-Exporter and you’ll get glTF 2.0 which should work fine. Exporting that back out with the three.js glTF exporter should be OK as well, although I think modifying in Blender might be easier.
1 Like
Does anyone know if GLBs exported from latest Substance Painter (2018.2.3) loaded into three is able to use embedded textures, beyond base color map? My color map is definitely there, but my ORM Map and Normal Map appear to be doing nothing… Do I need to do something in if(child.isMesh) to get these embedded maps to work? Yes, I am using environment map and reflections are showing, but without rough/metal, its like it is covered in KY™ Jelly… D’oh!.. Please advise.
Certainly three.js supports embedded metal/rough textures in GLBs, but it’s possible there’s something about the Substance Painter export that (a) isn’t correct, or (b) three.js can’t handle. When comparing three.js and BabylonJS rendering, do you get the same result?
What export settings does Substance Painter provide? And, would you be able to share the GLB?
1 Like
As always, thanks for quick reply Don! You rock!
Okay, it was rather dumb of me to not look into my ORM map before posting that… Once I had ORM map opened in PS, I see that my green and blue channels are black… So I must have set something wrong in my Input Maps in Painter. I’m sure I’ll have this licked soon. Thanks again D!
Edit: Ugh! Yeah, this was on older mesh that I had set up as Spec/Gloss in Painter, and hadn’t realized when I exported GLB that I did not have it metal/rough. OMG, how embarrassing…
FYI, exporting to glTF from Painter gives you a glTF+bin, all separate pbr maps, plus a GLB with embedded maps… which is really nice. Especially in a case like this, when doing R&D.
1 Like
Zoinks!.. Embedded maps are working great now, and almost everything is groovy… However, I would like to crank the anisotropy of the embedded maps… Um, Don (et al) is this possible?.. If so, what are these called internally so that one may tweak values etc? 
EDIT: Figured it out. Same as it always was. I was thinking that it must be different internally in glb and that those must be used in stead… The most important thing I learned today is to stop posting crap without spending at least 20 minutes trying to fix it on my own first… Sorry for that guys.
glb = gltf.scene;
glb.traverse( function ( child ) {
if ( child.isMesh ) {
child.material.map = map_05;
child.material.map.encoding = THREE.sRGBEncoding;
child.geometry.addAttribute( 'uv2', new THREE.BufferAttribute( child.geometry.attributes.uv.array, 2 ) );
child.material.normalScale = new THREE.Vector2( 0.7, 0.7 );
child.material.normalMap.anisotropy = 16;
child.material.roughnessMap.anisotropy = 16;
child.material.metalnessMap.anisotropy = 16;
child.material.envMap = envMap;
};
});
1 Like