Only Render Scene on Camera Movement

[slippery]

Hi there, 

 

I have some performance issues to solve. Instead of having a render loop constantly render a scene I want to only render the scene when my ArcRotateCamera has moved/is moving (i.e, zooming, rotating, panning). I currently have rendered the scene once on load and then tried this to have it update on the mouse wheel zoom

$(engine.getRenderingCanvas()).on('mousewheel DOMMouseScroll', function(event){       scene.render();});

It ended up being really sluggish though. 

 

 

Does anyone have any ideas on how I can do this?

 

 

Thanks,

[Wingnut]

Hi Slippery, welcome to the forum!

   Wow, what an interesting challenge.  I'm not very experienced, but... you did say ANY ideas.    SO, here's a stupid one.

 

I assume that your performance issues are seen when adjusting html GUI or some other off-canvas operations.  In other words, for some reason, there are times when a "frozen canvas" would work fine... and then when the user re-focuses on the canvas (preparing to do a camera move)... you need the scene to wake-up and act normal.

 

Here is that idea.  We have a tool to make .png screen grabs.  SO, let's say you added your own canvas.onUnFocus() function.  In that function, you do a quick screen grab of the current camera view, then make a canvas-sized html button, and put THAT image on it.  Then set canvas.style.display = "none" which will "collapse" the webGL canvas... but your new html canvas-size button is perfectly placed BEHIND the collapsed canvas.  So, when the webGL canvas collapses, its ok, because you put a clickable picture of the same camera view... behind it. 

 

The users see no change.  They can adjust off-canvas html gui, or do other off-canvas stuff, and when they click on the big button (which the users think is a webGL scene), POOM, button.onclick... you set canvas.style.display = "block" (I think).    You re-raise the html canvas element (the BJS scene), and you can delete your button, or at least set button.style.display = "none" and button.style.backgroundImage = "". 

 

Next time the user un-focuses the webGL, you need to grab a fresh screen grab picture for your big button background image.

 

The REAL question... Does a webGL canvas/scene... after setting canvas.style.display = "none"...  make your device/computer speed up?  I dunno. 

 

Weird idea, huh?  Probably won't work or help.  Maybe you can't get access to DOM/HTML on your device/platform.  *shrug* 

 

Again, welcome.  Others will surely comment soon.

[Temechon]

I would do something like this:

var canRender = false;$(engine.getRenderingCanvas()).on('mousewheel DOMMouseScroll', function(event){   canRender = true;});engine.runRenderLoop(function() {   if (canRender) {      scene.render;   }}// canRender should be set to false when there are no movement during X ms