How to cull objects out of camera view?

[ShotgunJed]

I know this has been asked a few times, but I cannot seem to get it to work in my implementation.

I use this code to control the camera:

stage.pivot.x = user.position.x;
stage.pivot.y = user.position.y;
stage.position.x = renderer.width/2;
stage.position.y = renderer.height/2;

Given an object in a stage, how would I detect it being outside of the camera?

I tried using:

// Works, moving the camera to the right will hide objects as they
// touch the left side of the screen
if (worldTransform.tx < 0) {
  item.visible = false;
}

// Doesn't work at all. Objects touching the right side of the screen
// will continue to be visible
// I haven't even included the code where they become visible again
// and it still doesn't make it invisible
if (worldTransform.tx > 900) {
  item.visible = false;
}

but it doesn't seem to work. I always get the same value every time I log it in the console, even in my game loop and when I move the camera (it prints the same value thousands of times in Chrome's console).

How do you detect objects outside of the "camera's" view?

[Exca]

I use a script like this:

 

for( var i = 0; i < allObjects.length; i++)
{
  var object = allObjects[i];
  var bounds = object.getBounds();
  object.renderable = bounds.x >= viewport.x && 
                      bounds.y>=viewport.y && 
                      bounds.x+bounds.width <= viewport.height && 
                      bounds.y+bounds.height <= viewport.width;
} 

Using visible = false means that your transforms do not get updated, that's the reason why worldtransform.tx is not working. Renderable keeps updating the transform but just skips the rendering.

[Taz]

Wont screen be better practice than view thou? Otherwise when resolution is greater than 1, objects will take too long to be culled and will become renderable too soon, right? (assuming viewport is app.view or renderer.view).

EDIT: By screen I mean using app.screen or renderer.screen instead of using view dimensions since those screen dimensions aren't affected by resolution but the view dimensions are

[ShotgunJed]

15 hours ago, Exca said:

I use a script like this:

 

for( var i = 0; i < allObjects.length; i++)
{
  var object = allObjects[i];
  var bounds = object.getBounds();
  object.renderable = bounds.x >= viewport.x && 
                      bounds.y>=viewport.y && 
                      bounds.x+bounds.width <= viewport.height && 
                      bounds.y+bounds.height <= viewport.width;
} 

Using visible = false means that your transforms do not get updated, that's the reason why worldtransform.tx is not working. Renderable keeps updating the transform but just skips the rendering.

Where do you get your viewport object from?

[caymanbruce]

29 minutes ago, ShotgunJed said:

Where do you get your viewport object from?

i think viewport means the camera object you mentioned in your question.

[ShotgunJed]

4 minutes ago, caymanbruce said:

i think viewport means the camera object you mentioned in your question.

Oh. I don't know where the viewport information is stored within pixi.js, but I did something like this:

tile.renderable = bounds.x >= 0 &&
    bounds.y >= 0 &&
    bounds.x + bounds.width <= 1920 &&
    bounds.y + bounds.height <= 1080;

It works for now, but since I'm using hard-coded values, I know for sure it won't work for other monitors different than mine. Do you know of any object or function that gets the height and width of the current window/screen?

[Taz]

app.screen is good for screen culling - app.screen.width and app.screen.height are the same size that you set app.renderer to (if you use app.view or app.renderer.width and height, it will work only when resolution is 1 since the dimensions get multiiplied by resolution).

[Exca]

Oh yeah, viewport is my own object that basically stores the info about what areas to render. Usually the size of the renderer.

[unrealnl]

This an old post, but since it does not offer a complete solution I'm dropping this link here:

https://github.com/ErikSom/PixiCulling

Feel free to explore the source as it might offer a more complete solution to culling.

Additionally there is this one, which looks great as well:
https://github.com/davidfig/pixi-cull