mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-23 00:29:22 +09:00
no worker
This commit is contained in:
tamaina
parent
732e7dc931
commit
a9c49e4fb4
@ -16,31 +16,18 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import DrawBlurhash from '@/workers/draw-blurhash?worker';
|
||||
import TestWebGL2 from '@/workers/test-webgl2?worker';
|
||||
import { WorkerMultiDispatch } from '@/scripts/worker-multi-dispatch';
|
||||
import { $ref } from 'vue/macros';
|
||||
|
||||
const workerPromise = new Promise<WorkerMultiDispatch | null>(resolve => {
|
||||
const testWorker = new TestWebGL2();
|
||||
testWorker.addEventListener('message', event => {
|
||||
if (event.data.result) {
|
||||
const workers = new WorkerMultiDispatch(
|
||||
() => new DrawBlurhash(),
|
||||
Math.min(navigator.hardwareConcurrency - 1, 4),
|
||||
);
|
||||
resolve(workers);
|
||||
} else {
|
||||
resolve(null);
|
||||
}
|
||||
testWorker.terminate();
|
||||
});
|
||||
});
|
||||
const WEBGL2_IN_OFFSCREENCANVAS_SUPPORTED = (() => {
|
||||
const canvas = new OffscreenCanvas(1, 1);
|
||||
const gl = canvas.getContext('webgl2');
|
||||
if (_DEV_) console.info('WEBGL2_IN_OFFSCREENCANVAS_SUPPORTED', !!gl);
|
||||
return !!gl;
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, nextTick, onMounted, onUnmounted, shallowRef, useCssModule, watch } from 'vue';
|
||||
import { v4 as uuid } from 'uuid';
|
||||
import { computed, nextTick, onMounted, shallowRef, useCssModule, watch } from 'vue';
|
||||
import { render } from 'buraha';
|
||||
import { defaultStore } from '@/store';
|
||||
const $style = useCssModule();
|
||||
@ -74,7 +61,6 @@ const props = withDefaults(defineProps<{
|
||||
forceBlurhash: false,
|
||||
});
|
||||
|
||||
const viewId = uuid();
|
||||
const canvas = shallowRef<HTMLCanvasElement>();
|
||||
const root = shallowRef<HTMLDivElement>();
|
||||
const img = shallowRef<HTMLImageElement>();
|
||||
@ -83,7 +69,6 @@ let canvasWidth = $ref(64);
|
||||
let canvasHeight = $ref(64);
|
||||
let imgWidth = $ref(props.width);
|
||||
let imgHeight = $ref(props.height);
|
||||
let usingWorkerNumber = $ref<number>(-1);
|
||||
const hide = computed(() => !loaded || props.forceBlurhash);
|
||||
|
||||
function waitForDecode() {
|
||||
@ -118,36 +103,39 @@ watch([() => props.width, () => props.height, root], () => {
|
||||
immediate: true,
|
||||
});
|
||||
|
||||
async function draw(transfer: boolean = false) {
|
||||
// アクティブなwebgl2をたくさん持てないため、burahaは別のcanvasで描画させる
|
||||
// ImageBitmapで送るのは、なるべく早くwebgl2コンテキストを持ったcanvasを解放させるため
|
||||
async function drawSub(): Promise<ImageBitmap | void> {
|
||||
if (props.hash == null) return;
|
||||
|
||||
if (WEBGL2_IN_OFFSCREENCANVAS_SUPPORTED) {
|
||||
const work = new OffscreenCanvas(canvasWidth, canvasHeight);
|
||||
render(props.hash, work);
|
||||
return createImageBitmap(work);
|
||||
}
|
||||
|
||||
const work = document.createElement('canvas');
|
||||
work.width = canvasWidth;
|
||||
work.height = canvasHeight;
|
||||
render(props.hash, work);
|
||||
return createImageBitmap(work);
|
||||
}
|
||||
|
||||
async function draw() {
|
||||
if (!canvas.value || props.hash == null) return;
|
||||
const workers = await workerPromise;
|
||||
if (workers) {
|
||||
let offscreen: OffscreenCanvas | undefined;
|
||||
if (transfer) {
|
||||
offscreen = canvas.value.transferControlToOffscreen();
|
||||
}
|
||||
const workerNumber = workers.postMessage(
|
||||
{
|
||||
id: viewId,
|
||||
canvas: offscreen ?? undefined,
|
||||
hash: props.hash,
|
||||
},
|
||||
offscreen ? [offscreen] : [],
|
||||
usingWorkerNumber === -1 ? undefined : () => usingWorkerNumber,
|
||||
);
|
||||
usingWorkerNumber = workerNumber;
|
||||
} else {
|
||||
try {
|
||||
const work = document.createElement('canvas');
|
||||
work.width = canvasWidth;
|
||||
work.height = canvasHeight;
|
||||
render(props.hash, work);
|
||||
const bitmap = await createImageBitmap(work);
|
||||
const ctx = canvas.value.getContext('2d');
|
||||
ctx?.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
|
||||
} catch (error) {
|
||||
console.error('Error occured during drawing blurhash', error);
|
||||
}
|
||||
const ctx = canvas.value.getContext('2d');
|
||||
|
||||
if (!ctx) {
|
||||
console.error('Unable to get canvas 2D context');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const bitmap = await drawSub();
|
||||
if (!bitmap) return;
|
||||
ctx.drawImage(bitmap, 0, 0, canvasWidth, canvasHeight);
|
||||
} catch (error) {
|
||||
console.error('Error occured during drawing blurhash', error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -160,17 +148,9 @@ watch(() => props.hash, () => {
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
draw(true);
|
||||
draw();
|
||||
waitForDecode();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (usingWorkerNumber !== -1) {
|
||||
workerPromise.then(worker => {
|
||||
worker?.postMessage!({ id: viewId, delete: true }, undefined, () => usingWorkerNumber);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
function defaultUseWorkerNumber(prev: number, totalWorkers: number) {
|
||||
return prev + 1;
|
||||
}
|
||||
|
||||
export class WorkerMultiDispatch<POST = any, RETURN = any> {
|
||||
private sym = Symbol('WorkerMultiDispatch');
|
||||
public workers: Worker[] = [];
|
||||
private prevWorkerNumber = 0;
|
||||
private getUseWorkerNumber = defaultUseWorkerNumber;
|
||||
private finalizationRegistry: FinalizationRegistry<symbol>;
|
||||
|
||||
constructor(workerConstructor: () => Worker, concurrency: number, getUseWorkerNumber = defaultUseWorkerNumber) {
|
||||
this.getUseWorkerNumber = getUseWorkerNumber;
|
||||
for (let i = 0; i < concurrency; i++) {
|
||||
this.workers.push(workerConstructor());
|
||||
}
|
||||
|
||||
this.finalizationRegistry = new FinalizationRegistry(() => {
|
||||
this.terminate();
|
||||
});
|
||||
this.finalizationRegistry.register(this, this.sym);
|
||||
|
||||
if (_DEV_) console.log('WorkerMultiDispatch: Created', this);
|
||||
}
|
||||
|
||||
public postMessage(message: POST, options?: Transferable[] | StructuredSerializeOptions, useWorkerNumber: typeof defaultUseWorkerNumber = this.getUseWorkerNumber) {
|
||||
let workerNumber = useWorkerNumber(this.prevWorkerNumber, this.workers.length);
|
||||
workerNumber = Math.abs(Math.round(workerNumber)) % this.workers.length;
|
||||
if (_DEV_) console.log('WorkerMultiDispatch: Posting message to worker', workerNumber, useWorkerNumber);
|
||||
this.prevWorkerNumber = workerNumber;
|
||||
|
||||
// 不毛だがunionをoverloadに突っ込めない
|
||||
// https://stackoverflow.com/questions/66507585/overload-signatures-union-types-and-no-overload-matches-this-call-error
|
||||
// https://github.com/microsoft/TypeScript/issues/14107
|
||||
if (Array.isArray(options)) {
|
||||
this.workers[workerNumber].postMessage(message, options);
|
||||
} else {
|
||||
this.workers[workerNumber].postMessage(message, options);
|
||||
}
|
||||
return workerNumber;
|
||||
}
|
||||
|
||||
public addListener(callback: (this: Worker, ev: MessageEvent<RETURN>) => any, options?: boolean | AddEventListenerOptions) {
|
||||
this.workers.forEach(worker => {
|
||||
worker.addEventListener('message', callback, options);
|
||||
});
|
||||
}
|
||||
|
||||
public removeListener(callback: (this: Worker, ev: MessageEvent<RETURN>) => any, options?: boolean | AddEventListenerOptions) {
|
||||
this.workers.forEach(worker => {
|
||||
worker.removeEventListener('message', callback, options);
|
||||
});
|
||||
}
|
||||
|
||||
public terminate() {
|
||||
this.workers.forEach(worker => {
|
||||
worker.terminate();
|
||||
});
|
||||
this.workers = [];
|
||||
this.finalizationRegistry.unregister(this);
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
import { render } from 'buraha';
|
||||
|
||||
const canvases = new Map<string, OffscreenCanvas>();
|
||||
|
||||
onmessage = async (event) => {
|
||||
// console.log(event.data);
|
||||
if (!('id' in event.data && typeof event.data.id === 'string')) {
|
||||
return;
|
||||
}
|
||||
if (event.data.delete) {
|
||||
canvases.delete(event.data.id);
|
||||
return;
|
||||
}
|
||||
if (event.data.canvas) {
|
||||
canvases.set(event.data.id, event.data.canvas);
|
||||
}
|
||||
if (!('hash' in event.data && typeof event.data.hash === 'string')) {
|
||||
return;
|
||||
}
|
||||
const canvas = event.data.canvas ?? canvases.get(event.data.id);
|
||||
if (!canvas) {
|
||||
throw new Error('No canvas');
|
||||
}
|
||||
const work = new OffscreenCanvas(canvas.width, canvas.height);
|
||||
render(event.data.hash, work);
|
||||
const bitmap = await createImageBitmap(work);
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx?.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
|
||||
postMessage({ result: true });
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
const canvas = new OffscreenCanvas(1, 1);
|
||||
const gl = canvas.getContext('webgl2');
|
||||
if (gl) {
|
||||
postMessage({ result: true });
|
||||
} else {
|
||||
postMessage({ result: false });
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["esnext", "webworker"],
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user