このページは Cloud Translation API によって翻訳されました。

OffscreenCanvas - ウェブワーカーを使用してキャンバスの処理を高速化

Tim Dresser

キャンバスはあらゆる種類のグラフィックを画面上に描画し、WebGL の世界への入り口となっています。図形や画像の描画、アニメーションの実行、さらには動画コンテンツの表示と処理に使用できます。メディアが多用されたウェブアプリケーションで美しいユーザーエクスペリエンスを実現したり、説明します。

スクリプト化可能です。つまり、キャンバスに描画されるコンテンツをプログラムで作成できます。使用できます。これによりキャンバスの柔軟性が高まり、

同時に、最新のウェブサイトでは、スクリプトの実行は最も頻繁に行われるユーザーの反応の問題の原因を特定します。キャンバスのロジックとレンダリングはユーザー操作と同じスレッドで行われるため、アニメーションに関わる計算処理は（場合によっては負荷の高い）処理で、アプリの実際の処理に把握するのに役立ちます

幸いなことに OffscreenCanvas は脅威への対処です。

対応ブラウザ

69
79
105
16.4

ソース

以前は、キャンバスの描画機能は <canvas> 要素に関連付けられていました。つまり DOM に直接依存していましたOffscreenCanvas は DOM と Canvas API を画面外に移動して分離しています。

この分離により、OffscreenCanvas のレンダリングは DOM から完全に切り離され、同期が行われないため、通常のキャンバスより速度が向上します。比較します。

さらに、ウェブワーカーで使用できる点が異なります。 DOM は利用可能です。これにより、あらゆる種類の興味深いユースケースが可能になります。

ワーカーで OffscreenCanvas を使用する

ワーカースレッドのウェブバージョンであり、タスクをバックグラウンドで実行できます。

スクリプトの一部をワーカーに移動すると、アプリがユーザークリティカルな処理を実行する際の空き容量が増えます。実行することもできます。OffscreenCanvas がなければ、ワーカーで Canvas API を使用する方法はありませんでした。 DOM がありませんでした

OffscreenCanvas は DOM に依存しないため、使用できます。次の例では OffscreenCanvas を使用していますワーカーのグラデーション色を計算するには:

// file: worker.js
function getGradientColor(percent) {
  const canvas = new OffscreenCanvas(100, 1);
  const ctx = canvas.getContext('2d');
  const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, 'red');
  gradient.addColorStop(1, 'blue');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, ctx.canvas.width, 1);
  const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
  const colors = imgd.data.slice(percent * 4, percent * 4 + 4);
  return `rgba(${colors[0]}, ${colors[1]}, ${colors[2]}, ${colors[3]})`;
}

getGradientColor(40);  // rgba(152, 0, 104, 255 )

メインスレッドのブロックを解除

負荷の高い計算をワーカーに移動するとメインスレッドに集中できます。transferControlToOffscreen を使用するメソッドを使って通常のキャンバスを OffscreenCanvas インスタンスにミラーリングします。適用先のオペレーション OffscreenCanvas は自動的にソースキャンバスにレンダリングされます。

const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({canvas: offscreen}, [offscreen]);

次の例では、カラーテーマが変更されたときに負荷の高い計算が行われています。高速のデスクトップでも数ミリ秒かかりますアニメーションをメインスレッドで実行することもできます。ワーカーで実行されますメインスレッドの場合、負荷の大きい処理が行われている間はボタンをスレッドはブロックされます。ワーカーの場合 UI の応答性

</ph>

デモ

その逆も同様です。ビジー状態のメインスレッドは、実行中のアニメーションに影響しません。指定します。この機能を使用すると、視覚的なジャンクを防ぎ、スムーズなアニメーションを保証できます。すべてのインスタンスを保護します。

</ph>

デモ

通常のキャンバスの場合、メインスレッドが人為的にオーバーワークすると、アニメーションが停止します。ワーカーベースの OffscreenCanvas は滑らかに再生されます。

一般的なライブラリで使用

OffscreenCanvas API は一般に通常の Canvas 要素と互換性があるため、市場をリードするグラフィックライブラリとともに、プログレッシブな機能強化として使用できます。

たとえば、Feature-Detect を使用できます。利用可能であれば、Google 検索の canvas オプションを使用します。

const canvasEl = document.querySelector('canvas');
const canvas =
  'OffscreenCanvas' in window
    ? canvasEl.transferControlToOffscreen()
    : canvasEl;
canvas.style = {width: 0, height: 0};
const renderer = new THREE.WebGLRenderer({canvas: canvas});

ここでの問題は、Three.js では、canvas には style.width プロパティと style.height プロパティがあると想定している点です。 OffscreenCanvas は DOM から完全にデタッチされているため、自分で用意する必要があります。スタブするか、これらの値を元の値に結び付ける指定します。

以下は、ワーカーで基本的な Three.js アニメーションを実行する方法を示しています。

</ph>

デモ

一部の DOM 関連 API は、ワーカーではすぐに利用できないため、より高度な Three.js 機能（テクスチャなど）を使用する場合は、追加の回避策が必要になることがあります。これらを試す方法のヒントについては、 Google I/O 2017 の動画

注意: この動画の例では、非推奨の commit() 呼び出しを使用しています。代わりに worker.requestAnimationFrame を使用してください。

キャンバスのグラフィック機能を多用している場合、OffscreenCanvas は影響するためですワーカーがキャンバスレンダリングコンテキストを利用できるようにすることで、並列処理を行い、マルチコアシステムをより有効に活用します。

OffscreenCanvas - ウェブワーカーを使用してキャンバスの処理を高速化

ワーカーで OffscreenCanvas を使用する

メインスレッドのブロックを解除

一般的なライブラリで使用

参考情報