Skip to content

Commit 1e36a22

Browse files
sunagsunag
committed
add webgpu materialx examples
1 parent 0371364 commit 1e36a22

File tree

5 files changed

+404
-0
lines changed

5 files changed

+404
-0
lines changed

‎examples/files.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,8 +339,10 @@
339339
"webgpu_loader_gltf_compressed",
340340
"webgpu_loader_gltf_iridescence",
341341
"webgpu_loader_gltf_sheen",
342+
"webgpu_loader_materialx",
342343
"webgpu_materials",
343344
"webgpu_materials_video",
345+
"webgpu_materialx_noise",
344346
"webgpu_multiple_rendertargets",
345347
"webgpu_morphtargets",
346348
"webgpu_morphtargets_face",

‎examples/screenshots/webgpu_loader_materialx.jpg‎

53.1 KB
Loading

‎examples/screenshots/webgpu_materialx_noise.jpg‎

46.1 KB
Loading

‎examples/webgpu_loader_materialx.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - MaterialX loader</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
<style>
9+
.dg .property-name {
10+
width: 20% !important;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
16+
<div id="info">
17+
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - MaterialXLoader<br />
18+
</div>
19+
20+
<script type="importmap">
21+
{
22+
"imports": {
23+
"three": "../build/three.module.js",
24+
"three/addons/": "./jsm/",
25+
"three/nodes": "./jsm/nodes/Nodes.js"
26+
}
27+
}
28+
</script>
29+
30+
<script type="module">
31+
32+
import * as THREE from 'three';
33+
34+
import { MaterialXLoader } from './jsm/loaders/MaterialXLoader.js';
35+
import { OrbitControls } from './jsm/controls/OrbitControls.js';
36+
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
37+
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
38+
39+
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
40+
41+
import { nodeFrame } from './jsm/renderers/webgl-legacy/nodes/WebGLNodes.js';
42+
43+
const SAMPLE_PATH = 'https://raw.githubusercontent.com/materialx/MaterialX/main/resources/Materials/Examples/StandardSurface/';
44+
45+
const samples = [
46+
'standard_surface_brass_tiled.mtlx',
47+
//'standard_surface_brick_procedural.mtlx',
48+
'standard_surface_carpaint.mtlx',
49+
//'standard_surface_chess_set.mtlx',
50+
'standard_surface_chrome.mtlx',
51+
'standard_surface_copper.mtlx',
52+
//'standard_surface_default.mtlx',
53+
//'standard_surface_glass.mtlx',
54+
//'standard_surface_glass_tinted.mtlx',
55+
'standard_surface_gold.mtlx',
56+
'standard_surface_greysphere.mtlx',
57+
//'standard_surface_greysphere_calibration.mtlx',
58+
'standard_surface_jade.mtlx',
59+
//'standard_surface_look_brass_tiled.mtlx',
60+
//'standard_surface_look_wood_tiled.mtlx',
61+
'standard_surface_marble_solid.mtlx',
62+
'standard_surface_metal_brushed.mtlx',
63+
'standard_surface_plastic.mtlx',
64+
//'standard_surface_thin_film.mtlx',
65+
'standard_surface_velvet.mtlx',
66+
'standard_surface_wood_tiled.mtlx'
67+
];
68+
69+
let camera, scene, renderer, prefab;
70+
const models = [];
71+
72+
init();
73+
74+
function init() {
75+
76+
const container = document.createElement( 'div' );
77+
document.body.appendChild( container );
78+
79+
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 50 );
80+
camera.position.set( 0, 3, 20 );
81+
82+
scene = new THREE.Scene();
83+
84+
renderer = new WebGPURenderer( { antialias: true } );
85+
renderer.setPixelRatio( window.devicePixelRatio );
86+
renderer.setSize( window.innerWidth, window.innerHeight );
87+
renderer.toneMapping = THREE.LinearToneMapping;
88+
renderer.toneMappingExposure = .5;
89+
renderer.setAnimationLoop( render );
90+
container.appendChild( renderer.domElement );
91+
92+
//
93+
94+
const controls = new OrbitControls( camera, renderer.domElement );
95+
controls.minDistance = 2;
96+
controls.maxDistance = 40;
97+
98+
//
99+
100+
new RGBELoader()
101+
.setPath( 'textures/equirectangular/' )
102+
.load( 'san_giuseppe_bridge_2k.hdr', async ( texture ) => {
103+
104+
texture.mapping = THREE.EquirectangularReflectionMapping;
105+
106+
scene.background = texture;
107+
scene.environment = texture;
108+
109+
prefab = ( await new GLTFLoader().loadAsync( './models/gltf/ShaderBall.glb' ) ).scene;
110+
111+
for ( const sample of samples ) {
112+
113+
addSample( sample );
114+
115+
}
116+
117+
} );
118+
119+
window.addEventListener( 'resize', onWindowResize );
120+
121+
}
122+
123+
function updateModelsAlign() {
124+
125+
const COLUMN_COUNT = 6;
126+
const DIST_X = 3;
127+
const DIST_Y = 4;
128+
129+
const lineCount = Math.floor( models.length / COLUMN_COUNT ) - 1.5;
130+
131+
const offsetX = ( DIST_X * ( COLUMN_COUNT - 1 ) ) * - .5;
132+
const offsetY = ( DIST_Y * lineCount ) * .5;
133+
134+
for ( let i = 0; i < models.length; i ++ ) {
135+
136+
const model = models[ i ];
137+
138+
model.position.x = ( ( i % COLUMN_COUNT ) * DIST_X ) + offsetX;
139+
model.position.y = ( Math.floor( i / COLUMN_COUNT ) * - DIST_Y ) + offsetY;
140+
141+
}
142+
143+
}
144+
145+
async function addSample( sample ) {
146+
147+
const model = prefab.clone();
148+
149+
models.push( model );
150+
151+
scene.add( model );
152+
153+
updateModelsAlign();
154+
155+
//
156+
157+
const material = await new MaterialXLoader()
158+
.setPath( SAMPLE_PATH )
159+
.loadAsync( sample )
160+
.then( ( { materials } ) => Object.values( materials ).pop() );
161+
162+
const calibrationMesh = model.getObjectByName( 'Calibration_Mesh' );
163+
calibrationMesh.material = material;
164+
165+
const Preview_Mesh = model.getObjectByName( 'Preview_Mesh' );
166+
Preview_Mesh.material = material;
167+
168+
}
169+
170+
//
171+
172+
function onWindowResize() {
173+
174+
camera.aspect = window.innerWidth / window.innerHeight;
175+
camera.updateProjectionMatrix();
176+
177+
renderer.setSize( window.innerWidth, window.innerHeight );
178+
179+
}
180+
181+
function render() {
182+
183+
nodeFrame.update();
184+
185+
renderer.render( scene, camera );
186+
187+
}
188+
189+
</script>
190+
191+
</body>
192+
</html>

0 commit comments

Comments
 (0)