Loading Cubemaps GLTF Extension

Questions
1

Hey @bghgary … I need your advise on loading CubeTextures in GLTF. I have added support for lightmapTextures and reflectionTextures by way of my GLTF Extension.

Since the lightmapTexture is a standard image (png/jpg) i can use the loadTextureAsync so the texture size for download is taken into account. So this works for lightmaps

                        promises.push(this._loader.loadTextureInfoAsync(context + "/lightmapTexture", commonConstant.lightmapTexture, (texture) => {
                            texture.name = `${sourceMaterial.name} (Light Map)`;
                            texture.level = (commonConstant.lightmapLevel) ? commonConstant.lightmapLevel : 1;
                            texture.gammaSpace = false;
                            // ..
                            // Setup HDR Lightmap Flag On Loaded
                            // ..
                            const realTexture:BABYLON.Texture = texture as BABYLON.Texture;
                            realTexture.onLoadObservable.addOnce(()=>{
                                if (realTexture.isReady()) {
                                    realTexture.isRGBD = true;
                                } else {
                                    BABYLON.Tools.Warn("Failed to register texture as RGBD: " + realTexture.name);
                                }
                            });
                            commonMaterial.lightmapTexture = texture;
                            commonMaterial.useLightmapAsShadowmap = true;
                            if (BABYLON.Utilities.HasOwnProperty(commonMaterial, "ambientColor")) {
                                commonMaterial.ambientColor = BABYLON.Color3.White();
                            }
                        }));

Now i need to load reflectionTextures… with DDS/ENV file formats that go into a CubeTexture.

I think the loadTextureInfoAsync eventually call loadImageAsync… which get the array buffer data…Create a Texture (with no url) and then use texture.updateURL(dataUrl, binData) to actually assign the image data to the texture.

How would i handle something like this for a cubeTexture… is there a way to manually assign the image data (dds/env) you get from in the arraybuffer you download to a new CubeTexture like we do for regular textures ???

I basically need a way to account for the extra reflection texture file sizes in the SceneLoader.Load onProgess event… The only way i see that is to have ALL downloads go thru the GLTF loader _loadFile or _requestFile … So it calculates the evt.loaded and evt.total in the progress event…

How should i handle that ???

Thanks in advance :slight_smile:

2

From a brief look, I think you need to call loadImageAsync directly bypassing loadTextureInfoAsync. Use the results from loadImageAsync to create a new CubeTexture. But it looks like we have to add a way pass a buffer to a CubeTexture and the helper functions, as they all only take urls. It also doesn’t have the delay loading mechanism as Texture does. Do you want to try to add this in a PR?

3

Yo @bghgary … I would not mind making the PR… But i am not sure HOW modify the cubemap texture to take data from a buffer as well as implementing the delay loading mechanism. If you can help me point what needs to be done. i can try

4

I don’t know exactly either, but I think we need to replicate the pattern for Texture.ts.

Babylon.js/texture.ts at master · BabylonJS/Babylon.js · GitHub (constructor needs to take a buffer, handle empty url passed in, etc.)

Babylon.js/texture.ts at master · BabylonJS/Babylon.js · GitHub (updateURL, etc.)

Babylon.js/engine.cubeTexture.ts at master · BabylonJS/Babylon.js · GitHub (this function needs to take a optional buffer instead of the URL, etc.)

This will take some work I think, if you need this now. You can also wait since at some point, we will have to do this work to implement an IBL extension for glTF (once the Khronos 3D Formats group is ready).

5

I will start to play with duplicating Texture functionality like updateURL etc… Because i really need that now… The client wants a more accurate account of the assets loaded

1 Like
6

Hello to you both. Can I ask for the status and availability of CubeMaps in the gltf loader (more specifically, ktx2) ?

r

7

I dont think KTX2 works with cubemaps… My cubemaps are dds/env.
Also i had to create an GLTF extension for the Babylon Toolkit to load Cubemaps.

Actually three different types of Cubemap loading.

1… ReflectionTexures - These cubemaps are using a special loadURIData function i wrote to handle cubemaps on materials

2… EnvironmentTexture - This cubmap is loaded with an Asset Manager during my toolkit PRELOADING stage

3… The Skybox Mesh - This on is actually a six sided cubemap, i could not figure out a good way to load this type except to manually create an instance of a CubeTexture and specify the base url of the six RGBD packed HDR images use to create the skybox

That is how i am handling cubemaps in my toolkit GLTF Loader Extension

8

This is from the beginning of the KTX specification:

The contents of a KTX file can range from a simple base-level 2D texture to a cubemap array texture with mipmaps.

There is no official support for cubemaps in glTF yet. Adobe and Microsoft have created an extension for storing environment textures here, but this is not using KTX. Here is a demo: Babylon.js - EnvironmentTest.gltf (babylonjs.com)