I’m trying to create app that uses 360 dome to display view. I want to be able to add multiple masks on top of the dome, to create app that allows user to pick masks that should be visible. For example select kind of floor, countertop, chair, and so on, lets say at least 10 different categories with 5 options each, and that sums up to at least 50 dome masks and 1 main dome in app.
I found out that with multiple domes with different materials, or with one dome with multimaterial applied, app starts to lag a lot on mobile devices, or even crash on iPhones.
Here is simple playground: https://playground.babylonjs.com/#53994T#4
There are 2 solutions provided in it, one with separate domes - solution1(), and second one with one dome using multimaterial - solution2()
Do you have any advices on how I could optimize it? Or any advice on better approach?
If I understand correctly, you want to build a dome texture by replacing some parts of the main texture with other parts?
If so, you could use a shader that takes the dome mask as input and writes to the output (the main dome texture) only if the alpha channel of the source is different from 0. So, you should process your dome masks by setting a non-zero alpha channel only for the parts you want to copy into the main dome texture. I think you can even do without a specific shader, simple blending will work if the dome mask has only 1 or 0 in the alpha channel.
Seeing as this example uses 20 8000x4000 textures, I’m pretty sure you’re running into a video memory issue.
To avoid that, I would suggest cropping the part that’s unique in each image so that you end up with smaller textures. Then with a shader, you can offset the UV to make the image appear in the right place on the dome.
About 8000x4000 textures, yeah they are too big, I’ve included too big ones by mistake. 4000x2000 are the ones I’m gonna use on mobile devices.
In this demo I don’t think that cropping images is way to go, if I can’t make sure that I can display 11 textures at once (and for smooth material change animation in app I would need to double that) then maybe this kind of app is failed idea and I should quit it.
I’ve tried using shaders as you’ve suggested (but I’m shader greenhorn), app still crashes on iphones, even after using smaller textures. Could you tell me if I did something wrong and if so how to improve it?
You need to serve an iOS version of the texture. Fancy iPhone doesn’t take textures of such size.
A safe limit is native retina resolution. I think the mask idea from evgeni is a good idea (btw he always has just good ideas, you should listen to him ). It doesn’t really require knowldege on the creation of shaders. You could use NME and may be @Evgeni_Popov would even kindly share a quick template with you? Else, I’ve been using up to 6 different domes in one of my demos. Staked-up as you do. The only difference is 1) the size of textures 2) I make only one dome texture visible at the time. But that wouldn’t work with your use case since you want to add, remove ‘overlays’ of pictures. So again, using NME and a mask for the output seems like the most reasonable to me. Of course, my opinion only. Meanwhile, have a great day
You shader seems fine, but you probably have too many textures used at the same time.
You can only use a maximum of engine.getCaps().maxTexturesImageUnits textures in the fragment shader. This is usually 16 on most GPUs, but on mobile I guess it can be less.
I’ve checked on the iPhone it was crashing on and it says maxTexturesImageUnits is 16
I think as it seems like there is no other choice than either limit number of textures or/and use smaller textures on mobile then I might have to try that.
Thanks everyone for your replies. I will take my time to do some testing and if everythink goes smooth, then I will come back and mark one of the posts as a solution
). It doesn’t really require knowldege on the creation of shaders. You could use NME and may be 