オフスクリーンキャンバスのサンプルを追加（リサイズ、ビットマップ）

ics-ikeda · ics-ikeda · commit 771549be8cce · 2019-02-11T22:06:59.000+09:00
diff --git a/samples/offscreencanvas_simple.html b/samples/offscreencanvas_simple.html
diff --git a/samples/osc_imagebitmap.html b/samples/osc_imagebitmap.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      window.addEventListener('DOMContentLoaded', init);
+
+      function init() {
+        // 普通のキャンバスを取得
+        const canvasElement = document.querySelector('#myCanvas');
+        // オフスクリーンキャンバスを取得
+        const offscreenCanvas = canvasElement.transferControlToOffscreen();
+        const worker = new Worker('osc_imagebitmaqp_worker.js');
+        worker.postMessage(
+          {
+            canvas: offscreenCanvas
+          },
+          [offscreenCanvas]
+        );
+      }
+    </script>
+  </head>
+  <body>
+    <canvas id="myCanvas"></canvas>
+  </body>
+</html>
diff --git a/samples/osc_imagebitmaqp_worker.js b/samples/osc_imagebitmaqp_worker.js
@@ -0,0 +1,53 @@
+importScripts(
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+);
+
+// メインスレッドから通達があったとき
+onmessage = async event => {
+  // メインスレッドからオフスクリーンキャンバスを受け取る
+  const canvas = event.data.canvas;
+  // Three.jsのライブラリの内部で style.width にアクセスされてしまう
+  // 対策しないと、エラーが発生するためダミーの値を指定
+  canvas.style = { width: 0, height: 0 };
+
+  // サイズを指定
+  const width = 960;
+  const height = 540;
+
+  // レンダラーを作成
+  const renderer = new THREE.WebGLRenderer({ canvas });
+  renderer.setSize(width, height);
+
+  // シーンを作成
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(45, width / height);
+  camera.position.set(0, 0, +1000);
+  const directionalLight = new THREE.DirectionalLight(0xffffff);
+  directionalLight.position.set(0, 1, 1);
+  scene.add(directionalLight);
+
+  // テクスチャーを読み込み
+  const texture = await new Promise(resolve => {
+    new THREE.ImageBitmapLoader().load('imgs/earthmap1k.jpg', imageBitmap => {
+      const texture = new THREE.CanvasTexture(imageBitmap);
+      resolve(texture);
+    });
+  });
+  // マテリアルを作成
+  const material = new THREE.MeshStandardMaterial({ map: texture });
+  const geometry = new THREE.SphereGeometry(300, 50, 50);
+  const mesh = new THREE.Mesh(geometry, material);
+  scene.add(mesh);
+
+  tick();
+
+  // 毎フレーム時に実行されるループイベントです
+  function tick() {
+    // カメラの自動移動
+    mesh.rotation.y += 0.01;
+
+    // レンダリング
+    renderer.render(scene, camera);
+    requestAnimationFrame(tick);
+  }
+};
diff --git a/samples/osc_resize.html b/samples/osc_resize.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      body {
+        margin: 0;
+        overflow: hidden;
+      }
+      #myCanvas {
+        /* 画面全域にしておく */
+        width: 100vw;
+        height: 100vh;
+      }
+    </style>
+    <script>
+      window.addEventListener('DOMContentLoaded', init);
+
+      function init() {
+        // 普通のキャンバスを取得
+        const canvasElement = document.querySelector('#myCanvas');
+        // オフスクリーンキャンバスを取得
+        const offscreenCanvas = canvasElement.transferControlToOffscreen();
+        const worker = new Worker('osc_resize_worker.js');
+        worker.postMessage(
+          {
+            type: 'init',
+            canvas: offscreenCanvas,
+            width: innerWidth,
+            height: innerHeight,
+            devicePixelRatio: devicePixelRatio
+          },
+          [offscreenCanvas]
+        );
+
+        window.addEventListener('resize', event => {
+          worker.postMessage({
+            type: 'resize',
+            width: innerWidth,
+            height: innerHeight,
+            devicePixelRatio: devicePixelRatio
+          });
+        });
+      }
+    </script>
+  </head>
+  <body>
+    <canvas id="myCanvas"></canvas>
+  </body>
+</html>
diff --git a/samples/osc_resize_worker.js b/samples/osc_resize_worker.js
@@ -0,0 +1,68 @@
+importScripts(
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+);
+let renderer;
+let camera;
+
+// メインスレッドから通達があったとき
+onmessage = event => {
+  switch (event.data.type) {
+    case 'init':
+      init(event);
+      break;
+    case 'resize':
+      resize(event.data.width, event.data.height, event.data.devicePixelRatio);
+      break;
+  }
+};
+
+function init(event) {
+  // メインスレッドからオフスクリーンキャンバスを受け取る
+  const canvas = event.data.canvas;
+  // スクリーン情報を受け取る
+  const width = event.data.width;
+  const height = event.data.height;
+  const devicePixelRatio = event.data.devicePixelRatio;
+  // Three.jsのライブラリの内部で style.width にアクセスされてしまう
+  // 対策しないと、エラーが発生するためダミーの値を指定
+  canvas.style = { width: 0, height: 0 };
+
+  // レンダラーを作成
+  renderer = new THREE.WebGLRenderer({ canvas });
+
+  // シーンを作成
+  const scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(45, width / height);
+  camera.position.set(0, 0, 1000);
+  resize(width, height, devicePixelRatio);
+
+  // 球体を作成
+  const geometry = new THREE.SphereGeometry(300, 30, 30);
+  // マテリアルを作成
+  const material = new THREE.MeshBasicMaterial({ wireframe: true });
+  // メッシュを作成
+  const mesh = new THREE.Mesh(geometry, material);
+  // 3D空間にメッシュを追加
+  scene.add(mesh);
+
+  tick();
+
+  // 毎フレーム時に実行されるループイベントです
+  function tick() {
+    mesh.rotation.y += 0.01;
+
+    // レンダリング
+    renderer.render(scene, camera);
+    requestAnimationFrame(tick);
+  }
+}
+
+function resize(width, height, devicePixelRatio) {
+  // レンダラーのサイズを調整する
+  renderer.setPixelRatio(devicePixelRatio);
+  renderer.setSize(width, height);
+
+  // カメラのアスペクト比を正す
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+}
diff --git a/samples/osc_simple.html b/samples/osc_simple.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script>
+      window.addEventListener('DOMContentLoaded', init);
+
+      function init() {
+        // 普通のキャンバスを取得
+        const canvasElement = document.querySelector('#myCanvas');
+        // オフスクリーンキャンバスを取得
+        const offscreenCanvas = canvasElement.transferControlToOffscreen();
+        const worker = new Worker('osc_simple_worker.js');
+        worker.postMessage(
+          {
+            canvas: offscreenCanvas
+          },
+          [offscreenCanvas]
+        );
+      }
+    </script>
+  </head>
+  <body>
+    <canvas id="myCanvas"></canvas>
+  </body>
+</html>
diff --git a/samples/osc_simple_worker.js b/samples/osc_simple_worker.js
@@ -1,54 +1,55 @@
-importScripts("https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js");
+importScripts(
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+);
 
