KTX texture problem

[johntdaly7]

Thanks for checking on that @bghgary. So I can make a cubemap via PVRTexTool for sure. But which function would I then utilize with this cubemap texture?

It seems the CubeTexture() constructor does indeed take in a source url and then automatically appends the px,py,pz,nx,ny,nz extensions to make 6 separate calls to where the textures are. This works fine with jpgs but not ktx files.

Additionally, when I try to use a single cubemap texture -dxt.ktx file and then fall back to the 6 individual jpgs if that does not work, like @Vinc3r did above, that does not work either. I am wondering if they got theirs to work. I have that setup in my current playground here:
https://playground.babylonjs.com/#UHQ4FB#5

and here are my files in S3:

The CubeTexture.CreateFromImages() function also seems to only take in 6 texture images.

What function would I use for a single cubemap-format -dxt.ktx compressed texture image? Or basis image?

I tried using CubeTexture.CreateFromPrefilteredData(cubeTextureUrl, scene, null, false);

(as seen in this playground):

https://playground.babylonjs.com/#UHQ4FB#3

with a cubemap-format (dds) texture. This seems to have the most promise, but the image is decoded/transcoded in a really funky way. I think that might be related to the issues outlined here:
Basis support for skyboxes? - #9 by bghgary even though I am not using Basis.

I’m currently using the cubemap texture from here:

https://swivel-api-dev.s3.amazonaws.com/skybox_textures/combined/skyboxConvertedCubeMap.dds

Should I not have exported the cubemap into dds format for the CreateFromPrefilteredData function? Which format makes the most sense to maintain as much compression as possible and still work?

I thought only dds/env are compatible to hold a cubemap-format texture.
Or maybe Basis too, but the issues in the forum post I just posted above in this reply don’t seem to be resolved either.

Thanks!

[bghgary]

Let’s just focus on one thing at a time. I say start with KTX. I can see there is code trying to load a single KTX with 6 faces in them, but the code currently blocks this from happening. Once I unblock it, the code seems to be trying to load a KTX and is expecting 6 faces. Do you have a KTX file with 6 faces I can try?

[johntdaly7]

Here’s a cubemap-format ktx texture that should have all 6 faces in it:
https://swivel-api-dev.s3.amazonaws.com/skybox_textures/combinedTest/skybox-dxt.ktx

[bghgary]

The KTX loader claims that this file only has 1 face.

[johntdaly7]

That’s what I noticed too. That seems to have been the root of the issue. Thank you so much for your patience and helping my finally realize the error of my process!

The original file I was using looks like:

which is standard cubemap format, which mislead me to believe that it was encoded correctly as a cubemap and not as a single image.

This is what went wrong:
At first I converted the 6 jpgs into a cubemap jpg and then compressed that cubemap jpg into ktx.

Now, I just created a cubemap natively in PVRTexTool and then compressed it with DirectX11 BC1 (-dxt.ktx) and got this:
https://swivel-api-dev.s3.amazonaws.com/skybox_textures/combinedTest/skybox-dxt.ktx

which (thankfully!!!) shows up here:
https://playground.babylonjs.com/#UHQ4FB#7
The only issue with that version is that the sides are flipped. I compressed it in PVRTexTool with the vertical flipped flag turned on (as suggested in the documentation).

When I compressed it instead with vertical flipped flag turned off, it shows up correctly!:
https://playground.babylonjs.com/#UHQ4FB#8

Lastly:
In this version of skybox creation (using CubeTexture.createFromPrefilteredData), seams can be seen where the images are stitched together. I noticed that, when using the new CubeTexture() constructor, the image seams are not really noticeable (back when I was testing which function to use with the separate, uncompressed jpgs). Is there a way to mitigate this? Or is this a byproduct of having to use CubeTexture.createFromPrefilteredData?

Thanks!

[bghgary]

@johntdaly7

When I compressed it instead with vertical flipped flag turned off, it shows up correctly!

Nice. Glad this finally works. There is still an issue with the code though. You shouldn’t have to pass https://swivel-api-dev.s3.amazonaws.com/skybox_textures/combinedTest/skybox-dxt.ktx directly. You should be able to pass https://swivel-api-dev.s3.amazonaws.com/skybox_textures/combinedTest/skybox.ktx and use the texture selector, but there is code blocking this from happening right now. If you can file an issue on GitHub, I can submit a fix for it.

@johntdaly7

Lastly:
In this version of skybox creation (using CubeTexture.createFromPrefilteredData), seams can be seen where the images are stitched together. I noticed that, when using the new CubeTexture() constructor, the image seams are not really noticeable (back when I was testing which function to use with the separate, uncompressed jpgs). Is there a way to mitigate this? Or is this a byproduct of having to use CubeTexture.createFromPrefilteredData?

createFromPrefilteredData just calls the constructor with some flags, so there will be no difference for the seams. I’m not sure why there are seams. Perhaps it’s from the compression or maybe there is a bug somewhere.