migrated composition and encoder to scene graph

Author: k9p5

src/composition/composition.spec.ts

@@ -90,24 +90,29 @@ describe('The composition', () => {
 	});
 
 	it('should append new tracks', () => {
+		expect(composition.stage.children.length).toBe(0);
 		const video = composition.createTrack('video');
 
 		expect(video instanceof VideoTrack).toBe(true);
+		expect(composition.stage.children.length).toBe(1);
 		expect(composition.tracks.length).toBe(1);
 
 		const image = composition.createTrack('image').layer('bottom');
 		expect(image instanceof ImageTrack).toBe(true);
+		expect(composition.stage.children.length).toBe(2);
 		expect(composition.tracks.length).toBe(2);
 		expect(composition.tracks.at(-1) instanceof ImageTrack).toBe(true);
 
 		const text = composition.createTrack('text').layer('top');
 		expect(text instanceof TextTrack).toBe(true);
+		expect(composition.stage.children.length).toBe(3);
 		expect(composition.tracks.length).toBe(3);
 		expect(composition.tracks[0] instanceof TextTrack).toBe(true);
 		expect(composition.tracks[1] instanceof VideoTrack).toBe(true);
 
 		const audio = composition.createTrack('audio').layer(1);
 		expect(audio instanceof AudioTrack).toBe(true);
+		expect(composition.stage.children.length).toBe(4);
 		expect(composition.tracks.length).toBe(4);
 		expect(composition.tracks[1] instanceof AudioTrack).toBe(true);
 	});

src/composition/composition.ts

@@ -5,12 +5,11 @@
  * Public License, v. 2.0 that can be found in the LICENSE file.
  */
 
-import { autoDetectRenderer } from 'pixi.js';
+import { autoDetectRenderer, Container } from 'pixi.js';
 import { framesToMillis, Timestamp, FPS_DEFAULT } from '../models';
 import { MediaClip } from '../clips';
 import { Serializer } from '../services';
 import { TrackDeserializer } from '../tracks';
-import { clear } from '../utils/pixi';
 import { isClass } from '../utils';
 import { EventEmitterMixin } from '../mixins';
 import { BaseError } from '../errors';
@@ -35,6 +34,11 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 	 */
 	public renderer?: Renderer;
 
+	/**
+	 * The root container of the composition
+	 */
+	public stage = new Container();
+
 	/**
 	 * Settings of the composition
 	 */
@@ -95,7 +99,7 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		this.on('frame', this.computeFrame.bind(this));
 		this.on('error', this.computeFrame.bind(this));
 
-		autoDetectRenderer({ ...this.settings, clearBeforeRender: false, preference: backend })
+		autoDetectRenderer({ ...this.settings, preference: backend })
 			.then(renderer => {
 				this.renderer = renderer;
 				this.trigger('init', undefined);
@@ -196,6 +200,7 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 
 		track.connect(this);
 
+		this.stage.addChild(track.view);
 		this.tracks.unshift(track);
 
 		track.on('*', this.updateDuration.bind(this));
@@ -301,13 +306,13 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 	 */
 	public computeFrame(): void {
 		if (!this.renderer) return;
-
-		clear(this.renderer, this.context);
-
-		for (let i = this.tracks.length - 1; i >= 0; i--) {
-			this.tracks[i].render(this.renderer, Timestamp.fromFrames(this.frame));
+		
+		for (let i = 0; i < this.tracks.length; i++) {
+			this.tracks[i].update(Timestamp.fromFrames(this.frame));
 		}
 
+		this.renderer.render(this.stage);
+		this.context?.clearRect(0, 0, this.settings.width, this.settings.height);
 		this.context?.drawImage(this.renderer.canvas, 0, 0);
 
 		this.trigger('currentframe', this.frame);
@@ -372,7 +377,7 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 			await track.seek(Timestamp.fromFrames(this.frame));
 		}
 
-		this.timerCallback();
+		this.ticker();
 		this.trigger('play', this.frame);
 	}
 
@@ -456,7 +461,7 @@ export class Composition extends EventEmitterMixin<CompositionEvents, typeof Ser
 		);
 	}
 
-	private async timerCallback() {
+	private async ticker() {
 		const interval = 1000 / FPS_DEFAULT;
 
 		let then = performance.now();

src/encoders/webcodecs.ts

@@ -11,7 +11,6 @@ import { audioClipFilter, createStreamTarget } from './webcodecs.utils';
 import { FPS_DEFAULT, Timestamp } from '../models';
 import { getRenderEventDetail } from './utils';
 import { EventEmitter } from '../services';
-import { clear } from '../utils/pixi';
 import * as utils from '../utils';
 
 import type { StreamTarget } from 'mp4-muxer';
@@ -83,12 +82,12 @@ export class WebcodecsEncoder extends EventEmitter<EncoderEvents>() implements R
 				});
 			}
 
-			clear(renderer);
-
-			for (let i = tracks.length - 1; i >= 0; i--) {
-				await tracks[i].render(renderer, Timestamp.fromFrames(frame, this.fps));
+			for (let i = 0; i < tracks.length; i++) {
+				await tracks[i].update(Timestamp.fromFrames(frame, this.fps));
 			}
 
+			renderer.render(this.composition.stage);
+
 			const videoFrame = new VideoFrame(renderer.canvas, {
 				timestamp: Math.floor((frame / this.fps) * 1e6),
 				duration: Math.floor(1e6 / this.fps),