Skip to content

Commit e8cd6a2

Browse files
kainino0xkainino0x
committed
Deploying to gh-pages from @ 8d143c2 🚀
1 parent e1593f7 commit e8cd6a2

7 files changed

Lines changed: 72 additions & 20 deletions

File tree

‎main.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -307,8 +307,8 @@ var occlusionQuery = {
307307
};
308308

309309
var particles = {
310-
name: 'Particles',
311-
description: 'This example demonstrates rendering of particles simulated with compute shaders.',
310+
name: 'Particles (HDR)',
311+
description: 'This example demonstrates rendering of particles (using HDR capabilities when possible) simulated with compute shaders.',
312312
filename: "sample/particles",
313313
sources: [
314314
{ path: 'main.ts' },
@@ -643,7 +643,7 @@ const pageCategories = [
643643
normalMap,
644644
shadowMapping,
645645
deferredRendering,
646-
particles,
646+
'particles (HDR)': particles,
647647
points,
648648
imageBlur,
649649
cornell,

‎sample/particles/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<title>webgpu-samples: particles</title>
6+
<title>webgpu-samples: particles (HDR)</title>
77
<style>
88
:root {
99
color-scheme: light dark;

‎sample/particles/main.js‎

Lines changed: 31 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/particles/main.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/particles/main.ts‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,16 @@ const context = canvas.getContext('webgpu') as GPUCanvasContext;
2626
const devicePixelRatio = window.devicePixelRatio;
2727
canvas.width = canvas.clientWidth * devicePixelRatio;
2828
canvas.height = canvas.clientHeight * devicePixelRatio;
29-
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
30-
31-
context.configure({
32-
device,
33-
format: presentationFormat,
34-
alphaMode: 'premultiplied',
35-
});
29+
const presentationFormat = 'rgba16float';
30+
31+
function configureContext() {
32+
context.configure({
33+
device,
34+
format: presentationFormat,
35+
toneMapping: { mode: simulationParams.toneMappingMode },
36+
alphaMode: 'premultiplied',
37+
});
38+
}
3639

3740
const particlesBuffer = device.createBuffer({
3841
size: numParticles * particleInstanceByteSize,
@@ -317,10 +320,13 @@ let numMipLevels = 1;
317320
const simulationParams = {
318321
simulate: true,
319322
deltaTime: 0.04,
323+
toneMappingMode: 'standard' as GPUCanvasToneMappingMode,
324+
brightnessFactor: 1.0,
320325
};
321326

322327
const simulationUBOBufferSize =
323328
1 * 4 + // deltaTime
329+
1 * 4 + // brightnessFactor
324330
3 * 4 + // padding
325331
4 * 4 + // seed
326332
0;
@@ -330,8 +336,23 @@ const simulationUBOBuffer = device.createBuffer({
330336
});
331337

332338
const gui = new GUI();
339+
gui.width = 325;
333340
gui.add(simulationParams, 'simulate');
334341
gui.add(simulationParams, 'deltaTime');
342+
const hdrFolder = gui.addFolder('');
343+
hdrFolder
344+
.add(simulationParams, 'toneMappingMode', ['standard', 'extended'])
345+
.onChange(configureContext);
346+
hdrFolder.add(simulationParams, 'brightnessFactor', 0, 4, 0.1);
347+
hdrFolder.open();
348+
const hdrMediaQuery = window.matchMedia('(dynamic-range: high)');
349+
function updateHdrFolderName() {
350+
hdrFolder.name = `HDR settings ${
351+
hdrMediaQuery.matches ? '' : '⚠️ Your display is not compatible'
352+
}`;
353+
}
354+
updateHdrFolderName();
355+
hdrMediaQuery.onchange = updateHdrFolderName;
335356

336357
const computePipeline = device.createComputePipeline({
337358
layout: 'auto',
@@ -377,6 +398,7 @@ function frame() {
377398
0,
378399
new Float32Array([
379400
simulationParams.simulate ? simulationParams.deltaTime : 0.0,
401+
simulationParams.brightnessFactor,
380402
0.0,
381403
0.0,
382404
0.0, // padding
@@ -438,4 +460,5 @@ function frame() {
438460

439461
requestAnimationFrame(frame);
440462
}
463+
configureContext();
441464
requestAnimationFrame(frame);

‎sample/particles/meta.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default {
2-
name: 'Particles',
2+
name: 'Particles (HDR)',
33
description:
4-
'This example demonstrates rendering of particles simulated with compute shaders.',
4+
'This example demonstrates rendering of particles (using HDR capabilities when possible) simulated with compute shaders.',
55
filename: __DIRNAME__,
66
sources: [
77
{ path: 'main.ts' },

‎sample/particles/particle.wgsl‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4f {
6464
////////////////////////////////////////////////////////////////////////////////
6565
struct SimulationParams {
6666
deltaTime : f32,
67+
brightnessFactor : f32,
6768
seed : vec4f,
6869
}
6970

@@ -125,6 +126,9 @@ fn simulate(@builtin(global_invocation_id) global_invocation_id : vec3u) {
125126
let uv = vec2f(coord) / vec2f(textureDimensions(texture));
126127
particle.position = vec3f((uv - 0.5) * 3.0 * vec2f(1.0, -1.0), 0.0);
127128
particle.color = textureLoad(texture, coord, 0);
129+
particle.color.r *= sim_params.brightnessFactor;
130+
particle.color.g *= sim_params.brightnessFactor;
131+
particle.color.b *= sim_params.brightnessFactor;
128132
particle.velocity.x = (rand() - 0.5) * 0.1;
129133
particle.velocity.y = (rand() - 0.5) * 0.1;
130134
particle.velocity.z = rand() * 0.3;

0 commit comments

Comments
 (0)