Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #11509 from spite/feature-imagebitmap

Implementing support for ImageBitmap
Mr.doob 8 years ago
parent
39fc3aef17 4bf69600ff
commit
8b920e1e59
2 changed files with 280 additions and 0 deletions
Unified View Show Diff Stats
  1. 113 0
      examples/js/loaders/ImageBitmapLoader.js
  2. 167 0
      examples/webgl_loader_imagebitmap.html

+ 113 - 0
examples/js/loaders/ImageBitmapLoader.js
View File 

@@ -0,0 +1,113 @@
 
+/**

+ * @author thespite / http://clicktorelease.com/

+ */

+

+ function detectCreateImageBitmap() {

+

+	var url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';

+

+	return new Promise(function (resolve, reject) {

+

+		if (!('createImageBitmap' in window)) {

+			reject();

+			return;

+		}

+

+		fetch(url).then(function (res) {

+			return res.blob();

+		}).then(function (blob) {

+			Promise.all([

+				createImageBitmap(blob, { imageOrientation: "none", premultiplyAlpha: "none" }),

+				createImageBitmap(blob, { imageOrientation: "flipY", premultiplyAlpha: "none" }),

+				createImageBitmap(blob, { imageOrientation: "none", premultiplyAlpha: "premultiply" }),

+				createImageBitmap(blob, { imageOrientation: "flipY", premultiplyAlpha: "premultiply" })

+			]).then(function (res) {

+				resolve();

+			}).catch(function (e) {

+				reject();

+			});

+		});

+	});

+

+}

+

+var canUseImageBitmap = detectCreateImageBitmap();

+canUseImageBitmap

+.then( function( res ) {

+	console.log( 'createImageBitmap supported' );

+})

+.catch( function( res ) {

+	console.log( 'createImageBitmap not supported' );

+});

+

+

+THREE.ImageBitmapLoader = function (manager) {

+

+	this.manager = manager !== undefined ? manager : THREE.DefaultLoadingManager;

+	this.options = {};

+

+};

+

+THREE.ImageBitmapLoader.prototype = {

+

+	constructor: THREE.ImageBitmapLoader,

+

+	setOptions: function setOptions(options) {

+

+		this.options = options;

+		return this;

+

+	},

+

+	load: function load(url, onLoad, onProgress, onError) {

+

+		if (url === undefined) url = '';

+

+		if (this.path !== undefined) url = this.path + url;

+

+		var scope = this;

+

+		var cached = THREE.Cache.get(url);

+

+		if (cached !== undefined) {

+

+			scope.manager.itemStart(url);

+

+			setTimeout(function () {

+

+				if (onLoad) onLoad(cached);

+

+				scope.manager.itemEnd(url);

+

+			}, 0);

+

+			return cached;

+		}

+

+		fetch(url).then(function (res) {

+

+			return res.blob();

+

+		}).then(function (res) {

+

+			return createImageBitmap(res, scope.options);

+

+		}).then(function (res) {

+

+			THREE.Cache.add(url, res);

+

+			if (onLoad) onLoad(res);

+

+			scope.manager.itemEnd(url);

+

+		}).catch(function (e) {

+

+			if (onError) onError(e);

+

+			scope.manager.itemEnd(url);

+			scope.manager.itemError(url);

+

+		});

+	}

+

+};

+ 167 - 0
examples/webgl_loader_imagebitmap.html
View File 

@@ -0,0 +1,167 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - loader - ImageBitmap</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
 
+			{
 
+				font-family: Monospace;
 
+				background-color: #000;
 
+				color: #fff;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+			#info
 
+			{
 
+				position: absolute;
 
+				top: 10px;
 
+				width: 100%;
 
+				text-align: center;
 
+				z-index: 100;
 
+				display:block;
 
+			}
 
+			#info a, .button
 
+			{
 
+				color: #f00;
 
+				font-weight: bold;
 
+				text-decoration: underline;
 
+				cursor: pointer
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<script src="../build/three.js"></script>
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/controls/OrbitControls.js"></script>
 
+		<script src="js/loaders/ImageBitmapLoader.js"></script>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Texture loader using ImageBitmap
 
+		</div>
 
+
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			THREE.Cache.enabled = true;
 
+
 
+			var container;
 
+
 
+			var camera, scene, renderer;
 
+			var controls;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function decimalToHex( d ) {
 
+
 
+				var hex = Number( d ).toString( 16 );
 
+				hex = "000000".substr( 0, 6 - hex.length ) + hex;
 
+				return hex.toUpperCase();
 
+
 
+			}
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				// CAMERA
 
+
 
+				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
 
+				camera.position.set( 0, 4, 7 );
 
+
 
+				// SCENE
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// CONTROLS
 
+
 
+				controls = new THREE.OrbitControls( camera );
 
+
 
+				// LIGHTS
 
+
 
+				new THREE.ImageBitmapLoader()
 
+				.setOptions( { imageOrientation: 'none' } )
 
+				.load ( 'textures/planets/earth_atmos_2048.jpg', function( imageBitmap ) {
 
+
 
+					var tex = new THREE.Texture ( imageBitmap );
 
+					tex.needsUpdate = true;
 
+
 
+					var cube = new THREE.Mesh(
 
+						new THREE.BoxBufferGeometry( 1,1,1 ),
 
+						new THREE.MeshBasicMaterial( {
 
+							map: tex
 
+						})
 
+					);
 
+					cube.position.x = 1;
 
+					scene.add( cube );
 
+
 
+				}, function( p ) {
 
+					console.log( p );
 
+				}, function( e ) {
 
+					console.log( e );
 
+				} );
 
+
 
+				new THREE.ImageBitmapLoader()
 
+				.setOptions( { imageOrientation: 'flipY' } )
 
+				.load ( 'textures/planets/earth_specular_2048.jpg', function( imageBitmap ) {
 
+
 
+					var tex = new THREE.Texture ( imageBitmap );
 
+					tex.needsUpdate = true;
 
+
 
+					var cube = new THREE.Mesh(
 
+						new THREE.BoxBufferGeometry( 1,1,1 ),
 
+						new THREE.MeshBasicMaterial( {
 
+							map: tex
 
+						})
 
+					);
 
+					cube.position.x = -1;
 
+					scene.add( cube );
 
+
 
+				}, function( p ) {
 
+					console.log( p );
 
+				}, function( e ) {
 
+					console.log( e );
 
+				} );
 
+
 
+				// RENDERER
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
+
 
+				// EVENTS
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				windowHalfX = window.innerWidth / 2;
 
+				windowHalfY = window.innerHeight / 2;
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				controls.update();
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>