Noah/webgpu scatterbrain pt1 #246
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -35,4 +35,4 @@ | |
| "pnpm": "10.33.0" | ||
| }, | ||
| "packageManager": "pnpm@10.33.0" | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes"> | ||
| <title>hello webgpu</title> | ||
| <style> | ||
| :root { | ||
| color-scheme: light dark; | ||
| } | ||
|
|
||
| html, | ||
| body { | ||
| margin: 0; | ||
| /* remove default margin */ | ||
| height: 100%; | ||
| overflow: hidden; | ||
| /* make body fill the browser window */ | ||
| display: flex; | ||
| touch-action: none; | ||
| place-content: center center; | ||
| } | ||
| </style> | ||
| <script defer src="../dist/main.js" type="module"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <canvas id="canvas"></canvas> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| /** biome-ignore-all lint/suspicious/noNonNullAssertedOptionalChain: <its a demo> */ | ||
| /** biome-ignore-all lint/style/noNonNullAssertion: <its a demo> */ | ||
|
|
||
| import { SharedPriorityCache } from '@alleninstitute/vis-core'; | ||
| import { Box2D, type vec4 } from '@alleninstitute/vis-geometry'; | ||
| import { loadDataset } from './dataset'; | ||
| import { buildRenderFrameFn, type ShaderSettings } from './render/webgpu/renderer'; | ||
| import type { ScatterbrainDataset } from './types'; | ||
|
|
||
| const tenx = | ||
| 'https://bkp-2d-visualizations-stage.s3.amazonaws.com/wmb_tenx_01172024_stage-20240128193624/G4I4GFJXJB9ATZ3PTX1/ScatterBrain.json'; | ||
|
|
||
| async function loadRawJson() { | ||
| return await (await fetch(tenx)).json(); | ||
| } | ||
| const makeFakeColors = (n: number) => { | ||
| const stuff: Record<number, { color: vec4; filteredIn: boolean }> = {}; | ||
| for (let i = 0; i < n; i++) { | ||
| stuff[i] = { | ||
| color: [Math.random(), Math.random(), Math.random(), 1], | ||
| // 80% of either category are filtered in, at random: | ||
| filteredIn: Math.random() > 0.2, | ||
| }; | ||
| } | ||
| return stuff; | ||
| }; | ||
|
|
||
| export async function whatever() { | ||
|
Collaborator
Author
There was a problem hiding this comment. the bootstrap function for my demo - remote eventually |
||
| const gradientData = new Uint8Array(256 * 4); | ||
| for (let i = 0; i < 256; i += 4) { | ||
| gradientData[i * 4 + 0] = i; | ||
| gradientData[i * 4 + 1] = i; | ||
| gradientData[i * 4 + 2] = i; | ||
| gradientData[i * 4 + 3] = 255; | ||
| } | ||
| const adapter = await navigator.gpu.requestAdapter(); | ||
| const device = await adapter?.requestDevice()!; | ||
| // buildTest(root.device) | ||
|
|
||
| const categories = { | ||
| '4MV7HA5DG2XJZ3UD8G9': makeFakeColors(40), // nt type | ||
| FS00DXV0T9R1X9FJ4QE: makeFakeColors(40), // class | ||
| }; | ||
|
|
||
| const settings: Omit<ShaderSettings, 'dataset'> = { | ||
| categoricalFilters: { '4MV7HA5DG2XJZ3UD8G9': 40, FS00DXV0T9R1X9FJ4QE: 40 }, | ||
| colorBy: { kind: 'metadata', column: 'FS00DXV0T9R1X9FJ4QE' }, | ||
| // an alternative color-by setting, swap it to see quantitative coloring | ||
| // colorBy: { kind: 'quantitative', column: '27683', gradient: 'viridis', range: { min: 0, max: 10 } }, | ||
| mode: 'color', | ||
| quantitativeFilters: [], | ||
| highlightByColumn: { kind: 'metadata', column: 'FS00DXV0T9R1X9FJ4QE' }, | ||
| }; | ||
|
|
||
| const dataset = await loadDataset(await loadRawJson()); | ||
| if (!dataset) { | ||
| throw new Error('blerg this data is toast'); | ||
| } | ||
| const cache = new SharedPriorityCache(new Map(), 1024 * 1024 * 2000); | ||
| const { render, connectToCache } = buildRenderFrameFn(device, { ...settings, dataset }); | ||
|
|
||
| const cnvs: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement; | ||
| cnvs.width = 1500; | ||
| cnvs.height = 1500; | ||
| const ctx = cnvs.getContext('webgpu'); | ||
| ctx?.configure({ | ||
| device: device, | ||
| format: navigator.gpu.getPreferredCanvasFormat(), | ||
| alphaMode: 'premultiplied', | ||
| }); | ||
|
|
||
| const bound = (dataset as ScatterbrainDataset).metadata.tightBoundingBox; | ||
| const view = Box2D.create([bound.lx, bound.ly], [bound.ux, bound.uy]); | ||
| const client = connectToCache(cache, () => { | ||
| // redraw? | ||
| // console.log('new data arrived...') | ||
| requestAnimationFrame(() => { | ||
| // biome-ignore lint/suspicious/noConsole: <this is a demo> | ||
| console.log('re render!'); | ||
|
|
||
| render({ | ||
| categories, | ||
| client, | ||
| gradient: gradientData, | ||
| target: ctx!.getCurrentTexture().createView(), | ||
| uniforms: { | ||
| camera: { view, screenResolution: [1500, 1500] }, | ||
| filteredOutColor: [0.5, 0.5, 0.5, 1.0], | ||
| highlightedValue: 22, | ||
| offset: [0, 0], | ||
| quantitativeRangeFilters: {}, | ||
| spatialFilterBox: view, | ||
| }, | ||
| }); | ||
| }); | ||
| }); | ||
| render({ | ||
| categories, | ||
| client, | ||
| gradient: gradientData, | ||
| target: ctx!.getCurrentTexture().createView(), | ||
| uniforms: { | ||
| camera: { view, screenResolution: [1500, 1500] }, | ||
| filteredOutColor: [0.5, 0.5, 0.5, 1.0], | ||
| highlightedValue: 22, | ||
| offset: [0, 0], | ||
| quantitativeRangeFilters: {}, | ||
| spatialFilterBox: view, | ||
| }, | ||
| }); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,6 @@ | ||
| export { buildScatterbrainCacheClient } from './cache-client'; | ||
| export { getVisibleItems, loadDataset as loadScatterbrainDataset } from './dataset'; | ||
| export * from './render/webgl/index'; | ||
| export * from './render/webgpu/index'; | ||
| export * from './types'; | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
|
|
||
| // because the webGL and webGPU implementations of these renderers are very similar, | ||
| // they end up having identical names for the same conceptual parts - | ||
| // so lets export them namespaced | ||
| import * as WGL from './renderer' | ||
| export const WebGL = { | ||
| ...WGL | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
|
|
||
| // because the webGL and webGPU implementations of these renderers are very similar, | ||
| // they end up having identical names for the same conceptual parts - | ||
| // so lets export them namespaced | ||
| import * as WGPU from './renderer' | ||
| export const WebGPU = { | ||
| ...WGPU | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is the demo I used to debug my webGPU implementation - we should remove it, but for now starlight seems to have trouble with our webGPU utils (a 3rd party helper)