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

Experimenting with simplifying the names of the uniform buffers in the rain render pass shader.

Browse Source
This commit is contained in:
Rezmason
2021-10-28 22:21:01 -07:00
parent c500bdcef0
commit 1b53b8be1f
2 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/webgpu_main.js
View File

@@ -143,13 +143,13 @@ export default async (canvas, config) => {
configBuffer.unmap();
// prettier-ignore
const msdfStructLayout = computeStructLayout(["f32"]);
const msdfStructLayout = computeStructLayout(["i32", "i32"]);
const msdfBuffer = device.createBuffer({
size: msdfStructLayout.size,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.FRAGMENT, // Which of these are necessary?
mappedAtCreation: true,
});
new Int32Array(msdfBuffer.getMappedRange()).set(buildStruct(msdfStructLayout, [config.glyphTextureColumns]));
new Int32Array(msdfBuffer.getMappedRange()).set(buildStruct(msdfStructLayout, [config.glyphTextureColumns, config.glyphSequenceLength]));
msdfBuffer.unmap();
// prettier-ignore
@@ -160,9 +160,9 @@ export default async (canvas, config) => {
});
// prettier-ignore
const cameraStructLayout = computeStructLayout(["vec2<f32>", "mat4x4<f32>", "mat4x4<f32>"]);
const cameraBuffer = device.createBuffer({
size: cameraStructLayout.size,
const sceneStructLayout = computeStructLayout(["vec2<f32>", "mat4x4<f32>", "mat4x4<f32>"]);
const sceneBuffer = device.createBuffer({
size: sceneStructLayout.size,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.VERTEX | GPUBufferUsage.COMPUTE | GPUBufferUsage.COPY_DST, // Which of these are necessary?
});
@@ -178,7 +178,7 @@ export default async (canvas, config) => {
const aspectRatio = canvasSize[0] / canvasSize[1];
mat4.perspectiveZO(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
queue.writeBuffer(cameraBuffer, 0, new Float32Array(buildStruct(cameraStructLayout, [screenSize, camera, transform])));
queue.writeBuffer(sceneBuffer, 0, new Float32Array(buildStruct(sceneStructLayout, [screenSize, camera, transform])));
};
updateCameraBuffer();
@@ -253,7 +253,7 @@ export default async (canvas, config) => {
{
binding: 5,
resource: {
buffer: cameraBuffer,
buffer: sceneBuffer,
},
},
],

56
shaders/rainRenderPass.wgsl
View File

@@ -1,32 +1,33 @@
let NUM_VERTICES_PER_QUAD:i32 = 6;
let PI:f32 = 3.14159265359;
let TWO_PI:f32 = 6.28318530718; // No, I'm not using Tau.
let TWO_PI:f32 = 6.28318530718;
[[block]] struct Uniforms {
[[block]] struct Config {
numColumns: i32;
numRows: i32;
};
[[group(0), binding(0)]] var<uniform> uniforms:Uniforms;
[[group(0), binding(0)]] var<uniform> config:Config;
[[block]] struct MSDFUniforms {
numColumns: i32;
[[block]] struct MSDF {
glyphTextureColumns: i32;
glyphSequenceLength: i32;
};
[[group(0), binding(1)]] var<uniform> msdfUniforms:MSDFUniforms;
[[group(0), binding(1)]] var<uniform> msdf:MSDF;
[[group(0), binding(2)]] var msdfSampler: sampler;
[[group(0), binding(3)]] var msdfTexture: texture_2d<f32>;
[[block]] struct TimeUniforms {
[[block]] struct Time {
now: i32;
frame: i32;
};
[[group(0), binding(4)]] var<uniform> timeUniforms:TimeUniforms;
[[group(0), binding(4)]] var<uniform> time:Time;
[[block]] struct CameraUniforms {
[[block]] struct Scene {
screenSize: vec2<f32>;
camera: mat4x4<f32>;
transform: mat4x4<f32>;
};
[[group(0), binding(5)]] var<uniform> cameraUniforms:CameraUniforms;
[[group(0), binding(5)]] var<uniform> scene:Scene;
// Vertex shader
@@ -45,20 +46,29 @@ struct VertexOutput {
f32(((i + 1) % NUM_VERTICES_PER_QUAD / 3))
);
var position = cornerPosition;
position = position + vec2<f32>(
f32(quadIndex % uniforms.numColumns),
f32(quadIndex / uniforms.numColumns)
var cellPosition = vec2<i32>(
quadIndex % config.numColumns,
quadIndex / config.numColumns
);
var position = cornerPosition;
position = position + vec2<f32>(cellPosition);
position = position / vec2<f32>(
f32(uniforms.numColumns),
f32(uniforms.numRows)
f32(config.numColumns),
f32(config.numRows)
);
position = 1.0 - position * 2.0;
position = position * cameraUniforms.screenSize;
position = position * scene.screenSize;
var depth:f32 = 0.0;
var pos: vec4<f32> = vec4<f32>(position, depth, 1.0);
// pos.x = pos.x / glyphHeightToWidth;
// pos = scene.camera * scene.transform * pos;
return VertexOutput(
vec4<f32>(position, 1.0, 1.0),
pos,
cornerPosition
);
}
@@ -66,10 +76,10 @@ struct VertexOutput {
// Fragment shader
[[stage(fragment)]] fn fragMain([[location(0)]] UV:vec2<f32>) -> [[location(0)]] vec4<f32> {
var msdf:vec4<f32> = textureSample(msdfTexture, msdfSampler, UV / f32(msdfUniforms.numColumns));
// msdf.b = msdf.b * (sin(f32(timeUniforms.now) / 1000.0 * TWO_PI) * 0.5 + 0.5);
msdf.b = msdf.b * f32(timeUniforms.frame / 60 % 2);
var now = timeUniforms.now;
var color:vec4<f32> = textureSample(msdfTexture, msdfSampler, UV / f32(msdf.glyphTextureColumns));
// color.b = color.b * (sin(f32(time.now) / 1000.0 * TWO_PI) * 0.5 + 0.5);
color.b = color.b * f32(time.frame / 60 % 2);
var now = time.now;
return msdf;
return color;
}