From 3d4a3d117d5642cebf551f80129d62f8e17faa64 Mon Sep 17 00:00:00 2001 From: tamaina Date: Tue, 6 Jun 2023 05:47:40 +0000 Subject: [PATCH 1/5] =?UTF-8?q?blurhash=E3=82=92=E6=8F=8F=E7=94=BB?= =?UTF-8?q?=E3=81=99=E3=82=8B=E3=81=9F=E3=82=81=E3=81=AEcanvas=E3=81=AF?= =?UTF-8?q?=E5=86=8D=E5=88=A9=E7=94=A8=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/MkImgWithBlurhash.vue | 48 +++++++++++-------- .../frontend/src/workers/draw-blurhash.ts | 8 ++-- 2 files changed, 34 insertions(+), 22 deletions(-) diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index 672a28f6d0cc..4fe445d4cf94 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -22,10 +22,10 @@ import TestWebGL2 from '@/workers/test-webgl2?worker'; import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch'; import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash'; -const workerPromise = new Promise(resolve => { +const canvasPromise = new Promise(resolve => { // テスト環境で Web Worker インスタンスは作成できない if (import.meta.env.MODE === 'test') { - resolve(null); + resolve(document.createElement('canvas')); return; } const testWorker = new TestWebGL2(); @@ -38,7 +38,10 @@ const workerPromise = new Promise(resolve => { resolve(workers); if (_DEV_) console.log('WebGL2 in worker is supported!'); } else { - resolve(null); + const canvas = document.createElement('canvas'); + canvas.width = 64; + canvas.height = 64; + resolve(canvas); if (_DEV_) console.log('WebGL2 in worker is not supported...'); } testWorker.terminate(); @@ -70,6 +73,7 @@ const props = withDefaults(defineProps<{ width?: number; cover?: boolean; forceBlurhash?: boolean; + onlyAvgColor?: boolean; // 軽量化のためにBlurhashを使わずに平均色だけを描画 }>(), { transition: null, src: null, @@ -79,6 +83,7 @@ const props = withDefaults(defineProps<{ width: 64, cover: true, forceBlurhash: false, + onlyAvgColor: false, }); const viewId = uuid(); @@ -139,8 +144,8 @@ function drawImage(bitmap: CanvasImageSource) { ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight); } -async function draw() { - if (!canvas.value || props.hash == null) return; +function drawAvg() { + if (!canvas.value || !props.hash) return; const ctx = canvas.value.getContext('2d'); if (!ctx) return; @@ -149,25 +154,28 @@ async function draw() { ctx.beginPath(); ctx.fillStyle = extractAvgColorFromBlurhash(props.hash) ?? '#888'; ctx.fillRect(0, 0, canvasWidth, canvasHeight); +} + +async function draw() { + if (props.hash == null) return; - const workers = await workerPromise; - if (workers) { - workers.postMessage( + drawAvg(); + + if (props.onlyAvgColor) return; + + const work = await canvasPromise; + if (work instanceof WorkerMultiDispatch) { + work.postMessage( { id: viewId, hash: props.hash, - width: canvasWidth, - height: canvasHeight, }, undefined, ); } else { try { - const work = document.createElement('canvas'); - work.width = canvasWidth; - work.height = canvasHeight; render(props.hash, work); - ctx.drawImage(work, 0, 0, canvasWidth, canvasHeight); + drawImage(work); } catch (error) { console.error('Error occured during drawing blurhash', error); } @@ -179,9 +187,9 @@ function workerOnMessage(event: MessageEvent) { drawImage(event.data.bitmap as ImageBitmap); } -workerPromise.then(worker => { - if (worker) { - worker.addListener(workerOnMessage); +canvasPromise.then(work => { + if (work instanceof WorkerMultiDispatch) { + work.addListener(workerOnMessage); } draw(); @@ -204,8 +212,10 @@ onMounted(() => { }); onUnmounted(() => { - workerPromise.then(worker => { - worker?.removeListener(workerOnMessage); + canvasPromise.then(work => { + if (work instanceof WorkerMultiDispatch) { + work?.removeListener(workerOnMessage); + } }); }); diff --git a/packages/frontend/src/workers/draw-blurhash.ts b/packages/frontend/src/workers/draw-blurhash.ts index 5f2168a44a30..e0672d5424e0 100644 --- a/packages/frontend/src/workers/draw-blurhash.ts +++ b/packages/frontend/src/workers/draw-blurhash.ts @@ -1,5 +1,7 @@ import { render } from 'buraha'; +const canvas = new OffscreenCanvas(64, 64); + onmessage = (event) => { // console.log(event.data); if (!('id' in event.data && typeof event.data.id === 'string')) { @@ -8,8 +10,8 @@ onmessage = (event) => { if (!('hash' in event.data && typeof event.data.hash === 'string')) { return; } - const work = new OffscreenCanvas(event.data.width ?? 64, event.data.height ?? 64); - render(event.data.hash, work); - const bitmap = work.transferToImageBitmap(); + + render(event.data.hash, canvas); + const bitmap = canvas.transferToImageBitmap(); postMessage({ id: event.data.id, bitmap }); }; From adca4e22e9109cfe0ad23e612e790a9712878edf Mon Sep 17 00:00:00 2001 From: tamaina Date: Tue, 6 Jun 2023 05:47:44 +0000 Subject: [PATCH 2/5] =?UTF-8?q?Revert=20"perf(frontend):=20WebGL=20context?= =?UTF-8?q?=E3=81=AE=E6=95=B0=E3=82=92=E6=B8=9B=E3=82=89=E3=81=99"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit aeb8955ca2600e801d44dcac2005fc994e665a6c. --- packages/frontend/src/components/global/MkAvatar.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index efe74b7cc300..422b35c9ddfe 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -1,6 +1,6 @@