├── .eslintrc.js
├── .github
    └── workflows
    │   └── build-and-deploy.yml
├── .gitignore
├── .vscode
    └── settings.json
├── LICENSE.md
├── README.md
├── build
    ├── lib
    │   └── spawn.js
    └── tools
    │   ├── prep-for-deploy.js
    │   └── serve.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
    ├── capabilities-info.ts
    └── webgpu-memory.ts
├── test
    ├── assert.js
    ├── index.html
    ├── index.js
    ├── mocha-support.js
    ├── mocha.css
    ├── mocha.js
    ├── puppeteer.js
    ├── src
    │   └── js
    │   │   └── example-inject.js
    └── tests
    │   ├── buffer-tests.js
    │   ├── canvas-tests.js
    │   ├── device-tests.js
    │   ├── query-set-tests.js
    │   └── texture-tests.js
├── tsconfig.json
└── webgpu-memory.png


/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | /* global module */
  2 | /* global __dirname */
  3 | module.exports = {
  4 |   env: {
  5 |     browser: true,
  6 |   },
  7 |   // REMOVE THIS!
  8 |   globals: {
  9 |     'GPUBufferUsage': 'readonly',
 10 |     'GPUTextureUsage': 'readonly',
 11 |     'GPUMapMode': 'readonly',
 12 |   },
 13 |   parser: '@typescript-eslint/parser',
 14 |   parserOptions: {
 15 |     sourceType: 'module',
 16 |     ecmaVersion: 11,
 17 |     tsconfigRootDir: __dirname,
 18 |     project: ['./jsconfig.json'],
 19 |     extraFileExtensions: ['.html'],
 20 |   },
 21 |   plugins: [
 22 |     '@typescript-eslint',
 23 |     'eslint-plugin-optional-comma-spacing',
 24 |     'eslint-plugin-one-variable-per-var',
 25 |     'eslint-plugin-require-trailing-comma',
 26 |   ],
 27 |   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
 28 |   rules: {
 29 |     // 'no-alert': 2,
 30 |     'no-array-constructor': 2,
 31 |     'no-caller': 2,
 32 |     'no-catch-shadow': 2,
 33 |     'no-const-assign': 2,
 34 |     'no-eval': 2,
 35 |     'no-extend-native': 2,
 36 |     'no-extra-bind': 2,
 37 |     'no-implied-eval': 2,
 38 |     'no-inner-declarations': 0,
 39 |     'no-iterator': 2,
 40 |     'no-label-var': 2,
 41 |     'no-labels': 2,
 42 |     'no-lone-blocks': 0,
 43 |     'no-multi-str': 2,
 44 |     'no-native-reassign': 2,
 45 |     'no-new': 2,
 46 |     'no-new-func': 2,
 47 |     'no-new-object': 2,
 48 |     'no-new-wrappers': 2,
 49 |     'no-octal-escape': 2,
 50 |     'no-process-exit': 2,
 51 |     'no-proto': 2,
 52 |     'no-return-assign': 2,
 53 |     'no-script-url': 2,
 54 |     'no-self-assign': 0,
 55 |     'no-sequences': 2,
 56 |     'no-shadow-restricted-names': 2,
 57 |     'no-spaced-func': 2,
 58 |     'no-trailing-spaces': 2,
 59 |     'no-undef-init': 2,
 60 |     'no-unused-expressions': 2,
 61 |     'no-use-before-define': 0,
 62 |     'no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }],
 63 |     '@typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }],
 64 |     'no-var': 2,
 65 |     'no-with': 2,
 66 |     'prefer-const': 2,
 67 |     'consistent-return': 2,
 68 |     'curly': [2, 'all'],
 69 |     'no-extra-parens': [2, 'functions'],
 70 |     'eqeqeq': 2,
 71 |     'new-cap': 2,
 72 |     'new-parens': 2,
 73 |     'semi-spacing': [2, {'before': false, 'after': true}],
 74 |     'space-infix-ops': 2,
 75 |     'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
 76 |     'yoda': [2, 'never'],
 77 | 
 78 |     'brace-style': [2, '1tbs', { 'allowSingleLine': false }],
 79 |     'camelcase': [0],
 80 |     'comma-spacing': 0,
 81 |     'comma-dangle': 0,
 82 |     'comma-style': [2, 'last'],
 83 |     'optional-comma-spacing/optional-comma-spacing': [2, {'after': true}],
 84 |     'dot-notation': 0,
 85 |     'eol-last': [0],
 86 |     'global-strict': [0],
 87 |     'key-spacing': [0],
 88 |     'no-comma-dangle': [0],
 89 |     'no-irregular-whitespace': 2,
 90 |     'no-multi-spaces': [0],
 91 |     'no-loop-func': 0,
 92 |     'no-obj-calls': 2,
 93 |     'no-redeclare': [0],
 94 |     'no-shadow': [0],
 95 |     'no-undef': [2],
 96 |     'no-unreachable': 2,
 97 |     'one-variable-per-var/one-variable-per-var': [2],
 98 |     'quotes': [2, 'single'],
 99 |     'require-atomic-updates': 0,
100 |     'require-trailing-comma/require-trailing-comma': [2],
101 |     'require-yield': 0,
102 |     'semi': [2, 'always'],
103 |     'strict': [2, 'global'],
104 |     'space-before-function-paren': [2, 'never'],
105 |     'keyword-spacing': [1, {'before': true, 'after': true, 'overrides': {}} ],
106 |   },
107 |   overrides: [
108 |     {
109 |       files: [
110 |         'fix.js',
111 |       ],
112 |       parserOptions: {
113 |         sourceType: 'script',
114 |       },
115 |     },
116 |   ],
117 | };
118 | 
119 | 


--------------------------------------------------------------------------------
/.github/workflows/build-and-deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | on:
 3 |   push:
 4 |     tags:
 5 |       - v*
 6 | permissions:
 7 |   contents: write
 8 | jobs:
 9 |   build-and-deploy:
10 |     runs-on: ubuntu-latest
11 |     environment: deploy
12 |     steps:
13 |       - name: Checkout 🛎️
14 |         uses: actions/checkout@v3
15 | 
16 |       - name: Use Node.js 😂
17 |         uses: actions/setup-node@v3
18 |         with:
19 |           node-version: 20
20 | 
21 |       - name: Install and Build 🔧
22 |         run: |
23 |           npm ci
24 |           npm run build-ci
25 | 
26 |       - name: Deploy 🚀
27 |         uses: JamesIves/github-pages-deploy-action@v4
28 |         with:
29 |           folder: .
30 | 
31 |       - name: Publish to NPM 📖
32 |         uses: JS-DevTools/npm-publish@v2
33 |         with:
34 |           token: ${{ secrets.NPM_TOKEN }}
35 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # -- clip-for-deploy-start --
 2 | 
 3 | /dist/1.x
 4 | 
 5 | # -- clip-for-deploy-end --
 6 | 
 7 | *.pyc
 8 | .DS_Store
 9 | node_modules
