Merge branch 'dev' into WebGPUInstancing

build/three.module.js

@@ -1,97 +1,4 @@
 // threejs.org/license
-// Polyfills
-
-if ( Number.EPSILON === undefined ) {
-
-	Number.EPSILON = Math.pow( 2, - 52 );
-
-}
-
-if ( Number.isInteger === undefined ) {
-
-	// Missing in IE
-	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
-
-	Number.isInteger = function ( value ) {
-
-		return typeof value === 'number' && isFinite( value ) && Math.floor( value ) === value;
-
-	};
-
-}
-
-//
-
-if ( Math.sign === undefined ) {
-
-	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign
-
-	Math.sign = function ( x ) {
-
-		return ( x < 0 ) ? - 1 : ( x > 0 ) ? 1 : + x;
-
-	};
-
-}
-
-if ( 'name' in Function.prototype === false ) {
-
-	// Missing in IE
-	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name
-
-	Object.defineProperty( Function.prototype, 'name', {
-
-		get: function () {
-
-			return this.toString().match( /^\s*function\s*([^\(\s]*)/ )[ 1 ];
-
-		}
-
-	} );
-
-}
-
-if ( Object.assign === undefined ) {
-
-	// Missing in IE
-	// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
-
-	Object.assign = function ( target ) {
-
-		if ( target === undefined || target === null ) {
-
-			throw new TypeError( 'Cannot convert undefined or null to object' );
-
-		}
-
-		const output = Object( target );
-
-		for ( let index = 1; index < arguments.length; index ++ ) {
-
-			const source = arguments[ index ];
-
-			if ( source !== undefined && source !== null ) {
-
-				for ( const nextKey in source ) {
-
-					if ( Object.prototype.hasOwnProperty.call( source, nextKey ) ) {
-
-						output[ nextKey ] = source[ nextKey ];
-
-					}
-
-				}
-
-			}
-
-		}
-
-		return output;
-
-	};
-
-}
-
 const REVISION = '121dev';
 const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
 const TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
@@ -9860,6 +9767,8 @@ BufferGeometry.prototype = Object.assign( Object.create( EventDispatcher.prototy
 
 		}
 
+		return this;
+
 	},
 
 	getAttribute: function ( name ) {

docs/api/en/core/BufferGeometry.html

@@ -278,7 +278,7 @@
 		Use [page:Object3D.scale] for typical real-time mesh scaling.
 		</p>
 
-		<h3>[method:null setIndex] ( [param:BufferAttribute index] )</h3>
+		<h3>[method:BufferGeometry setIndex] ( [param:BufferAttribute index] )</h3>
 		<p>Set the [page:.index] buffer.</p>
 
 		<h3>[method:null setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>

docs/api/en/core/Geometry.html

@@ -95,7 +95,7 @@
 		<h3>[property:Array faceVertexUvs]</h3>
 		<p>
 		Array of face [link:https://en.wikipedia.org/wiki/UV_mapping UV] layers, used for mapping textures onto the geometry.<br />
-		Each UV layer is an array of [page:UV]s matching the order and number of vertices in faces.<br /><br />
+		Each UV layer is an array of [page:Vector2]s matching the order and number of vertices in faces.<br /><br />
 		To signal an update in this array, [page:Geometry Geometry.uvsNeedUpdate] needs to be set to true.
 		</p>
 

docs/api/en/core/InstancedBufferAttribute.html

@@ -26,7 +26,7 @@
 
 		<h3>[property:Number meshPerAttribute]</h3>
 		<p>
-			Default is *1*.
+			Defines how often a value of this buffer attribute should be repeated. A value of one means that each value of the instanced attribute is used for a single instance. A value of two means that each value is used for two consecutive instances (and so on). Default is *1*.
 		</p>
 
 		<h2>Methods</h2>

docs/api/zh/core/BufferGeometry.html

@@ -261,7 +261,7 @@
 			缩放几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 [page:Object3D.scale] 实时旋转几何体。
 		</p>
 
-		<h3>[method:null setIndex] ( [param:BufferAttribute index] )</h3>
+		<h3>[method:BufferGeometry setIndex] ( [param:BufferAttribute index] )</h3>
 		<p>设置缓存的 [page:.index]。</p>
 
 		<h3>[method:null setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>

examples/files.js

@@ -378,7 +378,8 @@ var files = {
 		"misc_exporter_obj",
 		"misc_exporter_ply",
 		"misc_exporter_stl",
-		"misc_lookat",
+		"misc_legacy",
+		"misc_lookat"
 	],
 	"css2d": [
 		"css2d_label"

examples/jsm/renderers/webgpu/WebGPUInfo.js

@@ -19,25 +19,25 @@ class WebGPUInfo {
 
 	}
 
-	update( object, count ) {
+	update( object, count, instanceCount = 1 ) {
 
 		this.render.drawCalls ++;
 
 		if ( object.isMesh ) {
 
-			this.render.triangles += ( count / 3 );
+			this.render.triangles += instanceCount * ( count / 3 );
 
 		} else if ( object.isPoints ) {
 
-			this.render.points += count;
+			this.render.points += instanceCount * count;
 
 		} else if ( object.isLineSegments ) {
 
-			this.render.lines += ( count / 2 );
+			this.render.lines += instanceCount * ( count / 2 );
 
 		} else if ( object.isLine ) {
 
-			this.render.lines += ( count - 1 );
+			this.render.lines += instanceCount * ( count - 1 );
 
 		} else {
 

examples/jsm/renderers/webgpu/WebGPUObjects.js

@@ -15,6 +15,12 @@ class WebGPUObjects {
 		const updateMap = this.updateMap;
 		const frame = this.info.render.frame;
 
+		if ( geometry.isBufferGeometry !== true ) {
+
+			throw 'THREE.WebGPURenderer: This renderer only supports THREE.BufferGeometry for geometries.';
+
+		}
+
 		if ( updateMap.get( geometry ) !== frame ) {
 
 			this.geometries.update( geometry );

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -617,6 +617,10 @@ class WebGPURenderer {
 
 				}
 
+			} else if ( object.isLineLoop ) {
+
+				console.error( 'THREE.WebGPURenderer: Objects of type THREE.LineLoop are not supported. Please use THREE.Line or THREE.LineSegments.' );
+
 			} else if ( object.isMesh || object.isLine || object.isPoints ) {
 
 				if ( object.isSkinnedMesh ) {

examples/jsm/renderers/webgpu/WebGPUSampledTexture.js

@@ -1,4 +1,5 @@
 import WebGPUBinding from './WebGPUBinding.js';
+import { GPUBindingType, GPUTextureViewDimension } from './constants.js';
 
 class WebGPUSampledTexture extends WebGPUBinding {
 
@@ -6,9 +7,9 @@ class WebGPUSampledTexture extends WebGPUBinding {
 
 		super( name );
 
-		this.dimension = '2d';
+		this.dimension = GPUTextureViewDimension.TwoD;
 
-		this.type = 'sampled-texture';
+		this.type = GPUBindingType.SampledTexture;
 		this.visibility = GPUShaderStage.FRAGMENT;
 
 		this.textureGPU = null; // set by the renderer
@@ -26,7 +27,7 @@ class WebGPUSampledCubeTexture extends WebGPUSampledTexture {
 
 		super( name );
 
-		this.dimension = 'cube';
+		this.dimension = GPUTextureViewDimension.Cube;
 
 		Object.defineProperty( this, 'isSampledCubeTexture', { value: true } );
 

examples/jsm/renderers/webgpu/WebGPUSampler.js

@@ -1,4 +1,5 @@
 import WebGPUBinding from './WebGPUBinding.js';
+import { GPUBindingType } from './constants.js';
 
 class WebGPUSampler extends WebGPUBinding {
 
@@ -6,7 +7,7 @@ class WebGPUSampler extends WebGPUBinding {
 
 		super( name );
 
-		this.type = 'sampler';
+		this.type = GPUBindingType.Sampler;
 		this.visibility = GPUShaderStage.FRAGMENT;
 
 		this.samplerGPU = null; // set by the renderer

examples/jsm/renderers/webgpu/WebGPUStorageBuffer.js

@@ -1,4 +1,5 @@
 import WebGPUBinding from './WebGPUBinding.js';
+import { GPUBindingType } from './constants.js';
 
 class WebGPUStorageBuffer extends WebGPUBinding {
 
@@ -6,7 +7,7 @@ class WebGPUStorageBuffer extends WebGPUBinding {
 
 		super( name );
 
-		this.type = 'storage-buffer';
+		this.type = GPUBindingType.StorageBuffer;
 
 		this.usage = GPUBufferUsage.VERTEX | GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST;
 

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -1,4 +1,4 @@
-import { GPUTextureFormat, GPUAddressMode, GPUFilterMode } from './constants.js';
+import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
 import { CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping,
 	RGBFormat, RGBAFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, sRGBEncoding
 } from '../../../../build/three.module.js';
@@ -308,6 +308,7 @@ class WebGPUTextures {
 
 		const { width, height, depth } = this._getSize( texture );
 		const needsMipmaps = this._needsMipmaps( texture );
+		const dimension = this._getDimension( texture );
 		const mipLevelCount = this._getMipLevelCount( texture, width, height, needsMipmaps );
 		const format = this._getFormat( texture );
 
@@ -331,6 +332,7 @@ class WebGPUTextures {
 			},
 			mipLevelCount: mipLevelCount,
 			sampleCount: 1,
+			dimension: dimension,
 			format: format,
 			usage: usage
 		};
@@ -505,6 +507,24 @@ class WebGPUTextures {
 
 	}
 
+	_getDimension( texture ) {
+
+		let dimension;
+
+		if ( texture.isDataTexture3D ) {
+
+			dimension = GPUTextureDimension.ThreeD;
+
+		} else {
+
+			dimension = GPUTextureDimension.TwoD;
+
+		}
+
+		return dimension;
+
+	}
+
 	_getFormat( texture ) {
 
 		const format = texture.format;

examples/jsm/renderers/webgpu/WebGPUUniformsGroup.js

@@ -1,4 +1,5 @@
 import WebGPUBinding from './WebGPUBinding.js';
+import { GPUBindingType } from './constants.js';
 
 class WebGPUUniformsGroup extends WebGPUBinding {
 
@@ -12,7 +13,7 @@ class WebGPUUniformsGroup extends WebGPUBinding {
 
 		this.onBeforeUpdate = function () {};
 
-		this.type = 'uniform-buffer';
+		this.type = GPUBindingType.UniformBuffer;
 		this.visibility = GPUShaderStage.VERTEX;
 
 		this.usage = GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST;

examples/jsm/renderers/webgpu/constants.js

@@ -220,6 +220,33 @@ export const GPUStencilOperation = {
 	DecrementWrap: 'decrement-wrap'
 };
 
+export const GPUBindingType = {
+	UniformBuffer: 'uniform-buffer',
+	StorageBuffer: 'storage-buffer',
+	ReadonlyStorageBuffer: 'readonly-storage-buffer',
+	Sampler: 'sampler',
+	ComparisonSampler: 'comparison-sampler',
+	SampledTexture: 'sampled-texture',
+	MultisampledTexture: 'multisampled-texture',
+	ReadonlyStorageTexture: 'readonly-storage-texture',
+	WriteonlyStorageTexture: 'writeonly-storage-texture'
+};
+
+export const GPUTextureDimension = {
+	OneD: '1d',
+	TwoD: '2d',
+	ThreeD: '3d'
+};
+
+export const GPUTextureViewDimension = {
+	OneD: '1d',
+	TwoD: '2d',
+	TwoDArray: '2d-array',
+	Cube: 'cube',
+	CubeArray: 'cube-array',
+	ThreeD: '3d'
+};
+
 export const GPUInputStepMode = {
 	Vertex: 'vertex',
 	Instance: 'instance'

examples/misc_legacy.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title></title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link type="text/css" rel="stylesheet" href="main.css">
+	</head>
+	<body>
+
+		<script src="https://polyfill.io/v3/polyfill.min.js?features=Object.values%2CPromise"></script>
+
+		<script src="../build/three.js"></script>
+		<script src="./js/controls/OrbitControls.js"></script>
+		<script src="./js/loaders/GLTFLoader.js"></script>
+		<script src="./js/loaders/RGBELoader.js"></script>
+		<script>
+
+			var camera, scene, renderer;
+			var controls;
+
+			init();
+			animate();
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.outputEncoding = THREE.sRGBEncoding;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				document.body.appendChild( renderer.domElement );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 20 );
+				camera.position.set( 1.5, 0.2, 1.5 );
+
+				controls = new THREE.OrbitControls( camera, document.body );
+				controls.autoRotate = true;
+				controls.autoRotateSpeed = - 1.0;
+
+				var pmremGenerator = new THREE.PMREMGenerator( renderer );
+				pmremGenerator.compileEquirectangularShader();
+
+				new THREE.RGBELoader()
+					.setDataType( THREE.UnsignedByteType )
+					.load( './textures/equirectangular/venice_sunset_1k.hdr', function ( texture ) {
+
+						var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
+
+						scene.background = envMap;
+						scene.environment = envMap;
+
+					} );
+
+				var url = './models/gltf/BoomBox/glTF-Binary/BoomBox.glb';
+				var loader = new THREE.GLTFLoader();
+				loader.load( url, function ( gltf ) {
+
+					var model = gltf.scene;
+					model.rotation.y = Math.PI;
+					model.scale.setScalar( 50 );
+					scene.add( model );
+
+				} );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				renderer.setAnimationLoop( animate );
+
+				controls.update();
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>

src/animation/AnimationUtils.js

@@ -236,7 +236,7 @@ const AnimationUtils = {
 		if ( referenceClip === undefined ) referenceClip = targetClip;
 		if ( fps === undefined || fps <= 0 ) fps = 30;
 
-		const numTracks = targetClip.tracks.length;
+		const numTracks = referenceClip.tracks.length;
 		const referenceTime = referenceFrame / fps;
 
 		// Make each track's values relative to the values at the reference frame

src/core/BufferGeometry.d.ts

@@ -93,7 +93,7 @@ export class BufferGeometry extends EventDispatcher {
 	readonly isBufferGeometry: true;
 
 	getIndex(): BufferAttribute | null;
-	setIndex( index: BufferAttribute | number[] | null ): void;
+	setIndex( index: BufferAttribute | number[] | null ): BufferGeometry;
 
 	setAttribute( name: string, attribute: BufferAttribute | InterleavedBufferAttribute ): BufferGeometry;
 	getAttribute( name: string ): BufferAttribute | InterleavedBufferAttribute;

src/core/BufferGeometry.js

@@ -69,6 +69,8 @@ BufferGeometry.prototype = Object.assign( Object.create( EventDispatcher.prototy
 
 		}
 
+		return this;
+
 	},
 
 	getAttribute: function ( name ) {

src/materials/Material.d.ts

@@ -139,7 +139,7 @@ export class Material extends EventDispatcher {
 	 * The pairs are defined in both vertex and fragment shaders. Default is undefined.
 	 * @default undefined
 	 */
-	defines: { [key: string]: any };
+	defines: undefined | { [key: string]: any };
 
 	/**
 	 * Which depth function to use. Default is {@link LessEqualDepth}. See the depth mode constants for all possible values.

utils/build/rollup.config.js

@@ -235,44 +235,13 @@ function glsl() {
 
 function babelCleanup() {
 
-	const wrappedClass = /(var\s*(\w+) = \/\*#__PURE__\*\/function \((\w+)?\) {\s*).*(return \2;\s*}\((\w+)?\);)/gs;
-	const inheritsLoose = /_inheritsLoose\((\w+), (\w+)\);\n/;
-
 	const doubleSpaces = / {2}/g;
-	const danglingTabs = /(^\t+$\n)|(\n^\t+$)/gm;
-	const commentOutside = /function (\w+)?\(\)\s*\/\*(.*)\*\/\s*{/g;
-
-	function unwrap( match, wrapperStart, klass, _parentClass, wrapperEnd, parentClass ) {
-
-		return match
-			.replace( wrapperStart, '' )
-			.replace( inheritsLoose, '' )
-			.replace( wrapperEnd, '' )
-			.replaceAll( _parentClass, parentClass );
-
-	}
-
-	function commentInside( match, functionName = '', comment ) {
-
-		return `function ${functionName}(/*${comment}*/) {`;
-
-	}
 
 	return {
 
 		transform( code ) {
 
-			while ( wrappedClass.test( code ) ) {
-
-				code = code
-					.replace( wrappedClass, unwrap );
-
-			}
-
-			code = code
-				.replace( commentOutside, commentInside )
-				.replace( doubleSpaces, '\t' )
-				.replace( danglingTabs, '' );
+			code = code.replace( doubleSpaces, '\t' );
 
 			return {
 				code: code,