eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-17 05:49: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);
blurPipeline = device.createComputePipeline({
layout: "auto",
compute: {
module: blurShader.module,
entryPoint: "computeMain",
@@ -82,6 +83,7 @@ export default ({ config, device }) => {
});
combinePipeline = device.createComputePipeline({
layout: "auto",
compute: {
module: combineShader.module,
entryPoint: "computeMain",

1
js/webgpu/endPass.js
View File

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

23
js/webgpu/main.js
View File

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

1
js/webgpu/palettePass.js
View File

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

2
js/webgpu/rainPass.js
View File

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