123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js 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://threejs.org" target="_blank" rel="noopener noreferrer">three.js</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 with a WebGL Context. 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="importmap">
- {
- "imports": {
- "three": "../build/three.module.js",
- "three/addons/": "./jsm/"
- }
- }
- </script>
- <script type="module">
- import initJank from 'three/addons/offscreen/jank.js';
- import init from 'three/addons/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
- const isSafari = /^((?!chrome|android).)*safari/i.test( navigator.userAgent );
- let supportOffScreenWebGL = 'transferControlToOffscreen' in canvas2;
- // If it's Safari, then check the version because Safari < 17 doesn't support OffscreenCanvas with a WebGL context.
- if ( isSafari ) {
- var versionMatch = navigator.userAgent.match( /version\/(\d+)/i );
- var safariVersion = versionMatch ? parseInt( versionMatch[ 1 ] ) : 0;
- supportOffScreenWebGL = safariVersion >= 17;
- }
- if ( supportOffScreenWebGL ) {
- 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>
|