Unable to load JSON skybox

Help & Support
1

Hi folks!

I’m trying to properly load a skybox in the engine without using workarounds or hacks. But I somehow can’t get it to work. Currently I’m stuck at the WebGL: INVALID_VALUE: uniform1iv: no array error.

pcApp.assets.loadFromUrl('heliSkybox.json', 'json', (error, asset) => {
	if (error)
		return console.log(error);

	pcApp.setSkybox(asset);
});

The heliSkybox.json is based off the skybox in this tutorial. Skybox files as I have them right now: Download ZIP archive.

Asset object data after load:

  name: 'heliSkybox.json',
  type: 'json',
  tags: 
   { _index: {},
     _list: [],
     _parent: [Circular],
     on: [Function: on],
     off: [Function: off],
     fire: [Function: fire],
     once: [Function: once],
     hasEvent: [Function: hasEvent],
     _callbackActive: {},
     _callbacks: { add: [Object], remove: [Object] } },
  _preload: false,
  variants: { asset: [Circular] },
  _file: 
   { url: './assets/skybox/heli/heliSkybox.json',
     filename: undefined,
     hash: undefined,
     size: undefined,
     variants: { asset: [Circular] } },
  _data: {},
  _resources: 
   [ { textures: [Object],
       magFilter: 1,
       minFilter: 5,
       anisotropy: 1,
       name: 'heliSkybox',
       rgbm: true,
       prefiltered: 'heliSkybox.dds' } ],
  loaded: true,
  loading: false,
  registry: 
   { _loader: { _handlers: [Object], _requests: {}, _cache: [Object] },
     _assets: [ [Circular] ],
     _cache: { '1': 0 },
     _names: { 'heliSkybox.json': [Object] },
     _tags: { _index: {}, _key: '_id' },
     _urls: { './assets/skybox/heli/heliSkybox.json': 0 },
     prefix: null,
     attach: [Function: attach],
     on: [Function: on],
     off: [Function: off],
     fire: [Function: fire],
     once: [Function: once],
     hasEvent: [Function: hasEvent] },
  on: [Function: on],
  off: [Function: off],
  fire: [Function: fire],
  once: [Function: once],
  hasEvent: [Function: hasEvent],
  _callbackActive: { load: null },
  _callbacks: { load: [], error: [ [Object] ] } }```

Any help is appreciated. Thanks in advance.
2

Do you have any other errors in the console or network tab of devtools? I’m wondering if an asset failed to load.

3

Thanks to some left-over code I still manually loaded the actual skybox assets as well. I removed that bit of code and the code posted on top does not load the actual texture assets.

Is this an engine bug?

Edit: https://github.com/playcanvas/engine/issues/317
It’s kind of sad that basic functionality like this is missing.

4

I haven’t tried it but looking through the engine code, you should be able to load the DDS file that gets generated when creating the cubemap in the editor.

image

The bug that you are referencing looks like an old JSON format for cubemaps which isn’t used anymore.

Edit: Looks like you are loading the cubemap as ‘json’ type rather than ‘cubemap’.

Try

pcApp.assets.loadFromUrl('heliSkybox.json', 'cubemap', (error, asset) => {

If you look at application.js in the engine, you can see all the different types of resource handlers.

5

Unfortunately cubemaps don’t support JSON files.
Error loading Texture: format not supported: '.json'

Thanks for trying to help me. :slight_smile:

6

This is the closest I’ve got to loading the DDS directly. I think I am missing a patch or a setting somewhere (I’m guess mip maps): https://playcanvas.com/editor/scene/626254

The alternative is to look at this code pen that uses the 6 textures instead: https://codepen.io/scarletsky/pen/xXKQqZ