10 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "cSpell.words": [
3 |   ]
4 | }


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2023 Gregg Tavares
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # WebGPU-Memory
  2 | 
  3 | <img src="./webgpu-memory.png" style="max-width: 640px">
  4 | 
  5 | This is a WebGPU-Memory tracker. You add the script to your page
  6 | before you initialize WebGPU and then for a given context
  7 | you can ask how much WebGPU memory you're using.
  8 | 
  9 | Note: This is only a guess as various GPUs have different
 10 | internal requirements. For example a GPU might
 11 | have alignment requirements. Still, this is likely to give
 12 | a reasonable approximation.
 13 | 
 14 | **You can use this without manually adding to your page
 15 | via the [webgpu-dev-extension](https://github.com/greggman/webgpu-dev-extension).**
 16 | 
 17 | ## Usage
 18 | 
 19 | ```html
 20 | <script src="https://greggman.github.io/webgpu-memory/dist/1.x/webgpu-memory.js" crossorigin></script>
 21 | <script>
 22 |   const {getWebGPUMemoryUsage} = webgpuMemory;
 23 | ```
 24 | 
 25 | or 
 26 | 
 27 | ```js
 28 | import {getWebGPUMemoryUsage} from 'https://greggman.github.io/webgpu-memory/dist/1.x/webgpu-memory.module.js';
 29 | ```
 30 | 
 31 | Then in your code
 32 | 
 33 | ```js
 34 |   const info = getWebGPUMemoryUsage();
 35 | ```
 36 | 
 37 | The info returned is 
 38 | 
 39 | ```js
 40 | {
 41 |   memory: {
 42 |     buffer: // bytes used by buffers
 43 |     texture: // bytes used by textures
 44 |     canvas: // bytes used by canvases
 45 |     total: // bytes used in total
 46 |     maxTotal: // highest total ever got
 47 |   },
 48 |   resources: {
 49 |     buffer: // count of buffers
 50 |     texture: // count of textures
 51 |     devices: // count of devices or undefined if none
 52 |     canvas: // count of canvases or undefined if none
 53 |     sampler: // count of samplers or undefined if none
 54 |     bindGroup: // count of bindGroups or undefined if none
 55 |     bindGroupLayout: // count of bindGroupLayouts or undefined if none
 56 |     pipelineLayout: // count of pipelineLayouts or undefined if none
 57 |     shaderModule: // count of shaderModules or undefined if none
 58 |     computePipeline: // count of computePipelines or undefined if none
 59 |     renderPipeline: // count of renderPipelines or undefined if none
 60 |     computePipeline: // count of computePipelines or undefined if none
 61 |     renderPipeline: // count of renderPipelines or undefined if none
 62 |     querySet: // count of querySets or undefined if none
 63 |   },
 64 | }
 65 | ```
 66 | 
 67 | By default `getWebGPUMemoryUsage` returns info for all devices.
 68 | You can get info for a single device by passing the device.
 69 | 
 70 | ```js
 71 | const allInfo = getWebGPUMemoryUsage();
 72 | const deviceSpecificInfo = getWebGPUMemoryUsage(someDevice);
 73 | ```
 74 | 
 75 | ## Caveats
 76 | 
 77 | 1. You must have WebGPU error free code. 
 78 | 
 79 |    If your code is generating WebGPU errors you must fix those first
 80 |    before using this library. That also means it doesn't handle out-of-memory
 81 | 
 82 | 2. Most resources in WebGPU are garbage collected
 83 | 
 84 |    Only `GPUDevice`, `GPUTexture`, `GPUBuffer`, and `GPUQuerySet` have
 85 |    a `destroy` method. All other objects are garbage collected. That
 86 |    means, it's unknown when they will actually be collected. So for example,
 87 |    if you create 50 bind groups and then stop using them and lose all references
 88 |    to them it's undefined how long they will continue to exist.
 89 | 
 90 |    The point being, just because the number doesn't go down immediately
 91 |    after you stop using the object, doesn't mean you have a bug.
 92 | 
 93 |    One possible thing to try, at least in Chrome, you can pass the flag
 94 |    `--js-flags="--expose-gc"` and then there should be a global function `gc`
 95 |    so you could do
 96 | 
 97 |    ```js
 98 |    ...release references to objects...
 99 |    gc(); 
100 |    const info = getWebGPUMemoryUsage();
101 |    ```
102 | 
103 |    Still, the resource counts are useful info. If you're not expecting to
104 |    see them increase constantly and they are then you probably have an bug
105 |    that's not losing all references to them.
106 | 
107 | 3. It doesn't track render bundles
108 | 
109 |    it's on the TODO list
110 | 
111 | 4. Lost contexts are not handled
112 | 
113 |    it's on the TODO list
114 | 
115 | ## `resetMaxTotal`
116 | 
117 | You can import `resetMaxTotal` to reset the total.
118 | Pass in a device to reset just one device or pass in no device
119 | to reset all devices.
120 | 
121 | Example:
122 | 
123 | ```js
124 | import { getWebGPUMemoryUsage, resetMaxTotal } from 'https://greggman.github.io/webgpu-memory/dist/1.x/webgpu-memory.module.js'
125 | 
126 | const device = await (await navigator.gpu.requestAdapter()).requestDevice();
127 | const b1 = device.createBuffer({size: 128, usage: GPBufferUsage.COPY_DST});
128 | const b2 = device.createBuffer({size: 128, usage: GPBufferUsage.COPY_DST});
129 | b2.destroy();
130 | 
131 | // shows
132 | //   memory: {
133 | //     total: 128,
134 | //     maxTotal: 256,
135 | //   }
136 | console.log(JSON.stringify(getWebGPUMemoryUsage(), null, 2));
137 | 
138 | resetMaxTotal();
139 | 
140 | // shows
141 | //   memory: {
142 | //     total: 128,
143 | //     maxTotal: 128,
144 | //   }
145 | console.log(JSON.stringify(getWebGPUMemoryUsage(), null, 2));
146 | ```
147 | 
148 | ## Example:
149 | 
150 | [Click here for an Example](https://jsgist.org/?src=b0572c68c7168d6d791cc714fe8b604c)
151 | 
152 | ## Development
153 | 
154 | ```bash
155 | git clone https://github.com/greggman/webgpu-memory.git
156 | cd webgpu-memory
157 | npm ci
158 | npm start
159 | ```
160 | 
161 | and go to [`http://localhost:8080/test`](http://localhost:8080/test)
162 | 
163 | `grep=<some expression>` will limit the tests as in `...?src=true&grep=texture` only
164 | runs the tests with `texture` in their description.
165 | 
166 | ## Live Tests
167 | 
168 | [tests](https://greggman.github.io/webgpu-memory/test/)  
169 | 
170 | ## Licence
171 | 
172 | [MIT](https://github.com/greggman/webgpu-memory/blob/main/LICENCE.md)
173 | 


--------------------------------------------------------------------------------
/build/lib/spawn.js:
--------------------------------------------------------------------------------
 1 | import { spawn } from 'child_process';
 2 | 
 3 | const spawns = new Set();
 4 | 
 5 | export function spawnAndCheck(cmd, args, options) {
 6 |   const s = spawn(cmd, args, options);
 7 |   spawns.add(s);
 8 |   s.on('close', (code) => {
 9 |     spawns.delete(s);
10 |     if (code !== 0) {
11 |       console.error(cmd, 'exited with code:', code);
12 |       [...spawns].forEach((s) => s.kill());
13 |       process.exit(code);
14 |     }
15 |   });
16 | }
17 | 


--------------------------------------------------------------------------------
/build/tools/prep-for-deploy.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs';
 2 | import path from 'path';
 3 | import * as url from 'url';
 4 | const dirname = url.fileURLToPath(new URL('.', import.meta.url));
 5 | 
 6 | const ignoreFilename = path.join(dirname, '..', '..', '.gitignore');
 7 | const ignore = fs.readFileSync(ignoreFilename, {encoding: 'utf8'});
 8 | const newIgnore = ignore.replace(/# -- clip-for-deploy-start --[\s\S]*?# -- clip-for-deploy-end --/, '');
 9 | fs.writeFileSync(ignoreFilename, newIgnore);
10 | 


--------------------------------------------------------------------------------
/build/tools/serve.js:
--------------------------------------------------------------------------------
 1 | import { mkdirSync } from 'fs';
 2 | import { spawnAndCheck } from '../lib/spawn.js';
 3 | 
 4 | mkdirSync('out', { recursive: true });
 5 | 
 6 | spawnAndCheck('npm', ['run', 'watch'], {
 7 |   shell: true,
 8 |   stdio: 'inherit',
 9 | });
10 | 
11 | spawnAndCheck('npm', ['run', 'server'], {
12 |   shell: true,
13 |   stdio: 'inherit',
14 | });
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webgpu-memory",
 3 |   "version": "1.5.3",
 4 |   "description": "Tracks WebGPU memory usage",
 5 |   "main": "dist/1.x/webgpu-memory.module.js",
 6 |   "type": "module",
 7 |   "types": "dist/1.x/webgpu-memory.d.ts",
 8 |   "scripts": {
 9 |     "build": "rollup -c",
10 |     "build-ci": "npm run build && node build/tools/prep-for-deploy.js",
11 |     "start": "node build/tools/serve.js",
12 |     "test": "node test/puppeteer.js",
13 |     "server": "servez",
14 |     "watch": "rollup -c --watch"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/greggman/webgpu-memory.git"
19 |   },
20 |   "keywords": [
21 |     "WebGPU"
22 |   ],
23 |   "files": [
24 |     "dist/1.x/*"
25 |   ],
26 |   "author": "Gregg Tavares",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/greggman/webgpu-memory/issues"
30 |   },
31 |   "homepage": "https://github.com/greggman/webgpu-memory#readme",
32 |   "devDependencies": {
33 |     "@rollup/plugin-node-resolve": "^16.0.1",
34 |     "@rollup/plugin-terser": "^0.4.4",
35 |     "@rollup/plugin-typescript": "^12.1.2",
36 |     "@tsconfig/recommended": "^1.0.6",
37 |     "@typescript-eslint/eslint-plugin": "^8.22.0",
38 |     "@typescript-eslint/parser": "^8.22.0",
39 |     "@webgpu/types": "^0.1.60",
40 |     "eslint": "^8.57.1",
41 |     "eslint-plugin-html": "^7.1.0",
42 |     "eslint-plugin-one-variable-per-var": "^0.0.3",
43 |     "eslint-plugin-optional-comma-spacing": "^0.0.4",
44 |     "eslint-plugin-require-trailing-comma": "^0.0.1",
45 |     "puppeteer": "^24.8.1",
46 |     "rollup": "^4.40.2",
47 |     "servez": "^2.3.0",
48 |     "tslib": "^2.8.1",
49 |     "typescript": "^5.8.3"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import typescript from '@rollup/plugin-typescript';
 2 | import terser from '@rollup/plugin-terser';
 3 | import fs from 'fs';
 4 | 
 5 | const pkg = JSON.parse(fs.readFileSync('package.json', {encoding: 'utf8'}));
 6 | const banner = `/* webgpu-memory@${pkg.version}, license MIT */`;
 7 | const version = `${pkg.version.split('.')[0]}.x`;
 8 | 
 9 | const plugins = [
10 |     typescript({ tsconfig: './tsconfig.json' }),
11 | ];
12 | 
13 | export default [
14 |     {
15 |         input: 'src/webgpu-memory.ts',
16 |         output: [
17 |             {
18 |                 file: `dist/${version}/webgpu-memory.module.js`,
19 |                 format: 'esm',
20 |                 sourcemap: true,
21 |                 banner,
22 |             },
23 |         ],
24 |         plugins,
25 |     },
26 |     {
27 |         input: 'src/webgpu-memory.ts',
28 |         output: [
29 |             {
30 |                 name: 'webgpuMemory',
31 |                 file: `dist/${version}/webgpu-memory.js`,
32 |                 format: 'umd',
33 |                 sourcemap: true,
34 |                 banner,
35 |             },
36 |         ],
37 |         plugins,
38 |     },
39 |     {
40 |         input: 'src/webgpu-memory.ts',
41 |         output: [
42 |             {
43 |                 name: 'webgpuMemory',
44 |                 file: `dist/${version}/webgpu-memory.min.js`,
45 |                 format: 'umd',
46 |                 sourcemap: true,
47 |                 banner,
48 |             },
49 |         ],
50 |         plugins: [
51 |             ...plugins,
52 |             terser(),
53 |         ],
54 |     },
55 | ];
56 | 


--------------------------------------------------------------------------------
/src/capabilities-info.ts:
--------------------------------------------------------------------------------
   1 | /* eslint-disable no-sparse-arrays */
   2 | 
   3 | /*
   4 | This file was copied and modified from the WebGPU Conformance Test Suite
   5 | https://github.com/gpuweb/cts/blob/main/src/webgpu/capability_info.ts
   6 | 
   7 | Note: Changes include adding bytesPerBlock to depth24plus, depth24plus-stencil8
   8 | and depth32-stencil8
   9 | 
  10 | Copyright 2019 WebGPU CTS Contributors
  11 | 
  12 | Redistribution and use in source and binary forms, with or without
  13 | modification, are permitted provided that the following conditions are met:
  14 | 
  15 |    1. Redistributions of source code must retain the above copyright notice,
  16 |       this list of conditions and the following disclaimer.
  17 | 
  18 |    2. Redistributions in binary form must reproduce the above copyright notice,
  19 |       this list of conditions and the following disclaimer in the documentation
  20 |       and/or other materials provided with the distribution.
  21 | 
  22 |    3. Neither the name of the copyright holder nor the names of its
  23 |       contributors may be used to endorse or promote products derived from this
  24 |       software without specific prior written permission.
  25 | 
  26 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  27 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  28 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  29 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
  30 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
  31 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
  32 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
  33 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
  34 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  36 | */
  37 | 
  38 | function keysOf<T extends string>(obj: { [k in T]?: unknown }): readonly T[] {
  39 |   return Object.keys(obj) as unknown[] as T[];
  40 | }
  41 | 
  42 | /**
  43 |  * Defaults applied to all texture format tables automatically. Used only inside
  44 |  * `formatTableWithDefaults`. This ensures keys are never missing, always explicitly `undefined`.
  45 |  *
  46 |  * All top-level keys must be defined here, or they won't be exposed at all.
  47 |  * Documentation is also written here; this makes it propagate through to the end types.
  48 |  */
  49 | const kFormatUniversalDefaults = {
  50 |   /** Texel block width. */
  51 |   blockWidth: undefined,
  52 |   /** Texel block height. */
  53 |   blockHeight: undefined,
  54 |   color: undefined,
  55 |   depth: undefined,
  56 |   stencil: undefined,
  57 |   /**
  58 |    * Info when this format can be used as a color render target. The format may require a feature
  59 |    * to actually be used as a render target. Eg: rg11b10ufloat which requires rg11b10ufloat-renderable
  60 |    * Call {@link isTextureFormatPossiblyUsableAsColorRenderAttachment} before having a device
  61 |    * Call {@link isTextureFormatColorRenderable}(device, format) to find out for a particular device.
  62 |    * Use {@link kPossibleColorRenderableTextureFormats} for params.
  63 |    */
  64 |   colorRender: undefined,
  65 |   /**
  66 |    * Whether the format can possibly be used as a multisample texture. The format may require a
  67 |    * feature to actually multisampled. Eg: rg11b10ufloat which requires rg11b10ufloat-renderable
  68 |    * Call {@link isTextureFormatPossiblyMultisampled} before having a device
  69 |    * Call {@link isTextureFormatMultisampled}(device, format) to find out for a particular device.
  70 |    * Use {@link kPossibleMultisampledTextureFormats} for params.
  71 |    */
  72 |   multisample: undefined,
  73 |   /** Optional feature required to use this format, or `undefined` if none. */
  74 |   feature: undefined,
  75 |   /** The base format for srgb formats. Specified on both srgb and equivalent non-srgb formats. */
  76 |   baseFormat: undefined,
  77 | 
  78 |   /** @deprecated Use `.color.bytes`, `.depth.bytes`, or `.stencil.bytes`. */
  79 |   bytesPerBlock: undefined,
  80 | 
  81 |   // IMPORTANT:
  82 |   // Add new top-level keys both here and in TextureFormatInfo_TypeCheck.
  83 | } ;
  84 | /**
  85 |  * Takes `table` and applies `defaults` to every row, i.e. for each row,
  86 |  * `{ ... kUniversalDefaults, ...defaults, ...row }`.
  87 |  * This only operates at the first level; it doesn't support defaults in nested objects.
  88 |  */
  89 | function formatTableWithDefaults<Defaults extends {}, Table extends { readonly [K: string]: {} }>({
  90 |   defaults,
  91 |   table,
  92 | }: {
  93 |   defaults: Defaults;
  94 |   table: Table;
  95 | }): {
  96 |   readonly [F in keyof Table]: {
  97 |     readonly [K in keyof typeof kFormatUniversalDefaults]: K extends keyof Table[F]
  98 |       ? Table[F][K]
  99 |       : K extends keyof Defaults
 100 |       ? Defaults[K]
 101 |       : (typeof kFormatUniversalDefaults)[K];
 102 |   };
 103 | } {
 104 |   return Object.fromEntries(
 105 |     Object.entries(table).map(([k, row]) => [
 106 |       k,
 107 |       { ...kFormatUniversalDefaults, ...defaults, ...row },
 108 |     ])
 109 |     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 110 |   ) as any;
 111 | }
 112 | 
 113 | /** "plain color formats", plus rgb9e5ufloat. */
 114 | const kRegularTextureFormatInfo = formatTableWithDefaults({
 115 |   defaults: { blockWidth: 1, blockHeight: 1 },
 116 |   table: {
 117 |     // plain, 8 bits per component
 118 | 
 119 |     r8unorm: {
 120 |       color: {
 121 |         type: 'float',
 122 |         copySrc: true,
 123 |         copyDst: true,
 124 |         storage: false,
 125 |         readWriteStorage: false,
 126 |         bytes: 1,
 127 |       },
 128 |       colorRender: { blend: true, resolve: true, byteCost: 1, alignment: 1 },
 129 |       multisample: true,
 130 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 131 |     },
 132 |     r8snorm: {
 133 |       color: {
 134 |         type: 'float',
 135 |         copySrc: true,
 136 |         copyDst: true,
 137 |         storage: false,
 138 |         readWriteStorage: false,
 139 |         bytes: 1,
 140 |       },
 141 |       multisample: false,
 142 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 143 |     },
 144 |     r8uint: {
 145 |       color: {
 146 |         type: 'uint',
 147 |         copySrc: true,
 148 |         copyDst: true,
 149 |         storage: false,
 150 |         readWriteStorage: false,
 151 |         bytes: 1,
 152 |       },
 153 |       colorRender: { blend: false, resolve: false, byteCost: 1, alignment: 1 },
 154 |       multisample: true,
 155 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 156 |     },
 157 |     r8sint: {
 158 |       color: {
 159 |         type: 'sint',
 160 |         copySrc: true,
 161 |         copyDst: true,
 162 |         storage: false,
 163 |         readWriteStorage: false,
 164 |         bytes: 1,
 165 |       },
 166 |       colorRender: { blend: false, resolve: false, byteCost: 1, alignment: 1 },
 167 |       multisample: true,
 168 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 169 |     },
 170 | 
 171 |     rg8unorm: {
 172 |       color: {
 173 |         type: 'float',
 174 |         copySrc: true,
 175 |         copyDst: true,
 176 |         storage: false,
 177 |         readWriteStorage: false,
 178 |         bytes: 2,
 179 |       },
 180 |       colorRender: { blend: true, resolve: true, byteCost: 2, alignment: 1 },
 181 |       multisample: true,
 182 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 183 |     },
 184 |     rg8snorm: {
 185 |       color: {
 186 |         type: 'float',
 187 |         copySrc: true,
 188 |         copyDst: true,
 189 |         storage: false,
 190 |         readWriteStorage: false,
 191 |         bytes: 2,
 192 |       },
 193 |       multisample: false,
 194 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 195 |     },
 196 |     rg8uint: {
 197 |       color: {
 198 |         type: 'uint',
 199 |         copySrc: true,
 200 |         copyDst: true,
 201 |         storage: false,
 202 |         readWriteStorage: false,
 203 |         bytes: 2,
 204 |       },
 205 |       colorRender: { blend: false, resolve: false, byteCost: 2, alignment: 1 },
 206 |       multisample: true,
 207 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 208 |     },
 209 |     rg8sint: {
 210 |       color: {
 211 |         type: 'sint',
 212 |         copySrc: true,
 213 |         copyDst: true,
 214 |         storage: false,
 215 |         readWriteStorage: false,
 216 |         bytes: 2,
 217 |       },
 218 |       colorRender: { blend: false, resolve: false, byteCost: 2, alignment: 1 },
 219 |       multisample: true,
 220 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 221 |     },
 222 | 
 223 |     rgba8unorm: {
 224 |       color: {
 225 |         type: 'float',
 226 |         copySrc: true,
 227 |         copyDst: true,
 228 |         storage: true,
 229 |         readWriteStorage: false,
 230 |         bytes: 4,
 231 |       },
 232 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 1 },
 233 |       multisample: true,
 234 |       baseFormat: 'rgba8unorm',
 235 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 236 |     },
 237 |     'rgba8unorm-srgb': {
 238 |       color: {
 239 |         type: 'float',
 240 |         copySrc: true,
 241 |         copyDst: true,
 242 |         storage: false,
 243 |         readWriteStorage: false,
 244 |         bytes: 4,
 245 |       },
 246 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 1 },
 247 |       multisample: true,
 248 |       baseFormat: 'rgba8unorm',
 249 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 250 |     },
 251 |     rgba8snorm: {
 252 |       color: {
 253 |         type: 'float',
 254 |         copySrc: true,
 255 |         copyDst: true,
 256 |         storage: true,
 257 |         readWriteStorage: false,
 258 |         bytes: 4,
 259 |       },
 260 |       multisample: false,
 261 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 262 |     },
 263 |     rgba8uint: {
 264 |       color: {
 265 |         type: 'uint',
 266 |         copySrc: true,
 267 |         copyDst: true,
 268 |         storage: true,
 269 |         readWriteStorage: false,
 270 |         bytes: 4,
 271 |       },
 272 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 1 },
 273 |       multisample: true,
 274 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 275 |     },
 276 |     rgba8sint: {
 277 |       color: {
 278 |         type: 'sint',
 279 |         copySrc: true,
 280 |         copyDst: true,
 281 |         storage: true,
 282 |         readWriteStorage: false,
 283 |         bytes: 4,
 284 |       },
 285 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 1 },
 286 |       multisample: true,
 287 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 288 |     },
 289 |     bgra8unorm: {
 290 |       color: {
 291 |         type: 'float',
 292 |         copySrc: true,
 293 |         copyDst: true,
 294 |         storage: false,
 295 |         readWriteStorage: false,
 296 |         bytes: 4,
 297 |       },
 298 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 1 },
 299 |       multisample: true,
 300 |       baseFormat: 'bgra8unorm',
 301 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 302 |     },
 303 |     'bgra8unorm-srgb': {
 304 |       color: {
 305 |         type: 'float',
 306 |         copySrc: true,
 307 |         copyDst: true,
 308 |         storage: false,
 309 |         readWriteStorage: false,
 310 |         bytes: 4,
 311 |       },
 312 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 1 },
 313 |       multisample: true,
 314 |       baseFormat: 'bgra8unorm',
 315 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 316 |     },
 317 | 
 318 |     // plain, 16 bits per component
 319 | 
 320 |     r16uint: {
 321 |       color: {
 322 |         type: 'uint',
 323 |         copySrc: true,
 324 |         copyDst: true,
 325 |         storage: false,
 326 |         readWriteStorage: false,
 327 |         bytes: 2,
 328 |       },
 329 |       colorRender: { blend: false, resolve: false, byteCost: 2, alignment: 2 },
 330 |       multisample: true,
 331 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 332 |     },
 333 |     r16sint: {
 334 |       color: {
 335 |         type: 'sint',
 336 |         copySrc: true,
 337 |         copyDst: true,
 338 |         storage: false,
 339 |         readWriteStorage: false,
 340 |         bytes: 2,
 341 |       },
 342 |       colorRender: { blend: false, resolve: false, byteCost: 2, alignment: 2 },
 343 |       multisample: true,
 344 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 345 |     },
 346 |     r16float: {
 347 |       color: {
 348 |         type: 'float',
 349 |         copySrc: true,
 350 |         copyDst: true,
 351 |         storage: false,
 352 |         readWriteStorage: false,
 353 |         bytes: 2,
 354 |       },
 355 |       colorRender: { blend: true, resolve: true, byteCost: 2, alignment: 2 },
 356 |       multisample: true,
 357 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 358 |     },
 359 | 
 360 |     rg16uint: {
 361 |       color: {
 362 |         type: 'uint',
 363 |         copySrc: true,
 364 |         copyDst: true,
 365 |         storage: false,
 366 |         readWriteStorage: false,
 367 |         bytes: 4,
 368 |       },
 369 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 2 },
 370 |       multisample: true,
 371 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 372 |     },
 373 |     rg16sint: {
 374 |       color: {
 375 |         type: 'sint',
 376 |         copySrc: true,
 377 |         copyDst: true,
 378 |         storage: false,
 379 |         readWriteStorage: false,
 380 |         bytes: 4,
 381 |       },
 382 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 2 },
 383 |       multisample: true,
 384 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 385 |     },
 386 |     rg16float: {
 387 |       color: {
 388 |         type: 'float',
 389 |         copySrc: true,
 390 |         copyDst: true,
 391 |         storage: false,
 392 |         readWriteStorage: false,
 393 |         bytes: 4,
 394 |       },
 395 |       colorRender: { blend: true, resolve: true, byteCost: 4, alignment: 2 },
 396 |       multisample: true,
 397 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 398 |     },
 399 | 
 400 |     rgba16uint: {
 401 |       color: {
 402 |         type: 'uint',
 403 |         copySrc: true,
 404 |         copyDst: true,
 405 |         storage: true,
 406 |         readWriteStorage: false,
 407 |         bytes: 8,
 408 |       },
 409 |       colorRender: { blend: false, resolve: false, byteCost: 8, alignment: 2 },
 410 |       multisample: true,
 411 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 412 |     },
 413 |     rgba16sint: {
 414 |       color: {
 415 |         type: 'sint',
 416 |         copySrc: true,
 417 |         copyDst: true,
 418 |         storage: true,
 419 |         readWriteStorage: false,
 420 |         bytes: 8,
 421 |       },
 422 |       colorRender: { blend: false, resolve: false, byteCost: 8, alignment: 2 },
 423 |       multisample: true,
 424 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 425 |     },
 426 |     rgba16float: {
 427 |       color: {
 428 |         type: 'float',
 429 |         copySrc: true,
 430 |         copyDst: true,
 431 |         storage: true,
 432 |         readWriteStorage: false,
 433 |         bytes: 8,
 434 |       },
 435 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 2 },
 436 |       multisample: true,
 437 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 438 |     },
 439 | 
 440 |     // plain, 32 bits per component
 441 | 
 442 |     r32uint: {
 443 |       color: {
 444 |         type: 'uint',
 445 |         copySrc: true,
 446 |         copyDst: true,
 447 |         storage: true,
 448 |         readWriteStorage: true,
 449 |         bytes: 4,
 450 |       },
 451 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 4 },
 452 |       multisample: false,
 453 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 454 |     },
 455 |     r32sint: {
 456 |       color: {
 457 |         type: 'sint',
 458 |         copySrc: true,
 459 |         copyDst: true,
 460 |         storage: true,
 461 |         readWriteStorage: true,
 462 |         bytes: 4,
 463 |       },
 464 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 4 },
 465 |       multisample: false,
 466 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 467 |     },
 468 |     r32float: {
 469 |       color: {
 470 |         type: 'unfilterable-float',
 471 |         copySrc: true,
 472 |         copyDst: true,
 473 |         storage: true,
 474 |         readWriteStorage: true,
 475 |         bytes: 4,
 476 |       },
 477 |       colorRender: { blend: false, resolve: false, byteCost: 4, alignment: 4 },
 478 |       multisample: true,
 479 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 480 |     },
 481 | 
 482 |     rg32uint: {
 483 |       color: {
 484 |         type: 'uint',
 485 |         copySrc: true,
 486 |         copyDst: true,
 487 |         storage: true,
 488 |         readWriteStorage: false,
 489 |         bytes: 8,
 490 |       },
 491 |       colorRender: { blend: false, resolve: false, byteCost: 8, alignment: 4 },
 492 |       multisample: false,
 493 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 494 |     },
 495 |     rg32sint: {
 496 |       color: {
 497 |         type: 'sint',
 498 |         copySrc: true,
 499 |         copyDst: true,
 500 |         storage: true,
 501 |         readWriteStorage: false,
 502 |         bytes: 8,
 503 |       },
 504 |       colorRender: { blend: false, resolve: false, byteCost: 8, alignment: 4 },
 505 |       multisample: false,
 506 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 507 |     },
 508 |     rg32float: {
 509 |       color: {
 510 |         type: 'unfilterable-float',
 511 |         copySrc: true,
 512 |         copyDst: true,
 513 |         storage: true,
 514 |         readWriteStorage: false,
 515 |         bytes: 8,
 516 |       },
 517 |       colorRender: { blend: false, resolve: false, byteCost: 8, alignment: 4 },
 518 |       multisample: false,
 519 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 520 |     },
 521 | 
 522 |     rgba32uint: {
 523 |       color: {
 524 |         type: 'uint',
 525 |         copySrc: true,
 526 |         copyDst: true,
 527 |         storage: true,
 528 |         readWriteStorage: false,
 529 |         bytes: 16,
 530 |       },
 531 |       colorRender: { blend: false, resolve: false, byteCost: 16, alignment: 4 },
 532 |       multisample: false,
 533 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 534 |     },
 535 |     rgba32sint: {
 536 |       color: {
 537 |         type: 'sint',
 538 |         copySrc: true,
 539 |         copyDst: true,
 540 |         storage: true,
 541 |         readWriteStorage: false,
 542 |         bytes: 16,
 543 |       },
 544 |       colorRender: { blend: false, resolve: false, byteCost: 16, alignment: 4 },
 545 |       multisample: false,
 546 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 547 |     },
 548 |     rgba32float: {
 549 |       color: {
 550 |         type: 'unfilterable-float',
 551 |         copySrc: true,
 552 |         copyDst: true,
 553 |         storage: true,
 554 |         readWriteStorage: false,
 555 |         bytes: 16,
 556 |       },
 557 |       colorRender: { blend: false, resolve: false, byteCost: 16, alignment: 4 },
 558 |       multisample: false,
 559 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 560 |     },
 561 | 
 562 |     // plain, mixed component width, 32 bits per texel
 563 | 
 564 |     rgb10a2uint: {
 565 |       color: {
 566 |         type: 'uint',
 567 |         copySrc: true,
 568 |         copyDst: true,
 569 |         storage: false,
 570 |         readWriteStorage: false,
 571 |         bytes: 4,
 572 |       },
 573 |       colorRender: { blend: false, resolve: false, byteCost: 8, alignment: 4 },
 574 |       multisample: true,
 575 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 576 |     },
 577 |     rgb10a2unorm: {
 578 |       color: {
 579 |         type: 'float',
 580 |         copySrc: true,
 581 |         copyDst: true,
 582 |         storage: false,
 583 |         readWriteStorage: false,
 584 |         bytes: 4,
 585 |       },
 586 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 4 },
 587 |       multisample: true,
 588 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 589 |     },
 590 |     rg11b10ufloat: {
 591 |       color: {
 592 |         type: 'float',
 593 |         copySrc: true,
 594 |         copyDst: true,
 595 |         storage: false,
 596 |         readWriteStorage: false,
 597 |         bytes: 4,
 598 |       },
 599 |       colorRender: { blend: true, resolve: true, byteCost: 8, alignment: 4 },
 600 |       multisample: true,
 601 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 602 |     },
 603 | 
 604 |     // packed
 605 | 
 606 |     rgb9e5ufloat: {
 607 |       color: {
 608 |         type: 'float',
 609 |         copySrc: true,
 610 |         copyDst: true,
 611 |         storage: false,
 612 |         readWriteStorage: false,
 613 |         bytes: 4,
 614 |       },
 615 |       multisample: false,
 616 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 617 |     },
 618 |   },
 619 | } );
 620 | 
 621 | // MAINTENANCE_TODO: Distinguishing "sized" and "unsized" depth stencil formats doesn't make sense
 622 | // because one aspect can be sized and one can be unsized. This should be cleaned up, but is kept
 623 | // this way during a migration phase.
 624 | const kSizedDepthStencilFormatInfo = formatTableWithDefaults({
 625 |   defaults: { blockWidth: 1, blockHeight: 1, multisample: true },
 626 |   table: {
 627 |     stencil8: {
 628 |       stencil: {
 629 |         type: 'uint',
 630 |         copySrc: true,
 631 |         copyDst: true,
 632 |         storage: false,
 633 |         readWriteStorage: false,
 634 |         bytes: 1,
 635 |       },
 636 |       bytesPerBlock: 1,
 637 |     },
 638 |     depth16unorm: {
 639 |       depth: {
 640 |         type: 'depth',
 641 |         copySrc: true,
 642 |         copyDst: true,
 643 |         storage: false,
 644 |         readWriteStorage: false,
 645 |         bytes: 2,
 646 |       },
 647 |       bytesPerBlock: 2,
 648 |     },
 649 |     depth32float: {
 650 |       depth: {
 651 |         type: 'depth',
 652 |         copySrc: true,
 653 |         copyDst: false,
 654 |         storage: false,
 655 |         readWriteStorage: false,
 656 |         bytes: 4,
 657 |       },
 658 |       bytesPerBlock: 4,
 659 |     },
 660 |   },
 661 | } );
 662 | const kUnsizedDepthStencilFormatInfo = formatTableWithDefaults({
 663 |   defaults: { blockWidth: 1, blockHeight: 1, multisample: true },
 664 |   table: {
 665 |     depth24plus: {
 666 |       depth: {
 667 |         type: 'depth',
 668 |         copySrc: false,
 669 |         copyDst: false,
 670 |         storage: false,
 671 |         readWriteStorage: false,
 672 |         bytes: undefined,
 673 |       },
 674 |       bytesPerBlock: 4,
 675 |     },
 676 |     'depth24plus-stencil8': {
 677 |       depth: {
 678 |         type: 'depth',
 679 |         copySrc: false,
 680 |         copyDst: false,
 681 |         storage: false,
 682 |         readWriteStorage: false,
 683 |         bytes: undefined,
 684 |       },
 685 |       stencil: {
 686 |         type: 'uint',
 687 |         copySrc: true,
 688 |         copyDst: true,
 689 |         storage: false,
 690 |         readWriteStorage: false,
 691 |         bytes: 1,
 692 |       },
 693 |       bytesPerBlock: 4,
 694 |     },
 695 |     'depth32float-stencil8': {
 696 |       depth: {
 697 |         type: 'depth',
 698 |         copySrc: true,
 699 |         copyDst: false,
 700 |         storage: false,
 701 |         readWriteStorage: false,
 702 |         bytes: 4,
 703 |       },
 704 |       stencil: {
 705 |         type: 'uint',
 706 |         copySrc: true,
 707 |         copyDst: true,
 708 |         storage: false,
 709 |         readWriteStorage: false,
 710 |         bytes: 1,
 711 |       },
 712 |       feature: 'depth32float-stencil8',
 713 |       bytesPerBlock: 5,
 714 |     },
 715 |   },
 716 | } );
 717 | 
 718 | const kBCTextureFormatInfo = formatTableWithDefaults({
 719 |   defaults: {
 720 |     blockWidth: 4,
 721 |     blockHeight: 4,
 722 |     multisample: false,
 723 |     feature: 'texture-compression-bc',
 724 |   },
 725 |   table: {
 726 |     'bc1-rgba-unorm': {
 727 |       color: {
 728 |         type: 'float',
 729 |         copySrc: true,
 730 |         copyDst: true,
 731 |         storage: false,
 732 |         readWriteStorage: false,
 733 |         bytes: 8,
 734 |       },
 735 |       baseFormat: 'bc1-rgba-unorm',
 736 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 737 |     },
 738 |     'bc1-rgba-unorm-srgb': {
 739 |       color: {
 740 |         type: 'float',
 741 |         copySrc: true,
 742 |         copyDst: true,
 743 |         storage: false,
 744 |         readWriteStorage: false,
 745 |         bytes: 8,
 746 |       },
 747 |       baseFormat: 'bc1-rgba-unorm',
 748 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 749 |     },
 750 | 
 751 |     'bc2-rgba-unorm': {
 752 |       color: {
 753 |         type: 'float',
 754 |         copySrc: true,
 755 |         copyDst: true,
 756 |         storage: false,
 757 |         readWriteStorage: false,
 758 |         bytes: 16,
 759 |       },
 760 |       baseFormat: 'bc2-rgba-unorm',
 761 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 762 |     },
 763 |     'bc2-rgba-unorm-srgb': {
 764 |       color: {
 765 |         type: 'float',
 766 |         copySrc: true,
 767 |         copyDst: true,
 768 |         storage: false,
 769 |         readWriteStorage: false,
 770 |         bytes: 16,
 771 |       },
 772 |       baseFormat: 'bc2-rgba-unorm',
 773 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 774 |     },
 775 | 
 776 |     'bc3-rgba-unorm': {
 777 |       color: {
 778 |         type: 'float',
 779 |         copySrc: true,
 780 |         copyDst: true,
 781 |         storage: false,
 782 |         readWriteStorage: false,
 783 |         bytes: 16,
 784 |       },
 785 |       baseFormat: 'bc3-rgba-unorm',
 786 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 787 |     },
 788 |     'bc3-rgba-unorm-srgb': {
 789 |       color: {
 790 |         type: 'float',
 791 |         copySrc: true,
 792 |         copyDst: true,
 793 |         storage: false,
 794 |         readWriteStorage: false,
 795 |         bytes: 16,
 796 |       },
 797 |       baseFormat: 'bc3-rgba-unorm',
 798 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 799 |     },
 800 | 
 801 |     'bc4-r-unorm': {
 802 |       color: {
 803 |         type: 'float',
 804 |         copySrc: true,
 805 |         copyDst: true,
 806 |         storage: false,
 807 |         readWriteStorage: false,
 808 |         bytes: 8,
 809 |       },
 810 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 811 |     },
 812 |     'bc4-r-snorm': {
 813 |       color: {
 814 |         type: 'float',
 815 |         copySrc: true,
 816 |         copyDst: true,
 817 |         storage: false,
 818 |         readWriteStorage: false,
 819 |         bytes: 8,
 820 |       },
 821 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 822 |     },
 823 | 
 824 |     'bc5-rg-unorm': {
 825 |       color: {
 826 |         type: 'float',
 827 |         copySrc: true,
 828 |         copyDst: true,
 829 |         storage: false,
 830 |         readWriteStorage: false,
 831 |         bytes: 16,
 832 |       },
 833 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 834 |     },
 835 |     'bc5-rg-snorm': {
 836 |       color: {
 837 |         type: 'float',
 838 |         copySrc: true,
 839 |         copyDst: true,
 840 |         storage: false,
 841 |         readWriteStorage: false,
 842 |         bytes: 16,
 843 |       },
 844 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 845 |     },
 846 | 
 847 |     'bc6h-rgb-ufloat': {
 848 |       color: {
 849 |         type: 'float',
 850 |         copySrc: true,
 851 |         copyDst: true,
 852 |         storage: false,
 853 |         readWriteStorage: false,
 854 |         bytes: 16,
 855 |       },
 856 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 857 |     },
 858 |     'bc6h-rgb-float': {
 859 |       color: {
 860 |         type: 'float',
 861 |         copySrc: true,
 862 |         copyDst: true,
 863 |         storage: false,
 864 |         readWriteStorage: false,
 865 |         bytes: 16,
 866 |       },
 867 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 868 |     },
 869 | 
 870 |     'bc7-rgba-unorm': {
 871 |       color: {
 872 |         type: 'float',
 873 |         copySrc: true,
 874 |         copyDst: true,
 875 |         storage: false,
 876 |         readWriteStorage: false,
 877 |         bytes: 16,
 878 |       },
 879 |       baseFormat: 'bc7-rgba-unorm',
 880 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 881 |     },
 882 |     'bc7-rgba-unorm-srgb': {
 883 |       color: {
 884 |         type: 'float',
 885 |         copySrc: true,
 886 |         copyDst: true,
 887 |         storage: false,
 888 |         readWriteStorage: false,
 889 |         bytes: 16,
 890 |       },
 891 |       baseFormat: 'bc7-rgba-unorm',
 892 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 893 |     },
 894 |   },
 895 | } );
 896 | 
 897 | const kETC2TextureFormatInfo = formatTableWithDefaults({
 898 |   defaults: {
 899 |     blockWidth: 4,
 900 |     blockHeight: 4,
 901 |     multisample: false,
 902 |     feature: 'texture-compression-etc2',
 903 |   },
 904 |   table: {
 905 |     'etc2-rgb8unorm': {
 906 |       color: {
 907 |         type: 'float',
 908 |         copySrc: true,
 909 |         copyDst: true,
 910 |         storage: false,
 911 |         readWriteStorage: false,
 912 |         bytes: 8,
 913 |       },
 914 |       baseFormat: 'etc2-rgb8unorm',
 915 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 916 |     },
 917 |     'etc2-rgb8unorm-srgb': {
 918 |       color: {
 919 |         type: 'float',
 920 |         copySrc: true,
 921 |         copyDst: true,
 922 |         storage: false,
 923 |         readWriteStorage: false,
 924 |         bytes: 8,
 925 |       },
 926 |       baseFormat: 'etc2-rgb8unorm',
 927 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 928 |     },
 929 | 
 930 |     'etc2-rgb8a1unorm': {
 931 |       color: {
 932 |         type: 'float',
 933 |         copySrc: true,
 934 |         copyDst: true,
 935 |         storage: false,
 936 |         readWriteStorage: false,
 937 |         bytes: 8,
 938 |       },
 939 |       baseFormat: 'etc2-rgb8a1unorm',
 940 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 941 |     },
 942 |     'etc2-rgb8a1unorm-srgb': {
 943 |       color: {
 944 |         type: 'float',
 945 |         copySrc: true,
 946 |         copyDst: true,
 947 |         storage: false,
 948 |         readWriteStorage: false,
 949 |         bytes: 8,
 950 |       },
 951 |       baseFormat: 'etc2-rgb8a1unorm',
 952 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 953 |     },
 954 | 
 955 |     'etc2-rgba8unorm': {
 956 |       color: {
 957 |         type: 'float',
 958 |         copySrc: true,
 959 |         copyDst: true,
 960 |         storage: false,
 961 |         readWriteStorage: false,
 962 |         bytes: 16,
 963 |       },
 964 |       baseFormat: 'etc2-rgba8unorm',
 965 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 966 |     },
 967 |     'etc2-rgba8unorm-srgb': {
 968 |       color: {
 969 |         type: 'float',
 970 |         copySrc: true,
 971 |         copyDst: true,
 972 |         storage: false,
 973 |         readWriteStorage: false,
 974 |         bytes: 16,
 975 |       },
 976 |       baseFormat: 'etc2-rgba8unorm',
 977 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 978 |     },
 979 | 
 980 |     'eac-r11unorm': {
 981 |       color: {
 982 |         type: 'float',
 983 |         copySrc: true,
 984 |         copyDst: true,
 985 |         storage: false,
 986 |         readWriteStorage: false,
 987 |         bytes: 8,
 988 |       },
 989 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
 990 |     },
 991 |     'eac-r11snorm': {
 992 |       color: {
 993 |         type: 'float',
 994 |         copySrc: true,
 995 |         copyDst: true,
 996 |         storage: false,
 997 |         readWriteStorage: false,
 998 |         bytes: 8,
 999 |       },
1000 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1001 |     },
1002 | 
1003 |     'eac-rg11unorm': {
1004 |       color: {
1005 |         type: 'float',
1006 |         copySrc: true,
1007 |         copyDst: true,
1008 |         storage: false,
1009 |         readWriteStorage: false,
1010 |         bytes: 16,
1011 |       },
1012 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1013 |     },
1014 |     'eac-rg11snorm': {
1015 |       color: {
1016 |         type: 'float',
1017 |         copySrc: true,
1018 |         copyDst: true,
1019 |         storage: false,
1020 |         readWriteStorage: false,
1021 |         bytes: 16,
1022 |       },
1023 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1024 |     },
1025 |   },
1026 | } );
1027 | 
1028 | const kASTCTextureFormatInfo = formatTableWithDefaults({
1029 |   defaults: {
1030 |     multisample: false,
1031 |     feature: 'texture-compression-astc',
1032 |   },
1033 |   table: {
1034 |     'astc-4x4-unorm': {
1035 |       blockWidth: 4,
1036 |       blockHeight: 4,
1037 |       color: {
1038 |         type: 'float',
1039 |         copySrc: true,
1040 |         copyDst: true,
1041 |         storage: false,
1042 |         readWriteStorage: false,
1043 |         bytes: 16,
1044 |       },
1045 |       baseFormat: 'astc-4x4-unorm',
1046 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1047 |     },
1048 |     'astc-4x4-unorm-srgb': {
1049 |       blockWidth: 4,
1050 |       blockHeight: 4,
1051 |       color: {
1052 |         type: 'float',
1053 |         copySrc: true,
1054 |         copyDst: true,
1055 |         storage: false,
1056 |         readWriteStorage: false,
1057 |         bytes: 16,
1058 |       },
1059 |       baseFormat: 'astc-4x4-unorm',
1060 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1061 |     },
1062 | 
1063 |     'astc-5x4-unorm': {
1064 |       blockWidth: 5,
1065 |       blockHeight: 4,
1066 |       color: {
1067 |         type: 'float',
1068 |         copySrc: true,
1069 |         copyDst: true,
1070 |         storage: false,
1071 |         readWriteStorage: false,
1072 |         bytes: 16,
1073 |       },
1074 |       baseFormat: 'astc-5x4-unorm',
1075 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1076 |     },
1077 |     'astc-5x4-unorm-srgb': {
1078 |       blockWidth: 5,
1079 |       blockHeight: 4,
1080 |       color: {
1081 |         type: 'float',
1082 |         copySrc: true,
1083 |         copyDst: true,
1084 |         storage: false,
1085 |         readWriteStorage: false,
1086 |         bytes: 16,
1087 |       },
1088 |       baseFormat: 'astc-5x4-unorm',
1089 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1090 |     },
1091 | 
1092 |     'astc-5x5-unorm': {
1093 |       blockWidth: 5,
1094 |       blockHeight: 5,
1095 |       color: {
1096 |         type: 'float',
1097 |         copySrc: true,
1098 |         copyDst: true,
1099 |         storage: false,
1100 |         readWriteStorage: false,
1101 |         bytes: 16,
1102 |       },
1103 |       baseFormat: 'astc-5x5-unorm',
1104 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1105 |     },
1106 |     'astc-5x5-unorm-srgb': {
1107 |       blockWidth: 5,
1108 |       blockHeight: 5,
1109 |       color: {
1110 |         type: 'float',
1111 |         copySrc: true,
1112 |         copyDst: true,
1113 |         storage: false,
1114 |         readWriteStorage: false,
1115 |         bytes: 16,
1116 |       },
1117 |       baseFormat: 'astc-5x5-unorm',
1118 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1119 |     },
1120 | 
1121 |     'astc-6x5-unorm': {
1122 |       blockWidth: 6,
1123 |       blockHeight: 5,
1124 |       color: {
1125 |         type: 'float',
1126 |         copySrc: true,
1127 |         copyDst: true,
1128 |         storage: false,
1129 |         readWriteStorage: false,
1130 |         bytes: 16,
1131 |       },
1132 |       baseFormat: 'astc-6x5-unorm',
1133 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1134 |     },
1135 |     'astc-6x5-unorm-srgb': {
1136 |       blockWidth: 6,
1137 |       blockHeight: 5,
1138 |       color: {
1139 |         type: 'float',
1140 |         copySrc: true,
1141 |         copyDst: true,
1142 |         storage: false,
1143 |         readWriteStorage: false,
1144 |         bytes: 16,
1145 |       },
1146 |       baseFormat: 'astc-6x5-unorm',
1147 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1148 |     },
1149 | 
1150 |     'astc-6x6-unorm': {
1151 |       blockWidth: 6,
1152 |       blockHeight: 6,
1153 |       color: {
1154 |         type: 'float',
1155 |         copySrc: true,
1156 |         copyDst: true,
1157 |         storage: false,
1158 |         readWriteStorage: false,
1159 |         bytes: 16,
1160 |       },
1161 |       baseFormat: 'astc-6x6-unorm',
1162 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1163 |     },
1164 |     'astc-6x6-unorm-srgb': {
1165 |       blockWidth: 6,
1166 |       blockHeight: 6,
1167 |       color: {
1168 |         type: 'float',
1169 |         copySrc: true,
1170 |         copyDst: true,
1171 |         storage: false,
1172 |         readWriteStorage: false,
1173 |         bytes: 16,
1174 |       },
1175 |       baseFormat: 'astc-6x6-unorm',
1176 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1177 |     },
1178 | 
1179 |     'astc-8x5-unorm': {
1180 |       blockWidth: 8,
1181 |       blockHeight: 5,
1182 |       color: {
1183 |         type: 'float',
1184 |         copySrc: true,
1185 |         copyDst: true,
1186 |         storage: false,
1187 |         readWriteStorage: false,
1188 |         bytes: 16,
1189 |       },
1190 |       baseFormat: 'astc-8x5-unorm',
1191 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1192 |     },
1193 |     'astc-8x5-unorm-srgb': {
1194 |       blockWidth: 8,
1195 |       blockHeight: 5,
1196 |       color: {
1197 |         type: 'float',
1198 |         copySrc: true,
1199 |         copyDst: true,
1200 |         storage: false,
1201 |         readWriteStorage: false,
1202 |         bytes: 16,
1203 |       },
1204 |       baseFormat: 'astc-8x5-unorm',
1205 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1206 |     },
1207 | 
1208 |     'astc-8x6-unorm': {
1209 |       blockWidth: 8,
1210 |       blockHeight: 6,
1211 |       color: {
1212 |         type: 'float',
1213 |         copySrc: true,
1214 |         copyDst: true,
1215 |         storage: false,
1216 |         readWriteStorage: false,
1217 |         bytes: 16,
1218 |       },
1219 |       baseFormat: 'astc-8x6-unorm',
1220 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1221 |     },
1222 |     'astc-8x6-unorm-srgb': {
1223 |       blockWidth: 8,
1224 |       blockHeight: 6,
1225 |       color: {
1226 |         type: 'float',
1227 |         copySrc: true,
1228 |         copyDst: true,
1229 |         storage: false,
1230 |         readWriteStorage: false,
1231 |         bytes: 16,
1232 |       },
1233 |       baseFormat: 'astc-8x6-unorm',
1234 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1235 |     },
1236 | 
1237 |     'astc-8x8-unorm': {
1238 |       blockWidth: 8,
1239 |       blockHeight: 8,
1240 |       color: {
1241 |         type: 'float',
1242 |         copySrc: true,
1243 |         copyDst: true,
1244 |         storage: false,
1245 |         readWriteStorage: false,
1246 |         bytes: 16,
1247 |       },
1248 |       baseFormat: 'astc-8x8-unorm',
1249 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1250 |     },
1251 |     'astc-8x8-unorm-srgb': {
1252 |       blockWidth: 8,
1253 |       blockHeight: 8,
1254 |       color: {
1255 |         type: 'float',
1256 |         copySrc: true,
1257 |         copyDst: true,
1258 |         storage: false,
1259 |         readWriteStorage: false,
1260 |         bytes: 16,
1261 |       },
1262 |       baseFormat: 'astc-8x8-unorm',
1263 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1264 |     },
1265 | 
1266 |     'astc-10x5-unorm': {
1267 |       blockWidth: 10,
1268 |       blockHeight: 5,
1269 |       color: {
1270 |         type: 'float',
1271 |         copySrc: true,
1272 |         copyDst: true,
1273 |         storage: false,
1274 |         readWriteStorage: false,
1275 |         bytes: 16,
1276 |       },
1277 |       baseFormat: 'astc-10x5-unorm',
1278 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1279 |     },
1280 |     'astc-10x5-unorm-srgb': {
1281 |       blockWidth: 10,
1282 |       blockHeight: 5,
1283 |       color: {
1284 |         type: 'float',
1285 |         copySrc: true,
1286 |         copyDst: true,
1287 |         storage: false,
1288 |         readWriteStorage: false,
1289 |         bytes: 16,
1290 |       },
1291 |       baseFormat: 'astc-10x5-unorm',
1292 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1293 |     },
1294 | 
1295 |     'astc-10x6-unorm': {
1296 |       blockWidth: 10,
1297 |       blockHeight: 6,
1298 |       color: {
1299 |         type: 'float',
1300 |         copySrc: true,
1301 |         copyDst: true,
1302 |         storage: false,
1303 |         readWriteStorage: false,
1304 |         bytes: 16,
1305 |       },
1306 |       baseFormat: 'astc-10x6-unorm',
1307 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1308 |     },
1309 |     'astc-10x6-unorm-srgb': {
1310 |       blockWidth: 10,
1311 |       blockHeight: 6,
1312 |       color: {
1313 |         type: 'float',
1314 |         copySrc: true,
1315 |         copyDst: true,
1316 |         storage: false,
1317 |         readWriteStorage: false,
1318 |         bytes: 16,
1319 |       },
1320 |       baseFormat: 'astc-10x6-unorm',
1321 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1322 |     },
1323 | 
1324 |     'astc-10x8-unorm': {
1325 |       blockWidth: 10,
1326 |       blockHeight: 8,
1327 |       color: {
1328 |         type: 'float',
1329 |         copySrc: true,
1330 |         copyDst: true,
1331 |         storage: false,
1332 |         readWriteStorage: false,
1333 |         bytes: 16,
1334 |       },
1335 |       baseFormat: 'astc-10x8-unorm',
1336 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1337 |     },
1338 |     'astc-10x8-unorm-srgb': {
1339 |       blockWidth: 10,
1340 |       blockHeight: 8,
1341 |       color: {
1342 |         type: 'float',
1343 |         copySrc: true,
1344 |         copyDst: true,
1345 |         storage: false,
1346 |         readWriteStorage: false,
1347 |         bytes: 16,
1348 |       },
1349 |       baseFormat: 'astc-10x8-unorm',
1350 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1351 |     },
1352 | 
1353 |     'astc-10x10-unorm': {
1354 |       blockWidth: 10,
1355 |       blockHeight: 10,
1356 |       color: {
1357 |         type: 'float',
1358 |         copySrc: true,
1359 |         copyDst: true,
1360 |         storage: false,
1361 |         readWriteStorage: false,
1362 |         bytes: 16,
1363 |       },
1364 |       baseFormat: 'astc-10x10-unorm',
1365 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1366 |     },
1367 |     'astc-10x10-unorm-srgb': {
1368 |       blockWidth: 10,
1369 |       blockHeight: 10,
1370 |       color: {
1371 |         type: 'float',
1372 |         copySrc: true,
1373 |         copyDst: true,
1374 |         storage: false,
1375 |         readWriteStorage: false,
1376 |         bytes: 16,
1377 |       },
1378 |       baseFormat: 'astc-10x10-unorm',
1379 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1380 |     },
1381 | 
1382 |     'astc-12x10-unorm': {
1383 |       blockWidth: 12,
1384 |       blockHeight: 10,
1385 |       color: {
1386 |         type: 'float',
1387 |         copySrc: true,
1388 |         copyDst: true,
1389 |         storage: false,
1390 |         readWriteStorage: false,
1391 |         bytes: 16,
1392 |       },
1393 |       baseFormat: 'astc-12x10-unorm',
1394 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1395 |     },
1396 |     'astc-12x10-unorm-srgb': {
1397 |       blockWidth: 12,
1398 |       blockHeight: 10,
1399 |       color: {
1400 |         type: 'float',
1401 |         copySrc: true,
1402 |         copyDst: true,
1403 |         storage: false,
1404 |         readWriteStorage: false,
1405 |         bytes: 16,
1406 |       },
1407 |       baseFormat: 'astc-12x10-unorm',
1408 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1409 |     },
1410 | 
1411 |     'astc-12x12-unorm': {
1412 |       blockWidth: 12,
1413 |       blockHeight: 12,
1414 |       color: {
1415 |         type: 'float',
1416 |         copySrc: true,
1417 |         copyDst: true,
1418 |         storage: false,
1419 |         readWriteStorage: false,
1420 |         bytes: 16,
1421 |       },
1422 |       baseFormat: 'astc-12x12-unorm',
1423 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1424 |     },
1425 |     'astc-12x12-unorm-srgb': {
1426 |       blockWidth: 12,
1427 |       blockHeight: 12,
1428 |       color: {
1429 |         type: 'float',
1430 |         copySrc: true,
1431 |         copyDst: true,
1432 |         storage: false,
1433 |         readWriteStorage: false,
1434 |         bytes: 16,
1435 |       },
1436 |       baseFormat: 'astc-12x12-unorm',
1437 |       /*prettier-ignore*/ get bytesPerBlock() { return this.color.bytes; },
1438 |     },
1439 |   },
1440 | } );
1441 | 
1442 | // Definitions for use locally.
1443 | 
1444 | // MAINTENANCE_TODO: Consider generating the exports below programmatically by filtering the big list, instead
1445 | // of using these local constants? Requires some type magic though.
1446 | /* prettier-ignore */ const   kCompressedTextureFormatInfo = { ...kBCTextureFormatInfo, ...kETC2TextureFormatInfo, ...kASTCTextureFormatInfo } ;
1447 | /* prettier-ignore */ const        kColorTextureFormatInfo = { ...kRegularTextureFormatInfo, ...kCompressedTextureFormatInfo } ;
1448 | /* prettier-ignore */ const    kEncodableTextureFormatInfo = { ...kRegularTextureFormatInfo, ...kSizedDepthStencilFormatInfo } ;
1449 | /* prettier-ignore */ const        kSizedTextureFormatInfo = { ...kRegularTextureFormatInfo, ...kSizedDepthStencilFormatInfo, ...kCompressedTextureFormatInfo } ;
1450 | /* prettier-ignore */ const        kDepthStencilFormatInfo = { ...kSizedDepthStencilFormatInfo, ...kUnsizedDepthStencilFormatInfo } ;
1451 | /* prettier-ignore */ const kUncompressedTextureFormatInfo = { ...kRegularTextureFormatInfo, ...kSizedDepthStencilFormatInfo, ...kUnsizedDepthStencilFormatInfo } ;
1452 | /* prettier-ignore */ const          kAllTextureFormatInfo = { ...kUncompressedTextureFormatInfo, ...kCompressedTextureFormatInfo } ;
1453 | 
1454 | /* prettier-ignore */ export const        kRegularTextureFormats = keysOf(     kRegularTextureFormatInfo);
1455 | /* prettier-ignore */ export const     kSizedDepthStencilFormats = keysOf(  kSizedDepthStencilFormatInfo);
1456 | /* prettier-ignore */ export const   kUnsizedDepthStencilFormats = keysOf(kUnsizedDepthStencilFormatInfo);
1457 | /* prettier-ignore */ export const     kCompressedTextureFormats = keysOf(  kCompressedTextureFormatInfo);
1458 | /* prettier-ignore */ export const   kBCCompressedTextureFormats = keysOf(          kBCTextureFormatInfo);
1459 | /* prettier-ignore */ export const kASTCCompressedTextureFormats = keysOf(        kASTCTextureFormatInfo);
1460 | 
1461 | /* prettier-ignore */ export const        kColorTextureFormats = keysOf(       kColorTextureFormatInfo);
1462 | /* prettier-ignore */ export const    kEncodableTextureFormats = keysOf(   kEncodableTextureFormatInfo);
1463 | /* prettier-ignore */ export const        kSizedTextureFormats = keysOf(       kSizedTextureFormatInfo);
1464 | /* prettier-ignore */ export const        kDepthStencilFormats = keysOf(       kDepthStencilFormatInfo);
1465 | /* prettier-ignore */ export const kUncompressedTextureFormats = keysOf(kUncompressedTextureFormatInfo);
1466 | /* prettier-ignore */ export const          kAllTextureFormats = keysOf(         kAllTextureFormatInfo);
1467 | 
1468 | 
1469 | /**
1470 |  * DO NOT EXPORT THIS - functions that need info from this table should use the appropriate
1471 |  * method for their needs.
1472 |  *
1473 |  * For a list of textures formats for test parameters there are:
1474 |  *
1475 |  * Lists of formats that might require features to be enabled
1476 |  * * kPossibleColorRenderableTextureFormats
1477 |  * * kPossibleStorageTextureFormats
1478 |  * * kPossibleReadWriteStorageTextureFormats
1479 |  * * kPossibleMultisampledTextureFormats
1480 |  *
1481 |  * Lists of formats that end in -srgb
1482 |  * * kDifferentBaseFormatTextureFormats  (includes compressed textures)
1483 |  * * kDifferentBaseFormatRegularTextureFormats (does not include compressed textures)
1484 |  *
1485 |  * Formats that require a feature to use at all (mostly compressed formats)
1486 |  * * kOptionalTextureFormats
1487 |  *
1488 |  * Misc
1489 |  * * kRegularTextureFormats
1490 |  * * kSizedDepthStencilFormats
1491 |  * * kUnsizedDepthStencilFormats
1492 |  * * kCompressedTextureFormats
1493 |  * * kUncompressedTextureFormats
1494 |  * * kColorTextureFormats - color formats including compressed and sint/uint
1495 |  * * kEncodableTextureFormats - formats that TexelView supports.
1496 |  * * kSizedTextureFormats - formats that have a known size (so not depth24plus ...)
1497 |  * * kDepthStencilFormats - depth, stencil, depth-stencil
1498 |  * * kDepthTextureFormats - depth and depth-stencil
1499 |  * * kStencilTextureFormats - stencil and depth-stencil
1500 |  * * kAllTextureFormats
1501 |  *
1502 |  * If one of the list above does not work, add a new one or to filter in beforeAllSubcases you generally want to use
1503 |  * You will not know if you can actually use a texture for the given use case until the test runs and has a device.
1504 |  *
1505 |  * * isTextureFormatPossiblyUsableAsRenderAttachment
1506 |  * * isTextureFormatPossiblyUsableAsColorRenderAttachment
1507 |  * * isTextureFormatPossiblyMultisampled
1508 |  * * isTextureFormatPossiblyStorageReadable
1509 |  * * isTextureFormatPossiblyStorageReadWritable
1510 |  * * isTextureFormatPossiblyFilterableAsTextureF32
1511 |  *
1512 |  * These are also usable before or during a test
1513 |  *
1514 |  * * isColorTextureFormat
1515 |  * * isDepthTextureFormat
1516 |  * * isStencilTextureFormat
1517 |  * * isDepthOrStencilTextureFormat
1518 |  * * isEncodableTextureFormat
1519 |  * * isRegularTextureFormat
1520 |  * * isCompressedFloatTextureFormat
1521 |  * * isSintOrUintFormat
1522 |  *
1523 |  * To skip a test use the `skipIfXXX` tests in `GPUTest` if possible. Otherwise these functions
1524 |  * require a device to give a correct answer.
1525 |  *
1526 |  * * isTextureFormatUsableAsRenderAttachment
1527 |  * * isTextureFormatColorRenderable
1528 |  * * isTextureFormatResolvable
1529 |  * * isTextureFormatBlendable
1530 |  * * isTextureFormatMultisampled
1531 |  * * isTextureFormatUsableAsStorageFormat
1532 |  * * isTextureFormatUsableAsReadWriteStorageTexture
1533 |  * * isTextureFormatUsableAsStorageFormatInCreateShaderModule
1534 |  *
1535 |  * Per-GPUTextureFormat info.
1536 |  */
1537 | export const kTextureFormatInfo = {
1538 |   ...kRegularTextureFormatInfo,
1539 |   ...kSizedDepthStencilFormatInfo,
1540 |   ...kUnsizedDepthStencilFormatInfo,
1541 |   ...kBCTextureFormatInfo,
1542 |   ...kETC2TextureFormatInfo,
1543 |   ...kASTCTextureFormatInfo,
1544 | };
1545 | 
1546 | 
1547 | // The formats of GPUTextureFormat for canvas context.
1548 | export const kCanvasTextureFormats = ['bgra8unorm', 'rgba8unorm', 'rgba16float'];
1549 | 


