midas
/
threejs-obj-space


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							<!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. 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 src="../build/three.js"></script>
		<script src="js/offscreen/scene.js"></script>
		<script src="js/offscreen/jank.js"></script>
		<script>

			// onscreen

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

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

			// offscreen

			if ( 'transferControlToOffscreen' in canvas2 ) {

				var offscreen = canvas2.transferControlToOffscreen();
				var worker = new Worker( 'js/offscreen/offscreen.js' );
				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>