samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!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">
		<meta property="og:title" content="three.js webgl - worker - offscreen canvas">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/webgl_worker_offscreencanvas.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgl_worker_offscreencanvas.jpg">
		<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>