Jump to content

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


Recommended Posts

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?

Link to post
Share on other sites

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

Link to post
Share on other sites
  • 2 weeks later...

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.

Link to post
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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...