Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Address Comments for Timestamp example #481

Merged
merged 1 commit into from
Dec 11, 2024
Merged

Address Comments for Timestamp example #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions sample/timestampQuery/TimestampQueryManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,15 @@ export default class TimestampQueryManager {
// A buffer to map this result back to CPU
#timestampMapBuffer: GPUBuffer;

// Last queried elapsed time of the pass in nanoseconds.
passDurationMeasurementNs: number;
// Callback to call when results are available.
#callback: (deltaTimeMs: number) => void;

// Device must have the "timestamp-query" feature
constructor(device: GPUDevice) {
constructor(device: GPUDevice, callback: (deltaTimeNs: number) => void) {
this.timestampSupported = device.features.has('timestamp-query');
if (!this.timestampSupported) return;

this.passDurationMeasurementNs = 0;
this.#callback = callback;

// Create timestamp queries
this.#timestampQuerySet = device.createQuerySet({
Expand Down Expand Up @@ -101,7 +101,7 @@ export default class TimestampQueryManager {
// It's possible elapsedNs is negative which means it's invalid
// (see spec https://gpuweb.github.io/gpuweb/#timestamp)
if (elapsedNs >= 0) {
this.passDurationMeasurementNs = elapsedNs;
this.#callback(elapsedNs);
}
buffer.unmap();
});
Expand Down
22 changes: 10 additions & 12 deletions sample/timestampQuery/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,15 @@ quitIfWebGPUNotAvailable(adapter, device);
// NB: Look for 'timestampQueryManager' in this file to locate parts of this
// snippets that are related to timestamps. Most of the logic is in
// TimestampQueryManager.ts.
const timestampQueryManager = new TimestampQueryManager(device);
const timestampQueryManager = new TimestampQueryManager(device, (elapsedNs) => {
// Convert from nanoseconds to milliseconds:
const elapsedMs = Number(elapsedNs) * 1e-6;
renderPassDurationCounter.addSample(elapsedMs);
perfDisplay.innerHTML = `Render Pass duration: ${renderPassDurationCounter
.getAverage()
.toFixed(3)} ms ± ${renderPassDurationCounter.getStddev().toFixed(3)} ms`;
});

const renderPassDurationCounter = new PerfCounter();

const context = canvas.getContext('webgpu') as GPUCanvasContext;
Expand Down Expand Up @@ -209,17 +217,7 @@ function frame() {

device.queue.submit([commandEncoder.finish()]);

if (timestampQueryManager.timestampSupported) {
// Show the last successfully downloaded elapsed time.
const elapsedNs = timestampQueryManager.passDurationMeasurementNs;
// Convert from nanoseconds to milliseconds:
const elapsedMs = Number(elapsedNs) * 1e-6;
renderPassDurationCounter.addSample(elapsedMs);
perfDisplay.innerHTML = `Render Pass duration: ${renderPassDurationCounter
.getAverage()
.toFixed(3)} ms ± ${renderPassDurationCounter.getStddev().toFixed(3)} ms`;
}

// Try to download the time stamp.
timestampQueryManager.tryInitiateTimestampDownload();

requestAnimationFrame(frame);
Expand Down
Loading