--------------------------------------------------------------------------------
/src/webgpu-memory.ts:
--------------------------------------------------------------------------------
  1 | import { kTextureFormatInfo } from './capabilities-info.js';
  2 | 
  3 | type ComputeMemSizeFn =  (...args: any[]) => number;;
  4 | 
  5 | const webgpuMemoryIdSymbol = Symbol('webgpu-memory-object-id');
  6 | const deviceIdToDeviceWeakRef = new Map<number, WeakRef<GPUDevice>>();
  7 | 
  8 | declare global {
  9 |   interface GPUObjectBase {
 10 |      [webgpuMemoryIdSymbol]: number;
 11 |   }
 12 |   interface GPUCanvasContext {
 13 |      [webgpuMemoryIdSymbol]: number;
 14 |   }
 15 | }
 16 | 
 17 | type Category = 
 18 |   | 'buffer'
 19 |   | 'bindGroup'
 20 |   | 'bindGroupLayout'
 21 |   | 'canvas'
 22 |   | 'computePipeline'
 23 |   | 'device'
 24 |   | 'pipelineLayout'
 25 |   | 'querySet'
 26 |   | 'renderPipeline'
 27 |   | 'sampler'
 28 |   | 'shaderModule'
 29 |   | 'texture'
 30 |   ;
 31 | 
 32 | type WebGPUObject = GPUObjectBase | GPUCanvasContext;
 33 | type WebGPUObjectInfo = {
 34 |   ref: WeakRef<WebGPUObject>,
 35 |   id: number,
 36 |   deviceId: number,
 37 |   category: Category,
 38 |   size: number | ComputeMemSizeFn,
 39 | };
 40 | 
 41 | type DeviceInfo = WebGPUObjectInfo & {
 42 |   maxTotal: number,
 43 |   runningTotal: number,
 44 | };
 45 | 
 46 | type CanvasInfo = WebGPUObjectInfo & {
 47 |   oldSize: number,
 48 | }
 49 | 
 50 | let nextId = 1;
 51 | const allWebGPUObjectsById = new Map<number, WebGPUObjectInfo | DeviceInfo | CanvasInfo>();
 52 | let globalRunningTotal = 0;
 53 | let globalMaxTotal = 0;
 54 | 
 55 | /**
 56 |  * Start tracking a resource by device
 57 |  */
 58 | function addDeviceObject(
 59 |   device: GPUDevice,
 60 |   webgpuObject: WebGPUObject,
 61 |   category: Category,
 62 |   size: number | ComputeMemSizeFn) {
 63 |   let id = webgpuObject[webgpuMemoryIdSymbol];
 64 |   if (!id) {
 65 |     id = nextId++;
 66 |     webgpuObject[webgpuMemoryIdSymbol] = id;
 67 |   }
 68 |   const deviceId = device[webgpuMemoryIdSymbol];
 69 |   const info: WebGPUObjectInfo = {
 70 |     ref: new WeakRef(webgpuObject),
 71 |     id,
 72 |     deviceId,
 73 |     category,
 74 |     size,
 75 |   };
 76 |   allWebGPUObjectsById.set(id, info);
 77 |   if (typeof size === 'function') {
 78 |     size = size(webgpuObject);
 79 |     (info as CanvasInfo).oldSize = size;
 80 |   }
 81 |   if (!isNaN(size)) {
 82 |     const deviceInfo = allWebGPUObjectsById.get(deviceId) as DeviceInfo;
 83 |     updateDeviceInfoRunningTotal(deviceInfo, size);
 84 |   }
 85 | }
 86 | 
 87 | function updateDeviceInfoRunningTotal(deviceInfo: DeviceInfo, size: number) {
 88 |   deviceInfo.runningTotal = (deviceInfo.runningTotal ?? 0) + size;
 89 |   deviceInfo.maxTotal = Math.max(deviceInfo.maxTotal ?? 0, deviceInfo.runningTotal);
 90 |   globalRunningTotal = globalRunningTotal + size;
 91 |   globalMaxTotal = Math.max(globalMaxTotal, globalRunningTotal);
 92 | }
 93 | 
 94 | /**
 95 |  * Start tracking a resource by device
 96 |  */
 97 | function addDeviceMem(
 98 |   device: GPUDevice,
 99 |   webgpuObject: WebGPUObject,
100 |   category: Category,
101 |   size: number | ComputeMemSizeFn) {
102 |   addDeviceObject(device, webgpuObject, category, size);
103 | }
104 | 
105 | /**
106 |  */
107 | function deviceExists(deviceId: number) {
108 |   const ref = deviceIdToDeviceWeakRef.get(deviceId);
109 |   return ref && !!ref.deref();
110 | }
111 | 
112 | /**
113 |  * Free an object's memory
114 |  */
115 | function freeObjectById(id: number, webgpuObject?: WebGPUObject) {
116 |   const obj = allWebGPUObjectsById.get(id);
117 |   const sizer = obj?.size;
118 |   const size = (webgpuObject && typeof sizer === 'function')
119 |     ? sizer(webgpuObject)
120 |     : sizer as number;
121 |   if (!isNaN(size as any)) {
122 |     const deviceInfo = allWebGPUObjectsById.get(obj!.deviceId) as DeviceInfo;
123 |     if (deviceInfo) {
124 |       updateDeviceInfoRunningTotal(deviceInfo, -size);
125 |     }
126 |   }
127 |   allWebGPUObjectsById.delete(id);
128 | }
129 | 
130 | /**
131 |  * Free the memory used by object.
132 |  */
133 | function freeObject(webgpuObject: WebGPUObject) {
134 |   const id = webgpuObject[webgpuMemoryIdSymbol];
135 |   freeObjectById(id, webgpuObject);
136 | }
137 | 
138 | type MemoryInfo = {
139 |   total: number,
140 |   buffer: number,
141 |   texture: number,
142 |   querySet: number,
143 |   canvas: number,
144 |   maxTotal: number,
145 | };
146 | 
147 | type WebGPUMemoryInfo = {
148 |   memory: MemoryInfo,
149 |   resources: { [key: string]: number } 
150 | };
151 | 
152 | /**
153 |  * Gets WebGPU memory usage. If no device is passed in returns info for all devices.
154 |  */
155 | export function getWebGPUMemoryUsage(device?: GPUDevice) {
156 |   const memory: MemoryInfo = {
157 |     total: 0,
158 |     buffer: 0,
159 |     texture: 0,
160 |     querySet: 0,
161 |     canvas: 0,
162 |     maxTotal: 0,
163 |   };
164 |   const resources: { [key: string]: number } = {
165 |     buffer: 0,
166 |     texture: 0,
167 |     querySet: 0,
168 |   };
169 |   const info = { memory, resources };
170 | 
171 |   const requestedDeviceId = device && device[webgpuMemoryIdSymbol];
172 | 
173 |   const idsToDelete: number[] = [];
174 |   for (const [id, info] of allWebGPUObjectsById.entries()) {
175 |     const {ref, deviceId, category, size} = info;
176 |     const webgpuObject = ref.deref();
177 |     if (!webgpuObject || !deviceExists(deviceId)) {
178 |       idsToDelete.push(id);
179 |     } else {
180 |       if (!requestedDeviceId || deviceId === requestedDeviceId) {
181 |         resources[category] = (resources[category] || 0) + 1;
182 |         if (size) {
183 |           const numBytes = typeof size === 'function' ? size(webgpuObject) : size;
184 |           memory.total += numBytes;
185 |           memory[category as unknown as keyof typeof memory] += numBytes;
186 |         }
187 |         if (category === 'device') {
188 |           memory.maxTotal += (info as DeviceInfo).maxTotal;
189 |         }
190 |       }
191 |     }
192 |   }
193 | 
194 |   if (!device) {
195 |     memory.maxTotal = globalMaxTotal;
196 |   }
197 | 
198 |   idsToDelete.forEach(id => freeObjectById(id));
199 | 
200 |   return info;
201 | }
202 | 
203 | export function resetMaxTotal(device?: GPUDevice) {
204 |   const devices: GPUDevice[] = device ? [device] : [];
205 |   let newGlobalMaxTotal = 0;
206 |   if (!device) {
207 |     for (const [id, {ref, category}] of allWebGPUObjectsById.entries()) {
208 |       if (category === 'device') {
209 |         const webgpuObject = ref.deref();
210 |         if (webgpuObject) {
211 |           devices.push(webgpuObject as GPUDevice);
212 |         }
213 |       }
214 |     }
215 |   }
216 | 
217 |   for (const device of devices) {
218 |     const info = getWebGPUMemoryUsage(device);
219 |     const deviceId = device[webgpuMemoryIdSymbol];
220 |     const deviceInfo = allWebGPUObjectsById.get(deviceId) as DeviceInfo;
221 |     if (deviceInfo) {
222 |       const { total } = info.memory;
223 |       deviceInfo.maxTotal = total;
224 |       newGlobalMaxTotal += total;
225 |     }
226 |   }
227 | 
228 |   if (!device) {
229 |     globalRunningTotal = newGlobalMaxTotal;
230 |     globalMaxTotal = newGlobalMaxTotal;
231 |   }
232 | }
233 | 
234 | 
235 | function computeTextureMemorySize(texture: {
236 |   format: GPUTextureFormat,
237 |   dimension: GPUTextureDimension,
238 |   width: number,
239 |   height: number,
240 |   depthOrArrayLayers: number,
241 |   mipLevelCount: number,
242 |   sampleCount: number,
243 | }) {
244 |   const {
245 |     blockWidth,
246 |     blockHeight,
247 |     bytesPerBlock,
248 |   } = kTextureFormatInfo[texture.format];
249 | 
250 |   let size = 0;
251 |   let width = texture.width;
252 |   let height = texture.height;
253 |   let depth = texture.depthOrArrayLayers;
254 | 
255 |   for (let level = 0; level < texture.mipLevelCount; ++level) {
256 |     const blocksAcross = Math.ceil(width * texture.sampleCount / blockWidth);
257 |     const blocksDown = Math.ceil(height * texture.sampleCount / blockHeight);
258 |     const numBlocks = blocksAcross * blocksDown * depth;
259 |     const bytesUsed = numBlocks * bytesPerBlock;
260 |     size += bytesUsed;
261 |     width = Math.max(1, width / 2 | 0);
262 |     height = Math.max(1, height / 2 | 0);
263 |     depth = texture.dimension === '3d' ? Math.max(1, depth / 2 | 0) : depth;
264 |   }
265 | 
266 |   return size;
267 | }
268 | 
269 | function addBuffer(device: GPUDevice, buffer: GPUBuffer) {
270 |   const bytesUsed = buffer.size;
271 |   addDeviceMem(device, buffer, 'buffer', bytesUsed);
272 | }
273 | 
274 | function removeBuffer(buffer: GPUBuffer) {
275 |   freeObject(buffer);
276 | }
277 | 
278 | function addTexture(device: GPUDevice, texture: GPUTexture) {
279 |   const bytesUsed = computeTextureMemorySize(texture);
280 |   addDeviceMem(device, texture, 'texture', bytesUsed);
281 | }
282 | 
283 | function removeTexture(texture: GPUTexture) {
284 |   freeObject(texture);
285 | }
286 | 
287 | function addQuerySet(device: GPUDevice, querySet: GPUQuerySet) {
288 |   const bytesUsed = querySet.count * 8;
289 |   addDeviceMem(device, querySet, 'querySet', bytesUsed);
290 | }
291 | 
292 | function removeQuerySet(querySet: GPUQuerySet) {
293 |   freeObject(querySet);
294 | }
295 | 
296 | function addDevice(adapter: GPUAdapter, device: GPUDevice) {
297 |   addDeviceMem(device, device, 'device', 0);
298 |   const id = device[webgpuMemoryIdSymbol];
299 |   deviceIdToDeviceWeakRef.set(id, new WeakRef(device));
300 | }
301 | 
302 | function removeDevice(device: GPUDevice) {
303 |   const id = device[webgpuMemoryIdSymbol];
304 |   deviceIdToDeviceWeakRef.delete(id);
305 |   freeObject(device);
306 | }
307 | 
308 | // assuming there are, in general, 2 textures per canvas.
309 | // The one being displayed and the one being rendered to
310 | const kTexturesPerCanvas = 2;
311 | 
312 | function computeCanvasBytesUsed(context: GPUCanvasContext, format: GPUTextureFormat) {
313 |   const {width, height} = context.canvas;
314 |   return computeTextureMemorySize({
315 |     format,
316 |     width,
317 |     height,
318 |     depthOrArrayLayers: 1,
319 |     sampleCount: 1,
320 |     mipLevelCount: 1,
321 |     dimension: '2d',
322 |   }) * kTexturesPerCanvas;
323 | }
324 | 
325 | function addContext(context: GPUCanvasContext, dummy: any, config: GPUCanvasConfiguration) {
326 |   freeObject(context);
327 |   const format = config.format;
328 |   addDeviceMem(config.device, context, 'canvas', (context) => computeCanvasBytesUsed(context, format))
329 | }
330 | 
331 | function removeContext(context: GPUCanvasContext) {
332 |   freeObject(context);
333 | }
334 | 
335 | function resizeContext(context: GPUCanvasContext) {
336 |   const id = context[webgpuMemoryIdSymbol];
337 |   const info = allWebGPUObjectsById.get(id) as CanvasInfo;
338 |   const deviceInfo = allWebGPUObjectsById.get(info.deviceId) as DeviceInfo;
339 |   updateDeviceInfoRunningTotal(deviceInfo, -info.oldSize);
340 |   const size = (info.size as ComputeMemSizeFn)(context);
341 |   info.oldSize = size;
342 |   updateDeviceInfoRunningTotal(deviceInfo, size);
343 | }
344 | 
345 | /**
346 |  * Adds a wrapper function to a class method that gets called after the actual function
347 |  */
348 | //function wrapFunction(object, name: string, fn) {
349 | //  const origFn = object.prototype[name];
350 | //  object.prototype[name] = function(...args) {
351 | //    const result = origFn.call(this, ...args);
352 | //    if (result !== undefined && typeof result.then === 'function') {
353 | //      result.then(realResult => fn(this, realResult, ...args));
354 | //    } else {
355 | //      fn(this, result, ...args);
356 | //    }
357 | //    return result;
358 | //  };
359 | //}
360 | 
361 | function wrapFunction<K extends PropertyKey, T extends Record<K,(...args: Parameters<T[K]>) => any>>(
362 |     API: { prototype: T },
363 |     fnName: K,
364 |     fn: (t: T, obj: ReturnType<T[K]>, ...args: Parameters<T[K]>) => void) {
365 |   const origFn = API.prototype[fnName];
366 |   API.prototype[fnName] = function (this: T, ...args: Parameters<T[K]>) {
367 |     const result = origFn.call(this, ...args);
368 |     fn(this, result, ...args);
369 |     return result;
370 |   } as any;
371 | }
372 | 
373 | function wrapAsyncFunction<K extends PropertyKey, T extends Record<K,(...args: Parameters<T[K]>) => any>>(
374 |     API: { prototype: T },
375 |     fnName: K,
376 |     fn: (t: T, obj: Awaited<ReturnType<T[K]>>, ...args: Parameters<T[K]>) => void) {
377 |   const origFn = API.prototype[fnName];
378 |   API.prototype[fnName] = async function (this: T, ...args: Parameters<T[K]>) {
379 |     const result = await origFn.call(this, ...args);
380 |     fn(this, result, ...args);
381 |     return result;
382 |   } as any;
383 | }
384 | 
385 | declare global {
386 |   interface GPUDevice {
387 |     createSampler(descriptor?: any): GPUSampler;
388 |     createBindGroup(descriptor: any): GPUBindGroup;
389 |     createBindGroupLayout(descriptor: any): GPUBindGroupLayout;
390 |     createPipelineLayout(descriptor: any): GPUPipelineLayout;
391 |     createShaderModule(descriptor: any): GPUShaderModule;
392 |     createComputePipeline(descriptor: any): GPUComputePipeline;
393 |     createRenderPipeline(descriptor: any): GPURenderPipeline;
394 |     createComputePipelineAsync(descriptor: any): Promise<GPUComputePipeline>;
395 |     createRenderPipelineAsync(descriptor: any): Promise<GPURenderPipeline>;
396 |     prototype: GPUDevice; // Prototype should be the instance type for 'this' context    
397 |   }
398 | }
399 | 
400 | function wrapCreationDestroy(factoryClass: any, objectClass: any, fnName: string, category: Category) {
401 |   // @ts-ignore
402 |   wrapFunction(factoryClass, fnName, function (device: GPUDevice, object: WebGPUObject) {
403 |     addDeviceObject(device, object, category, 0);
404 |   });
405 |   if (objectClass.prototype.destroy) {
406 |     wrapFunction(objectClass, 'destroy', function(object: WebGPUObject) {
407 |       freeObject(object);
408 |     });
409 |   }
410 | }
411 | 
412 | if (typeof GPUAdapter !== 'undefined') {
413 |   wrapAsyncFunction(GPUAdapter, 'requestDevice', addDevice);
414 |   wrapFunction(GPUDevice, 'destroy', removeDevice);
415 | 
416 |   wrapFunction(GPUCanvasContext, 'configure', addContext);
417 |   wrapFunction(GPUCanvasContext, 'unconfigure', removeContext);
418 |   wrapFunction(GPUCanvasContext, 'getCurrentTexture', resizeContext)
419 | 
420 |   wrapFunction(GPUDevice, 'createBuffer', addBuffer);
421 |   wrapFunction(GPUBuffer, 'destroy', removeBuffer);
422 |   wrapFunction(GPUDevice, 'createTexture', addTexture);
423 |   wrapFunction(GPUTexture, 'destroy', removeTexture);
424 |   wrapFunction(GPUDevice, 'createQuerySet', addQuerySet);
425 |   wrapFunction(GPUQuerySet, 'destroy', removeQuerySet);
426 | 
427 |   wrapCreationDestroy(GPUDevice, GPUSampler, 'createSampler', 'sampler');
428 |   wrapCreationDestroy(GPUDevice, GPUBindGroup, 'createBindGroup', 'bindGroup');
429 |   wrapCreationDestroy(GPUDevice, GPUBindGroupLayout, 'createBindGroupLayout', 'bindGroupLayout');
430 |   wrapCreationDestroy(GPUDevice, GPUPipelineLayout, 'createPipelineLayout', 'pipelineLayout');
431 |   wrapCreationDestroy(GPUDevice, GPUShaderModule, 'createShaderModule', 'shaderModule');
432 |   wrapCreationDestroy(GPUDevice, GPUComputePipeline, 'createComputePipeline', 'computePipeline');
433 |   wrapCreationDestroy(GPUDevice, GPURenderPipeline, 'createRenderPipeline', 'renderPipeline');
434 |   wrapCreationDestroy(GPUDevice, GPUComputePipeline, 'createComputePipelineAsync', 'computePipeline');
435 |   wrapCreationDestroy(GPUDevice, GPURenderPipeline, 'createRenderPipelineAsync', 'renderPipeline');
436 |   //wrapCreationDestroy(GPUDevice, GPUCommandEncoder, 'createCommandEncoder', 'commandEncoder');
437 |   //wrapCreationDestroy(GPUDevice, GPURenderBundleEncoder, 'createRenderBundleEncoder', 'renderBundleEncoder');
438 |   // problem, no device for this
439 |   // GPURenderBundleEncoder, 'finish'
440 | }
441 | 


