0

I have a cool project with three.js, and everything work as intended. It displays some mesh in different canvas, and there is my issue.

The project aimed to display many, many canvas, and each one have his own context, and it reach the deadly limit of 16 live webGL contexts. Since it's wanted to display more than that in a page, I'm searching to turn around this restriction, by disabling a context when it's not actually displayed on seen page. When the user will scroll, context will be disabled/enabled so I can put as many context as I want.

I've found this function : renderer.forceContextLoss() and with this one I can force the context disabling. But I didn't found anything to relaunch it. I manage to detect a loss of context, but not its restauration

If you got any idea of how I can achieve that, feel free to give me some tips.

Thanks in advance !

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
Myakko
  • 45
  • 1
  • 8
  • You might find [these examples](https://threejs.org/examples/?q=multiple) helpful, specifically [this one](https://threejs.org/examples/?q=multiple#webgl_multiple_elements). – TheJim01 Aug 28 '17 at 14:15
  • Actually it's a single canvas. There is multiple scene but only one context. I really need to have different context on the page. There is a structure I can't change. Anyway, I will try to see if I can do the same with only one canvas. – Myakko Aug 28 '17 at 15:03
  • It may works after all, I hope it will be enough for what i'm planning to fo. Thanks ! – Myakko Aug 28 '17 at 15:14
  • Why do you "really" need to have different context? I've yet to find a good reason to have more than one in an app. – pailhead Aug 28 '17 at 17:03
  • I have to display multiple big meshes (minimum 500x500) and there is also a limit in dimension that can be reach, even if I use the example given by TheJim01 and gman, since . It will increase the number of mesh I can display but I'm afraid future user may exceed that. Edit - nvm, they will need to stack 68 mesh to reach the limit, so it will be enough x). Anyway, since it seems there is no way to enable/disable, I will try to optimize canvas number/canvas dimension to maximise the number of mesh I can display. – Myakko Aug 29 '17 at 07:14

1 Answers1

0

This has been covered elsewhere but the easiest way to make it appear like there are multiple canvases is to just use one instance of three.js, make it cover the entire window, put place holder divs where you want to draw things, and then use element.getClientBoundingRect to set the scissor and viewport for each scene you want to draw in each element

There's an example here.

Here's the answer in StackOverflow from which that sample originates

https://stackoverflow.com/a/30633132/128511

This will use far less memory than using multiple canvases, each of which would need it's own data, it's own shaders, etc...

gman
  • 100,619
  • 31
  • 269
  • 393