Skip to content

Commit d58d00b

Browse files
mrdoobmrdoob
committed
Improved webgl_worker_offscreencanvas example.
1 parent f1d7a14 commit d58d00b

File tree

5 files changed

+186
-113
lines changed

5 files changed

+186
-113
lines changed

‎examples/js/offscreen/jank.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var interval = null;
2+
3+
var button = document.getElementById( 'button' );
4+
button.addEventListener( 'click', function () {
5+
6+
if ( interval === null ) {
7+
8+
interval = setInterval( jank, 1000 / 60 );
9+
10+
button.textContent = 'STOP JANK';
11+
12+
} else {
13+
14+
clearInterval( interval );
15+
interval = null;
16+
17+
button.textContent = 'START JANK';
18+
result.textContent = '';
19+
20+
}
21+
22+
} );
23+
24+
var result = document.getElementById( 'result' );
25+
26+
function jank() {
27+
28+
var number = 0;
29+
30+
for ( var i = 0; i < 10000000; i ++ ) {
31+
32+
number += Math.random();
33+
34+
}
35+
36+
result.textContent = number;
37+
38+
}

‎examples/js/offscreen/offscreen.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
self.importScripts( '../../../build/three.js' );
2+
self.importScripts( './scene.js' );
3+
4+
self.onmessage = function ( message ) {
5+
6+
var data = message.data;
7+
init( data.drawingSurface, data.width, data.height, data.pixelRatio, data.path );
8+
9+
};

‎examples/js/offscreen/scene.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
var camera, scene, renderer, group;
2+
3+
function init( canvas, width, height, pixelRatio, path ) {
4+
5+
camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 );
6+
camera.position.z = 200;
7+
8+
scene = new THREE.Scene();
9+
scene.fog = new THREE.Fog( 0x444466, 100, 400 );
10+
scene.background = new THREE.Color( 0x444466 );
11+
12+
group = new THREE.Group();
13+
scene.add( group );
14+
15+
// we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
16+
17+
var loader = new THREE.ImageBitmapLoader().setPath( path );
18+
loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) {
19+
20+
var texture = new THREE.CanvasTexture( imageBitmap );
21+
22+
var geometry = new THREE.IcosahedronBufferGeometry( 5, 3 );
23+
var materials = [
24+
new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ),
25+
new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ),
26+
new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ),
27+
new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } )
28+
];
29+
30+
for ( var i = 0; i < 100; i ++ ) {
31+
32+
var material = materials[ i % materials.length ];
33+
var mesh = new THREE.Mesh( geometry, material );
34+
mesh.position.x = random() * 200 - 100;
35+
mesh.position.y = random() * 200 - 100;
36+
mesh.position.z = random() * 200 - 100;
37+
mesh.scale.setScalar( random() + 1 );
38+
group.add( mesh );
39+
40+
}
41+
42+
renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } );
43+
renderer.setPixelRatio( pixelRatio );
44+
renderer.setSize( width, height, false );
45+
46+
animate();
47+
48+
} );
49+
50+
}
51+
52+
function animate() {
53+
54+
// group.rotation.x = Date.now() / 4000;
55+
group.rotation.y = - Date.now() / 4000;
56+
57+
renderer.render( scene, camera );
58+
59+
if ( self.requestAnimationFrame ) {
60+
61+
self.requestAnimationFrame( animate );
62+
63+
} else {
64+
65+
// Firefox
66+
67+
}
68+
69+
}
70+
71+
// PRNG
72+
73+
var seed = 1;
74+
function random() {
75+
var x = Math.sin(seed++) * 10000;
76+
return x - Math.floor(x);
77+
}

‎examples/js/workers/OffscreenCanvas.js‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎examples/webgl_worker_offscreencanvas.html‎