--------------------------------------------------------------------------------
/test/assert.js:
--------------------------------------------------------------------------------
  1 | /* global console */
  2 | 
  3 | export const config = {};
  4 | 
  5 | export function setConfig(options) {
  6 |   Object.assign(config, options);
  7 | }
  8 | 
  9 | function formatMsg(msg) {
 10 |   return `${msg}${msg ? ': ' : ''}`;
 11 | }
 12 | 
 13 | export function assertTruthy(actual, msg = '') {
 14 |   if (!config.noLint && !actual) {
 15 |     throw new Error(`${formatMsg(msg)}expected: truthy, actual: ${actual}`);
 16 |   }
 17 | }
 18 | 
 19 | export function assertFalsy(actual, msg = '') {
 20 |   if (!config.noLint && actual) {
 21 |     throw new Error(`${formatMsg(msg)}expected: falsy, actual: ${actual}`);
 22 |   }
 23 | }
 24 | 
 25 | export function assertStringMatchesRegEx(actual, regex, msg = '') {
 26 |   if (!config.noLint && !regex.test(actual)) {
 27 |     throw new Error(`${formatMsg(msg)}expected: ${regex}, actual: ${actual}`);
 28 |   }
 29 | }
 30 | 
 31 | export function assertEqual(actual, expected, msg = '') {
 32 |   if (!config.noLint && actual !== expected) {
 33 |     throw new Error(`${formatMsg(msg)}expected: ${expected} to equal actual: ${actual}`);
 34 |   }
 35 | }
 36 | 
 37 | export function assertNotEqual(actual, expected, msg = '') {
 38 |   if (!config.noLint && actual === expected) {
 39 |     throw new Error(`${formatMsg(msg)}expected: ${expected} to not equal actual: ${actual}`);
 40 |   }
 41 | }
 42 | 
 43 | export function assertThrowsWith(func, expectations, msg = '') {
 44 |   let error = '';
 45 |   if (config.throwOnError === false) {
 46 |     const origFn = console.error;
 47 |     const errors = [];
 48 |     console.error = function(...args) {
 49 |       errors.push(args.join(' '));
 50 |     };
 51 |     func();
 52 |     console.error = origFn;
 53 |     if (errors.length) {
 54 |       error = errors.join('\n');
 55 |       console.error(error);
 56 |     }
 57 |   } else {
 58 |     try {
 59 |       func();
 60 |     } catch (e) {
 61 |       console.error(e);  // eslint-disable-line
 62 |       error = e;
 63 |     }
 64 | 
 65 |   }
 66 | 
 67 |   if (config.noLint) {
 68 |     return;
 69 |   }
 70 | 
 71 |   assertStringMatchesREs(error.toString().replace(/\n/g, ' '), expectations, msg);
 72 | }
 73 | 
 74 | export function assertDoesNotThrow(func, msg = '') {
 75 |   let error = '';
 76 |   if (config.throwOnError === false) {
 77 |     const origFn = console.error;
 78 |     const errors = [];
 79 |     console.error = function(...args) {
 80 |       errors.push(args.join(' '));
 81 |     };
 82 |     func();
 83 |     console.error = origFn;
 84 |     if (errors.length) {
 85 |       error = errors.join('\n');
 86 |       console.error(error);
 87 |     }
 88 |   } else {
 89 |     try {
 90 |       func();
 91 |     } catch (e) {
 92 |       console.error(e);  // eslint-disable-line
 93 |       error = e;
 94 |     }
 95 | 
 96 |   }
 97 | 
 98 |   if (config.noLint) {
 99 |     return;
100 |   }
101 | 
102 |   assertEqual(error.toString(), '', msg);
103 | }
104 | 
105 | // check if it throws it throws with x
106 | export function assertIfThrowsItThrowsWith(func, expectations, msg = '') {
107 |   let error = '';
108 |   let threw = false;
109 |   if (config.throwOnError === false) {
110 |     const origFn = console.error;
111 |     const errors = [];
112 |     console.error = function(...args) {
113 |       errors.push(args.join(' '));
114 |     };
115 |     func();
116 |     console.error = origFn;
117 |     if (errors.length) {
118 |       error = errors.join('\n');
119 |       console.error(error);
120 |     }
121 |   } else {
122 |     try {
123 |       func();
124 |     } catch (e) {
125 |       console.error(e);  // eslint-disable-line
126 |       error = e;
127 |       threw = true;
128 |     }
129 | 
130 |   }
131 | 
132 |   if (config.noLint) {
133 |     return;
134 |   }
135 | 
136 |   if (!threw) {
137 |     return;
138 |   }
139 | 
140 |   assertStringMatchesREs(error.toString().replace(/\n/g, ' '), expectations, msg);
141 | }
142 | 
143 | function assertStringMatchesREs(actual, expectations, msg) {
144 |   for (const expectation of expectations) {
145 |     if (expectation instanceof RegExp) {
146 |       if (!expectation.test(actual)) {
147 |         throw new Error(`${formatMsg(msg)}expected: ${expectation}, actual: ${actual}`);
148 |       }
149 |     }
150 |   }
151 | 
152 | }
153 | export function assertWarnsWith(func, expectations, msg = '') {
154 |   const warnings = [];
155 |   const origWarnFn = console.warn;
156 |   console.warn = function(...args) {
157 |     origWarnFn.call(this, ...args);
158 |     warnings.push(args.join(' '));
159 |   };
160 | 
161 |   let error;
162 |   try {
163 |     func();
164 |   } catch (e) {
165 |     error = e;
166 |   }
167 | 
168 |   console.warn = origWarnFn;
169 | 
170 |   if (error) {
171 |     throw error;
172 |   }
173 | 
174 |   if (config.noLint) {
175 |     return;
176 |   }
177 | 
178 |   assertStringMatchesREs(warnings.join(' '), expectations, msg);
179 | }
180 | 
181 | export default {
182 |   false: assertFalsy,
183 |   equal: assertEqual,
184 |   matchesRegEx: assertStringMatchesRegEx,
185 |   notEqual: assertNotEqual,
186 |   throwsWith: assertThrowsWith,
187 |   true: assertTruthy,
188 | };


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>WebGPU Memory Tests</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="mocha.css">
 8 |     <style>
 9 |       #mocha #other {
