Example: Basic OffscreenCanvas example

ad306c25 · Mugen87 · 779815eb · ad306c25 · ad306c25 · ad306c25
Showing with 136 addition and 1 deletion

examples/files.js examples/files.js +2 -1

examples/webgl_worker_offscreencanvas.html examples/webgl_worker_offscreencanvas.html +78 -0

examples/worker/offscreenCanvas.js examples/worker/offscreenCanvas.js +56 -0

未找到文件。
--- a/examples/files.js
+++ b/examples/files.js
@@ -294,7 +294,8 @@ var files = {
 		"webgl_raymarching_reflect",
 		"webgl_shadowmap_pcss",
 		"webgl_simple_gi",
-		"webgl_tiled_forward"
+		"webgl_tiled_forward",
+		"webgl_worker_offscreencanvas"
 	],
 	"webgl deferred": [
 		"webgldeferred_animation"

--- a/examples/webgl_worker_offscreencanvas.html
+++ b/examples/webgl_worker_offscreencanvas.html
+<!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">
+		<style>
+			body {
+				background:#777;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px;
+				width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+			}
+
+			#message {
+				color: #ff0000;
+				font-size:14px;
+				display: none;
+			}
+
+			#message > a {
+				color: #ff0000;
+			}
+
+			a {
+				color: #ffffff;
+			}
+		</style>
+		<script src="js/Detector.js"></script>
+	</head>
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> offscreen canvas<br/><br/>
+			three.js runs in a worker and produces asynchronously frames for the canvas element in the main thread. <br/>
+			This is an <a href="https://developer.mozilla.org/de/docs/Web/API/OffscreenCanvas" target="_blank" rel="noopener noreferrer"> experimental feature</a>!
+			<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>
+
+		<canvas id="canvas" style="width: 100%; height: 100%"></canvas>
+	</body>
+	<script>
+
+		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+		var canvas = document.getElementById( 'canvas' );
+
+		if ( canvas.transferControlToOffscreen !== undefined ) {
+
+			var offscreen = canvas.transferControlToOffscreen();
+			var worker = new Worker( 'worker/offscreenCanvas.js' );
+
+			worker.postMessage( {
+				drawingSurface: offscreen,
+				width: window.innerWidth,
+				height: window.innerHeight,
+				pixelRatio: window.devicePixelRatio
+			}, [ offscreen ] ); // transfer
+
+		} else {
+
+			document.getElementById( 'message' ).style.display = 'block';
+
+		}
+
+	</script>
+</html>
--- a/examples/worker/offscreenCanvas.js
+++ b/examples/worker/offscreenCanvas.js
+self.importScripts( '../../build/three.js' );
+
+self.onmessage = function ( message ) {
+
+	var data = message.data;
+	init( data.drawingSurface, data.width, data.height, data.pixelRatio );
+
+};
+
+var camera, scene, renderer, mesh, clock;
+
+function init( offscreen, width, height, pixelRatio ) {
+
+	camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
+	camera.position.z = 400;
+
+	scene = new THREE.Scene();
+
+	clock = new THREE.Clock();
+
+	var loader = new THREE.ImageBitmapLoader();
+
+	loader.load( '../textures/crate.gif', function ( imageBitmap ) {
+
+		var texture = new THREE.CanvasTexture( imageBitmap );
+		var material = new THREE.MeshBasicMaterial( { map: texture } );
+
+		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+		mesh = new THREE.Mesh( geometry, material );
+
+		scene.add( mesh );
+
+		animate();
+
+	} );
+
+	//
+
+	renderer = new THREE.WebGLRenderer( { antialias: true, canvas: offscreen } );
+	renderer.setPixelRatio( pixelRatio );
+	renderer.setSize( width, height, false );
+
+}
+
+function animate() {
+
+	var delta = clock.getDelta();
+
+	mesh.rotation.x += delta * 0.2;
+	mesh.rotation.y += delta * 0.5;
+
+	renderer.render( scene, camera );
+
+	renderer.context.commit().then( animate );
+
+}