[pull] dev from mrdoob:dev

examples/jsm/exporters/GLTFExporter.js

@@ -1533,15 +1533,30 @@ class GLTFWriter {
 
 		}
 
-		let mimeType = map.userData.mimeType;
+		const mimeType = map.userData.mimeType;
 
-		if ( mimeType === 'image/webp' ) mimeType = 'image/png';
+		const imageIndex = this.processImage( map.image, map.format, map.flipY, mimeType );
 
 		const textureDef = {
-			sampler: this.processSampler( map ),
-			source: this.processImage( map.image, map.format, map.flipY, mimeType )
+			sampler: this.processSampler( map )
 		};
 
+		if ( mimeType === 'image/webp' ) {
+
+			textureDef.extensions = textureDef.extensions || {};
+			textureDef.extensions[ 'EXT_texture_webp' ] = {
+				source: imageIndex
+			};
+
+			this.extensionsUsed[ 'EXT_texture_webp' ] = true;
+			this.extensionsRequired[ 'EXT_texture_webp' ] = true;
+
+		} else {
+
+			textureDef.source = imageIndex;
+
+		}
+
 		if ( map.name ) textureDef.name = map.name;
 
 		await this._invokeAllAsync( async function ( ext ) {

examples/jsm/loaders/usd/USDComposer.js

@@ -5,8 +5,10 @@ import {
 	BufferGeometry,
 	CapsuleGeometry,
 	ClampToEdgeWrapping,
+	Color,
 	ConeGeometry,
 	CylinderGeometry,
+	DirectionalLight,
 	Euler,
 	Group,
 	Matrix4,
@@ -17,14 +19,17 @@ import {
 	Object3D,
 	OrthographicCamera,
 	PerspectiveCamera,
+	PointLight,
 	Quaternion,
 	QuaternionKeyframeTrack,
+	RectAreaLight,
 	RepeatWrapping,
 	ShapeUtils,
 	SkinnedMesh,
 	Skeleton,
 	Bone,
 	SphereGeometry,
+	SpotLight,
 	SRGBColorSpace,
 	Texture,
 	Vector2,
@@ -725,6 +730,15 @@ class USDComposer {
 				parent.add( obj );
 				this._buildHierarchy( obj, path );
 
+			} else if ( typeName === 'DistantLight' || typeName === 'SphereLight' || typeName === 'RectLight' || typeName === 'DiskLight' ) {
+
+				const obj = this._buildLight( path, typeName );
+				obj.name = name;
+				const attrs = this._getAttributes( path );
+				this.applyTransform( obj, spec.fields, attrs );
+				parent.add( obj );
+				this._buildHierarchy( obj, path );
+
 			} else if ( typeName === 'Cube' || typeName === 'Sphere' || typeName === 'Cylinder' || typeName === 'Cone' || typeName === 'Capsule' ) {
 
 				const obj = this._buildGeomPrimitive( path, spec, typeName );
@@ -1435,6 +1449,122 @@ class USDComposer {
 
 	}
 
+	/**
+	 * Build a light from a UsdLux light spec.
+	 */
+	_buildLight( path, typeName ) {
+
+		const attrs = this._getAttributes( path );
+
+		const intensity = this._parseNumber( attrs[ 'inputs:intensity' ], 1 );
+		const baseColor = attrs[ 'inputs:color' ] || [ 1, 1, 1 ];
+		const enableColorTemperature = attrs[ 'inputs:enableColorTemperature' ] === true;
+		const colorTemperature = this._parseNumber( attrs[ 'inputs:colorTemperature' ], 6500 );
+
+		const color = new Color( baseColor[ 0 ], baseColor[ 1 ], baseColor[ 2 ] );
+
+		if ( enableColorTemperature ) {
+
+			const temp = this._colorTemperature( colorTemperature );
+			color.multiply( temp );
+
+		}
+
+		let light;
+
+		switch ( typeName ) {
+
+			case 'DistantLight':
+				light = new DirectionalLight( color, intensity );
+				break;
+
+			case 'SphereLight': {
+
+				const coneAngle = this._parseNumber( attrs[ 'shaping:cone:angle' ], 0 );
+
+				if ( coneAngle > 0 ) {
+
+					const angle = coneAngle * Math.PI / 180;
+					const softness = this._parseNumber( attrs[ 'shaping:cone:softness' ], 0 );
+					light = new SpotLight( color, intensity, 0, angle, softness );
+
+				} else {
+
+					light = new PointLight( color, intensity );
+
+				}
+
+				break;
+
+			}
+
+			case 'RectLight': {
+
+				const width = this._parseNumber( attrs[ 'inputs:width' ], 1 );
+				const height = this._parseNumber( attrs[ 'inputs:height' ], 1 );
+				light = new RectAreaLight( color, intensity, width, height );
+				break;
+
+			}
+
+			case 'DiskLight': {
+
+				const radius = this._parseNumber( attrs[ 'inputs:radius' ], 0.5 );
+				const side = radius * 2;
+				light = new RectAreaLight( color, intensity, side, side );
+				break;
+
+			}
+
+		}
+
+		return light;
+
+	}
+
+	/**
+	 * Convert a color temperature in Kelvin to an RGB Color.
+	 * Based on Tanner Helland's algorithm.
+	 */
+	_colorTemperature( kelvin ) {
+
+		const temp = kelvin / 100;
+		let r, g, b;
+
+		if ( temp <= 66 ) {
+
+			r = 1;
+			g = 0.39008157876901960784 * Math.log( temp ) - 0.63184144378862745098;
+
+		} else {
+
+			r = 1.29293618606274509804 * Math.pow( temp - 60, - 0.1332047592 );
+			g = 1.12989086089529411765 * Math.pow( temp - 60, - 0.0755148492 );
+
+		}
+
+		if ( temp >= 66 ) {
+
+			b = 1;
+
+		} else if ( temp <= 19 ) {
+
+			b = 0;
+
+		} else {
+
+			b = 0.54320678911019607843 * Math.log( temp - 10 ) - 1.19625408914;
+
+		}
+
+		return new Color(
+			Math.min( Math.max( r, 0 ), 1 ),
+			Math.min( Math.max( g, 0 ), 1 ),
+			Math.min( Math.max( b, 0 ), 1 )
+		);
+
+	}
+
 	_parseNumber( value, fallback ) {
 
 		const n = Number( value );

examples/misc_exporter_gltf.html

@@ -98,7 +98,7 @@
 			let container;
 
 			let camera, object, object2, material, geometry, scene1, scene2, renderer;
-			let gridHelper, sphere, model, coffeemat;
+			let gridHelper, sphere, model, coffeemat, webpBox;
 
 			const params = {
 				trs: false,
@@ -112,6 +112,7 @@
 				exportObjects: exportObjects,
 				exportSceneObject: exportSceneObject,
 				exportCompressedObject: exportCompressedObject,
+				exportWebPModel: exportWebPModel,
 			};
 
 			init();
@@ -501,6 +502,30 @@
 
 				} );
 
+				// ---------------------------------------------------------------------
+				// Box with WebP texture (EXT_texture_webp)
+				// ---------------------------------------------------------------------
+				const canvas = document.createElement( 'canvas' );
+				canvas.width = 64;
+				canvas.height = 64;
+				const ctx = canvas.getContext( '2d' );
+				ctx.fillStyle = '#005BBB';
+				ctx.fillRect( 0, 0, 64, 64 );
+				ctx.fillStyle = '#FFD500';
+				ctx.fillRect( 16, 16, 32, 32 );
+
+				const webpTexture = new THREE.CanvasTexture( canvas );
+				webpTexture.userData.mimeType = 'image/webp';
+				webpTexture.colorSpace = THREE.SRGBColorSpace;
+
+				webpBox = new THREE.Mesh(
+					new THREE.BoxGeometry( 100, 100, 100 ),
+					new THREE.MeshBasicMaterial( { map: webpTexture } )
+				);
+				webpBox.position.set( 400, 0, 0 );
+				webpBox.name = 'WebPBox';
+				scene1.add( webpBox );
+
 				//
 
 				const gui = new GUI();
@@ -519,6 +544,7 @@
 				h.add( params, 'exportObjects' ).name( 'Export Sphere With Grid' );
 				h.add( params, 'exportSceneObject' ).name( 'Export Scene 1 and Object' );
 				h.add( params, 'exportCompressedObject' ).name( 'Export Coffeemat (from compressed data)' );
+				h.add( params, 'exportWebPModel' ).name( 'Export WebP Model (EXT_texture_webp)' );
 
 				gui.open();
 
@@ -566,6 +592,12 @@
 
 			}
 
+			function exportWebPModel() {
+
+				exportGLTF( webpBox );
+
+			}
+
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;

manual/en/game.html

@@ -1401,7 +1401,7 @@ <h1>Making a Game</h1>
 <p>When I first started this I used just one radius for all animals
 but of course that was no good as the pug is much smaller than the horse.
 So I added the difference sizes but I wanted to be able to visualize
-things. To do that I made a <code class="notranslate" translate="no">StatusDisplayHelper</code> component.</p>
+things. To do that I made a <code class="notranslate" translate="no">StateDisplayHelper</code> component.</p>
 <p>I uses a <a href="/docs/#api/en/helpers/PolarGridHelper"><code class="notranslate" translate="no">PolarGridHelper</code></a> to draw a circle around each character
 and it uses html elements to let each character show some status using
 the techniques covered in <a href="align-html-elements-to-3d.html">the article on aligning html elements to 3D</a>.</p>
@@ -1673,7 +1673,7 @@ <h1>Making a Game</h1>
 <p>To make a coroutine you make a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">JavaScript generator function</a>.
 A generator function is preceded by the keyword <code class="notranslate" translate="no">function*</code> (the asterisk is important!)</p>
 <p>Generator functions can <code class="notranslate" translate="no">yield</code>. For example</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* countOTo9() {
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* count0To9() {
   for (let i = 0; i &lt; 10; ++i) {
     console.log(i);
     yield;

manual/fr/game.html

@@ -1196,7 +1196,7 @@ <h1>Créer un jeu</h1>
 <p>Lorsque j'ai commencé cela, j'ai utilisé un seul rayon pour tous les animaux,
 mais bien sûr, ce n'était pas bon, car le carlin est beaucoup plus petit que le cheval.
 J'ai donc ajouté les différentes tailles, mais je voulais pouvoir visualiser
-les choses. Pour ce faire, j'ai créé un composant <code class="notranslate" translate="no">StatusDisplayHelper</code>.</p>
+les choses. Pour ce faire, j'ai créé un composant <code class="notranslate" translate="no">StateDisplayHelper</code>.</p>
 <p>J'utilise un <a href="/docs/#api/en/helpers/PolarGridHelper"><code class="notranslate" translate="no">PolarGridHelper</code></a> pour dessiner un cercle autour de chaque personnage,
 et il utilise des éléments html pour permettre à chaque personnage d'afficher un certain statut en utilisant
 les techniques couvertes dans <a href="align-html-elements-to-3d.html">l'article sur l'alignement des éléments html en 3D</a>.</p>
@@ -1498,7 +1498,7 @@ <h1>Créer un jeu</h1>
 <p>Pour créer une coroutine, vous créez une <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">fonction génératrice JavaScript</a>.
 Une fonction génératrice est précédée du mot-clé <code class="notranslate" translate="no">function*</code> (l'astérisque est important !)</p>
 <p>Les fonctions génératrices peuvent <code class="notranslate" translate="no">yield</code> (céder). Par exemple</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* countOTo9() {
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* count0To9() {
   for (let i = 0; i &lt; 10; ++i) {
     console.log(i);
     yield;

manual/ko/game.html

@@ -1206,7 +1206,7 @@ <h1>로 게임 만들기</h1>
 +    globals.playerRadius = model.size / 2;
 </pre>
 <p>이제 와 생각해보니 플레이어가 아니라 기차의 머리를 바라보게 하는 편이 더 나았겠네요. 이건 나중에 돌아와 고치도록 하겠습니다.</p>
-<p>예제를 처음 만들었을 때는 동물들이 모두 같은 크기의 경계 원(radius)을 썼지만, 이렇게 하고 보니 말과 퍼그(강아지)의 크기가 같은 게 말이 안 된다는 생각이 들었습니다. 그래서 각 모델의 크기에 따라 경계 원을 따로 지정했죠. 그리고 상태를 보여주면 좋겠다는 생각이 들어 상태를 보여 줄 <code class="notranslate" translate="no">StatusDisplayHelper</code> 컴포넌트를 추가했습니다.</p>
+<p>예제를 처음 만들었을 때는 동물들이 모두 같은 크기의 경계 원(radius)을 썼지만, 이렇게 하고 보니 말과 퍼그(강아지)의 크기가 같은 게 말이 안 된다는 생각이 들었습니다. 그래서 각 모델의 크기에 따라 경계 원을 따로 지정했죠. 그리고 상태를 보여주면 좋겠다는 생각이 들어 상태를 보여 줄 <code class="notranslate" translate="no">StateDisplayHelper</code> 컴포넌트를 추가했습니다.</p>
 <p>또한 <a href="/docs/#api/ko/helpers/PolarGridHelper"><code class="notranslate" translate="no">PolarGridHelper</code></a>를 써 각 캐릭터의 경계 원이 보이도록 했고, <a href="align-html-elements-to-3d.html">HTML 요소를 3D로 정렬하기</a>에서 썼던 방법으로 각 캐릭터의 상태를 HTML로 보여주도록 했습니다.</p>
 <p>먼저 각 요소를 담을 HTML을 추가합니다.</p>
 <pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;body&gt;
@@ -1438,7 +1438,7 @@ <h1>로 게임 만들기</h1>
 <p>위 클래스는 다른 코루틴이 실행되는 동안 요소를 안전하게 제거/추가하도록 <code class="notranslate" translate="no">SafeArray</code>와 비슷한 구조로 만들었습니다. 또한 이 클래스는 중첩된 코루틴도 처리합니다.</p>
 <p>코루틴을 만들려면 자바스크립트의 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function*">제너레이터 함수</a>를 만들어야 합니다. 제너레이터 함수는 <code class="notranslate" translate="no">function*</code>이라는 키워드로 생성하죠(별표를 붙여야 합니다!).</p>
 <p>제너레이터 함수는 <code class="notranslate" translate="no">yield</code> 키워드로 실행 순서를 <strong>양보(yield)</strong>할 수 있습니다.</p>
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* countOTo9() {
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* count0To9() {
   for (let i = 0; i &lt; 10; ++i) {
     console.log(i);
     yield;