add webgpu materialx examples

mrdoob · Dec 2, 2023 · 1e36a22 · 1e36a22
1 parent 0371364
commit 1e36a22
Show file tree

Hide file tree

Showing 5 changed files with 404 additions and 0 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -339,8 +339,10 @@
 		"webgpu_loader_gltf_compressed",
 		"webgpu_loader_gltf_iridescence",
 		"webgpu_loader_gltf_sheen",
+		"webgpu_loader_materialx",
 		"webgpu_materials",
 		"webgpu_materials_video",
+		"webgpu_materialx_noise",
 		"webgpu_multiple_rendertargets",
 		"webgpu_morphtargets",
 		"webgpu_morphtargets_face",

diff --git a/examples/screenshots/webgpu_loader_materialx.jpg b/examples/screenshots/webgpu_loader_materialx.jpg
diff --git a/examples/screenshots/webgpu_materialx_noise.jpg b/examples/screenshots/webgpu_materialx_noise.jpg
diff --git a/examples/webgpu_loader_materialx.html b/examples/webgpu_loader_materialx.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - MaterialX loader</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>
+			.dg .property-name {
+				width: 20% !important;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - MaterialXLoader<br />
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/",
+					"three/nodes": "./jsm/nodes/Nodes.js"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import { MaterialXLoader } from './jsm/loaders/MaterialXLoader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+
+			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+
+			import { nodeFrame } from './jsm/renderers/webgl-legacy/nodes/WebGLNodes.js';
+
+			const SAMPLE_PATH = 'https://raw.githubusercontent.com/materialx/MaterialX/main/resources/Materials/Examples/StandardSurface/';
+
+			const samples = [
+				'standard_surface_brass_tiled.mtlx',
+				//'standard_surface_brick_procedural.mtlx',
+				'standard_surface_carpaint.mtlx',
+				//'standard_surface_chess_set.mtlx',
+				'standard_surface_chrome.mtlx',
+				'standard_surface_copper.mtlx',
+				//'standard_surface_default.mtlx',
+				//'standard_surface_glass.mtlx',
+				//'standard_surface_glass_tinted.mtlx',
+				'standard_surface_gold.mtlx',
+				'standard_surface_greysphere.mtlx',
+				//'standard_surface_greysphere_calibration.mtlx',
+				'standard_surface_jade.mtlx',
+				//'standard_surface_look_brass_tiled.mtlx',
+				//'standard_surface_look_wood_tiled.mtlx',
+				'standard_surface_marble_solid.mtlx',
+				'standard_surface_metal_brushed.mtlx',
+				'standard_surface_plastic.mtlx',
+				//'standard_surface_thin_film.mtlx',
+				'standard_surface_velvet.mtlx',
+				'standard_surface_wood_tiled.mtlx'
+			];
+
+			let camera, scene, renderer, prefab;
+			const models = [];
+
+			init();
+
+			function init() {
+
+				const container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 50 );
+				camera.position.set( 0, 3, 20 );
+
+				scene = new THREE.Scene();
+
+				renderer = new WebGPURenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.toneMapping = THREE.LinearToneMapping;
+				renderer.toneMappingExposure = .5;
+				renderer.setAnimationLoop( render );
+				container.appendChild( renderer.domElement );
+
+				//
+
+				const controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 2;
+				controls.maxDistance = 40;
+
+				//
+
+				new RGBELoader()
+					.setPath( 'textures/equirectangular/' )
+					.load( 'san_giuseppe_bridge_2k.hdr', async ( texture ) => {
+
+						texture.mapping = THREE.EquirectangularReflectionMapping;
+
+						scene.background = texture;
+						scene.environment = texture;
+
+						prefab = ( await new GLTFLoader().loadAsync( './models/gltf/ShaderBall.glb' ) ).scene;
+
+						for ( const sample of samples ) {
+
+							addSample( sample );
+
+						}
+
+					} );
+
+				window.addEventListener( 'resize', onWindowResize );
+
+			}
+
+			function updateModelsAlign() {
+
+				const COLUMN_COUNT = 6;
+				const DIST_X = 3;
+				const DIST_Y = 4;
+
+				const lineCount = Math.floor( models.length / COLUMN_COUNT ) - 1.5;
+
+				const offsetX = ( DIST_X * ( COLUMN_COUNT - 1 ) ) * - .5;
+				const offsetY = ( DIST_Y * lineCount ) * .5;
+
+				for ( let i = 0; i < models.length; i ++ ) {
+
+					const model = models[ i ];
+
+					model.position.x = ( ( i % COLUMN_COUNT ) * DIST_X ) + offsetX;
+					model.position.y = ( Math.floor( i / COLUMN_COUNT ) * - DIST_Y ) + offsetY;
+
+				}
+
+			}
+
+			async function addSample( sample ) {
+
+				const model = prefab.clone();
+
+				models.push( model );
+
+				scene.add( model );
+
+				updateModelsAlign();
+
+				//
+
+				const material = await new MaterialXLoader()
+					.setPath( SAMPLE_PATH )
+					.loadAsync( sample )
+					.then( ( { materials } ) => Object.values( materials ).pop() );
+
+				const calibrationMesh = model.getObjectByName( 'Calibration_Mesh' );
+				calibrationMesh.material = material;
+
+				const Preview_Mesh = model.getObjectByName( 'Preview_Mesh' );
+				Preview_Mesh.material = material;
+
+			}
+
+			//
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function render() {
+
+				nodeFrame.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>