use buraha

packages/frontend/package.json

@@ -25,9 +25,9 @@
 		"@vue-macros/reactivity-transform": "^0.3.5",
 		"@vue/compiler-sfc": "3.2.47",
 		"autosize": "5.0.2",
-		"blurhash": "2.0.5",
 		"broadcast-channel": "4.20.2",
 		"browser-image-resizer": "github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
+		"buraha": "github:misskey-dev/buraha",
 		"canvas-confetti": "1.6.0",
 		"chart.js": "4.3.0",
 		"chartjs-adapter-date-fns": "3.0.0",

packages/frontend/src/components/MkImgWithBlurhash.vue

@@ -14,15 +14,22 @@
 	</TransitionGroup>
 </div>
 </template>
-<script lang="ts">
-import DrawBlurhash from '@/workers/draw-blurhash?worker';
-
-const worker = new DrawBlurhash();
-</script>
 <script lang="ts" setup>
-import { computed, onMounted, shallowRef, useCssModule, watch } from 'vue';
+import { computed, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
+import { render } from 'buraha';
 import { defaultStore } from '@/store';
+import DrawBlurhash from '@/workers/draw-blurhash?worker';
+import TestWebGL2 from '@/workers/test-webgl2?worker';
+
+const workerPromise = new Promise<Worker | null>(resolve => {
+	const testWorker = new TestWebGL2();
+	testWorker.addEventListener('message', event => {
+		if (event.data.result) resolve(new DrawBlurhash());
+		else resolve(null);
+		testWorker.terminate();
+	});
+});
 const $style = useCssModule();
 
 const props = withDefaults(defineProps<{
@@ -54,11 +61,11 @@ const props = withDefaults(defineProps<{
 	forceBlurhash: false,
 });
 
+const viewId = uuid();
 const canvas = shallowRef<HTMLCanvasElement>();
 let loaded = $ref(false);
 let canvasWidth = $ref(props.width);
 let canvasHeight = $ref(props.height);
-let currentDrawId = $ref<string>();
 const hide = computed(() => !loaded || props.forceBlurhash);
 
 function onLoad() {
@@ -78,32 +85,38 @@ watch([() => props.width, () => props.height], () => {
 	immediate: true,
 });
 
-function draw() {
+async function draw(transfer: boolean = false) {
-	if (props.hash == null) return;
+	if (!canvas.value || props.hash == null) return;
-	currentDrawId = uuid();
+	const worker = await workerPromise;
-	worker.postMessage({
+	if (worker) {
-		id: currentDrawId,
+		let offscreen: OffscreenCanvas | undefined;
-		hash: props.hash,
+		if (transfer) {
-		width: canvasWidth,
+			offscreen = canvas.value.transferControlToOffscreen();
-		height: canvasHeight,
+		}
-	});
+		worker.postMessage({
+			id: viewId,
+			canvas: offscreen ?? undefined,
+			hash: props.hash,
+		}, offscreen ? [offscreen] : []);
+	} else {
+		try {
+			render(props.hash, canvas.value);
+		} catch (error) {
+			console.error('Error occured during drawing blurhash', error);
+		}
+	}
 }
-
-worker.addEventListener('message', event => {
-	if (!canvas.value) return;
-	if (event.data.id !== currentDrawId) return;
-	const ctx = canvas.value.getContext('2d');
-	if (!ctx) return;
-	const bitmap = event.data.bitmap as ImageBitmap;
-	ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
-});
 
 watch(() => props.hash, () => {
 	draw();
 });
 
 onMounted(() => {
-	draw();
+	draw(true);
+});
+
+onUnmounted(() => {
+	workerPromise.then(worker => worker!.terminate());
 });
 </script>
 

packages/frontend/src/workers/draw-blurhash.ts

@@ -1,18 +1,19 @@
-import { decode } from 'blurhash';
+import { render } from 'buraha';
+
+let canvas: OffscreenCanvas;
 
 onmessage = async (event) => {
+    console.log(event.data);
     if (!('hash' in event.data && typeof event.data.hash === 'string')) {
         return;
     }
-    const width = event.data.width ?? 64;
+
-    const height = event.data.height ?? 64;
+    if (event.data.canvas) {
-    const canvas = new OffscreenCanvas(width, height);
+        canvas = event.data.canvas;
-	const ctx = canvas.getContext!('2d');
+    }
-    if (!ctx) return;
+    if (!canvas) {
-	const imageData = ctx.createImageData(width, height);
+        throw new Error('No canvas');
-    const pixels = decode(event.data.hash, width, height);
+    }
-	imageData.data.set(pixels);
+    render(event.data.hash, canvas);
-	ctx.putImageData(imageData, 0, 0);
+    postMessage({ result: true });
-    const bitmap = canvas.transferToImageBitmap();
-    postMessage({ bitmap, id: event.data.id });
 };

packages/frontend/src/workers/test-webgl2.ts

@@ -0,0 +1,7 @@
+const canvas = new OffscreenCanvas(1, 1);
+const gl = canvas.getContext('webgl2');
+if (gl) {
+    postMessage({ result: true });
+} else {
+    postMessage({ result: false });
+}

pnpm-lock.yaml

@@ -348,7 +348,7 @@ importers:
         version: 2.1.0
       summaly:
         specifier: github:misskey-dev/summaly
-        version: github.com/misskey-dev/summaly/2d63e2a0066f89871e777cc81d43c1ade8c97517
+        version: github.com/misskey-dev/summaly/77dd5654bb82280b38c1f50e51a771c33f3df503
       systeminformation:
         specifier: 5.17.12
         version: 5.17.12
@@ -657,15 +657,15 @@ importers:
       autosize:
         specifier: 5.0.2
         version: 5.0.2
-      blurhash:
-        specifier: 2.0.5
-        version: 2.0.5
       broadcast-channel:
         specifier: 4.20.2
         version: 4.20.2
       browser-image-resizer:
         specifier: github:misskey-dev/browser-image-resizer#v2.2.1-misskey.3
         version: github.com/misskey-dev/browser-image-resizer/0227e860621e55cbed0aabe6dc601096a7748c4a
+      buraha:
+        specifier: github:misskey-dev/buraha
+        version: github.com/misskey-dev/buraha/3eb01892924dc0bb587a6795adf8a8ed25a816d8
       canvas-confetti:
         specifier: 1.6.0
         version: 1.6.0
@@ -984,7 +984,7 @@ importers:
         version: github.com/misskey-dev/storybook-addon-misskey-theme/cf583db098365b2ccc81a82f63ca9c93bc32b640(@storybook/blocks@7.0.7)(@storybook/components@7.0.7)(@storybook/core-events@7.0.7)(@storybook/manager-api@7.0.7)(@storybook/preview-api@7.0.7)(@storybook/theming@7.0.7)(@storybook/types@7.0.7)(react-dom@18.2.0)(react@18.2.0)
       summaly:
         specifier: github:misskey-dev/summaly
-        version: github.com/misskey-dev/summaly/2d63e2a0066f89871e777cc81d43c1ade8c97517
+        version: github.com/misskey-dev/summaly/77dd5654bb82280b38c1f50e51a771c33f3df503
       vite-plugin-turbosnap:
         specifier: 1.0.2
         version: 1.0.2
@@ -20357,6 +20357,12 @@ packages:
     version: 2.2.1-misskey.3
     dev: false
 
+  github.com/misskey-dev/buraha/3eb01892924dc0bb587a6795adf8a8ed25a816d8:
+    resolution: {tarball: https://codeload.github.com/misskey-dev/buraha/tar.gz/3eb01892924dc0bb587a6795adf8a8ed25a816d8}
+    name: buraha
+    version: 0.0.0
+    dev: false
+
   github.com/misskey-dev/sharp-read-bmp/02d9dc189fa7df0c4bea09330be26741772dac01:
     resolution: {tarball: https://codeload.github.com/misskey-dev/sharp-read-bmp/tar.gz/02d9dc189fa7df0c4bea09330be26741772dac01}
     name: sharp-read-bmp
@@ -20399,8 +20405,8 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
-  github.com/misskey-dev/summaly/2d63e2a0066f89871e777cc81d43c1ade8c97517:
+  github.com/misskey-dev/summaly/77dd5654bb82280b38c1f50e51a771c33f3df503:
-    resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/2d63e2a0066f89871e777cc81d43c1ade8c97517}
+    resolution: {tarball: https://codeload.github.com/misskey-dev/summaly/tar.gz/77dd5654bb82280b38c1f50e51a771c33f3df503}
     name: summaly
     version: 4.0.2
     dependencies: