PIXI.js : Code architecture to not recreate full scene at each frame

[franklbt]

I am currently creating a web drawing software that uses PIXI.js and NgRx with Angular https://i.imgur.com/KoTckDq.png.

For the moment the basic principle is as follows: the component managing the drawing area (a canvas) subscribes to state slices, and each time the state is updated, I call a method allowing to clean all the elements of the canvas, then add them back to the scene.

@Component({
  selector: 'app-canvas-renderer',
  templateUrl: './canvas-renderer.component.html',
  styleUrls: ['./canvas-renderer.component.scss']
})
export class CanvasRendererComponent implements OnInit, AfterViewInit {
  frames$ = this.store$.select(framesSelector);
  app!: PIXI.Application;

  @ViewChild('canvasElement')
  canvasElement!: ElementRef<HTMLCanvasElement>;
  constructor(
    private ngZone: NgZone,
    private store$: Store<State>) {
  }

  ngAfterViewInit(): void {
    // this.onResize();
    const boundingClientRect = this.canvasElement.nativeElement.parentElement;
    if (boundingClientRect) {
      this.canvasElement.nativeElement.style.width = boundingClientRect.clientWidth + 'px';
      this.canvasElement.nativeElement.style.height = boundingClientRect.clientHeight + 'px';
    }
    this.app = new PIXI.Application({
      view: this.canvasElement.nativeElement,
      resolution: window.devicePixelRatio || 1,
      width: boundingClientRect?.clientWidth,
      height: boundingClientRect?.clientHeight,
      backgroundColor: 0xF0F4FA
    });

    this.frames$.subscribe(this.update.bind(this))


  }

  private update(frames :FrameState[]) {
    this.app.stage.removeChildren();
    const globalContainer = this.getGlobalContainer();
    this.app.stage.addChild(globalContainer);
    const screensContainer = new PIXI.Container();
    for (let i = 0; i < frames.length; i++) {
      const renderedFrame = this.getRenderedFrame(frames[i], frames, screensContainer);
      screensContainer.addChild(renderedFrame);
      for (let j = 0; j < frames[i].nodes.length; j++) {
        renderedFrame.addChild(this.getRenderedNode(frames[i].nodes[j], frames[i], frames));
      }
    }
    this.app.stage.addChild(screensContainer);
  }
}

I had several questions about this method:

- Currently all of the DisplayObject creation code is included in my canvas component. I wondered if there was a cleaner architecture to separate the drawn objects.
- How is it possible to have an architecture allowing to modify the generated DisplayObjects instead of destroying them and regenerating them?

[ivan.popelyshev]

> Currently all of the DisplayObject creation code is included in my canvas component.

pixi containers, sprites, graphics, e.t.c. do not depend on renderer. That should help.

> How is it possible to have an architecture allowing to modify the generated DisplayObjects instead of destroying them and regenerating them?

You are angular specialist, I'm not  Its definitely possible, because there are pixi fibers for react, there are threejs fibers which are 50% of threejs projects already

[franklbt]

Ok thanks for the answer, I finally found the following solution: all the concepts represented in the editor are now objects inheriting either from a BitmapText, Container or Sprite. It is therefore sufficient to add them directly to the scene to be able to display them, knowing that these objects manage their own subscriptions to events. These objects also contain something to react to the change of their properties, which makes it possible not to regenerate the objects at each frame. Thanks for the hints, I think they helped me go in the right direction.