Skip to content

Commit e01ab4c

Browse files
SeeleyLoganSeeleyLogan
committed
Prettified
1 parent fdc290a commit e01ab4c

File tree

1 file changed

+80
-40
lines changed

1 file changed

+80
-40
lines changed

‎examples/webgpu_tsl_wood.html‎

Lines changed: 80 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -46,38 +46,38 @@
4646

4747
async function init() {
4848
scene = new THREE.Scene();
49-
scene.background = new THREE.Color("#333333");
49+
scene.background = new THREE.Color( 0xffffff );
5050

5151

5252
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
53-
camera.position.set(0, 0, -6);
53+
camera.position.set(-0.1, 5, 0.548);
5454

5555
renderer = new THREE.WebGPURenderer({ antialias: true });
5656
renderer.setPixelRatio(1.0); // important for performance
5757
renderer.setSize(window.innerWidth, window.innerHeight);
5858
renderer.toneMapping = THREE.NeutralToneMapping;
59-
renderer.toneMappingExposure = 1.0;
59+
renderer.toneMappingExposure = 0.6;
6060
renderer.setAnimationLoop(render);
6161
document.body.appendChild(renderer.domElement);
6262

6363
canvas = document.querySelector("canvas");
6464
controls = new OrbitControls(camera, canvas);
65-
controls.target.set(0, 0, 0);
65+
controls.target.set(0, 0, 0.548);
6666

6767
stats = new Stats();
6868
document.body.appendChild(stats.dom);
6969

7070
font = await new FontLoader().loadAsync("./fonts/helvetiker_regular.typeface.json");
7171

72-
const text_mat = new THREE.MeshStandardMaterial();
73-
text_mat.colorNode = TSL.color("#fdfdfd");
74-
7572
base = new THREE.Group();
76-
base.rotation.set(0, -Math.PI/2, 0);
73+
base.rotation.set(0, 0, -Math.PI/2);
74+
base.position.set(0, 0, 0.548);
7775
scene.add(base);
7876

77+
const text_mat = new THREE.MeshStandardMaterial();
78+
text_mat.colorNode = TSL.color("#000000");
79+
7980

80-
8181
for (let y = 0; y < Finishes.length; y++) {
8282
const txt_geo = new TextGeometry(Finishes[y], {
8383
font: font,
@@ -100,22 +100,68 @@
100100
}
101101

102102

103-
new HDRLoader().load("./textures/equirectangular/royal_esplanade_1k.hdr", async (env_map) =>
104-
{
105-
env_map.mapping = THREE.EquirectangularReflectionMapping;
106-
107-
scene.background = env_map;
108-
scene.environment = env_map;
109-
scene.environmentIntensity = 6;
110-
111-
for (let x = 0; x < WoodGenuses.length; x++)
112-
{
113-
await add_wood(x, text_mat);
114-
}
103+
const material = new THREE.MeshBasicNodeMaterial();
104+
105+
const gridXZ = TSL.Fn( ( [ gridSize = float( 1.0 ), dotWidth = float( 0.1 ), lineWidth = float( 0.02 ) ] ) => {
106+
107+
const coord = TSL.positionWorld.xz.div( gridSize );
108+
const grid = TSL.fract( coord );
109+
110+
// Screen-space derivative for automatic antialiasing
111+
const fw = TSL.fwidth( coord );
112+
const smoothing = TSL.max( fw.x, fw.y ).mul( 0.5 );
113+
114+
// Create squares at cell centers
115+
const squareDist = TSL.max( TSL.abs( grid.x.sub( 0.5 ) ), TSL.abs( grid.y.sub( 0.5 ) ) );
116+
const dots = TSL.smoothstep( dotWidth.add( smoothing ), dotWidth.sub( smoothing ), squareDist );
117+
118+
// Create grid lines
119+
const lineX = TSL.smoothstep( lineWidth.add( smoothing ), lineWidth.sub( smoothing ), TSL.abs( grid.x.sub( 0.5 ) ) );
120+
const lineZ = TSL.smoothstep( lineWidth.add( smoothing ), lineWidth.sub( smoothing ), TSL.abs( grid.y.sub( 0.5 ) ) );
121+
const lines = TSL.max( lineX, lineZ );
122+
123+
return TSL.max( dots, lines );
124+
125+
} );
126+
127+
const radialGradient = TSL.Fn( ( [ radius = float( 10.0 ), falloff = float( 1.0 ) ] ) => {
128+
129+
return TSL.smoothstep( radius, radius.sub( falloff ), TSL.length( TSL.positionWorld ) );
130+
131+
} );
132+
133+
// Create grid pattern
134+
const gridPattern = gridXZ( 1.0, 0.03, 0.005 );
135+
const baseColor = TSL.vec4( 1.0, 1.0, 1.0, 0.0 );
136+
const gridColor = TSL.vec4( 0.5, 0.5, 0.5, 1.0 );
137+
138+
// Mix base color with grid lines
139+
material.colorNode = gridPattern.mix( baseColor, gridColor ).mul( radialGradient( 30.0, 20.0 ) );
140+
material.transparent = true;
141+
142+
const plane = new THREE.Mesh( new THREE.CircleGeometry( 40 ), material );
143+
plane.rotation.x = - Math.PI / 2;
144+
plane.renderOrder = - 1;
145+
scene.add( plane );
146+
147+
new HDRLoader()
148+
.setPath( 'textures/equirectangular/' )
149+
.load( 'san_giuseppe_bridge_2k.hdr', async ( texture ) => {
150+
151+
texture.mapping = THREE.EquirectangularReflectionMapping;
152+
153+
scene.environment = texture;
154+
scene.environmentIntensity = 2;
115155
});
116156

117-
157+
for (let x = 0; x < WoodGenuses.length; x++) {
158+
for (let y = 0; y < Finishes.length; y++) {
159+
const cube = add_wood(x, y, text_mat);
160+
base.add(cube);
161+
await new Promise(resolve => setTimeout(resolve, 0));
162+
}
118163
}
164+
}
119165

120166
function render() {
121167
controls.update();
@@ -138,7 +184,7 @@
138184
document.body.innerHTML = '<div id="info">WebGPU is not supported in this browser.</div>';
139185
}
140186

141-
async function add_wood(x, text_mat)
187+
function add_wood(x, y, text_mat)
142188
{
143189
const txt_geo = new TextGeometry(WoodGenuses[x],
144190
{
@@ -156,28 +202,22 @@
156202
txt_geo.translate(offx, offy, offz);
157203

158204
const txt = new THREE.Mesh(txt_geo, text_mat);
159-
txt.position.set(0, Finishes.length/2 - 0.25, x - WoodGenuses.length/2 + 0.45);
205+
txt.position.set(0, Finishes.length/2, x - WoodGenuses.length/2 + 0.45);
160206
txt.rotateY(-Math.PI/2);
161207
base.add(txt);
162208

163-
for (let y = 0; y < Finishes.length; y++)
209+
const geometry = new RoundedBoxGeometry(0.125, 0.9, 0.9, 10, 0.02);
210+
const position =
164211
{
165-
const geometry = new RoundedBoxGeometry(0.125, 0.9, 0.9, 10, 0.02);
166-
const position =
167-
{
168-
x: 0,
169-
y: y - Finishes.length/2,
170-
z: x - WoodGenuses.length/2 + 0.45
171-
};
172-
173-
const cube = new THREE.Mesh(geometry, GenerateWoodMaterial(GetWoodPreset(WoodGenuses[x], Finishes[y])));
174-
cube.position.set(position.x, position.y, position.z);
175-
base.add(cube);
176-
177-
}
178-
179-
await new Promise(resolve => setTimeout(resolve, 10));
212+
x: 0,
213+
y: y - Finishes.length/2,
214+
z: x - WoodGenuses.length/2 + 0.45
215+
};
180216

217+
const cube = new THREE.Mesh(geometry, GenerateWoodMaterial(GetWoodPreset(WoodGenuses[x], Finishes[y])));
218+
cube.position.set(position.x, position.y, position.z);
219+
220+
return cube;
181221
}
182222
</script>
183223
</body>

0 commit comments

Comments
 (0)