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() {
-	if (props.hash == null) return;
-	currentDrawId = uuid();
-	worker.postMessage({
-		id: currentDrawId,
-		hash: props.hash,
-		width: canvasWidth,
-		height: canvasHeight,
-	});
+async function draw(transfer: boolean = false) {
+	if (!canvas.value || props.hash == null) return;
+	const worker = await workerPromise;
+	if (worker) {
+		let offscreen: OffscreenCanvas | undefined;
+		if (transfer) {
+			offscreen = canvas.value.transferControlToOffscreen();
+		}
+		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;
-    const canvas = new OffscreenCanvas(width, height);
-	const ctx = canvas.getContext!('2d');
-    if (!ctx) return;
-	const imageData = ctx.createImageData(width, height);
-    const pixels = decode(event.data.hash, width, height);
-	imageData.data.set(pixels);
-	ctx.putImageData(imageData, 0, 0);
-    const bitmap = canvas.transferToImageBitmap();
-    postMessage({ bitmap, id: event.data.id });
+
+    if (event.data.canvas) {
+        canvas = event.data.canvas;
+    }
+    if (!canvas) {
+        throw new Error('No canvas');
+    }
+    render(event.data.hash, canvas);
+    postMessage({ result: true });
 };

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 });
+}