Lines changed: 62 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,76 +5,101 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
77
<style>
8+
html, body {
9+
height: 100%;
10+
}
11+
812
body {
9-
background:#000000;
10-
padding:0;
11-
margin:0;
12-
font-weight: bold;
13-
overflow:hidden;
13+
background: #ffffff;
14+
padding: 0;
15+
margin: 0;
16+
font-family: Monospace;
17+
font-size: 13px;
18+
overflow: hidden;
1419
}
1520

1621
#info {
17-
position: absolute;
1822
top: 0px;
1923
width: 100%;
20-
color: #ffffff;
21-
padding: 5px;
22-
font-family:Monospace;
23-
font-size:13px;
24-
text-align:center;
24+
color: #000000;
25+
margin: 6px 0px;
26+
text-align: center;
2527
}
2628

2729
#message {
2830
color: #ff0000;
29-
font-size:14px;
3031
display: none;
3132
}
3233

3334
#message > a {
3435
color: #ff0000;
3536
}
3637

37-
a { color: #ffffff; }
38+
#container {
39+
width: 100%;
40+
height: calc(100% - 80px);
41+
}
42+
43+
#ui {
44+
margin-top: 8px;
45+
height: 80px;
46+
text-align: center;
47+
}
48+
#button {
49+
border: 0;
50+
padding: 4px 6px;
51+
background: #dddddd;
52+
outline: none;
53+
}
3854
</style>
39-
<script src="js/WebGL.js"></script>
4055
</head>
4156
<body>
4257
<div id="info">
43-
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> offscreen canvas<br/><br/>
44-
three.js runs in a worker and produces asynchronously frames for the canvas element in the main thread. <br/>
45-
This is an <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas" target="_blank" rel="noopener noreferrer"> experimental feature</a>!
58+
<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/>
4659
<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>
4760
</div>
4861

49-
<canvas id="canvas" style="width: 100%; height: 100%"></canvas>
50-
</body>
51-
<script>
62+
<div id="container">
63+
<canvas id="canvas1" style="width: 50%; height: 100%"></canvas><canvas id="canvas2" style="width: 50%; height: 100%"></canvas>
64+
</div>
65+
<div id="ui">
66+
<button id="button">START JANK</button><br/>
67+
<span id="result"></span>
68+
</div>
5269

53-
if ( WEBGL.isWebGLAvailable() === false ) {
70+
<script src="../build/three.js"></script>
71+
<script src="js/offscreen/scene.js"></script>
72+
<script src="js/offscreen/jank.js"></script>
73+
<script>
5474

55-
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
75+
// onscreen
5676

57-
}
77+
var width = canvas1.clientWidth;
78+
var height = canvas1.clientHeight;
79+
var pixelRatio = window.devicePixelRatio;
5880

59-
var canvas = document.getElementById( 'canvas' );
81+
init( canvas1, width, height, pixelRatio, './' );
6082

61-
if ( canvas.transferControlToOffscreen !== undefined ) {
83+
// offscreen
6284

63-
var offscreen = canvas.transferControlToOffscreen();
64-
var worker = new Worker( 'js/workers/OffscreenCanvas.js' );
85+
if ( 'transferControlToOffscreen' in canvas2 ) {
6586

66-
worker.postMessage( {
67-
drawingSurface: offscreen,
68-
width: window.innerWidth,
69-
height: window.innerHeight,
70-
pixelRatio: window.devicePixelRatio
71-
}, [ offscreen ] ); // transfer
87+
var offscreen = canvas2.transferControlToOffscreen();
88+
var worker = new Worker( 'js/offscreen/offscreen.js' );
89+
worker.postMessage( {
90+
drawingSurface: offscreen,
91+
width: canvas2.clientWidth,
92+
height: canvas2.clientHeight,
93+
pixelRatio: window.devicePixelRatio,
94+
path: '../../'
95+
}, [ offscreen ] );
7296

73-
} else {
97+
} else {
7498

75-
document.getElementById( 'message' ).style.display = 'block';
99+
document.getElementById( 'message' ).style.display = 'block';
76100

77-
}
101+
}
78102

79-
</script>
103+
</script>
104+
</body>
80105
</html>

0 commit comments

Comments
 (0)