diff --git a/examples/js/offscreen/jank.js b/examples/js/offscreen/jank.js new file mode 100644 index 0000000000000..e2a0528f2008c --- /dev/null +++ b/examples/js/offscreen/jank.js @@ -0,0 +1,38 @@ +var interval = null; + +var button = document.getElementById( 'button' ); +button.addEventListener( 'click', function () { + + if ( interval === null ) { + + interval = setInterval( jank, 1000 / 60 ); + + button.textContent = 'STOP JANK'; + + } else { + + clearInterval( interval ); + interval = null; + + button.textContent = 'START JANK'; + result.textContent = ''; + + } + +} ); + +var result = document.getElementById( 'result' ); + +function jank() { + + var number = 0; + + for ( var i = 0; i < 10000000; i ++ ) { + + number += Math.random(); + + } + + result.textContent = number; + +} diff --git a/examples/js/offscreen/offscreen.js b/examples/js/offscreen/offscreen.js new file mode 100644 index 0000000000000..d898d9c006a04 --- /dev/null +++ b/examples/js/offscreen/offscreen.js @@ -0,0 +1,9 @@ +self.importScripts( '../../../build/three.js' ); +self.importScripts( './scene.js' ); + +self.onmessage = function ( message ) { + + var data = message.data; + init( data.drawingSurface, data.width, data.height, data.pixelRatio, data.path ); + +}; diff --git a/examples/js/offscreen/scene.js b/examples/js/offscreen/scene.js new file mode 100644 index 0000000000000..1c68809e6f542 --- /dev/null +++ b/examples/js/offscreen/scene.js @@ -0,0 +1,77 @@ +var camera, scene, renderer, group; + +function init( canvas, width, height, pixelRatio, path ) { + + camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); + camera.position.z = 200; + + scene = new THREE.Scene(); + scene.fog = new THREE.Fog( 0x444466, 100, 400 ); + scene.background = new THREE.Color( 0x444466 ); + + group = new THREE.Group(); + scene.add( group ); + + // we don't use ImageLoader since it has a DOM dependency (HTML5 image element) + + var loader = new THREE.ImageBitmapLoader().setPath( path ); + loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) { + + var texture = new THREE.CanvasTexture( imageBitmap ); + + var geometry = new THREE.IcosahedronBufferGeometry( 5, 3 ); + var materials = [ + new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ), + new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ), + new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ), + new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } ) + ]; + + for ( var i = 0; i < 100; i ++ ) { + + var material = materials[ i % materials.length ]; + var mesh = new THREE.Mesh( geometry, material ); + mesh.position.x = random() * 200 - 100; + mesh.position.y = random() * 200 - 100; + mesh.position.z = random() * 200 - 100; + mesh.scale.setScalar( random() + 1 ); + group.add( mesh ); + + } + + renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } ); + renderer.setPixelRatio( pixelRatio ); + renderer.setSize( width, height, false ); + + animate(); + + } ); + +} + +function animate() { + + // group.rotation.x = Date.now() / 4000; + group.rotation.y = - Date.now() / 4000; + + renderer.render( scene, camera ); + + if ( self.requestAnimationFrame ) { + + self.requestAnimationFrame( animate ); + + } else { + + // Firefox + + } + +} + +// PRNG + +var seed = 1; +function random() { + var x = Math.sin(seed++) * 10000; + return x - Math.floor(x); +} diff --git a/examples/js/workers/OffscreenCanvas.js b/examples/js/workers/OffscreenCanvas.js deleted file mode 100644 index 33791e8d50edb..0000000000000 --- a/examples/js/workers/OffscreenCanvas.js +++ /dev/null @@ -1,76 +0,0 @@ -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(); - - // we don't use ImageLoader since it has a DOM dependency (HTML5 image element) - - 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(); - - }, null, function () { - - // Workaround for Firefox - // https://bugzilla.mozilla.org/show_bug.cgi?id=1335594 - - var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); - 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 ); - - if ( self.requestAnimationFrame ) { - - self.requestAnimationFrame( animate ); - - } else if ( renderer.context.commit ) { - - // Deprecated - - renderer.context.commit().then( animate ); - - } - -} diff --git a/examples/webgl_worker_offscreencanvas.html b/examples/webgl_worker_offscreencanvas.html index a74a25a2d3976..eb3fa20a43ea2 100644 --- a/examples/webgl_worker_offscreencanvas.html +++ b/examples/webgl_worker_offscreencanvas.html @@ -5,28 +5,29 @@ -
- three.js offscreen canvas

- three.js runs in a worker and produces asynchronously frames for the canvas element in the main thread.
- This is an experimental feature! + three.js - offscreen canvas (about)

Your browser does not support OffscreenCanvas. Check the browser support here

- - - + + + + +