10 |         text-decoration: underline;
11 |       }
12 |     </style>
13 |   </head>
14 |   <body>
15 |     <div id="mocha">
16 |     <div id="no-webgpu" style="color: red; display: none">WebGPU not supported by this browser. All test skipped</div>      
17 |     </div>
18 |     <script>
19 |       /* global window */
20 | 
21 |       // this is here for puppeteer. It's resolved in index.js
22 |       // so we can await on window.testPromiseInfo
23 |       function makePromise() {
24 |         const info = {};
25 |         const promise = new Promise((resolve, reject) => {
26 |           Object.assign(info, {resolve, reject});
27 |         });
28 |         info.promise = promise;
29 |         return info;
30 |       }
31 | 
32 |       window.testsPromiseInfo = makePromise();
33 |     </script>
34 |     <script src="mocha.js"></script>
35 |     <script type="module">
36 |     /* global document */
37 |     /* global mocha */
38 |     /* global URLSearchParams */
39 |     /* global window */
40 |     import {setConfig} from './assert.js';
41 | 
42 |     if (typeof GPUAdapter === 'undefined') {
43 |       document.querySelector('#no-webgpu').style.display = '';
44 |     }
45 | 
46 |     async function main() {
47 |       mocha.setup('bdd');
48 |       mocha.fullTrace();
49 |       mocha.timeout(0);
50 |       const query = Object.fromEntries(new URLSearchParams(window.location.search).entries());
51 |       if (query.timeout !== undefined) {
52 |         mocha.timeout(query.timeout);
53 |       }
54 | 
55 |       loadScript('index.js', 'module');
56 |     }
57 | 
58 |     function loadScript(url, type = 'text/javascript') {
59 |       return new Promise((resolve, reject) => {
60 |         const script = document.createElement('script');
61 |         script.onload = resolve;
62 |         script.onerror = reject;
63 |         script.type = type;
64 |         script.src = url;
65 |         document.head.appendChild(script);
66 |       });
67 |     }
68 | 
69 |     main();
70 |     </script>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
 1 | /* global mocha */
 2 | /* global URLSearchParams */
 3 | /* global window */
 4 | 
 5 | import './tests/buffer-tests.js';
 6 | import './tests/canvas-tests.js';
 7 | import './tests/device-tests.js';
 8 | import './tests/query-set-tests.js';
 9 | import './tests/texture-tests.js';
