Three.js: glTF 2.0 GLTFLoader in Three.js: transparency, material smoothness, file size

[ghost]

I'm testing the Blender glTF 2.0 Exporter, to export 3D models from Blender to be imported by Three.js r87 GLTFLoader used in Freeciv WebGL. Previously, I used the Three.js BinaryLoader to import the Three.js binary format files into Freeciv WebGL. However, when I try to upgrade to using glTF 2.0 (binary .glb) format instead, I currently have these issues:

• The alpha transparency of materials is not shown in the glTG 2.0 version. This can be seen on the Settlers unit. Does the GLTFLoader support transparency?
• The material looks much smooter in the old BinaryLoader version, than in the glTF 2.0 GLTFLoader version.
• The glTF 2.0 file is 725 kb, while the Three.js binary format file is 612 kb. (This is not a bug, but it is interesting to note!)

The code I use to load the glTF 2.0 file is identical to the webgl_loader_gltf.html example.

Are these known limitiations of the glTF 2.0 GLTFLoader, or limitations of the Blender glTF 2.0 Exporter, or perhaps in my implementation ?

I have attached the Blender file and the exported .glb 2.0 file here also.
settlers.zip

[donmccurdy]

Hi @andreasrosdal — thanks for the detailed writeup!

• alpha transparency — I exported a version of your model in the human-readable .gltf format, and it looks like none of the glTF materials are setting alphaMode. Without that, the default is OPAQUE, and so the three.js loader is doing the "correct" thing by not showing transparency. Support for standard Blender materials (as opposed to glTF PBR) was only recently added to the Blender exporter — you may want to either file a bug on the exporter to support opacity on these materials, or use the glTF PBR nodes provided with the exporter, which are fully supported.
• smoothing — This is a setting in Blender. Select Tools → Edit → Shading → Smooth, and on export you should see smooth normals again.
• file size — There are a lot of things in this example file that could technically be exported more efficiently... The geometry for each wheel is duplicated, some materials are duplicated, etc. I wouldn't expect the Blender exporter to handle those automatically, so just an FYI really. If you're going to use smooth shading everywhere, you could skip exporting normals. This brings the size down to 426kb, and then you can set smooth shading in three.js:

model.traverse((node) => {
  if (node.isMesh) {
    node.material.shading = THREE.SmoothShading; // <=r86
    node.material.flatShading = false; // r87+
    node.material.needsUpdate = true;
  }
});

There's another project, gltf-pipeline, that is intended to help with optimizing assets for you. But unfortunately that's not quite ready to go yet, for glTF2.0 files.

[donmccurdy]

I went ahead and opened an issue about the missing opacity data: https://github.com/KhronosGroup/glTF-Blender-Exporter/issues/72

[ghost]

Thanks for the help!

[tkazik]

Sorry to reopen this one, but I feel like my question fits here :)
I have a model that I exported with your exporter from blender to gltf 2.0.
It looks nice in your viewer, donmccurdy. However, it look opque in cesium or this viewer:

According this, all viewers are using the same loader, right? Could it still have a connection with the alpha mode (lines 5217 and 5227 in the .gltf)?
In the zip, you will find the blend file including texture and the .gltf.
aircraft_blend_and_gltf.zip

Thank you very much for your advice!

[donmccurdy]

According this, all viewers are using the same loader, right?

The loaders are different for each engine; it's just that each of those engines uses WebGL.

The model looks correct in my viewer (using the three.js engine and loader) and Babylon (using its own loader). VirtualGIS uses Cesium, so I think the problem is isolated to their engine. You can report that here: https://github.com/AnalyticalGraphicsInc/cesium/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20gltf