Try to make optimization comparisons as far as possible

by requesting high-performance on both and turning on antialiasing and alpha on WebGL.
greggman · Jun 27, 2024 · 7128d8d · 7128d8d
1 parent 4d63b55
commit 7128d8d
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 16 deletions.
diff --git a/webgpu/lessons/webgpu-optimization.md b/webgpu/lessons/webgpu-optimization.md
@@ -60,7 +60,9 @@ in general.
 
 ```js
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({
+    powerPreference: 'high-performance',
+  });
   const device = await adapter?.requestDevice();
   if (!device) {
     fail('need a browser that supports WebGPU');
@@ -800,7 +802,9 @@ And we'll time our render pass
 
 ```js
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({
+    powerPreference: 'high-performance',
+  });
 -  const device = await adapter?.requestDevice();
 +  const canTimestamp = adapter.features.has('timestamp-query');
 +  const device = await adapter?.requestDevice({

diff --git a/webgpu/webgl-optimization-global-material-per-object-uniform-buffers.html b/webgpu/webgl-optimization-global-material-per-object-uniform-buffers.html
@@ -174,7 +174,11 @@
 
   // Get a WebGPU context from the canvas and configure it
   const canvas = document.querySelector('canvas');
-  const gl = canvas.getContext('webgl2');
+  const gl = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: false,
+    powerPreference: 'high-performance',
+  });
   const timingHelper = new TimingHelper(gl);
 
   const uniformBlock = `

diff --git a/webgpu/webgl-optimization-none-uniform-buffers.html b/webgpu/webgl-optimization-none-uniform-buffers.html
@@ -173,7 +173,11 @@
 
   // Get a WebGPU context from the canvas and configure it
   const canvas = document.querySelector('canvas');
-  const gl = canvas.getContext('webgl2');
+  const gl = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: false,
+    powerPreference: 'high-performance',
+  });
   const timingHelper = new TimingHelper(gl);
 
   const uniformBlock = `

diff --git a/webgpu/webgl-optimization-none.html b/webgpu/webgl-optimization-none.html
@@ -173,7 +173,11 @@
 
   // Get a WebGPU context from the canvas and configure it
   const canvas = document.querySelector('canvas');
-  const gl = canvas.getContext('webgl2');
+  const gl = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: false,
+    powerPreference: 'high-performance',
+  });
   const timingHelper = new TimingHelper(gl);
 
   const vs = `#version 300 es

diff --git a/webgpu/webgl-optimization-uniform-buffers-one-large.html b/webgpu/webgl-optimization-uniform-buffers-one-large.html
@@ -177,7 +177,11 @@
 
   // Get a WebGPU context from the canvas and configure it
   const canvas = document.querySelector('canvas');
-  const gl = canvas.getContext('webgl2');
+  const gl = canvas.getContext('webgl2', {
+    alpha: false,
+    antialias: false,
+    powerPreference: 'high-performance',
+  });
   const timingHelper = new TimingHelper(gl);
 
   const uniformBlock = `

diff --git a/webgpu/webgpu-optimization-none.html b/webgpu/webgpu-optimization-none.html
@@ -105,7 +105,7 @@
 const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html b/webgpu/webgpu-optimization-step3-global-vs-per-object-uniforms.html
@@ -105,7 +105,7 @@
 const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step4-material-uniforms.html b/webgpu/webgpu-optimization-step4-material-uniforms.html
@@ -105,7 +105,7 @@
 const randomArrayElement = arr => arr[Math.random() * arr.length | 0];
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step5-use-buffer-offsets.html b/webgpu/webgpu-optimization-step5-use-buffer-offsets.html
@@ -108,7 +108,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-dyanmic-offsets.html
@@ -108,7 +108,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers-math-w-offsets.html
@@ -665,7 +665,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step6-use-mapped-buffers.html b/webgpu/webgpu-optimization-step6-use-mapped-buffers.html
@@ -108,7 +108,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step7-double-buffer-2-submit.html b/webgpu/webgpu-optimization-step7-double-buffer-2-submit.html
@@ -108,7 +108,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html b/webgpu/webgpu-optimization-step7-double-buffer-typedarray-set.html
@@ -108,7 +108,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [

diff --git a/webgpu/webgpu-optimization-step7-double-buffer.html b/webgpu/webgpu-optimization-step7-double-buffer.html
@@ -108,7 +108,7 @@
 const roundUp = (v, alignment) => Math.ceil(v / alignment) * alignment;
 
 async function main() {
-  const adapter = await navigator.gpu?.requestAdapter();
+  const adapter = await navigator.gpu?.requestAdapter({powerPreference: 'high-performance'});
   const canTimestamp = adapter.features.has('timestamp-query');
   const device = await adapter?.requestDevice({
     requiredFeatures: [