Jump to content

Only Render Scene on Camera Movement


Recommended Posts

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?




Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...