+// メインスレッドから通達があったとき
 onmessage = event => {
+  // メインスレッドからオフスクリーンキャンバスを受け取る
+  const canvas = event.data.canvas;
+  // Three.jsのライブラリの内部で style.width にアクセスされてしまう
+  // 対策しないと、エラーが発生するためダミーの値を指定
+  canvas.style = { width: 0, height: 0 };
 
   // サイズを指定
   const width = 960;
   const height = 540;
 
-  // メインスレッドからオフスクリーンキャンバスを受け取る
-  const canvas = event.data.canvas;
-  canvas.style = { width: 0, height: 0 };
-
   // レンダラーを作成
   const renderer = new THREE.WebGLRenderer({ canvas });
   renderer.setSize(width, height);
 
   // シーンを作成
   const scene = new THREE.Scene();
-
-  // カメラを作成
   const camera = new THREE.PerspectiveCamera(45, width / height);
-
-  // マテリアルを作成する
-  const material = new THREE.MeshStandardMaterial({ color: 0xffFF00 });
-
-  // 平行光源
   const directionalLight = new THREE.DirectionalLight(0xffffff);
-  // シーンに追加
   scene.add(directionalLight);
 
-  // ビルボードを作成
+  // マテリアルを作成
+  const material = new THREE.MeshStandardMaterial({ color: 0xffff00 });
+
+  // たくさん作成
   for (let i = 0; i < 300; i++) {
-    // 球体を作成
     const geometry = new THREE.SphereGeometry(20, 20, 20);
-    // メッシュを作成
     const mesh = new THREE.Mesh(geometry, material);
-    // 3D空間にメッシュを追加
     scene.add(mesh);
-    mesh.position.set(1000 * (Math.random() - 0.5),
+    // 適当に配置
+    mesh.position.set(
+      1000 * (Math.random() - 0.5),
       1000 * (Math.random() - 0.5),
-      1000 * (Math.random() - 0.5));
+      1000 * (Math.random() - 0.5)
+    );
   }
 
   tick();
 
   // 毎フレーム時に実行されるループイベントです
   function tick() {
     // カメラの自動移動
-    camera.position.x = 100 * Math.sin(Date.now() / 2000);
-    camera.position.z = 100 * Math.cos(Date.now() / 2000);
-    camera.position.y = 50 * Math.sin(Date.now() / 1000) + 60;
+    camera.position.set(
+      100 * Math.sin(Date.now() / 2000),
+      100 * Math.cos(Date.now() / 2000),
+      50 * Math.sin(Date.now() / 1000) + 60
+    );
     camera.lookAt(new THREE.Vector3(0, 0, 0));
 
     // レンダリング
