Acasă Explorează Ajutor
Autentificare
javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git
2
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Răsfoiți Sursa

Examples: Added webgl_loader_gltf_sheen. (#22677)

Michael Herzog 3 ani în urmă
părinte
e1da50de18
comite
ddccc2727b
10 a modificat fișierele cu 185 adăugiri și 201 ștergeri
Vedere unificată Arată Statisticile Diff
  1. 0 1
      docs/api/en/materials/MeshPhysicalMaterial.html
  2. 0 1
      docs/api/zh/materials/MeshPhysicalMaterial.html
  3. 1 1
      examples/files.json
  4. 71 0
      examples/jsm/loaders/GLTFLoader.js
  5. BIN
      examples/models/fbx/cloth.fbx
  6. BIN
      examples/models/gltf/SheenChair.glb
  7. BIN
      examples/screenshots/webgl_loader_gltf_sheen.jpg
  8. BIN
      examples/screenshots/webgl_materials_physical_sheen.jpg
  9. 113 0
      examples/webgl_loader_gltf_sheen.html
  10. 0 198
      examples/webgl_materials_physical_sheen.html

+ 0 - 1
docs/api/en/materials/MeshPhysicalMaterial.html
Vizualizați fișierul 

@@ -61,7 +61,6 @@
 
 			[example:webgl_materials_variations_physical materials / variations / physical]<br />
 
 			[example:webgl_materials_variations_physical materials / variations / physical]<br />
 
 			[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
 
 			[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
 
 			[example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
 
 			[example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
 
-			[example:webgl_materials_physical_sheen materials / physical / sheen]<br />
 
 			[example:webgl_materials_physical_transmission materials / physical / transmission]
 
 			[example:webgl_materials_physical_transmission materials / physical / transmission]
 
 		</p>
 
 		</p>

+ 0 - 1
docs/api/zh/materials/MeshPhysicalMaterial.html
Vizualizați fișierul 

@@ -62,7 +62,6 @@
 
 			[example:webgl_materials_variations_physical materials / variations / physical]<br />
 
 			[example:webgl_materials_variations_physical materials / variations / physical]<br />
 
 			[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
 
 			[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
 
 			[example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
 
 			[example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
 
-			[example:webgl_materials_physical_sheen materials / physical / sheen]<br />
 
 			[example:webgl_materials_physical_transmission materials / physical / transmission]
 
 			[example:webgl_materials_physical_transmission materials / physical / transmission]
 
 		</p>
 
 		</p>

+ 1 - 1
examples/files.json
Vizualizați fișierul 

@@ -84,6 +84,7 @@
 
 		"webgl_loader_gcode",
 
 		"webgl_loader_gcode",
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_gltf",
 
 		"webgl_loader_gltf_compressed",
 
 		"webgl_loader_gltf_compressed",
 
+		"webgl_loader_gltf_sheen",
 
 		"webgl_loader_gltf_transmission",
 
 		"webgl_loader_gltf_transmission",
 
 		"webgl_loader_gltf_variants",
 
 		"webgl_loader_gltf_variants",
 
 		"webgl_loader_ifc",
 
 		"webgl_loader_ifc",
 
@@ -146,7 +147,6 @@
 
 		"webgl_materials_normalmap_object_space",
 
 		"webgl_materials_normalmap_object_space",
 
 		"webgl_materials_physical_clearcoat",
 
 		"webgl_materials_physical_clearcoat",
 
 		"webgl_materials_physical_reflectivity",
 
 		"webgl_materials_physical_reflectivity",
 
-		"webgl_materials_physical_sheen",
 
 		"webgl_materials_physical_transmission",
 
 		"webgl_materials_physical_transmission",
 
 		"webgl_materials_standard",
 
 		"webgl_materials_standard",
 
 		"webgl_materials_subsurface_scattering",
 
 		"webgl_materials_subsurface_scattering",

+ 71 - 0
examples/jsm/loaders/GLTFLoader.js
Vizualizați fișierul 

@@ -94,6 +94,12 @@ class GLTFLoader extends Loader {
 
 
 
 		} );
 
 		} );
 
 
 
+		this.register( function ( parser ) {
 
+
 
+			return new GLTFMaterialsSheenExtension( parser );
 
+
 
+		} );
 
+
 
 		this.register( function ( parser ) {
 
 		this.register( function ( parser ) {
 
 
 
 			return new GLTFMaterialsTransmissionExtension( parser );
 
 			return new GLTFMaterialsTransmissionExtension( parser );
 
@@ -428,6 +434,7 @@ const EXTENSIONS = {
 
 	KHR_MATERIALS_CLEARCOAT: 'KHR_materials_clearcoat',
 
 	KHR_MATERIALS_CLEARCOAT: 'KHR_materials_clearcoat',
 
 	KHR_MATERIALS_IOR: 'KHR_materials_ior',
 
 	KHR_MATERIALS_IOR: 'KHR_materials_ior',
 
 	KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness',
 
 	KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness',
 
+	KHR_MATERIALS_SHEEN: 'KHR_materials_sheen',
 
 	KHR_MATERIALS_SPECULAR: 'KHR_materials_specular',
 
 	KHR_MATERIALS_SPECULAR: 'KHR_materials_specular',
 
 	KHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission',
 
 	KHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission',
 
 	KHR_MATERIALS_UNLIT: 'KHR_materials_unlit',
 
 	KHR_MATERIALS_UNLIT: 'KHR_materials_unlit',
 
@@ -704,6 +711,70 @@ class GLTFMaterialsClearcoatExtension {
 
 
 
 }
 
 }
 
 
 
+/**
 
+ * Sheen Materials Extension
 
+ *
 
+ * Specification: https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_sheen
 
+ */
 
+class GLTFMaterialsSheenExtension {
 
+
 
+	constructor( parser ) {
 
+
 
+		this.parser = parser;
 
+		this.name = EXTENSIONS.KHR_MATERIALS_SHEEN;
 
+
 
+	}
 
+
 
+	getMaterialType( materialIndex ) {
 
+
 
+		const parser = this.parser;
 
+		const materialDef = parser.json.materials[ materialIndex ];
 
+
 
+		if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) return null;
 
+
 
+		return MeshPhysicalMaterial;
 
+
 
+	}
 
+
 
+	extendMaterialParams( materialIndex, materialParams ) {
 
+
 
+		const parser = this.parser;
 
+		const materialDef = parser.json.materials[ materialIndex ];
 
+
 
+		if ( ! materialDef.extensions || ! materialDef.extensions[ this.name ] ) {
 
+
 
+			return Promise.resolve();
 
+
 
+		}
 
+
 
+		const pending = [];
 
+
 
+		materialParams.sheenTint = new Color( 0, 0, 0 );
 
+		materialParams.sheenRoughness = 0;
 
+		materialParams.sheen = 1;
 
+
 
+		const extension = materialDef.extensions[ this.name ];
 
+
 
+		if ( extension.sheenColorFactor !== undefined ) {
 
+
 
+			materialParams.sheenTint.fromArray( extension.sheenColorFactor );
 
+
 
+		}
 
+
 
+		if ( extension.sheenRoughnessFactor !== undefined ) {
 
+
 
+			materialParams.sheenRoughness = extension.sheenRoughnessFactor;
 
+
 
+		}
 
+
 
+		// TODO sheenColorTexture and sheenRoughnessTexture
 
+
 
+		return Promise.all( pending );
 
+
 
+	}
 
+
 
+}
 
+
 
 /**
 
 /**
 
  * Transmission Materials Extension
 
  * Transmission Materials Extension
 
  *
 
  *

BIN
examples/models/fbx/cloth.fbx
Vizualizați fișierul


BIN
examples/models/gltf/SheenChair.glb
Vizualizați fișierul


BIN
examples/screenshots/webgl_loader_gltf_sheen.jpg
Vizualizați fișierul


BIN
examples/screenshots/webgl_materials_physical_sheen.jpg
Vizualizați fișierul


+ 113 - 0
examples/webgl_loader_gltf_sheen.html
Vizualizați fișierul 

@@ -0,0 +1,113 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - glTF 2.0 - transmission</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
+	</head>
 
+
 
+	<body>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_sheen" target="_blank" rel="noopener">KHR_materials_sheen</a> extension<br />
 
+			Sheen Chair from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/SheenChair" target="_blank" rel="noopener">glTF-Sample-Models</a>
 
+		</div>
 
+
 
+		<script type="module">
 
+
 
+			import * as THREE from '../build/three.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			let camera, scene, renderer, controls;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				const container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
 
+				camera.position.set( 0, 1, 2 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				// model
 
+
 
+				new GLTFLoader()
 
+					.setPath( 'models/gltf/' )
 
+					.load( 'SheenChair.glb', function ( gltf ) {
 
+
 
+						scene.add( gltf.scene );
 
+
 
+						const object = gltf.scene.getObjectByName( 'SheenChair_fabric' );
 
+
 
+						const gui = new GUI();
 
+
 
+						gui.add( object.material, 'sheen', 0, 1 );
 
+						gui.open();
 
+
 
+					} );
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 
+				renderer.toneMappingExposure = 1;
 
+				renderer.outputEncoding = THREE.sRGBEncoding;
 
+				container.appendChild( renderer.domElement );
 
+
 
+				const environment = new RoomEnvironment();
 
+				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
+
 
+				scene.background = new THREE.Color( 0xbbbbbb );
 
+				scene.environment = pmremGenerator.fromScene( environment ).texture;
 
+
 
+				controls = new OrbitControls( camera, renderer.domElement );
 
+				controls.enableDamping = true;
 
+				controls.minDistance = 1;
 
+				controls.maxDistance = 10;
 
+				controls.target.set( 0, 0.5, 0 );
 
+				controls.update();
 
+
 
+				window.addEventListener( 'resize', onWindowResize );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+
 
+				controls.update(); // required if damping enabled
 
+
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 0 - 198
examples/webgl_materials_physical_sheen.html
Vizualizați fișierul 

@@ -1,198 +0,0 @@
 
-<html lang="en">
 
-	<head>
 
-		<title>Sheen demo (material property)</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-		<style>
 
-			body {
 
-				color: #333;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-		<div id="info">Sheen demo by <a href="https://github.com/DanielSturk">DanielSturk</a></div>
 
-		<div id="container"></div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import * as Nodes from './jsm/nodes/Nodes.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-
 
-			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
-
 
-			// Graphics variables
 
-			let camera, controls, scene, renderer, stats;
 
-			let directionalLight;
 
-			let mesh, sphere, material, nodeMaterial;
 
-
 
-			const params = {
 
-				nodeMaterial: true,
 
-				color: new THREE.Color( 255, 0, 127 ),
 
-				sheenBRDF: true,
 
-				sheen: new THREE.Color( 10, 10, 10 ), // corresponds to .04 reflectance
 
-				roughness: 0.9
 
-			};
 
-
 
-			// model
 
-			new FBXLoader().load( 'models/fbx/cloth.fbx', function ( loadedModel ) {
 
-
 
-				mesh = loadedModel.children[ 0 ];
 
-
 
-				init();
 
-
 
-			} );
 
-
 
-			function init( ) {
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xbfd1e5 );
 
-
 
-				mesh.scale.multiplyScalar( 0.5 );
 
-				scene.add( mesh );
 
-
 
-				//
 
-
 
-				material = new THREE.MeshPhysicalMaterial();
 
-				material.side = THREE.DoubleSide;
 
-				material.metalness = 0;
 
-
 
-				//
 
-
 
-				nodeMaterial = new Nodes.StandardNodeMaterial();
 
-				nodeMaterial.side = THREE.DoubleSide;
 
-				nodeMaterial.metalness = new Nodes.FloatNode( 0 );
 
-				nodeMaterial.roughness = new Nodes.FloatNode();
 
-				nodeMaterial.color = new Nodes.ColorNode( params.color.clone() );
 
-
 
-				//
 
-
 
-				sphere = new THREE.Mesh(
 
-					new THREE.SphereGeometry( 1, 100, 100 ),
 
-					material
 
-				);
 
-				scene.add( sphere );
 
-
 
-				camera.position.set( - 12, 7, 4 );
 
-
 
-				const container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.shadowMap.enabled = true;
 
-				container.appendChild( renderer.domElement );
 
-
 
-				controls = new OrbitControls( camera, renderer.domElement );
 
-				controls.target.set( 0, 2, 0 );
 
-				controls.update();
 
-
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 
-				directionalLight.position.set( 0, 10, 0 );
 
-				directionalLight.castShadow = true;
 
-				directionalLight.add(
 
-					new THREE.Mesh(
 
-						new THREE.SphereGeometry( 0.5 ),
 
-						new THREE.MeshBasicMaterial( { color: 0xffffff } )
 
-					)
 
-				);
 
-
 
-				scene.add( directionalLight );
 
-
 
-				stats = new Stats();
 
-				stats.domElement.style.position = 'absolute';
 
-				stats.domElement.style.top = '0px';
 
-				container.appendChild( stats.dom );
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-				const gui = new GUI();
 
-
 
-				function onUpdate() {
 
-
 
-					mesh.material = sphere.material = params.nodeMaterial
 
-						? nodeMaterial
 
-						: material;
 
-
 
-					material.sheen = params.sheenBRDF
 
-						? new THREE.Color()
 
-						: null;
 
-
 
-					material.needsUpdate = true;
 
-
 
-					nodeMaterial.sheen = params.sheenBRDF
 
-						? new Nodes.ColorNode( material.sheen )
 
-						: undefined;
 
-
 
-					nodeMaterial.needsCompile = true;
 
-
 
-				}
 
-
 
-				gui.add( params, 'nodeMaterial' ).onChange( onUpdate );
 
-				gui.addColor( params, 'color' );
 
-				gui.add( params, 'sheenBRDF' ).onChange( onUpdate );
 
-				gui.addColor( params, 'sheen' );
 
-				gui.add( params, 'roughness', 0, 1 );
 
-				gui.open();
 
-
 
-				onUpdate();
 
-
 
-				animate();
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				//
 
-
 
-				material.color.copy( params.color ).multiplyScalar( 1 / 255 );
 
-				material.roughness = params.roughness;
 
-
 
-				//
 
-
 
-				nodeMaterial.color.value.copy( material.color );
 
-				nodeMaterial.roughness.value = params.roughness;
 
-
 
-				//
 
-
 
-				if ( params.sheenBRDF ) {
 
-
 
-					material.sheen.copy( params.sheen ).multiplyScalar( 1 / 255 );
 
-
 
-				}
 
-
 
-				//
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>