[SOLVED] PlayCanvas Viewer loading with large hdr

Hi There.

I have cloned playcanvas viewer repo and performing several testing. However, somehow failed to load large size hdr.

The size is 5000 x 2500

When I tried to load the hdr as the skybox, it failed with “radiance has invalid scanline width” message.

So, I tracked the message and commented out the following part from hdr-texture.js

            // if (rgbe[2] << 8 + rgbe[3] != width) {
            //     this._error("radiance has invalid scanline width");
            //     return null;
            // }

Then it successfully loaded the hdr as skybox.

However, I found a small gap between the beginning and the end of the hdr image.

Can you kindly let me know how to fix it?


1 Like

@slimbuck Is our resident sky box domain expert who is unfortunately away this week :sweat_smile:

Oh no that is pretty bad :open_mouth:

Generally, it is not recommended to use non power of 2 resolutions, especially if you intent to support iOS (WebGL 1).

Can you load your large file in some other software without problem?

Hi @sooyong_Kim,

Please check that the file is valid and loads correctly elsewhere (like gimp or photoshop).

If the HDR works correctly there and you don’t mind sharing the file with us, we can take a look and hopefully fix any issues with the loader.


I created a 5000x2500 HDR file in gimp and the viewer loaded it fine.

My guess is your file is either unique or corrupt.

Either way, let us know! :slight_smile:

The HDR file is a copyrighted one. I can share it with you personally. (Please don’t use it for elsewhere…:slight_smile:
let me know your email address.


Please email support@playcanvas.com :slight_smile:

I sent an email with two problematic hdr images.

1 Like

Hi @sooyong_Kim,

Thanks for providing the HDR. Here is the PR to fix the width test.

As for the invalid column of pixels, this is happening because the image is not a power of two. I will address this issue in a different PR (since it is most likely a bug in the engine not in the viewer). Till then, you can get this to work by resizing the image to 4096x2048. (Which, as @moka mentioned may be a good idea anyway).


1 Like

I’ve merged the fix from @slimbuck and redeployed the viewer.

I’ve checked out the viewer source but it still doesn’t work… Can you check again?

I just tried loading your HDR file (after resizing it to 4096x2048) and it worked fine. I’ll direct message you a video (but please reply here).

Should I resize the image? Can’t I use it as out of box?

Yes, for now, you need to make it 4096x2048. @slimbuck said the following above:

When he has created that fix, you won’t need to make the HDR power-of-two in dimensions.

Thanks~!!! Hoping this issue will be fixed soon~!!!

1 Like

Do you have any plan to merge those hdr-parser into playcanvas engine???

Are you referring to the non power of 2 fix? If so, we haven’t yet started work on that issue yet.

One issue is that @slimbuck patched hdr-texture.js in the viewer repo, but not the original version of that script in the engine repo.

Those files seem to be diverging a bit now, so we should resolve that.