muerwre/muerwre.github.io
1
0
Fork 0
mirror of https://github.com/muerwre/muerwre.github.io.git synced 2025-04-25 02:46:39 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions
muerwre.github.io/docs/api/_content/query/wOOxKhEEuc.json
Fedor Katurov c5c238db0c add useWhatsChanged
2023-06-02 11:17:06 +00:00

1 line
No EOL
42 KiB
JSON
Raw Blame History

{"_path":"/frontend/webgl/rendering-without-blocking-in-a-worker","_dir":"webgl","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Rendering Without Blocking In A Worker","description":"Rendering items on #canvas in main loop might cause interface freezes, preventing render process from executing properly by flooding execution stack with operations.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rendering items on #canvas in main loop "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"might cause interface freezes"}]},{"type":"text","value":", preventing render process from executing properly by flooding execution stack with operations."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To handle it properly, we can start separate #worker thread, that will handle rendering in its own event loop, so that won't affect the source tab's event loop."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Workers can have access to "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Glossary/Transferable_objects","rel":["nofollow"]},"children":[{"type":"text","value":"Transferrable Objects"}]},{"type":"text","value":" from main thread by receiving memory address. "},{"type":"element","tag":"span","props":{"className":["highlight"]},"children":[{"type":"text","value":"That's a lot faster than cloning"}]},{"type":"text","value":". In this case "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmap","rel":["nofollow"]},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"text","value":" is transferrable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Code for the main thread component:"}]},{"type":"element","tag":"code","props":{"code":"// main.ts\nconst instance = new Worker('./render-worker.ts');\nconst canvas = document.getElementById('view');\n\n// attaching event listener to worker\ninstance.onmessage = (event: MessageEvent) => {\n const ctx = canvas?.getContext(\"2d\");\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n \n ctx.drawImage(event.data as ImageBitmap, 0, 0);\n}\n\n// sending canvas contents to worker\nconst renderInCanvas = () => {\n if (!canvas.current) {\n return;\n }\n \n createImageBitmap(canvas.current).then(image => {\n instance.postMessage(image, { transfer: [image] })\n });\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"Worker"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"'./render-worker.ts'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// attaching event listener to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e2332"},"children":[{"type":"text","value":"MessageEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-97e8ad"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e2332"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// sending canvas contents to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"renderInCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"] })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Worker code:"}]},{"type":"element","tag":"code","props":{"code":"// render-worker.ts\nexport default () => {\n self.onmessage = (message: MessageEvent) => {\n const data = message.data;\n\n if (!(data instanceof ImageBitmap)) {\n throw new Error('Received unknown data')\n }\n\n // OffscreenCanvas can be set up inside workers\n const canvas = new OffscreenCanvas(data.width, data.height);\n const ctx = canvas.getContext(\"2d\");\n\n if (!ctx) {\n throw new Error(`Can't get 2D context`);\n }\n\n ctx.drawImage(data, 0, 0);\n\n // That will block execution inside worker for \n // a couple of seconds\n doHardRenderingStuffHere(ctx, data.width, data.height);\n\n // Sending resulting image back to main thread\n createImageBitmap(canvas).then((image) => {\n self.postMessage(image, { transfer: [image] });\n });\n };\n};\n","language":"typescript"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// render-worker.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5c72b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-206304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c5c72b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-206304"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-9fc3d0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-206304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2571d1"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"message"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"instanceof"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e2332"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-97e8ad"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"'Received unknown data'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// OffscreenCanvas can be set up inside workers"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"OffscreenCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-97e8ad"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// That will block execution inside worker for "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// a couple of seconds"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"doHardRenderingStuffHere"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// Sending resulting image back to main thread"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"] });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-2571d1{color:#C9D1D9}.ct-9fc3d0{color:#FF7B72}.ct-206304{color:#FFA657}.ct-c5c72b{color:#FF7B72}.ct-dba812{color:#79C0FF}.ct-97e8ad{color:#79C0FF}.ct-1e2332{color:#FFA657}.ct-7cf441{color:#C9D1D9}.ct-73e905{color:#A5D6FF}.ct-8779d1{color:#D2A8FF}.ct-7529db{color:#FF7B72}.ct-2a3b25{color:#79C0FF}.ct-fc0e66{color:#C9D1D9}.ct-53822a{color:#FF7B72}.ct-b1c69d{color:#8B949E}.light .ct-b1c69d{color:#93A1A1}.light .ct-53822a{color:#073642}.light .ct-fc0e66{color:#657B83}.light .ct-2a3b25{color:#268BD2}.light .ct-7529db{color:#859900}.light .ct-8779d1{color:#268BD2}.light .ct-73e905{color:#2AA198}.light .ct-7cf441{color:#268BD2}.light .ct-1e2332{color:#268BD2}.light .ct-97e8ad{color:#859900}.light .ct-dba812{color:#D33682}.light .ct-c5c72b{color:#859900}.light .ct-206304{color:#657B83}.light .ct-9fc3d0{color:#073642}.light .ct-2571d1{color:#657B83}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:Frontend:WebGL:Rendering without blocking in a Worker.md","_source":"content","_file":"Frontend/WebGL/Rendering without blocking in a Worker.md","_extension":"md"}
Reference in a new issue View git blame Copy permalink