View Code? Open in Web Editor
NEW
This project forked from rogeryi/offscreen_canvas_demo
Offscreen Canvas Demo
License: Apache License 2.0
JavaScript 96.67%
HTML 3.33%
offscreen_canvas_demo's Introduction
- Main thread lanuch worker thread, then ask initialize;
- Worker create OffscreenCanvas;
- Worker get WebGL Context of OffscreenCanvas and render;
- Worker get the buffer of OffscreenCanvas (ImageBitmap), and transfer back to main thread;
- Main thread receive the buffer and 'draw' it to two different Canvas, One Canvas use CanvasRenderingContext2D，other use ImageBitmapRenderingContext;
- Repeat 3 ~ 5;
- Main thread get Canvas from current DOM and generate an OffscreenCanvas from that Canvas;
- Main thread launch worker thread, then ask initialize, transfer OffscreenCanvas as parameter;
- Worker receive OffscreenCanvas and initialize;
- Worker get WebGL Context of OffscreenCanvas and render;
- Worker commit when render complete, and wait the callback;
- Worker receive callback then repeat 4 ~ 6;
- 主线程启动 Worker 线程，并请求初始化；
- Worker 线程创建 OffscreenCanvas；
- Worker 线程获取 OffscreenCanvas 的 WebGL Context 并进行绘制；
- Worker 线程获取 OffscreenCanvas 的缓冲区（ImageBitmap），然后 Transfer 回主线程；
- 主线程将 Worker 线程回传的缓冲区分别绘制在两个不同的 Canvas 上，一个 Canvas 使用 CanvasRenderingContext2D，一个 Canvas 使用 ImageBitmapRenderingContext；
- 3 ~ 5 重复运行；
- 主线程从当前 DOM 树中的 Canvas 元素生成 OffscreenCanvas；
- 主线程启动 Worker 线程并初始化，OffscreenCanvas 作为初始化的参数被 Transfer；
- Worker 线程接收 OffscreenCanvas 后完成初始化；
- Worker 线程使用 WebGL 对 OffscreenCanvas 进行绘制；
- Worker 线程绘制完成后 Commit，然后等待浏览器的回调；
- Worker 线程接收到到浏览器的回调后继续绘制下一帧，重复 4 ~ 6；
offscreen_canvas_demo's People
Contributors
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent