Basis support for skyboxes?

Questions
1

I’ve been unable to get basis textures to work with skyboxes. Tried 2 methods:

  1. Simply using .basis images in place of my current png textures for the skybox and using CubeMaterialCreateFromImages -No errors, yet nothing shows up, as if it decided not to transcode, or failed to update the texture after transcoding maybe?
  2. Using basis cubemap format. (With CreateFromPrefilteredData) While this worked (loaded), the images were super distorted/color issues.

Also noticed on the basis example playground,
https://playground.babylonjs.com/#E4VDDW

Line 76 commented out, looked like an attempt to use basis as environment texture. – Anyways is there a reason #1 doesn’t work, and or know if there are issues w using basis as skybox, thus the commended out line?

2 Likes
2

Really curious about .basis support in Babylon.js. Saw this cool Medium post on this. Hopefully, the Babylon.js team can shed more light on this.

In the meantime, was able to have the skybox working from your .dds file: https://playground.babylonjs.com/#E4VDDW#7

Added the lines:

const skybox = BABYLON.MeshBuilder.CreateBox('skyBox', { size: 1000.0 }, scene);
const skyboxMaterial = new BABYLON.StandardMaterial('skyBoxMaterial', scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://raw.githubusercontent.com/TrevorDev/gltfModels/master/basisTestAssets/env.dds", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
3

it’s actually supported by babylon right now, mainly just having issues with skybox.

https://doc.babylonjs.com/resources/multi-platform_compressed_textures

Scroll to bottom.

4

pinging @bghgary

5

Seems like it should work, but I haven’t personally tried this. Would it be possible to set up a PG using both methods? That will help debug the issue.

6

@bghgary well I can try at least, but having issues w skybox/PG maybe due to size (won’t load pngs either), but leaving this here as logging for night. But images are loaded in gist, pngs and basis versions. Also skyboxtest.basis is a cubemap (created w no regards to order)

https://www.babylonjs-playground.com/#UU7RQ#600

7

Unfortunately, this isn’t working due to CORS :frowning:

Access to XMLHttpRequest at ‘https://gist.githack.com/jasonayre/f878e40c8d36afe48be47ab3b460c3fb/raw/57cff4732407653ce9d3b1ffb6b989775bf89170/right.basis’ from origin ‘https://www.babylonjs-playground.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

8

I sincerely hope a little thing like browser CORS settings haven’t stopped you looking into this. I would love to use the basis cubemap in BabylonJS.

9

This is true, I can spend time setting it up, but then I will not be spending time else where. The easier it is to set up the repro, the faster we can help with the solution.

10

Totally supporting @bghgary. Please do your homework and provide a working repro. It is free support already :slight_smile:

11

Yes, like I said, it wasn’t working, but the source files are there, so figured I’d upload in case you had a local playground to load it in quickly. Unfortunately probably won’t be able to get to this until weekend since swamped@day job. And the method ^ used to work so not sure what happened.

12

@bghgary https://www.babylonjs-playground.com/#BBM6QM#1

Can see in first example, basis requests completing but not working (also says loading assets still, so may be related to issue)

Comment in line 36 to see the full cube basis texture artifacts. It looks slightly better than my actual skybox I’m trying to use it on, but very similar artifacts (I think this one is just darker/less dynamic overall so doesn’t look quite as bad.

Comment in line 13 to see the working PNG versions of the source images

(again, skybox images are out of order, expected)

2 Likes
13

A couple of things I’ve found so far.

First, the Basis texture loader in Babylon.js does not support loading a cube map with 6 individuals files. There is a flag on the loader that indicates this, but this flag is marked wrong causing the code to just do nothing instead of reporting a warning. I will fix this.

Second, it looks like the Basis file is encoded in gamma space. You can set that manually for now for the colors to be right.

https://www.babylonjs-playground.com/#BBM6QM#2

1 Like
14

Thanks! I’ll give that a try on my actual skybox but looks like the output I expected from PG. FYI basis is encoding that way by default when creating cube texture (Didn’t use any special options or anything other than -tex_type cube)

15

My guess is it is always encoded this way or there is a way to tell from the Basis transcoder, but I haven’t figured it out yet.