10 | 
11 | const settings = Object.fromEntries(new URLSearchParams(window.location.search).entries());
12 | if (settings.reporter) {
13 |   mocha.reporter(settings.reporter);
14 | }
15 | mocha.run((failures) => {
16 |   window.testsPromiseInfo.resolve(failures);
17 | });
18 | 


--------------------------------------------------------------------------------
/test/mocha-support.js:
--------------------------------------------------------------------------------
 1 | /* global window */
 2 | 
 3 | export const describe = window.describe;
 4 | export const it = window.it;
 5 | export const before = window.before;
 6 | export const after = window.after;
 7 | export const beforeEach = window.beforeEach;
 8 | export const afterEach = window.afterEach;
 9 | 
10 | 


--------------------------------------------------------------------------------
/test/mocha.css:
--------------------------------------------------------------------------------
  1 | @charset "utf-8";
  2 | 
  3 | :root {
  4 |   --mocha-color: #000;
  5 |   --mocha-bg-color: #fff;
  6 |   --mocha-pass-icon-color: #00d6b2;
  7 |   --mocha-pass-color: #fff;
  8 |   --mocha-pass-shadow-color: rgba(0,0,0,.2);
  9 |   --mocha-pass-mediump-color: #c09853;
 10 |   --mocha-pass-slow-color: #b94a48;
 11 |   --mocha-test-pending-color: #0b97c4;
 12 |   --mocha-test-pending-icon-color: #0b97c4;
 13 |   --mocha-test-fail-color: #c00;
 14 |   --mocha-test-fail-icon-color: #c00;
 15 |   --mocha-test-fail-pre-color: #000;
 16 |   --mocha-test-fail-pre-error-color: #c00;
 17 |   --mocha-test-html-error-color: #000;
 18 |   --mocha-box-shadow-color: #eee;
 19 |   --mocha-box-bottom-color: #ddd;
 20 |   --mocha-test-replay-color: #888;
 21 |   --mocha-test-replay-bg-color: #eee;
 22 |   --mocha-stats-color: #888;
 23 |   --mocha-stats-em-color: #000;
 24 |   --mocha-stats-hover-color: #eee;
 25 |   --mocha-error-color: #c00;
 26 | 
 27 |   --mocha-code-comment:  #ddd;
 28 |   --mocha-code-init: #2f6fad;
 29 |   --mocha-code-string: #5890ad;
 30 |   --mocha-code-keyword: #8a6343;
 31 |   --mocha-code-number: #2f6fad;
 32 | }
 33 | 
 34 | @media (prefers-color-scheme: dark) {
 35 |   :root {
 36 |      --mocha-color: #fff;
 37 |      --mocha-bg-color: #222;
 38 |      --mocha-pass-icon-color: #00d6b2;
 39 |      --mocha-pass-color: #222;
 40 |      --mocha-pass-shadow-color: rgba(255,255,255,.2);
 41 |      --mocha-pass-mediump-color: #f1be67;
 42 |      --mocha-pass-slow-color: #f49896;
 43 |      --mocha-test-pending-color: #0b97c4;
 44 |      --mocha-test-pending-icon-color: #0b97c4;
 45 |      --mocha-test-fail-color: #f44;
 46 |      --mocha-test-fail-icon-color: #f44;
 47 |      --mocha-test-fail-pre-color: #fff;
 48 |      --mocha-test-fail-pre-error-color: #f44;
 49 |      --mocha-test-html-error-color: #fff;
 50 |      --mocha-box-shadow-color: #444;
 51 |      --mocha-box-bottom-color: #555;
 52 |      --mocha-test-replay-color: #888;
 53 |      --mocha-test-replay-bg-color: #444;
 54 |      --mocha-stats-color: #aaa;
 55 |      --mocha-stats-em-color: #fff;
 56 |      --mocha-stats-hover-color: #444;
 57 |      --mocha-error-color: #f44;
 58 | 
 59 |      --mocha-code-comment: #ddd;
 60 |      --mocha-code-init: #9cc7f1;
 61 |      --mocha-code-string: #80d4ff;
 62 |      --mocha-code-keyword: #e3a470;
 63 |      --mocha-code-number: #4ca7ff;
 64 |   }
 65 | }
 66 | 
 67 | body {
 68 |   margin:0;
 69 |   background-color: var(--mocha-bg-color);
 70 |   color: var(--mocha-color);
 71 | }
 72 | 
 73 | #mocha {
 74 |   font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
 75 |   margin: 60px 50px;
 76 | }
 77 | 
 78 | #mocha ul,
 79 | #mocha li {
 80 |   margin: 0;
 81 |   padding: 0;
 82 | }
 83 | 
 84 | #mocha ul {
 85 |   list-style: none;
 86 | }
 87 | 
 88 | #mocha h1,
 89 | #mocha h2 {
 90 |   margin: 0;
 91 | }
 92 | 
 93 | #mocha h1 {
 94 |   margin-top: 15px;
 95 |   font-size: 1em;
 96 |   font-weight: 200;
 97 | }
 98 | 
 99 | #mocha h1 a {
100 |   text-decoration: none;
101 |   color: inherit;
102 | }
103 | 
104 | #mocha h1 a:hover {
105 |   text-decoration: underline;
106 | }
107 | 
108 | #mocha .suite .suite h1 {
109 |   margin-top: 0;
110 |   font-size: .8em;
111 | }
112 | 
113 | #mocha .hidden {
114 |   display: none;
115 | }
116 | 
117 | #mocha h2 {
118 |   font-size: 12px;
119 |   font-weight: normal;
120 |   cursor: pointer;
121 | }
122 | 
123 | #mocha .suite {
124 |   margin-left: 15px;
125 | }
126 | 
127 | #mocha .test {
128 |   margin-left: 15px;
129 |   overflow: hidden;
130 | }
131 | 
132 | #mocha .test.pending:hover h2::after {
133 |   content: '(pending)';
134 |   font-family: arial, sans-serif;
135 | }
136 | 
137 | #mocha .test.pass.medium .duration {
138 |   background: var(--mocha-pass-mediump-color);
139 | }
140 | 
141 | #mocha .test.pass.slow .duration {
142 |   background: var(--mocha-pass-slow-color);
143 | }
144 | 
145 | #mocha .test.pass::before {
146 |   content: '✓';
147 |   font-size: 12px;
148 |   display: block;
149 |   float: left;
150 |   margin-right: 5px;
151 |   color: var(--mocha-pass-icon-color);
152 | }
153 | 
154 | #mocha .test.pass .duration {
155 |   font-size: 9px;
156 |   margin-left: 5px;
157 |   padding: 2px 5px;
158 |   color: var(--mocha-pass-color);
159 |   -webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
160 |   -moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
161 |   box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
162 |   -webkit-border-radius: 5px;
163 |   -moz-border-radius: 5px;
164 |   -ms-border-radius: 5px;
165 |   -o-border-radius: 5px;
166 |   border-radius: 5px;
167 | }
168 | 
169 | #mocha .test.pass.fast .duration {
170 |   display: none;
171 | }
172 | 
173 | #mocha .test.pending {
174 |   color: var(--mocha-test-pending-color);
175 | }
176 | 
177 | #mocha .test.pending::before {
178 |   content: '◦';
179 |   color: var(--mocha-test-pending-icon-color);
180 | }
181 | 
182 | #mocha .test.fail {
183 |   color: var(--mocha-test-fail-color);
184 | }
185 | 
186 | #mocha .test.fail pre {
187 |   color: var(--mocha-test-fail-pre-color);
188 | }
189 | 
190 | #mocha .test.fail::before {
191 |   content: '✖';
192 |   font-size: 12px;
193 |   display: block;
194 |   float: left;
195 |   margin-right: 5px;
196 |   color: var(--mocha-pass-icon-color);
197 | }
198 | 
199 | #mocha .test pre.error {
200 |   color: var(--mocha-test-fail-pre-error-color);
201 |   max-height: 300px;
202 |   overflow: auto;
203 | }
204 | 
205 | #mocha .test .html-error {
206 |   overflow: auto;
207 |   color: var(--mocha-test-html-error-color);
208 |   display: block;
209 |   float: left;
210 |   clear: left;
211 |   font: 12px/1.5 monaco, monospace;
212 |   margin: 5px;
213 |   padding: 15px;
214 |   border: 1px solid var(--mocha-box-shadow-color);
215 |   max-width: 85%; /*(1)*/
216 |   max-width: -webkit-calc(100% - 42px);
217 |   max-width: -moz-calc(100% - 42px);
218 |   max-width: calc(100% - 42px); /*(2)*/
219 |   max-height: 300px;
220 |   word-wrap: break-word;
221 |   border-bottom-color: var(--mocha-box-bottom-color);
222 |   -webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
223 |   -moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
224 |   box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
225 |   -webkit-border-radius: 3px;
226 |   -moz-border-radius: 3px;
227 |   border-radius: 3px;
228 | }
229 | 
230 | #mocha .test .html-error pre.error {
231 |   border: none;
232 |   -webkit-border-radius: 0;
233 |   -moz-border-radius: 0;
234 |   border-radius: 0;
235 |   -webkit-box-shadow: 0;
236 |   -moz-box-shadow: 0;
237 |   box-shadow: 0;
238 |   padding: 0;
239 |   margin: 0;
240 |   margin-top: 18px;
241 |   max-height: none;
242 | }
243 | 
244 | /**
245 |  * (1): approximate for browsers not supporting calc
246 |  * (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border)
247 |  *      ^^ seriously
248 |  */
249 | #mocha .test pre {
250 |   display: block;
251 |   float: left;
252 |   clear: left;
253 |   font: 12px/1.5 monaco, monospace;
254 |   margin: 5px;
255 |   padding: 15px;
256 |   border: 1px solid var(--mocha-box-shadow-color);
257 |   max-width: 85%; /*(1)*/
258 |   max-width: -webkit-calc(100% - 42px);
259 |   max-width: -moz-calc(100% - 42px);
260 |   max-width: calc(100% - 42px); /*(2)*/
261 |   word-wrap: break-word;
262 |   border-bottom-color: var(--mocha-box-bottom-color);
263 |   -webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
264 |   -moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
265 |   box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
266 |   -webkit-border-radius: 3px;
267 |   -moz-border-radius: 3px;
268 |   border-radius: 3px;
269 | }
270 | 
271 | #mocha .test h2 {
272 |   position: relative;
273 | }
274 | 
275 | #mocha .test a.replay {
276 |   position: absolute;
277 |   top: 3px;
278 |   right: 0;
279 |   text-decoration: none;
280 |   vertical-align: middle;
281 |   display: block;
282 |   width: 15px;
283 |   height: 15px;
284 |   line-height: 15px;
285 |   text-align: center;
286 |   background: var(--mocha-test-replay-bg-color);
287 |   font-size: 15px;
288 |   -webkit-border-radius: 15px;
289 |   -moz-border-radius: 15px;
290 |   border-radius: 15px;
291 |   -webkit-transition:opacity 200ms;
292 |   -moz-transition:opacity 200ms;
293 |   -o-transition:opacity 200ms;
294 |   transition: opacity 200ms;
295 |   opacity: 0.3;
296 |   color: var(--mocha-test-replay-color);
297 | }
298 | 
299 | #mocha .test:hover a.replay {
300 |   opacity: 1;
301 | }
302 | 
303 | #mocha-report.pass .test.fail {
304 |   display: none;
305 | }
306 | 
307 | #mocha-report.fail .test.pass {
308 |   display: none;
309 | }
310 | 
311 | #mocha-report.pending .test.pass,
312 | #mocha-report.pending .test.fail {
313 |   display: none;
314 | }
315 | #mocha-report.pending .test.pass.pending {
316 |   display: block;
317 | }
318 | 
319 | #mocha-error {
320 |   color: var(--mocha-error-color);
321 |   font-size: 1.5em;
322 |   font-weight: 100;
323 |   letter-spacing: 1px;
324 | }
325 | 
326 | #mocha-stats {
327 |   position: fixed;
328 |   top: 15px;
329 |   right: 10px;
330 |   font-size: 12px;
331 |   margin: 0;
332 |   color: var(--mocha-stats-color);
333 |   z-index: 1;
334 | }
335 | 
336 | #mocha-stats .progress {
337 |   float: right;
338 |   padding-top: 0;
339 | 
340 |   /**
341 |    * Set safe initial values, so mochas .progress does not inherit these
342 |    * properties from Bootstrap .progress (which causes .progress height to
343 |    * equal line height set in Bootstrap).
344 |    */
345 |   height: auto;
346 |   -webkit-box-shadow: none;
347 |   -moz-box-shadow: none;
348 |   box-shadow: none;
349 |   background-color: initial;
350 | }
351 | 
352 | #mocha-stats em {
353 |   color: var(--mocha-stats-em-color);
354 | }
355 | 
356 | #mocha-stats a {
357 |   text-decoration: none;
358 |   color: inherit;
359 | }
360 | 
361 | #mocha-stats a:hover {
362 |   border-bottom: 1px solid var(--mocha-stats-hover-color);
363 | }
364 | 
365 | #mocha-stats li {
366 |   display: inline-block;
367 |   margin: 0 5px;
368 |   list-style: none;
369 |   padding-top: 11px;
370 | }
371 | 
372 | #mocha-stats canvas {
373 |   width: 40px;
374 |   height: 40px;
375 | }
376 | 
377 | #mocha code .comment { color: var(--mocha-code-comment); }
378 | #mocha code .init { color: var(--mocha-code-init); }
379 | #mocha code .string { color: var(--mocha-code-string); }
380 | #mocha code .keyword { color: var(--mocha-code-keyword); }
381 | #mocha code .number { color: var(--mocha-code-number); }
382 | 
383 | @media screen and (max-device-width: 480px) {
384 |   #mocha {
385 |     margin: 60px 0px;
386 |   }
387 | 
388 |   #mocha #stats {
389 |     position: absolute;
390 |   }
391 | }
392 | 


