can anyone help me understand how PhotoDome loading works? I’m experiening a scene freeze whenever i try to load in a new image, if that image has a high resolution (8k or 16k). I thought I could create a new PhotoDome in the background, wait until it’s loaded and then make a crossfade animation to transition from one image to the next smoothly. The problem is that when I’m creating a new dome the entire scene freezes until it’s completely loaded.
I’ve tried putting the dome creation in a separate async function, and caching all the images but it doesn’t seem to help.
Also, creating multiple instances of PhotoDomes at the start is not an option, since I have about 30 images I need to swap between and I don’t think loading 30 16k images would be a great solution.
Hi,
I think you should not attempt to create a new dome. I would rather either change the material.diffuseTexture or source. However, changing the source will create a delay when swapping (so I found). Whereas, changing the texture and disposing of the old one seems to work.
There’s still a problem however is when you load the image, even async. The scene freezes for a little while whilst loading.
I’m sure we did read about this in this forum. I think it was a skybox but it should be the same. May be you can make a search in the forum and quickly find this post. Can’t remember if there was a proper solution for this. Else, ez enough would be to ask the expert @Evgeni_Popov on how to best handle this.
In this very rushed PG, I demonstrate that when initializing the load of the image, the scene quickly freezes.
And basically, not very clean and quickly done, this is how I would likely switch between textures. Although, I’m far from being an expert (not even a good coder ) But yeah, I think at least for the approach I would likely look into something similar.
Edit: forgot to mention that the timeout in PG is essentially to be able to differentiate between the loading of the texture and applying it.
I agree, creating a new dome on each transition might not be optimal. I’m using 2 domes beacuse i want to make a cross-fade transition between 2 images (so animate the first image’s opacity from 1 to 0 and at the same time the 2nd image’s opacity from 0 to 1). So I kind of need to use 2 domes, but I guess there’s no need to actually create and dispose a 2nd dome each time, I could just use the same 2 domes for every transition and hide the one which i don’t need at any given time.
This seems like a similar problem, I don’t know if this is the one you were referring to?
OK, I see. Yes, makes senses. I believe you can use visibility to animate the transition.
Correct. I wouldn’t rebuild a photodome each time on the fly. You can set the inactive to not ‘isVisible’ or ‘setEnabled(false)’.
No, it was a more recent one but I kind of recall this has been discussed a few or a number of times.
Only thing is I don’t seem able to find it just now (probably not using the right keywords). May be it wasn’t even a photodome or a skybox. May be simply looking for caching textures or preload assets or something? Sry that I cannot be of more help. If I find it later I’ll post it here. Else, in the meantime, may be someone else will pass by with the answer (hopefully)
Hi I’m having the same kind issue. After reading this topic and several others, I wondered if there could be a solution using WebWorkers to transfer heavy computations to a separate thread and avoid blocking the main rendering process ?
I tried some things but I didn’t success to make them work. I am not a webworker specialist so maybe someone with better understading of this subject could give a hint ?
Also, my reference is this demo from Marzipano where they can achieve a perfectly smooth opacity transition and many other. But I guess the technical constraints are not the same. (and they do not seem to use webworkers so I’m very confused )
@MaticErznoznik Did yo keep the loading screen solution or did you find a workaround ?
No, unfortunately i wasn’t able to find any workaround. I just kept the loading screen.
Although in one different situation i was able to use web workers to perform some computations without blocking the main thread. But to do that i had to basically create another scene in the worker process and do computations on that 2nd scene. It looked something like this
onmessage = async (e) => {
let canvas = e.data.canvas
var engine = new BABYLON.Engine(canvas)
var scene = new BABYLON.Scene(engine);
) But yeah, I think at least for the approach I would likely look into something similar.
)