eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-14 12:29:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Updating WebGPU project to satisfy Chrome Canary

Browse Source
This commit is contained in:
Rezmason
2022-08-07 19:17:22 -07:00
parent 7bed65b479
commit a0c1f22fd1
14 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/webgpu/bloomPass.js
View File

@@ -75,6 +75,7 @@ export default ({ config, device }) => {
const [blurShader, combineShader] = await Promise.all(assets); const [blurShader, combineShader] = await Promise.all(assets);
blurPipeline = device.createComputePipeline({ blurPipeline = device.createComputePipeline({
layout: "auto",
compute: { compute: {
module: blurShader.module, module: blurShader.module,
entryPoint: "computeMain", entryPoint: "computeMain",
@@ -82,6 +83,7 @@ export default ({ config, device }) => {
}); });
combinePipeline = device.createComputePipeline({ combinePipeline = device.createComputePipeline({
layout: "auto",
compute: { compute: {
module: combineShader.module, module: combineShader.module,
entryPoint: "computeMain", entryPoint: "computeMain",

1
js/webgpu/endPass.js
View File

@@ -27,6 +27,7 @@ export default ({ device, canvasFormat, canvasContext }) => {
const [imageShader] = await Promise.all(assets); const [imageShader] = await Promise.all(assets);
renderPipeline = device.createRenderPipeline({ renderPipeline = device.createRenderPipeline({
layout: "auto",
vertex: { vertex: {
module: imageShader.module, module: imageShader.module,
entryPoint: "vertMain", entryPoint: "vertMain",

23
js/webgpu/main.js
View File

@@ -1,5 +1,5 @@
import { structs } from "../../lib/gpu-buffer.js"; import { structs } from "../../lib/gpu-buffer.js";
import { getCanvasSize, makeUniformBuffer, makePipeline } from "./utils.js"; import { makeUniformBuffer, makePipeline } from "./utils.js";
import makeRain from "./rainPass.js"; import makeRain from "./rainPass.js";
import makeBloomPass from "./bloomPass.js"; import makeBloomPass from "./bloomPass.js";
@@ -34,21 +34,21 @@ const effects = {
export default async (canvas, config) => { export default async (canvas, config) => {
await loadJS("lib/gl-matrix.js"); await loadJS("lib/gl-matrix.js");
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
const adapter = await navigator.gpu.requestAdapter(); const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice(); const device = await adapter.requestDevice();
const canvasContext = canvas.getContext("webgpu"); const canvasContext = canvas.getContext("webgpu");
const canvasFormat = canvasContext.getPreferredFormat(adapter);
// console.table(device.limits); // console.table(device.limits);
const canvasConfig = { canvasContext.configure({
device, device,
format: canvasFormat, format: canvasFormat,
size: [NaN, NaN], alphaMode: "opaque",
usage: usage:
// GPUTextureUsage.STORAGE_BINDING | // GPUTextureUsage.STORAGE_BINDING |
GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST, GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
}; });
const timeUniforms = structs.from(`struct Time { seconds : f32, frames : i32, };`).Time; const timeUniforms = structs.from(`struct Time { seconds : f32, frames : i32, };`).Time;
const timeBuffer = makeUniformBuffer(device, timeUniforms); const timeBuffer = makeUniformBuffer(device, timeUniforms);
@@ -72,11 +72,14 @@ export default async (canvas, config) => {
if (isNaN(start)) { if (isNaN(start)) {
start = now; start = now;
} }
const canvasSize = getCanvasSize(canvas);
if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) { const devicePixelRatio = window.devicePixelRatio ?? 1;
canvasConfig.size = canvasSize; const canvasWidth = canvas.clientWidth * devicePixelRatio;
canvasContext.configure(canvasConfig); const canvasHeight = canvas.clientHeight * devicePixelRatio;
pipeline.build(canvasSize); if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
canvas.width = canvasWidth;
canvas.height = canvasHeight;
pipeline.build([canvasWidth, canvasHeight]);
} }
device.queue.writeBuffer(timeBuffer, 0, timeUniforms.toBuffer({ seconds: (now - start) / 1000, frames })); device.queue.writeBuffer(timeBuffer, 0, timeUniforms.toBuffer({ seconds: (now - start) / 1000, frames }));

1
js/webgpu/palettePass.js
View File

@@ -94,6 +94,7 @@ export default ({ config, device, timeBuffer }) => {
const [paletteShader] = await Promise.all(assets); const [paletteShader] = await Promise.all(assets);
computePipeline = device.createComputePipeline({ computePipeline = device.createComputePipeline({
layout: "auto",
compute: { compute: {
module: paletteShader.module, module: paletteShader.module,
entryPoint: "computeMain", entryPoint: "computeMain",

2
js/webgpu/rainPass.js
View File

@@ -104,6 +104,7 @@ export default ({ config, device, timeBuffer }) => {
sceneBuffer = makeUniformBuffer(device, sceneUniforms); sceneBuffer = makeUniformBuffer(device, sceneUniforms);
computePipeline = device.createComputePipeline({ computePipeline = device.createComputePipeline({
layout: "auto",
compute: { compute: {
module: rainShader.module, module: rainShader.module,
entryPoint: "computeMain", entryPoint: "computeMain",
@@ -117,6 +118,7 @@ export default ({ config, device, timeBuffer }) => {
}; };
renderPipeline = device.createRenderPipeline({ renderPipeline = device.createRenderPipeline({
layout: "auto",
vertex: { vertex: {
module: rainShader.module, module: rainShader.module,
entryPoint: "vertMain", entryPoint: "vertMain",

7
js/webgpu/utils.js
View File

@@ -1,8 +1,3 @@
const getCanvasSize = (canvas) => {
const devicePixelRatio = window.devicePixelRatio ?? 1;
return [canvas.clientWidth * devicePixelRatio, canvas.clientHeight * devicePixelRatio];
};
/* /*
const loadTexture = async (device, url) => { const loadTexture = async (device, url) => {
const response = await fetch(url); const response = await fetch(url);
@@ -126,4 +121,4 @@ const makePipeline = async (context, steps) => {
}; };
}; };
export { getCanvasSize, makeRenderTarget, makeComputeTarget, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline, makeBindGroup }; export { makeRenderTarget, makeComputeTarget, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline, makeBindGroup };

4
shaders/wgsl/bloomBlur.wgsl
View File

@@ -1,4 +1,4 @@
let ONE_OVER_SQRT_2PI = 0.39894; const ONE_OVER_SQRT_2PI = 0.39894;
struct Config { struct Config {
bloomRadius : f32, bloomRadius : f32,
@@ -20,7 +20,7 @@ fn gaussianPDF(x : f32) -> f32 {
) / config.bloomRadius; ) / config.bloomRadius;
} }
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var coord = vec2<i32>(input.id.xy); var coord = vec2<i32>(input.id.xy);
var outputSize = textureDimensions(outputTex); var outputSize = textureDimensions(outputTex);

2
shaders/wgsl/bloomCombine.wgsl
View File

@@ -19,7 +19,7 @@ struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>, @builtin(global_invocation_id) id : vec3<u32>,
}; };
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var coord = vec2<i32>(input.id.xy); var coord = vec2<i32>(input.id.xy);
var outputSize = textureDimensions(outputTex); var outputSize = textureDimensions(outputTex);

4
shaders/wgsl/endPass.wgsl
View File

@@ -6,13 +6,13 @@ struct VertOutput {
@location(0) uv : vec2<f32>, @location(0) uv : vec2<f32>,
}; };
@stage(vertex) fn vertMain(@builtin(vertex_index) index : u32) -> VertOutput { @vertex fn vertMain(@builtin(vertex_index) index : u32) -> VertOutput {
var uv = vec2<f32>(f32(index % 2u), f32((index + 1u) % 6u / 3u)); var uv = vec2<f32>(f32(index % 2u), f32((index + 1u) % 6u / 3u));
var position = vec4<f32>(uv * 2.0 - 1.0, 1.0, 1.0); var position = vec4<f32>(uv * 2.0 - 1.0, 1.0, 1.0);
return VertOutput(position, uv); return VertOutput(position, uv);
} }
@stage(fragment) fn fragMain(input : VertOutput) -> @location(0) vec4<f32> { @fragment fn fragMain(input : VertOutput) -> @location(0) vec4<f32> {
var uv = input.uv; var uv = input.uv;
uv.y = 1.0 - uv.y; uv.y = 1.0 - uv.y;
return textureSample( tex, nearestSampler, uv ); return textureSample( tex, nearestSampler, uv );

2
shaders/wgsl/imagePass.wgsl
View File

@@ -19,7 +19,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0)); return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0));
} }
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a texel coordinate // Resolve the invocation ID to a texel coordinate
var coord = vec2<i32>(input.id.xy); var coord = vec2<i32>(input.id.xy);

4
shaders/wgsl/palettePass.wgsl
View File

@@ -25,7 +25,7 @@ struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>, @builtin(global_invocation_id) id : vec3<u32>,
}; };
let PI : f32 = 3.14159265359; const PI : f32 = 3.14159265359;
fn randomFloat( uv : vec2<f32> ) -> f32 { fn randomFloat( uv : vec2<f32> ) -> f32 {
let a = 12.9898; let a = 12.9898;
@@ -42,7 +42,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0)); return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0));
} }
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a texel coordinate // Resolve the invocation ID to a texel coordinate
var coord = vec2<i32>(input.id.xy); var coord = vec2<i32>(input.id.xy);

16
shaders/wgsl/rainPass.wgsl
View File

@@ -96,11 +96,11 @@ struct FragOutput {
// Constants // Constants
let NUM_VERTICES_PER_QUAD : i32 = 6; // 2 * 3 const NUM_VERTICES_PER_QUAD : i32 = 6; // 2 * 3
let PI : f32 = 3.14159265359; const PI : f32 = 3.14159265359;
let TWO_PI : f32 = 6.28318530718; const TWO_PI : f32 = 6.28318530718;
let SQRT_2 : f32 = 1.4142135623730951; const SQRT_2 : f32 = 1.4142135623730951;
let SQRT_5 : f32 = 2.23606797749979; const SQRT_5 : f32 = 2.23606797749979;
// Helper functions for generating randomness, borrowed from elsewhere // Helper functions for generating randomness, borrowed from elsewhere
@@ -277,7 +277,7 @@ fn computeResult (isFirstFrame : bool, previousResult : vec4<f32>, glyphPos : ve
return result; return result;
} }
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a cell coordinate // Resolve the invocation ID to a cell coordinate
var row = i32(input.id.y); var row = i32(input.id.y);
@@ -305,7 +305,7 @@ fn computeResult (isFirstFrame : bool, previousResult : vec4<f32>, glyphPos : ve
// vec2<f32>(1.0, 1.0), vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0) // vec2<f32>(1.0, 1.0), vec2<f32>(0.0, 1.0), vec2<f32>(1.0, 0.0)
// ); // );
@stage(vertex) fn vertMain(input : VertInput) -> VertOutput { @vertex fn vertMain(input : VertInput) -> VertOutput {
var volumetric = bool(config.volumetric); var volumetric = bool(config.volumetric);
@@ -383,7 +383,7 @@ fn getSymbolUV(glyphCycle : f32) -> vec2<f32> {
// Fragment shader // Fragment shader
@stage(fragment) fn fragMain(input : VertOutput) -> FragOutput { @fragment fn fragMain(input : VertOutput) -> FragOutput {
var volumetric = bool(config.volumetric); var volumetric = bool(config.volumetric);
var uv = input.uv; var uv = input.uv;

4
shaders/wgsl/resurrectionPass.wgsl
View File

@@ -20,7 +20,7 @@ struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>, @builtin(global_invocation_id) id : vec3<u32>,
}; };
let PI : f32 = 3.14159265359; const PI : f32 = 3.14159265359;
fn randomFloat( uv : vec2<f32> ) -> f32 { fn randomFloat( uv : vec2<f32> ) -> f32 {
let a = 12.9898; let a = 12.9898;
@@ -56,7 +56,7 @@ fn hslToRgb(h : f32, s : f32, l : f32) -> vec3<f32> {
); );
} }
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a texel coordinate // Resolve the invocation ID to a texel coordinate
var coord = vec2<i32>(input.id.xy); var coord = vec2<i32>(input.id.xy);

4
shaders/wgsl/stripePass.wgsl
View File

@@ -21,7 +21,7 @@ struct ComputeInput {
@builtin(global_invocation_id) id : vec3<u32>, @builtin(global_invocation_id) id : vec3<u32>,
}; };
let PI : f32 = 3.14159265359; const PI : f32 = 3.14159265359;
fn randomFloat( uv : vec2<f32> ) -> f32 { fn randomFloat( uv : vec2<f32> ) -> f32 {
let a = 12.9898; let a = 12.9898;
@@ -38,7 +38,7 @@ fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0)); return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0));
} }
@stage(compute) @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) { @compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
// Resolve the invocation ID to a texel coordinate // Resolve the invocation ID to a texel coordinate
var coord = vec2<i32>(input.id.xy); var coord = vec2<i32>(input.id.xy);