--------------------------------------------------------------------------------
/test/puppeteer.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | import puppeteer from  'puppeteer';
  4 | import path from  'path';
  5 | import fs from 'fs';
  6 | import express from 'express';
  7 | import url from 'url';
  8 | const app = express();
  9 | const port = 3000;
 10 | const __dirname = path.dirname(url.fileURLToPath(import.meta.url));  // eslint-disable-line
 11 | 
 12 | app.use(express.static(path.dirname(__dirname)));
 13 | const server = app.listen(port, () => {
 14 |   console.log(`Example app listening on port ${port}!`);
 15 |   test(port);
 16 | });
 17 | 
 18 | function makePromiseInfo() {
 19 |   const info = {};
 20 |   const promise = new Promise((resolve, reject) => {
 21 |     Object.assign(info, {resolve, reject});
 22 |   });
 23 |   info.promise = promise;
 24 |   return info;
 25 | }
 26 | 
 27 | const exampleInjectJS = fs.readFileSync('test/src/js/example-inject.js', {encoding: 'utf-8'});
 28 | 
 29 | function getExamples(port) {
 30 |   return []; /*fs.readdirSync('examples')
 31 |       .filter(f => f.endsWith('.html'))
 32 |       .map(f => ({
 33 |         url: `http://localhost:${port}/examples/${f}`,
 34 |         js: exampleInjectJS,
 35 |         screenshot: true,
 36 |       }));*/
 37 | }
 38 | 
 39 | async function test(port) {
 40 |   const browser = await puppeteer.launch({
 41 |     headless: "new",
 42 |     args: [
 43 |       //'--enable-unsafe-webgpu',
 44 |       //'--enable-webgpu-developer-features',
 45 |       //'--use-angle=swiftshader',
 46 |       '--user-agent=puppeteer',
 47 |       '--no-sandbox',
 48 |     ],
 49 |   });
 50 |   const page = await browser.newPage();
 51 | 
 52 |   page.on('console', async e => {
 53 |     const args = await Promise.all(e.args().map(a => a.jsonValue()));
 54 |     console.log(...args);
 55 |   });
 56 | 
 57 |   let totalFailures = 0;
 58 |   let waitingPromiseInfo;
 59 | 
 60 |   // Get the "viewport" of the page, as reported by the page.
 61 |   page.on('domcontentloaded', async () => {
 62 |     const failures = await page.evaluate(() => {
 63 |       return window.testsPromiseInfo.promise;
 64 |     });
 65 | 
 66 |     totalFailures += failures;
 67 | 
 68 |     waitingPromiseInfo.resolve();
 69 |   });
 70 | 
 71 |   const testPages = [
 72 |     {url: `http://localhost:${port}/test/index.html?reporter=spec` },
 73 |     ...getExamples(port),
 74 |   ];
 75 | 
 76 |   for (const {url, js, screenshot} of testPages) {
 77 |     waitingPromiseInfo = makePromiseInfo();
 78 |     console.log(`===== [ ${url} ] =====`);
 79 |     const id = js
 80 |       ? await page.evaluateOnNewDocument(js)
 81 |       : undefined;
 82 |     await page.goto(url);
 83 |     await page.waitForNetworkIdle();
 84 |     if (js) {
 85 |       await page.evaluate(() => {
 86 |         setTimeout(() => {
 87 |           window.testsPromiseInfo.resolve(0);
 88 |         }, 10);
 89 |       });
 90 |     }
 91 |     await waitingPromiseInfo.promise;
 92 |     if (screenshot) {
 93 |       const dir = 'screenshots';
 94 |       fs.mkdirSync(dir, { recursive: true });
 95 |       const name = /\/([a-z0-9_-]+).html/.exec(url)[1];
 96 |       const path = `${dir}/${name}.png`;
 97 |       await page.screenshot({path});
 98 |     }
 99 |     if (js) {
100 |       await page.removeScriptToEvaluateOnNewDocument(id.identifier);
101 |     }
102 |   }
103 | 
104 |   await browser.close();
105 |   server.close();
106 | 
107 |   process.exit(totalFailures ? 1 : 0);  // eslint-disable-line
108 | }
109 | 


--------------------------------------------------------------------------------
/test/src/js/example-inject.js:
--------------------------------------------------------------------------------
 1 | /* global GPUAdapter */
 2 | // eslint-disable-next-line strict
 3 | "use strict";
 4 | 
 5 | function makePromise() {
 6 |   const info = {};
 7 |   const promise = new Promise((resolve, reject) => {
 8 |     Object.assign(info, {resolve, reject});
 9 |   });
10 |   info.promise = promise;
11 |   return info;
12 | }
13 | 
14 | window.testsPromiseInfo = makePromise();
15 | 
16 | window.addEventListener('error', (event) => {
17 |   console.error(event);
18 |   window.testsPromiseInfo.reject(1);
19 | });
20 | 
21 | // eslint-disable-next-line no-lone-blocks
22 | {
23 |   GPUAdapter.prototype.requestDevice = (function (origFn) {
24 |     return async function (...args) {
25 |       const device = await origFn.call(this, args);
26 |       if (device) {
27 |         device.addEventListener('uncapturederror', function (e) {
28 |           console.error(e.error.message);
29 |           window.testsPromiseInfo.reject(1);
30 |         });
31 |       }
32 |       return device;
33 |     };
34 |   })(GPUAdapter.prototype.requestDevice);
35 | }
36 | 


--------------------------------------------------------------------------------
/test/tests/buffer-tests.js:
--------------------------------------------------------------------------------
 1 | import {assertEqual} from '../assert.js';
 2 | import {describe, it} from '../mocha-support.js';
 3 | import {getWebGPUMemoryUsage, resetMaxTotal} from '../../dist/1.x/webgpu-memory.module.js';
 4 | 
 5 | describe('buffer tests', () => {
 6 | 
 7 |   beforeEach(() => {
 8 |     resetMaxTotal();
 9 |   });
10 | 
11 |   it('tracks buffers', async function() {
12 |     const adapter = await navigator.gpu?.requestAdapter();
13 |     const device = await adapter?.requestDevice();
14 |     if (!device) {
15 |       this.skip();
16 |       return;
17 |     }
18 | 
19 |     {
20 |       const info = getWebGPUMemoryUsage();
21 |       assertEqual(info.memory.buffer, 0);
22 |       assertEqual(info.resources.buffer, 0);
23 |     }
24 | 
25 |     const buffer1 = device.createBuffer({
26 |       size: 128,
27 |       usage: GPUBufferUsage.COPY_DST,
28 |     });
29 | 
30 |     {
31 |       const info = getWebGPUMemoryUsage();
32 |       assertEqual(info.memory.buffer, 128);
33 |       assertEqual(info.resources.buffer, 1);
34 |     }
35 | 
36 |     const buffer2 = device.createBuffer({
37 |       size: 256,
38 |       usage: GPUBufferUsage.COPY_DST,
39 |     });
40 | 
41 |     {
42 |       const info = getWebGPUMemoryUsage();
43 |       assertEqual(info.memory.buffer, 128 + 256);
44 |       assertEqual(info.resources.buffer, 2);
45 |     }
46 | 
47 |     buffer1.destroy();
48 | 
49 |     {
50 |       const info = getWebGPUMemoryUsage();
51 |       assertEqual(info.memory.buffer, 256);
52 |       assertEqual(info.resources.buffer, 1);
53 |     }
54 | 
55 |     buffer2.destroy();
56 | 
57 |     {
58 |       const info = getWebGPUMemoryUsage();
59 |       assertEqual(info.memory.buffer, 0);
60 |       assertEqual(info.resources.buffer, 0);
61 |     }
62 | 
63 |     device.destroy();
64 |   });
65 | 
66 | });


--------------------------------------------------------------------------------
/test/tests/canvas-tests.js:
--------------------------------------------------------------------------------
  1 | import {assertEqual, assertFalsy} from '../assert.js';
  2 | import {describe, it} from '../mocha-support.js';
  3 | import {getWebGPUMemoryUsage, resetMaxTotal} from '../../dist/1.x/webgpu-memory.module.js';
  4 | 
  5 | describe('canvas tests', () => {
  6 | 
  7 |   const kInitialCanvasSize = 300 * 150 * 4 * 2;
  8 |   const kNewCanvasSize1 = 500 * 150 * 4 * 2;
  9 |   const kNewCanvasSize2 = 400 * 150 * 4 * 2;
 10 | 
 11 |   beforeEach(() => {
 12 |     resetMaxTotal();
 13 |   });
 14 | 
 15 |   async function testCanvas(canvas1, canvas2) {
 16 |     const adapter = await navigator.gpu?.requestAdapter();
 17 |     const device = await adapter?.requestDevice();
 18 |     if (!device) {
 19 |       this.skip();
 20 |       return;
 21 |     }
 22 | 
 23 |     {
 24 |       const info = getWebGPUMemoryUsage();
 25 |       assertFalsy(info.resources.canvas, 0);
 26 |     }
 27 | 
 28 |     const context1 = canvas1.getContext('webgpu');
 29 |     context1.configure({
 30 |       format: 'bgra8unorm',
 31 |       device,
 32 |       alphaMode: 'opaque',
 33 |     });
 34 | 
 35 |     {
 36 |       const info = getWebGPUMemoryUsage();
 37 |       assertEqual(info.resources.canvas, 1);
 38 |       assertEqual(info.memory.total, kInitialCanvasSize);
 39 |       assertEqual(info.memory.maxTotal, kInitialCanvasSize);
 40 |       assertEqual(info.memory.canvas, kInitialCanvasSize);
 41 |     }
 42 | 
 43 |     const context2 = canvas2.getContext('webgpu');
 44 |     context2.configure({
 45 |       format: 'bgra8unorm',
 46 |       device,
 47 |       alphaMode: 'opaque',
 48 |     });
 49 | 
 50 |     {
 51 |       const info = getWebGPUMemoryUsage();
 52 |       assertEqual(info.resources.canvas, 2);
 53 |       assertEqual(info.memory.total, kInitialCanvasSize * 2);
 54 |       assertEqual(info.memory.maxTotal, kInitialCanvasSize * 2);
 55 |       assertEqual(info.memory.canvas, kInitialCanvasSize * 2);
 56 |     }
 57 | 
 58 |     canvas1.width = 500;
 59 |     context1.getCurrentTexture();
 60 | 
 61 |     {
 62 |       const info = getWebGPUMemoryUsage();
 63 |       assertEqual(info.resources.canvas, 2);
 64 |       assertEqual(info.memory.total, kNewCanvasSize1 + kInitialCanvasSize);
 65 |       assertEqual(info.memory.maxTotal, kNewCanvasSize1 + kInitialCanvasSize);
 66 |       assertEqual(info.memory.canvas, kNewCanvasSize1 + kInitialCanvasSize);
 67 |     }
 68 | 
 69 |     // smaller than before. maxTotal should stay large
 70 |     canvas1.width = 400;
 71 |     context1.getCurrentTexture();
 72 | 
 73 |     {
 74 |       const info = getWebGPUMemoryUsage();
 75 |       assertEqual(info.resources.canvas, 2);
 76 |       assertEqual(info.memory.total, kNewCanvasSize2 + kInitialCanvasSize);
 77 |       assertEqual(info.memory.maxTotal, kNewCanvasSize1 + kInitialCanvasSize);
 78 |       assertEqual(info.memory.canvas, kNewCanvasSize2 + kInitialCanvasSize);
 79 |     }
 80 | 
 81 |     context1.unconfigure();
 82 | 
 83 |     {
 84 |       const info = getWebGPUMemoryUsage();
 85 |       assertEqual(info.resources.canvas, 1);
 86 |       assertEqual(info.memory.total, kInitialCanvasSize);
 87 |       assertEqual(info.memory.maxTotal, kNewCanvasSize1 + kInitialCanvasSize);
 88 |       assertEqual(info.memory.canvas, kInitialCanvasSize);
 89 |     }
 90 | 
 91 |     context2.unconfigure();
 92 | 
 93 |     {
 94 |       const info = getWebGPUMemoryUsage();
 95 |       assertFalsy(info.resources.canvas);
 96 |       assertEqual(info.memory.total, 0);
 97 |       assertEqual(info.memory.maxTotal, kNewCanvasSize1 + kInitialCanvasSize);
 98 |       assertEqual(info.memory.canvas, 0);
 99 |     }
100 | 
101 |     device.destroy();
102 |   }
103 | 
104 |   it('tracks HTMLCanvasElement', async function() {
105 |     const canvas1 = document.createElement('canvas');
106 |     const canvas2 = document.createElement('canvas');
107 |     await testCanvas(canvas1, canvas2);
108 |   });
109 | 
110 |   it('tracks OffscreenCanvas', async function() {
111 |     const canvas1 = new OffscreenCanvas(300, 150);
112 |     const canvas2 = new OffscreenCanvas(300, 150);
113 |     await testCanvas(canvas1, canvas2);
114 |   });
115 | 
116 |   it('swaps canvases when reconfigured to a different device', async function() {
117 |     const adapter1 = await navigator.gpu?.requestAdapter();
118 |     const device1 = await adapter1?.requestDevice();
119 |     const adapter2 = await navigator.gpu?.requestAdapter();
120 |     const device2 = await adapter2?.requestDevice();
121 |     if (!device1 || ! device2) {
122 |       if (device1) {
123 |         device1.destroy();
124 |       }
125 |       if (device2) {
126 |         device2.destroy();
127 |       }
128 |       this.skip();
129 |       return;
130 |     }
131 | 
132 |     const canvas = new OffscreenCanvas(300, 150);
133 |     const context = canvas.getContext('webgpu');
134 |     context.configure({
135 |       device: device1,
136 |       format: 'bgra8unorm',
137 |       alphaMode: 'opaque',
138 |     });
139 | 
140 |     {
141 |       const info = getWebGPUMemoryUsage(device1);
142 |       assertEqual(info.resources.canvas, 1);
143 |       assertEqual(info.memory.total, kInitialCanvasSize);
144 |       assertEqual(info.memory.canvas, kInitialCanvasSize);
145 |     }
146 | 
147 |     {
148 |       const info = getWebGPUMemoryUsage(device2);
149 |       assertFalsy(info.resources.canvas, 0);
150 |       assertEqual(info.memory.total, 0);
151 |       assertEqual(info.memory.canvas, 0);
152 |     }
153 | 
154 |     context.configure({
155 |       device: device2,
156 |       format: 'bgra8unorm',
157 |       alphaMode: 'opaque',
158 |     });
159 | 
160 |     {
161 |       const info = getWebGPUMemoryUsage(device1);
162 |       assertFalsy(info.resources.canvas, 0);
163 |       assertEqual(info.memory.total, 0);
164 |       assertEqual(info.memory.canvas, 0);
165 |     }
166 | 
167 |     {
168 |       const info = getWebGPUMemoryUsage(device2);
169 |       assertEqual(info.resources.canvas, 1);
170 |       assertEqual(info.memory.total, kInitialCanvasSize);
171 |       assertEqual(info.memory.canvas, kInitialCanvasSize);
172 |     }
173 | 
174 |     device1.destroy()
175 |     device2.destroy();
176 | 
177 |   });
178 | 
179 | });


