Crash on Firefox, slow on Internet Explorer and devices (demo provided)

performance

#1
Description of the problem

Hello there,

I researched a lot about this problem and I’m going crazy trying to understand why my example is causing a crash on Firefox, and runs VERY SLOWLY con Internet Explorer and mobile devices.

I’m rendering a big (4K) image on a sphere geometry, trying to create a kind of a pano viewer. In the real application, we can go from one place to the next one, clicking on the invisible shapes that are created inside the sphere.

In the real app, we have a big (4K) video rendering so we have some stuff in a certain area that moves in a loop. However, for this demo I commented those lines (addVideoTexture and renderVideo), so I understand this is not the issue here.

Pay attention to our raycaster, I suspect it is causing big performance problems, but I don’t know any other way of detecting when our mouse is going over an “action hotspot” (look above) or a “indicator hotspot” (invisible areas that would allow to go to other places when clicking).

The problem is that this demo is causing a crash on Firefox, and going very very slow on plenty of devices and Internet Explorer.

Thanks a lot…

Ricardo

Example:

https://jsfiddle.net/ggL3uemh/13/

Three.js version

r89

Browser
  • [ ] All of them
  • [ ] Chrome
  • [x] Firefox
  • [x] Internet Explorer
OS
  • [ ] All of them
  • [x] Windows
  • [ ] macOS
  • [ ] Linux
  • [ ] Android
  • [ ] iOS

#2

At first sight, i can see some things that can be improved:

  • There is no need to set alpha to true when you create WebGLRenderer. Transparency also works without this parameter.
  • You can simplify your sphere geomtry to new THREE.SphereBufferGeometry( 500, 60, 40 )
  • You have the following statement in your code: pano.doubleSided = true;. doubleSided is no property of Mesh. You can use the material property side but you actually don’t need it in your application.
  • THREE.ImageUtils is deprecated. Create a single instance of TextureLoader and reuse it for texture loading.
  • No need to set renderer.sortObjects = true;. This property is true by default.
  • I think the usage of Raycaster should be unproblematic since you raycast against simple geometries.

Apply these changes and see if there is any difference in performance.


#3

BTW: Your demo works fine on my Firefox 58.0.2.


#4

The same on my FF 58.0.2. / Win 7 / built-in Intel graphics.


#5

Thanks a lot for your answer,

I tried with all these changes, and still getting problems… Did you try on IE?

It is true that it works on FF. It is just not working on mine, even making Windows 8.1 crash, blue screen included!


#6

Unfortunately, i don’t have access to IE (Mac-User). Besides, your demo runs fine on my Pixel.

Um, the blue screen is strange. Can you try to update your graphics driver?


#7

It is not my main concern as we tested it on different computers and runs ok.

However, we are unable to reach a decent amount of FPS on any combination of devices and browsers, except Chrome on desktop.

Could it be that our textures are too big? Maybe there is no way to make a raycaster give good performance if we are checking on our render function all the time… but we need to make it work. It is not enough for us to raycast on click only.

I read about gpu picking and tried to make it work without success.


#8

Basically yes. But if you want to show some kind of label when the user hovers over the object, you need to perform the raycast in the render loop.

In general, do you have a better performance without any raycasting? Like i said before, the amount of overhead should be manageable. I can’t imagine that this is the bottleneck.

Yes. Downsample the textures (halve the resolution) and see if it makes any difference. You need to test with different setups in order to determine the problem.


#9

This post might also be interesting for you. It’s from the PlayCanvas forum but the explanations are valid for all WebGL applications.


#10

Thanks again Mugen,

I don’t think we can make our textures smaller, because we already tried and it just looks all pixeled. I compressed everything as much as I could, and the problem here is that we have to use PNG because there is a transparency in the middle of each image and then we have a video behind, same size (4K) so it fits perfectly without worrying about it.

Yes, if we stop raycasting, it improves A LOT.

Maybe we could implement something like octrees?? I have just been reading about it, and it looks great. What do you think?


#11

The thing is…you raycast against six simple planes. Each plane has only two triangles, so the complexity of the geometry is very low. That’s the reason why i’m confused about your performance improvement without raycasting. It should not be an expensive operation.

The usage of a spatial index like an octree always creates some additional overhead. You need to perform a test if you actually have a performance benefit in your application.


#12

I guess the performance is bad because of the addition of things, I mean:

  • 4k texture on a sphere with transparency, compresed (2mb PNG)
  • Orbit controls
  • 4k video texture on a sphere (5mb video aprox)
  • Between 6 and 10 PlaneBufferGeometries, some of them with a color as material and others with a light png (kind of hotspots in the scene)
  • Raycasting in the render loop

I can say now, that after trying octrees, IT IMPROVED A LOT. I didn’t put it in the demo, if I have some free time I’ll do, anyway if you are not finding any problems in Firefox either, it doesn’t make much sense. We were having performance problems in Firefox here, for sure.

Thanks for everything Mugen87, you have been really helpful.

If you want some more insight about my impression about octrees, let me know.

Cheers


#13

We are still getting performance issues and it is because of the 4k video rendering.

If I try with a 2k video, it improves greatly.

Would there be any way to render only a part of a video on a sphere so I don’t have to go down to 2k?

Thanks a lot


#14

Hi again @Mugen87,

I created a new post to address another problem that we face now that we made the video textures way smaller (1K).

We have to position the new Mesh exactly where it should be. I created a jsfiddle with just an image to show the problem, but it would be the same with our video.

Thanks a lot…