Skip to content

Commit a4de3b3

Browse files
gkjohnsongkjohnson
committed
scene fixes
1 parent f89f5c0 commit a4de3b3

File tree

2 files changed

+59
-80
lines changed

2 files changed

+59
-80
lines changed

‎example/materialDatabase.js

Lines changed: 23 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
import {
22
AgXToneMapping,
3-
PerspectiveCamera,
4-
Scene,
53
Box3,
6-
Mesh,
7-
CylinderGeometry,
8-
MeshPhysicalMaterial,
4+
Scene,
5+
Vector3,
96
WebGLRenderer,
10-
EquirectangularReflectionMapping,
11-
Color,
127
} from 'three';
13-
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
148
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
159
import { WebGLPathTracer } from '../src/index.js';
16-
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
17-
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
1810
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
1911
import { LoaderElement } from './utils/LoaderElement.js';
2012
import { getScaledSettings } from './utils/getScaledSettings.js';
13+
import { MaterialOrbSceneLoader } from './utils/MaterialOrbLoader.js';
14+
import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.js';
2115

22-
const MODEL_URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/material-balls/material_ball_v2.glb';
23-
const ENV_URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/master/hdri/autoshop_01_1k.hdr';
2416
const DB_URL = 'https://api.physicallybased.info/materials';
2517
const CREDITS = 'Materials courtesy of "physicallybased.info"';
2618

@@ -41,6 +33,8 @@ init();
4133

