How to render 2 different perspectives of the same scene (e.g. Split-Screen)

[lovelle-cardoso]

@jnsmalm Is there a way to create multiple cameras and render each camera to a different CompositeSprite?

Like for a split-screen local co-op game?

[jnsmalm]

Yes, you can do something like this:

class SplitScreen extends PIXI3D.CompositeSprite {
  constructor(renderer, object) {
    super(renderer, {
      width: renderer.width, height: renderer.height / 2, objectToRender: object
    })
    this.camera = new PIXI3D.Camera(renderer)
    this.camera.aspect = this._renderTexture.width / this._renderTexture.height
  }

  renderObject(object) {
    let currentCamera = PIXI3D.Camera.main
    this.camera.aspect = this._renderTexture.width / this._renderTexture.height
    PIXI3D.Camera.main = this.camera
    super.renderObject(object)
    PIXI3D.Camera.main = currentCamera
  }

  changeSize(width, height) {
    this._renderTexture.resize(width, height, true)
  }
}

Then use it like this:

let worldRoot = // ... Note that worldRoot should not be added to the PixiJS stage, it's parent should be undefined.

let splitScreen1 = app.stage.addChild(new SplitScreen(app.renderer, worldRoot))
splitScreen1.camera.x = 1

let splitScreen2 = app.stage.addChild(new SplitScreen(app.renderer, worldRoot))
splitScreen2.y = app.renderer.height / 2

app.ticker.add(() => {
  splitScreen1.changeSize(app.renderer.width, app.renderer.height / 2)
  splitScreen2.changeSize(app.renderer.width, app.renderer.height / 2)
  splitScreen2.y = app.renderer.height / 2
})

Now you can change each splitScreen's camera any way you want.

[lovelle-cardoso]

@jnsmalm Great! Setting Camera.main to a different camera before rendering the CompositeSprite was the piece I was missing. Thanks so much!