HDR textures not importing

The HDR reflection texture are not being imported as shown in this PG below, but they are working fine in the sandbox.: Babylon.js Playground
you can drag and drop a file in canvas using a glb file I provided in github
plataformaonline/fileName (1).glb at master · mathus1/plataformaonline · GitHub

The Playground doesn’t contain a default environment like the Sandbox does, so you’ll have to create it: Scene | Babylon.js Documentation (babylonjs.com)

is there a reason for that? One would expect to have it the same, no?

The Sandbox is built with the sole purpose of visualizing assets, while the Playground can be used for all kinds of purposes, like games, XR experiences, etc… So the Playground’s “default” code is pretty simple, just the minimum for the user to view something on the screen. Then they can add whatever makes sense for their application.

1 Like

OK, thank you. Makes sense.

1 Like

In my geometry, I used reflectionTexture property of the pbr material. The reflectionTexture does not depend on the environment settings.
I will show an example of my app:
This is the geometry created inside the app with the reflection and I don’t have any default environment because I use a dds file for that : mat.reflectionTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("./textures/environment.dds", scene);

After exporting this mesh with gtlf exporter, and importing again in the same app, it shows this without the reflection texture

But it seems that the geometry now is reflecting the environment around

That seems to be a problem of your CAD app. What app is it?

It is a house plan app that can build apartments and houses. I guess that is not my app problem. I reproduced the problem in this PG https://playground.babylonjs.com/#6TYBYN#1
You can click the button to download the sphere. When you drag and drop the glb file to the scene, the sphere is imported without the reflection texture

This is expected with glTF as glTF doesn’t support storing a reflectionTexture.

If you export to .babylon then it should preserve this.

I solved the problem by reimplementing the reflectionTexture after importing the mesh. However, something happens with the material after the import as demonstrated in this PG https://playground.babylonjs.com/#6TYBYN#2
I guess something happens with refraction or translucency.

“Something” what, exactly? What did you expect to see vs what did you see?

If I download the object from the playground and import back to the scene, I would expect to see the imported mesh having the same material appearance. But after importing the sphere, the material gets darker. Maybe because gltf format does not support refraction or translucency properties. Am I right?

cc @bghgary our GLTF dood

We recently added support for two glTF extensions that support refraction and translucency. @Guillaume_Pelletier Can you check? It looks like the serializer doesn’t work right for this.

KHR_materials_translucency is not supported (not standard) into the serializer, however the GLTF loader leverage it. This might be the reason.

I see this in the glTF:

  "extensionsUsed": [

These are causing the issues.

I think these two properties in the PG cause these extensions to be written?

    pbr.subSurface.isRefractionEnabled = true;
    pbr.subSurface.isTranslucencyEnabled = true;

Yes, these two properties are entry point for the extension.

for the Volume

private _isExtensionEnabled(mat: PBRMaterial): boolean {
        // This extension must not be used on a material that also uses KHR_materials_unlit
        if (mat.unlit) {
            return false;
        const subs = mat.subSurface;
        // this extension requires either the KHR_materials_transmission or KHR_materials_translucency extensions.
        if (!subs.isRefractionEnabled && !subs.isTranslucencyEnabled) {
            return false;
        return (
            (subs.maximumThickness != undefined && subs.maximumThickness != 0) ||
            (subs.tintColorAtDistance != undefined && subs.tintColorAtDistance != Number.POSITIVE_INFINITY) ||
            (subs.tintColor != undefined && subs.tintColor != Color3.White()) ||

And for the Transmission

private _isExtensionEnabled(mat: PBRMaterial): boolean {
        // This extension must not be used on a material that also uses KHR_materials_unlit
        if (mat.unlit) {
            return false;
        const subs = mat.subSurface;
        return (subs.isRefractionEnabled && subs.refractionIntensity != undefined && subs.refractionIntensity != 0) || this._hasTexturesExtension(mat);

It seem, BABYLON default values are not aligned with GLTF default value in a way or another, causing the extensions to be writen.

Babylon default are

  • subs.refractionIntensity is set to 1.
  • subs.maximumThickness is also set to 1.

then setting the bool value tell the serializer to expand the extensions

Is translucency property going to be implemented into the serializer?

How about refraction?

This depends on the glTF extensions. glTF has ratified extensions for KHR_materials_transmission and KHR_materials_volume. @Guillaume_Pelletier recently added support for them to the serializer. The PBR working group (which I am part of) under Khronos is still discussing the newer ones (KHR_materials_translucency and KHR_materials_sss). Once these newer two extensions are ratified, then we can discuss implementing them.