1a4107a32a
In this demo the user may choose between one of three path rendering methods
1. SVG
2. Canvas2D Path2D API
3. CanvasKit
SVGs is animated using css transforms on the main thread, while Canvas2D and CanvasKit are animated
in a worker using OffscreenCanvas.
While the user views the result of the rendering, the demo collects framerate data and displays it
so the user may compare the performance of the three methods.
Change-Id: I8cd6e079bab8815614e09a276cfe78bee9557fda
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/309327
Reviewed-by: Kevin Lubick <kjlubick@google.com>
55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
importScripts('https://particles.skia.org/static/canvaskit.js');
|
|
importScripts('shared.js');
|
|
|
|
const CanvasKitPromise =
|
|
CanvasKitInit({locateFile: (file) => 'https://particles.skia.org/static/'+file});
|
|
|
|
const path2dAnimator = new Animator();
|
|
const canvasKitAnimator = new Animator();
|
|
addEventListener('message', async ({ data: {svgData, offscreenCanvas, type, switchMethod} }) => {
|
|
// The worker expect to receive 2 messages after initialization: One with an offscreenCanvas
|
|
// for Path2D rendering, and one with an offscreenCanvas for CanvasKit rendering.
|
|
if (svgData && offscreenCanvas && type) {
|
|
if (type === 'Path2D') {
|
|
path2dAnimator.renderer =
|
|
new Path2dRenderer(svgData, offscreenCanvas);
|
|
}
|
|
if (type === 'CanvasKit') {
|
|
const CanvasKit = await CanvasKitPromise;
|
|
canvasKitAnimator.renderer =
|
|
new CanvasKitRenderer(svgData, offscreenCanvas, CanvasKit);
|
|
}
|
|
}
|
|
// The worker receives a "switchMethod" message whenever the user clicks a rendering
|
|
// method button on the web page.
|
|
if (switchMethod) {
|
|
// Pause other renderers and start correct renderer
|
|
canvasKitAnimator.stop();
|
|
path2dAnimator.stop();
|
|
|
|
if (switchMethod === 'Path2D') {
|
|
path2dAnimator.start();
|
|
} else if (switchMethod === 'CanvasKit') {
|
|
canvasKitAnimator.start();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Report framerates of Path2D and CanvasKit rendering back to main.js
|
|
setInterval(() => {
|
|
if (path2dAnimator.framesCount > 0) {
|
|
postMessage({
|
|
renderMethod: 'Path2D',
|
|
framesCount: path2dAnimator.framesCount,
|
|
totalFramesMs: path2dAnimator.totalFramesMs
|
|
});
|
|
}
|
|
if (canvasKitAnimator.framesCount > 0) {
|
|
postMessage({
|
|
renderMethod: 'CanvasKit',
|
|
framesCount: canvasKitAnimator.framesCount,
|
|
totalFramesMs: canvasKitAnimator.totalFramesMs
|
|
});
|
|
}
|
|
}, 1000);
|