4234
async function init() {
4335

36+
RectAreaLightUniformsLib.init();
37+
4438
loader = new LoaderElement();
4539
loader.attach( document.body );
4640

@@ -49,84 +43,39 @@ async function init() {
4943
// renderer
5044
renderer = new WebGLRenderer( { antialias: true } );
5145
renderer.toneMapping = AgXToneMapping;
46+
renderer.toneMappingExposure = 0.02;
5247
document.body.appendChild( renderer.domElement );
5348

5449
// path tracer
5550
pathTracer = new WebGLPathTracer( renderer );
5651
pathTracer.multipleImportanceSampling = params.multipleImportanceSampling;
5752
pathTracer.tiles.set( params.tiles, params.tiles );
53+
pathTracer.textureSize.set( 2048, 2048 );
5854
pathTracer.filterGlossyFactor = 0.5;
5955

60-
// camera
61-
const aspect = window.innerWidth / window.innerHeight;
62-
camera = new PerspectiveCamera( 75, aspect, 0.025, 500 );
63-
camera.position.set( - 4, 2, 3 );
64-
65-
// controls
66-
controls = new OrbitControls( camera, renderer.domElement );
67-
controls.addEventListener( 'change', () => pathTracer.updateCamera() );
68-
6956
// scene
7057
scene = new Scene();
7158

7259
// load assets
73-
const [ envTexture, gltf, dbJson ] = await Promise.all( [
74-
new RGBELoader().loadAsync( ENV_URL ),
75-
new GLTFLoader().setMeshoptDecoder( MeshoptDecoder ).loadAsync( MODEL_URL ),
60+
const [ orb, dbJson ] = await Promise.all( [
61+
new MaterialOrbSceneLoader().loadAsync(),
7662
fetch( DB_URL ).then( res => res.json() ),
7763
] );
7864

79-
// background
80-
envTexture.mapping = EquirectangularReflectionMapping;
81-
scene.background = envTexture;
82-
scene.environment = envTexture;
83-
8465
// scene initialization
85-
gltf.scene.scale.setScalar( 0.01 );
86-
gltf.scene.updateMatrixWorld();
87-
scene.add( gltf.scene );
88-
89-
const box = new Box3();
90-
box.setFromObject( gltf.scene );
91-
92-
const floor = new Mesh(
93-
new CylinderGeometry( 3, 3, 0.05, 200 ),
94-
new MeshPhysicalMaterial( { color: 0xffffff, roughness: 0, metalness: 0.25 } ),
95-
);
96-
floor.geometry = floor.geometry.toNonIndexed();
97-
floor.geometry.clearGroups();
98-
floor.position.y = box.min.y - 0.03;
99-
scene.add( floor );
100-
101-
shellMaterial = new MeshPhysicalMaterial();
102-
const coreMaterial = new MeshPhysicalMaterial( { color: new Color( 0.5, 0.5, 0.5 ) } );
103-
gltf.scene.traverse( c => {
104-
105-
// the vertex normals on the material ball are off...
106-
// TODO: precompute the vertex normals so they are correct on load
107-
if ( c.geometry ) {
66+
scene.add( orb.scene );
67+
camera = orb.camera;
68+
shellMaterial = orb.material;
10869

109-
c.geometry.computeVertexNormals();
70+
scene.attach( camera );
71+
camera.removeFromParent();
72+
camera.updateMatrixWorld();
11073

111-
}
112-
113-
if ( c.name === 'Sphere_1' ) {
114-
115-
c.material = coreMaterial;
116-
117-
} else {
118-
119-
c.material = shellMaterial;
120-
121-
}
122-
123-
if ( c.name === 'subsphere_1' ) {
124-
125-
c.material = coreMaterial;
126-
127-
}
128-
129-
} );
74+
const fwd = new Vector3( 0, 0, - 1 ).transformDirection( camera.matrixWorld ).normalize();
75+
controls = new OrbitControls( camera, renderer.domElement );
76+
controls.addEventListener( 'change', () => pathTracer.updateCamera() );
77+
controls.target.copy( camera.position ).addScaledVector( fwd, 25 );
78+
controls.update();
13079

13180
// database set up
13281
database = {};
@@ -201,7 +150,7 @@ function applyMaterialInfo( info, material ) {
201150
if ( material.transmission ) {
202151

203152
if ( info.color ) material.attenuationColor.setRGB( ...info.color );
204-
material.attenuationDistance = 200 / info.density;
153+
material.attenuationDistance = 1000 / info.density;
205154

206155
} else {
207156

@@ -228,6 +177,7 @@ function animate() {
228177

229178
requestAnimationFrame( animate );
230179
pathTracer.renderSample();
180+
// renderer.render( scene, camera );
231181
loader.setSamples( pathTracer.samples, pathTracer.isCompiling );
232182

233183
}

‎example/utils/MaterialOrbLoader.js

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { RectAreaLight } from 'three';
1+
import { MeshPhysicalMaterial, MeshStandardMaterial, RectAreaLight } from 'three';
22
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
33

4-
const ORB_SCENE_URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/usd-shader-ball/usd-shaderball-scene.glb';
4+
// TODO: this scene should technically be rendered at a 1000x smaller scale
55

6+
const ORB_SCENE_URL = 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/usd-shader-ball/usd-shaderball-scene.glb';
67
function assignWatts( light, watts ) {
78

89
// https://github.com/will-ca/glTF-Blender-IO/blob/af9e7f06508a95425b05e485fa83681b268bbdfc/addons/io_scene_gltf2/blender/exp/gltf2_blender_gather_lights.py#L92-L97
@@ -29,7 +30,6 @@ export class MaterialOrbSceneLoader {
2930

3031
const {
3132
scene,
32-
lights,
3333
cameras,
3434
} = gltf;
3535

@@ -40,16 +40,45 @@ export class MaterialOrbSceneLoader {
4040
for ( let i = 0; i < 4; i ++ ) {
4141

4242
const light = new RectAreaLight( 0xffffff, 1, 24.36, 24.36 );
43-
assignWatts( leftLight, 11185.5 );
43+
assignWatts( light, 11185.5 );
4444
scene.getObjectByName( 'light' + i ).add( light );
4545

4646
}
4747

48+
// TODO: why is this necessary?
49+
const camera = cameras[ 0 ];
50+
camera.fov *= 2.0;
51+
camera.updateProjectionMatrix();
52+
53+
// TODO: if we don't set these we seem to have some kind of race condition causing
54+
// emission on the object core
55+
scene.traverse( c => {
56+
57+
if ( c.material ) {
58+
59+
c.material.emissive.set( 0, 0, 0 );
60+
c.material.emissiveIntensity = 0;
61+
62+
}
63+
64+
if ( c.material ) {
65+
66+
const newMat = new MeshStandardMaterial();
67+
newMat.color.copy( c.material.color );
68+
newMat.map = c.material.map;
69+
c.material = newMat;
70+
71+
}
72+
73+
} );
74+
75+
const material = new MeshPhysicalMaterial();
76+
scene.getObjectByName( 'material_surface' ).material = material;
77+
4878
return {
4979

50-
material: scene.getObjectByName( 'material_surface' ).material,
51-
cameras,
52-
lights,
80+
material,
81+
camera,
5382
scene,
5483

5584
};

0 commit comments

Comments
 (0)