How to create skybox programmatically?

Help & Support
1

Hello, all,

Can you provide an up-to-date example on how to create skybox totally programmatically?

After looking at the PlayCanvas engine source code, I tried this:
var backImage = new Image();
backImage.src = backImageUrl;
var leftImage = new Image();
leftImage.src = leftImageUrl;
var frontImage = new Image();
frontImage.src = frontImageUrl;
var rightImage = new Image();
rightImage.src = rightImageUrl;
var topImage = new Image();
topImage.src = topImageUrl;
var bottomImage = new Image();
bottomImage.src = bottomImageUrl;

var skyboxCubemapTexture = new pc.Texture({
cubemap: true
});
skyboxCubemapTexture.source = [
backImage,
leftImage,
frontImage,
rightImage,
topImage,
bottomImage
];
app.scene.skybox = skyboxCubemapTexture;
// also tried app.scene.setSkybox(skyboxCubemapTexture);

but unfortunately it does not work.

Thanks in advance.

Kind regards,
Trifon

2

Hey, guys,

It’s been a while since a posted my question. @will and @dave, guys, any ideas about this one?

Thanks in advance.

3

I’ve created a project that loads textures from assets and then creates a cubemap and assigns it to the skybox.

It’s better to use the asset system for loading textures especially if you want to support HDR images like in the example.

1 Like
4

@dave thanks a lot for your help - your example was very useful. After making my code exactly as yours the skybox didn’t appear initially, but then after some additional looking in the PlayCanvas framework source code I reached important realization - the skybox texture images I used had different sizes, thus making the _levels object empty and the skybox invalid. After making sure I used 6 textures all with the same size everything worked.

Once again thanks. :smile:

5

Ah yes. It is a requirement that all cubemap textures are the same dimensions.

Glad to help.

6

Dave, I used your project script, but it merged it with the existing skybox. How do I replace the skybox? Never mind, I had HDR set. Thanks. Got it. Except I’d really like to set the skybox from an existing cubemap instead of getting all the textures again.

7

Can you just do this bit?

// set as the skybox
app.scene.skybox = cubemap;
8

It isn’t possible in PlayCanvas engine right now? I found issue on GitHub about this subject.

I can download cubemap asset from PlayCanvas Editor, but can’t use this asset?..

9

I’m not sure. @vaios or @max may know more, but for now, I’ve created this issue:

10

It turned out to be pretty easy:

app.assets.loadFromUrl("skybox.dds", "cubemap", function (err, asset) {
      app.scene.skyboxMip = 2;
      app.scene.setSkybox(asset.resources);
});
2 Likes
11

@mikefinch Is there a complete working example, please?

12

Hi @iso74,

I think a good working example is the Playcanvas glTF viewer, on how to load a skybox in code:

1 Like
13

@Leonidas Thanks a lot, it is working now, also with a single DDS file, but… :slight_smile: Why is it so distorted. How can I tweak the resolution?

my
my851×569 24.9 KB
viewer

14

That’s strange, so top picture is your code bottom picture is same asset in the glTF viewer?

Not sure what’s wrong here, try making sure that the skyboxMip is set to 0 in the scene settings:

https://developer.playcanvas.com/en/api/pc.Scene.html#skyboxMip

15

@Leonidas Exactly, top is mine, bottom image is the viewer.
And yes I set skyboxMip to 0: app.scene.skyboxMip = 0;

I assume it has something todo with texture resolution of the generated DDS, but I really
don’t know. I want to use max FullHD screen width and it is responsive by now. On tablets and mobiles it looks a bit better due to the small size, but it’s still not as clean as in the viewer example which is using the editor. Does engine (only) something different, maybe?

16

@Leonidas Oh now I also got it distorted in the viewer :frowning:
Not sure what happend, simply did call it in the browser and switch skyboxMip to 0…

viewer
viewer1915×948 70.4 KB

17

@Leonidas i see that the texure size is 4 instead of 128. Can this be the case? How can I change it, it seems 4 is engine default…