--------------------------------------------------------------------------------
/test/tests/device-tests.js:
--------------------------------------------------------------------------------
  1 | import {assertEqual, assertFalsy} from '../assert.js';
  2 | import {describe, it} from '../mocha-support.js';
  3 | import {getWebGPUMemoryUsage, resetMaxTotal} from '../../dist/1.x/webgpu-memory.module.js';
  4 | 
  5 | describe('device tests', () => {
  6 | 
  7 |   beforeEach(() => {
  8 |     resetMaxTotal();
  9 |   });
 10 | 
 11 |   it('tracks devices separately', async function() {
 12 |     const adapter1 = await navigator.gpu?.requestAdapter();
 13 | 
 14 |     if (!adapter1) {
 15 |       this.skip();
 16 |       return;
 17 |     }
 18 | 
 19 |     {
 20 |       const info = getWebGPUMemoryUsage();
 21 |       assertFalsy(info.resources.device);
 22 |     }
 23 | 
 24 |     const device1 = await adapter1?.requestDevice();
 25 | 
 26 |     if (!device1) {
 27 |       this.skip();
 28 |       return;
 29 |     }
 30 | 
 31 |     {
 32 |       const info = getWebGPUMemoryUsage();
 33 |       assertEqual(info.resources.device, 1);
 34 |     }
 35 | 
 36 |     const adapter2 = await navigator.gpu?.requestAdapter();
 37 |     const device2 = await adapter2?.requestDevice();
 38 |     if (!device2) {
 39 |       device1.destroy();
 40 |       this.skip();
 41 |       return;
 42 |     }
 43 | 
 44 |     {
 45 |       const info = getWebGPUMemoryUsage();
 46 |       assertEqual(info.memory.buffer, 0);
 47 |       assertEqual(info.resources.buffer, 0);
 48 |       assertEqual(info.resources.device, 2);
 49 |     }
 50 | 
 51 |     const buffer1 = device1.createBuffer({
 52 |       size: 128,
 53 |       usage: GPUBufferUsage.COPY_DST,
 54 |     });
 55 | 
 56 |     {
 57 |       const info = getWebGPUMemoryUsage();
 58 |       assertEqual(info.memory.buffer, 128);
 59 |       assertEqual(info.memory.maxTotal, 128);
 60 |       assertEqual(info.resources.buffer, 1);
 61 |       assertEqual(info.resources.device, 2);
 62 |     }
 63 | 
 64 |     {
 65 |       const info = getWebGPUMemoryUsage(device1);
 66 |       assertEqual(info.memory.buffer, 128);
 67 |       assertEqual(info.memory.maxTotal, 128);
 68 |       assertEqual(info.resources.buffer, 1);
 69 |       assertEqual(info.resources.device, 1);
 70 |     }
 71 | 
 72 |     {
 73 |       const info = getWebGPUMemoryUsage(device2);
 74 |       assertEqual(info.memory.buffer, 0);
 75 |       assertEqual(info.memory.maxTotal, 0);
 76 |       assertEqual(info.resources.buffer, 0);
 77 |       assertEqual(info.resources.device, 1);
 78 |     }
 79 | 
 80 |     const buffer2 = device2.createBuffer({
 81 |       size: 256,
 82 |       usage: GPUBufferUsage.COPY_DST,
 83 |     });
 84 | 
 85 |     {
 86 |       const info = getWebGPUMemoryUsage();
 87 |       assertEqual(info.memory.buffer, 128 + 256);
 88 |       assertEqual(info.memory.maxTotal, 128 + 256);
 89 |       assertEqual(info.resources.buffer, 2);
 90 |     }
 91 | 
 92 |     {
 93 |       const info = getWebGPUMemoryUsage(device1);
 94 |       assertEqual(info.memory.buffer, 128);
 95 |       assertEqual(info.memory.maxTotal, 128);
 96 |       assertEqual(info.resources.buffer, 1);
 97 |     }
 98 | 
 99 |     {
100 |       const info = getWebGPUMemoryUsage(device2);
101 |       assertEqual(info.memory.buffer, 256);
102 |       assertEqual(info.memory.maxTotal, 256);
103 |       assertEqual(info.resources.buffer, 1);
104 |     }
105 | 
106 |     buffer1.destroy();
107 | 
108 |     {
109 |       const info = getWebGPUMemoryUsage();
110 |       assertEqual(info.memory.buffer, 256);
111 |       assertEqual(info.memory.maxTotal, 256 + 128);
112 |       assertEqual(info.resources.buffer, 1);
113 |     }
114 | 
115 |     {
116 |       const info = getWebGPUMemoryUsage(device1);
117 |       assertEqual(info.memory.buffer, 0);
118 |       assertEqual(info.memory.maxTotal, 128);
119 |       assertEqual(info.resources.buffer, 0);
120 |     }
121 | 
122 |     {
123 |       const info = getWebGPUMemoryUsage(device2);
124 |       assertEqual(info.memory.buffer, 256);
125 |       assertEqual(info.memory.maxTotal, 256);
126 |       assertEqual(info.resources.buffer, 1);
127 |     }
128 | 
129 |     buffer2.destroy();
130 | 
131 |     {
132 |       const info = getWebGPUMemoryUsage();
133 |       assertEqual(info.memory.buffer, 0);
134 |       assertEqual(info.memory.maxTotal, 256 + 128);
135 |       assertEqual(info.resources.buffer, 0);
136 |     }
137 | 
138 |     {
139 |       const info = getWebGPUMemoryUsage(device1);
140 |       assertEqual(info.memory.buffer, 0);
141 |       assertEqual(info.memory.maxTotal, 128);
142 |       assertEqual(info.resources.buffer, 0);
143 |     }
144 | 
145 |     {
146 |       const info = getWebGPUMemoryUsage(device2);
147 |       assertEqual(info.memory.buffer, 0);
148 |       assertEqual(info.memory.maxTotal, 256);
149 |       assertEqual(info.resources.buffer, 0);
150 |     }
151 | 
152 |     device1.destroy();
153 | 
154 | 
155 |     {
156 |       const info = getWebGPUMemoryUsage();
157 |       assertEqual(info.memory.maxTotal, 256 + 128);
158 |       assertEqual(info.resources.device, 1);
159 |     }
160 | 
161 |     device2.destroy();
162 | 
163 |     {
164 |       const info = getWebGPUMemoryUsage();
165 |       assertFalsy(info.resources.device);
166 |       assertEqual(info.memory.maxTotal, 256 + 128);
167 |     }
168 |   });
169 | 
170 |   it('frees resources on device destroy', async function() {
171 |     const adapter = await navigator.gpu?.requestAdapter();
172 |     const device = await adapter?.requestDevice();
173 |     if (!device) {
174 |       this.skip();
175 |       return;
176 |     }
177 | 
178 |     device.createBuffer({
179 |       size: 128,
180 |       usage: GPUBufferUsage.COPY_DST,
181 |     });
182 | 
183 |     {
184 |       const info = getWebGPUMemoryUsage();
185 |       assertEqual(info.memory.buffer, 128);
186 |       assertEqual(info.resources.buffer, 1);
187 |     }
188 | 
189 |     device.destroy();
190 | 
191 |     {
192 |       const info = getWebGPUMemoryUsage();
193 |       assertEqual(info.memory.buffer, 0);
194 |       assertEqual(info.resources.buffer, 0);
195 |     }
196 | 
197 |     {
198 |       const info = getWebGPUMemoryUsage(device);
199 |       assertEqual(info.memory.buffer, 0);
200 |       assertEqual(info.resources.buffer, 0);
201 |     }
202 |   });
203 | 
204 |   it('resets maxTotal', async () => {
205 | 
206 |     const adapter1 = await navigator.gpu?.requestAdapter();
207 |     if (!adapter1) {
208 |       this.skip();
209 |       return;
210 |     }
211 | 
212 |     const device1 = await adapter1?.requestDevice();
213 |     if (!device1) {
214 |       this.skip();
215 |       return;
216 |     }
217 | 
218 |     const adapter2 = await navigator.gpu?.requestAdapter();
219 |     const device2 = await adapter2?.requestDevice();
220 |     if (!device2) {
221 |       device1.destroy();
222 |       this.skip();
223 |       return;
224 |     }
225 | 
226 |     const buffer1 = device1.createBuffer({
227 |       size: 128,
228 |       usage: GPUBufferUsage.COPY_DST,
229 |     });
230 |     const buffer2 = device2.createBuffer({
231 |       size: 256,
232 |       usage: GPUBufferUsage.COPY_DST,
233 |     });
234 | 
235 |     {
236 |       const info = getWebGPUMemoryUsage();
237 |       assertEqual(info.memory.buffer, 128 + 256);
238 |       assertEqual(info.memory.maxTotal, 128 + 256);
239 |     }
240 | 
241 |     resetMaxTotal(device1);
242 | 
243 |     {
244 |       const info = getWebGPUMemoryUsage();
245 |       assertEqual(info.memory.buffer, 128 + 256);
246 |       assertEqual(info.memory.maxTotal, 128 + 256);
247 |     }
248 | 
249 |     buffer1.destroy();
250 | 
251 |     {
252 |       const info = getWebGPUMemoryUsage();
253 |       assertEqual(info.memory.buffer, 256);
254 |       assertEqual(info.memory.maxTotal, 128 + 256);
255 |     }
256 | 
257 |     resetMaxTotal(device1);
258 | 
259 |     {
260 |       const info = getWebGPUMemoryUsage();
261 |       assertEqual(info.memory.buffer, 256);
262 |       assertEqual(info.memory.maxTotal, 128 + 256);
263 |     }
264 | 
265 |     {
266 |       const info = getWebGPUMemoryUsage(device1);
267 |       assertEqual(info.memory.buffer, 0);
268 |       assertEqual(info.memory.maxTotal, 0);
269 |     }
270 | 
271 |     {
272 |       const info = getWebGPUMemoryUsage(device2);
273 |       assertEqual(info.memory.buffer, 256);
274 |       assertEqual(info.memory.maxTotal, 256);
275 |     }
276 | 
277 |     buffer2.destroy();
278 |     resetMaxTotal(device2);
279 | 
280 |     {
281 |       const info = getWebGPUMemoryUsage();
282 |       assertEqual(info.memory.buffer, 0);
283 |       assertEqual(info.memory.maxTotal, 128 + 256);
284 |     }
285 | 
286 |     {
287 |       const info = getWebGPUMemoryUsage(device2);
288 |       assertEqual(info.memory.buffer, 0);
289 |       assertEqual(info.memory.maxTotal, 0);
290 |     }
291 | 
292 |     const buffer3 = device1.createBuffer({
293 |       size: 128,
294 |       usage: GPUBufferUsage.COPY_DST,
295 |     });
296 |     const buffer4 = device1.createBuffer({
297 |       size: 256,
298 |       usage: GPUBufferUsage.COPY_DST,
299 |     });
300 | 
301 |     {
302 |       const info = getWebGPUMemoryUsage();
303 |       assertEqual(info.memory.buffer, 128 + 256);
304 |       assertEqual(info.memory.maxTotal, 128 + 256);
305 |     }
306 | 
307 |     buffer3.destroy();
308 |     buffer4.destroy();
309 | 
310 |     {
311 |       const info = getWebGPUMemoryUsage();
312 |       assertEqual(info.memory.buffer, 0);
313 |       assertEqual(info.memory.maxTotal, 128 + 256);
314 |     }
315 | 
316 |     resetMaxTotal();
317 | 
318 |     {
319 |       const info = getWebGPUMemoryUsage();
320 |       assertEqual(info.memory.buffer, 0);
321 |       assertEqual(info.memory.maxTotal, 0);
322 |     }
323 | 
324 |     {
325 |       const info = getWebGPUMemoryUsage(device1);
326 |       assertEqual(info.memory.buffer, 0);
327 |       assertEqual(info.memory.maxTotal, 0);
328 |     }
329 | 
330 |     {
331 |       const info = getWebGPUMemoryUsage(device2);
332 |       assertEqual(info.memory.buffer, 0);
333 |       assertEqual(info.memory.maxTotal, 0);
334 |     }
335 | 
336 |   });
337 | 
338 |   it('tracks maxTotal - regression test 01', async () => {
339 |     // bug where maxTotal is reset on allocation
340 |     const adapter = await navigator.gpu?.requestAdapter();
341 |     if (!adapter) {
342 |       this.skip();
343 |       return;
344 |     }
345 | 
346 |     const device = await adapter?.requestDevice();
347 |     if (!device) {
348 |       this.skip();
349 |       return;
350 |     }
351 | 
352 |     const buffer1 = device.createBuffer({
353 |       size: 128,
354 |       usage: GPUBufferUsage.COPY_DST,
355 |     });
356 |     const buffer2 = device.createBuffer({
357 |       size: 256,
358 |       usage: GPUBufferUsage.COPY_DST,
359 |     });
360 |     buffer2.destroy();
361 |     const buffer3 = device.createBuffer({
362 |       size: 128,
363 |       usage: GPUBufferUsage.COPY_DST,
364 |     });
365 | 
366 |     {
367 |       const info = getWebGPUMemoryUsage();
368 |       assertEqual(info.memory.buffer, 128 + 128);
369 |       assertEqual(info.memory.maxTotal, 128 + 256);
370 |     }
371 | 
372 |     buffer1.destroy();
373 |     buffer3.destroy();
374 | 
375 |     {
376 |       const info = getWebGPUMemoryUsage();
377 |       assertEqual(info.memory.buffer, 0);
378 |       assertEqual(info.memory.maxTotal, 128 + 256);
379 |     }
380 | 
381 |     device.destroy();
382 | 
383 |   });
384 | 
385 | });


--------------------------------------------------------------------------------
/test/tests/query-set-tests.js:
--------------------------------------------------------------------------------
 1 | import {assertEqual} from '../assert.js';
 2 | import {describe, it} from '../mocha-support.js';
 3 | import {getWebGPUMemoryUsage, resetMaxTotal} from '../../dist/1.x/webgpu-memory.module.js';
 4 | 
 5 | describe('querySet tests', () => {
 6 | 
 7 |   beforeEach(() => {
 8 |     resetMaxTotal();
 9 |   });
10 | 
11 |   it('tracks querySets', async function() {
12 |     const adapter = await navigator.gpu?.requestAdapter();
13 |     const device = await adapter?.requestDevice();
14 |     if (!device) {
15 |       this.skip();
16 |       return;
17 |     }
18 | 
19 |     {
20 |       const info = getWebGPUMemoryUsage();
21 |       assertEqual(info.memory.querySet, 0);
22 |       assertEqual(info.resources.querySet, 0);
23 |     }
24 | 
25 |     const querySet1 = device.createQuerySet({
26 |       type: 'occlusion',
27 |       count: 20,
28 |     });
29 | 
30 |     {
31 |       const info = getWebGPUMemoryUsage();
32 |       assertEqual(info.memory.querySet, 160);
33 |       assertEqual(info.resources.querySet, 1);
34 |     }
35 | 
36 |     const querySet2 = device.createQuerySet({
37 |       type: 'occlusion',
38 |       count: 10,
39 |     });
40 | 
41 |     {
42 |       const info = getWebGPUMemoryUsage();
43 |       assertEqual(info.memory.querySet, 160 + 80);
44 |       assertEqual(info.resources.querySet, 2);
45 |     }
46 | 
47 |     querySet1.destroy();
48 | 
49 |     {
50 |       const info = getWebGPUMemoryUsage();
51 |       assertEqual(info.memory.querySet, 80);
52 |       assertEqual(info.resources.querySet, 1);
53 |     }
54 | 
55 |     querySet2.destroy();
56 | 
57 |     {
58 |       const info = getWebGPUMemoryUsage();
59 |       assertEqual(info.memory.querySet, 0);
60 |       assertEqual(info.resources.querySet, 0);
61 |     }
62 | 
63 |     device.destroy();
64 |   });
65 | 
66 | });


--------------------------------------------------------------------------------
/test/tests/texture-tests.js:
--------------------------------------------------------------------------------
  1 | import {assertEqual} from '../assert.js';
  2 | import {describe, it} from '../mocha-support.js';
  3 | import {getWebGPUMemoryUsage, resetMaxTotal} from '../../dist/1.x/webgpu-memory.module.js';
  4 | 
  5 | function makeFormatInfo(textureInfo) {
  6 |   let byteSize = 0;
  7 |   let width = textureInfo.width;
  8 |   let height = textureInfo.height;
  9 |   let depth = textureInfo.depthOrArrayLayers || 1;
 10 |   const {
 11 |     bytesPerBlock,
 12 |     blockWidth = 1,
 13 |     blockHeight = 1,
 14 |   } = textureInfo;
 15 |   const size = [width, height, textureInfo.depthOrArrayLayers || 1];
 16 | 
 17 |   for (let level = 0; level < textureInfo.mipLevelCount; ++level) {
 18 |     const blocksAcross = Math.ceil(width * textureInfo.sampleCount / blockWidth);
 19 |     const blocksDown = Math.ceil(height * textureInfo.sampleCount / blockHeight);
 20 |     const numBlocks = blocksAcross * blocksDown * depth;
 21 |     const bytesUsed = numBlocks * bytesPerBlock;
 22 |     byteSize += bytesUsed;
 23 |     width = Math.max(1, width / 2 | 0);
 24 |     height = Math.max(1, height / 2 | 0);
 25 |     depth = textureInfo.dimension === '3d' ? Math.max(1, depth / 2 | 0) : depth;
 26 |   }
 27 | 
 28 |   return {
 29 |     ...textureInfo,
 30 |     memSize: byteSize,
 31 |     size,
 32 |   };
 33 | }
 34 | 
 35 | 
 36 | describe('texture tests', () => {
 37 | 
 38 |   beforeEach(() => {
 39 |     resetMaxTotal();
 40 |   });
 41 | 
 42 |   const width = 32;
 43 |   const height = 16;
 44 |   const formats = [
 45 |     makeFormatInfo({ format: 'rgba8unorm', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height }),
 46 |     makeFormatInfo({ format: 'rgba8unorm', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 5, sampleCount: 1, width, height }),
 47 |     makeFormatInfo({ format: 'rgba8unorm', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 1, sampleCount: 4, width, height }),
 48 |     makeFormatInfo({ format: 'rgba8unorm', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height, depthOrArrayLayers: 10 }),
 49 |     makeFormatInfo({ format: 'rgba8unorm', bytesPerBlock: 4, dimension: '3d', mipLevelCount: 1, sampleCount: 1, width, height, depthOrArrayLayers: 10 }),
 50 |     makeFormatInfo({ format: 'rgba32float', bytesPerBlock: 16, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height }),
 51 |     makeFormatInfo({ format: 'depth16unorm', bytesPerBlock: 2, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height }),
 52 |     makeFormatInfo({ format: 'depth24plus', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height }),
 53 |     makeFormatInfo({ format: 'depth24plus-stencil8', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height }),
 54 |     makeFormatInfo({ format: 'depth32float', bytesPerBlock: 4, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height }),
 55 |     makeFormatInfo({ format: 'depth32float-stencil8', bytesPerBlock: 5, dimension: '2d', mipLevelCount: 1, sampleCount: 1, width, height, feature: 'depth32float-stencil8' }),
 56 |   ];
 57 | 
 58 |   for (const {
 59 |     format,
 60 |     dimension,
 61 |     mipLevelCount,
 62 |     sampleCount,
 63 |     size,
 64 |     feature,
 65 |     memSize,
 66 |   } of formats) {
 67 |     it(
 68 |         `tracks textures of format: ${format}, dimension: ${dimension}, sampleCount: ${sampleCount}, mips: ${mipLevelCount}, size: ${size.join('×')}`,
 69 |         async function() {
 70 |       const adapter = await navigator.gpu?.requestAdapter();
 71 |       const device = await adapter?.requestDevice({ requiredFeatures: adapter.features });
 72 |       if (!device) {
 73 |         this.skip();
 74 |         return;
 75 |       }
 76 | 
 77 |       if (feature && !device.features.has(feature)) {
 78 |         this.skip(`missing feature: ${feature}`);
 79 |       }
 80 | 
 81 |       const usage = GPUTextureUsage.TEXTURE_BINDING |
 82 |           (sampleCount > 1 ? GPUTextureUsage.RENDER_ATTACHMENT : 0);
 83 | 
 84 |       {
 85 |         const info = getWebGPUMemoryUsage();
 86 |         assertEqual(info.memory.texture, 0);
 87 |       }
 88 | 
 89 |       const texture1 = device.createTexture({
 90 |         size,
 91 |         format,
 92 |         dimension,
 93 |         mipLevelCount,
 94 |         sampleCount,
 95 |         usage,
 96 |       });
 97 | 
 98 |       {
 99 |         const info = getWebGPUMemoryUsage();
100 |         assertEqual(info.memory.texture, memSize);
101 |       }
102 | 
103 |       const texture2 = device.createTexture({
104 |         size,
105 |         format,
106 |         dimension,
107 |         mipLevelCount,
108 |         sampleCount,
109 |         usage,
110 |       });
111 | 
112 |       {
113 |         const info = getWebGPUMemoryUsage();
114 |         assertEqual(info.memory.texture, memSize * 2);
115 |       }
116 | 
117 |       texture1.destroy();
118 | 
119 |       {
120 |         const info = getWebGPUMemoryUsage();
121 |         assertEqual(info.memory.texture, memSize);
122 |       }
123 | 
124 |       texture2.destroy();
125 | 
126 |       {
127 |         const info = getWebGPUMemoryUsage();
128 |         assertEqual(info.memory.texture, 0);
129 |       }
130 | 
131 |       device.destroy();
132 |     });
133 |   }
134 | 
135 |   [
136 |     {
137 |       dimension: '2d',
138 |       memSize: 4 * 4 * 4 * 4 +
139 |                2 * 2 * 4 * 4 +
140 |                1 * 1 * 4 * 4,
141 |     },
142 |     {
143 |       dimension: '3d',
144 |       memSize: 4 * 4 * 4 * 4 +
145 |                2 * 2 * 2 * 4 +
146 |                1 * 1 * 1 * 4,
147 |     },
148 |   ].forEach(({dimension, memSize}) => {
149 |     it(`tracks dimension ${dimension} different than others`, async() => {
150 |       const adapter = await navigator.gpu?.requestAdapter();
151 |       const device = await adapter?.requestDevice();
152 |       if (!device) {
153 |         this.skip();
154 |         return;
155 |       }
156 | 
157 |       {
158 |         const info = getWebGPUMemoryUsage();
159 |         assertEqual(info.memory.texture, 0);
160 |       }
161 | 
162 |       const texture = device.createTexture({
163 |         dimension,
164 |         size: [4, 4, 4],
165 |         mipLevelCount: 3,
166 |         format: 'rgba8unorm',
167 |         usage: GPUTextureUsage.TEXTURE_BINDING,
168 |       });
169 | 
170 |       {
171 |         const info = getWebGPUMemoryUsage();
172 |         assertEqual(info.memory.texture, memSize);
173 |       }
174 | 
175 |       texture.destroy();
176 | 
177 |       {
178 |         const info = getWebGPUMemoryUsage();
179 |         assertEqual(info.memory.texture, 0);
180 |       }
181 | 
182 |       device.destroy();
183 |     });
184 |   });
185 | });


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "outDir": "./dist/1.x",
10 |     "allowJs": true,
11 |     "skipLibCheck": true,
12 |     "declaration": true,
13 |     "esModuleInterop": true,
14 |     "allowSyntheticDefaultImports": true,
15 |     "strict": true,
16 |     "forceConsistentCasingInFileNames": true,
17 |     "module": "esnext",
18 |     "moduleResolution": "node",
19 |     "resolveJsonModule": true,
20 |     "isolatedModules": true,
21 |     "noEmit": true,
22 |     "typeRoots": [ "./node_modules/@webgpu/types", "./node_modules/@types"]
23 |   },
24 |   "include": [
25 |     "build",
26 |     ".",
27 |     ".eslintrc.js",
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------
/webgpu-memory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/greggman/webgpu-memory/208187848161501fddb03d60fc4b3b34c79ee9cf/webgpu-memory.png


--------------------------------------------------------------------------------