master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_worker_offscreencanvas.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - worker - offscreen canvas</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style>
      body {
        background-color: #fff;
        color: #444;
      }

      a {
        color: #08f;
      }

      canvas {
        display: inline-block;
      }

      #message {
        color: #ff0000;
        display: none;
      }

      #message > a {
        color: #ff0000;
      }

      #container {
        position: absolute;
        top: 50px;
        bottom: 70px;
        width: 100%;
      }

      #ui {
        position: absolute;
        bottom: 20px;
        width: 100%;
        text-align: center;
      }

      #button {
        border: 0;
        padding: 4px 6px;
        background: #dddddd;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener noreferrer">Verge3D</a> - offscreen canvas (<a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas" target="_blank" rel="noopener noreferrer">about</a>)<br/>
      <p id="message">Your browser does not support OffscreenCanvas. Check the browser support <a href="https://caniuse.com/#feat=offscreencanvas" target="_blank" rel="noopener noreferrer">here</a></p>
    </div>

    <div id="container">
      <canvas id="canvas1" style="width: 50%; height: 100%"></canvas><canvas id="canvas2" style="width: 50%; height: 100%"></canvas>
    </div>
    <div id="ui">
      <button id="button">START JANK</button><br/>
      <span id="result"></span>
    </div>

    <script type="module">

      import initJank from './jsm/offscreen/jank.js';
      import init from './jsm/offscreen/scene.js';

      // onscreen

      const canvas1 = document.getElementById('canvas1');
      const canvas2 = document.getElementById('canvas2');

      const width = canvas1.clientWidth;
      const height = canvas1.clientHeight;
      const pixelRatio = window.devicePixelRatio;

      init(canvas1, width, height, pixelRatio, './');
      initJank();

      // offscreen

      if ('transferControlToOffscreen' in canvas2) {

        const offscreen = canvas2.transferControlToOffscreen();
        const worker = new Worker('jsm/offscreen/offscreen.js', { type: 'module' });
        worker.postMessage({
          drawingSurface: offscreen,
          width: canvas2.clientWidth,
          height: canvas2.clientHeight,
          pixelRatio: window.devicePixelRatio,
          path: '../../'
        }, [offscreen]);

      } else {

        document.getElementById('message').style.display = 'block';

      }

    </script>
  </body>
</html>