オフスクリーンキャンバス：原稿の修正

Author: ics-ikeda

docs/offscreencanvas.md

@@ -5,11 +5,11 @@ published_date: 2019-02-14
 modified_date: 2019-02-14
 ---
 
-オフスクリーンキャンバスはWeb Workers（ウェブワーカーズ）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。具体的には、`canvas`の描画処理が大きかった場合にオフスクリーンキャンバスを使うと、ボタンクリック時の反応やCSSアニメーションが滑らかになるでしょう。
+オフスクリーンキャンバスはWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。具体的には、`canvas`の描画処理が大きかった場合にオフスクリーンキャンバスを使うと、ボタンクリック時の反応やCSSアニメーションが滑らかになるでしょう。
 
 Three.jsでもオフスクリーンキャンバスを利用できます。複雑なことをしなければ難しくなく、通常のThree.jsのコードに少しの実装を追加するだけで実現できます。
 
-オフスクリーンキャンバスの機能については記事「[オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札](https://ics.media/entry/19043)」で詳しく解説しています。この解説を読み進める前に一読ください。
+オフスクリーンキャンバスの機能については、記事「[オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札](https://ics.media/entry/19043)」で詳しく解説しています。この解説を読み進める前に一読ください。
 
 
 ## Three.jsでの使い方
@@ -64,15 +64,15 @@ onmessage = event => {
   // ・・・いろいろ処理
 ```
 
-ひとつだけ工夫しなければ、Three.jsをワーカー側で利用できません。Three.jsは内部で`canvas`要素の`style`属性にアクセスします。しかし、OffscreenCanvasはDOM要素ではないため、`style`属性を持ちません。Three.jsで使用する場合はランタイムエラーを避けるため、OffscreenCanvasオブジェクトに明示的に`style`プロパティを付加します。
+ひとつだけ注意しなければならないことがあります。Three.jsは内部で`canvas`要素の`style`属性にアクセスします。しかし、OffscreenCanvasはDOM要素ではないため、`style`属性を持ちません。Three.jsで使用する場合はランタイムエラーを避けるため、OffscreenCanvasオブジェクトに明示的に`style`プロパティを付加します。
 
 ```js
   // Three.jsのライブラリの内部で style.width にアクセスされてしまう
   // 対策しないと、エラーが発生するためダミーの値を指定
   canvas.style = { width: 0, height: 0 };
 ```
 
-あとは普通にコードをかけばThree.jsが動きます。次のコードを見て、呆気なさを感じてください。
+あとは普通にコードをかけばThree.jsが動きます。冒頭のコードを見て、呆気なさを感じてください。
 
 
 ## オフスクリーンキャンバスでの画像の使い方
@@ -88,7 +88,7 @@ onmessage = event => {
 
 
 
-通常の`THREE.ImageLoader()`メソッドだとDOM APIの`Image`オブジェクト、つまり`img`タグが使われます。ワーカー側ではDOM APIが利用できないため、`img`タグで画像を読み込むことはできないのです。オフスクリーンキャンバスと同時期に用意された`ImageBitmap`オブジェクトでは、DOM APIの`Image`オブジェクトを使わずに画像データを扱えます。Three.jsでは`THREE.ImageBitmapLoader()`でファイルを読み込み、`ImageBitmap`インスタンスを`THREE.CanvasTexture`でテクスチャーへと変換します。あとは、適当なマテリアルにテクスチャーとして設定するだけです。
+通常の`THREE.ImageLoader()`メソッドだとDOM APIの`Image`オブジェクト、つまり`img`タグが使われます。ワーカー側ではDOM APIが利用できないため、`img`タグで画像を読み込むことはできないのです。`ImageBitmap`オブジェクトでは、DOM APIの`Image`オブジェクトを使わずに画像データを扱えます。Three.jsでは`THREE.ImageBitmapLoader()`でファイルを読み込み、`ImageBitmap`インスタンスを`THREE.CanvasTexture`でテクスチャーへと変換します。あとは、適当なマテリアルにテクスチャーとして設定するだけです。
 
 ```js
 // テクスチャーを読み込み
@@ -102,11 +102,11 @@ const texture = await new Promise(resolve => {
 const material = new THREE.MeshStandardMaterial({ map: texture });
 ```
 
-上記のコードではawait/asyncの構文を使っています。オフスクリーンキャンバスが動作するような新しいブラウザーのバージョンであれば、ECMAScript 2018ぐらいは動作するでしょう。
+上記のコードではawait/asyncの構文を使っています。オフスクリーンキャンバスが動作するような新しいブラウザーのバージョンであれば、ECMAScript 2017相当のJavaScriptは動作するはずです。
 
 ## オフスクリーンキャンバスでのリサイズの方法
 
-通常のThree.jsのりサイズ処理は、記事「[リサイズ処理](renderer_resize.md)」を先に読んで学習しておいてください。その上で解説します。
+通常のThree.jsのリサイズ処理は、記事「[リサイズ処理](renderer_resize.md)」を先に読んで学習しておいてください。その上で解説します。
 
 ![](../imgs/osc_resize.png)
 
@@ -148,7 +148,7 @@ window.addEventListener('resize', event => {
 });
 ```
 
-ワーカー側の処理では、任意の`type`プロパティーの値をみて、条件文で処理を分離しています。
+ワーカー側の処理では、任意の`type`プロパティーの値をみて、条件文で処理を分岐しています。
 
 ```js
 let renderer;

samples/osc_imagebitmap_worker.js

@@ -43,7 +43,6 @@ onmessage = async event => {
 
   // 毎フレーム時に実行されるループイベントです
   function tick() {
-    // カメラの自動移動
     mesh.rotation.y += 0.01;
 
     // レンダリング