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

Now that I can pack integer and float data into one uniform buffer, time.seconds can be represented as a float while time.frames is an integer.

Browse Source
This commit is contained in:
Rezmason
2021-10-29 09:02:20 -07:00
parent f9b80224fe
commit 23d397fa11
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/webgpu_main.js
View File

@@ -91,8 +91,7 @@ export default async (canvas, config) => {
msdfStructLayout.build([config.glyphTextureColumns, config.glyphSequenceLength], msdfBuffer.getMappedRange()); msdfStructLayout.build([config.glyphTextureColumns, config.glyphSequenceLength], msdfBuffer.getMappedRange());
msdfBuffer.unmap(); msdfBuffer.unmap();
// prettier-ignore const timeStructLayout = std140(["f32", "i32"]);
const timeStructLayout = std140(["i32", "i32"]);
const timeBuffer = device.createBuffer({ const timeBuffer = device.createBuffer({
size: timeStructLayout.size, size: timeStructLayout.size,
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.VERTEX | GPUBufferUsage.FRAGMENT | GPUBufferUsage.COMPUTE | GPUBufferUsage.COPY_DST, // Which of these are necessary? usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.VERTEX | GPUBufferUsage.FRAGMENT | GPUBufferUsage.COMPUTE | GPUBufferUsage.COPY_DST, // Which of these are necessary?
@@ -221,7 +220,7 @@ export default async (canvas, config) => {
updateCameraBuffer(); updateCameraBuffer();
} }
queue.writeBuffer(timeBuffer, 0, timeStructLayout.build([now, frame])); queue.writeBuffer(timeBuffer, 0, timeStructLayout.build([now / 1000, frame]));
frame++; frame++;
renderPassConfig.colorAttachments[0].view = canvasContext.getCurrentTexture().createView(); renderPassConfig.colorAttachments[0].view = canvasContext.getCurrentTexture().createView();
@@ -233,7 +232,7 @@ export default async (canvas, config) => {
const commandBuffer = encoder.finish(); const commandBuffer = encoder.finish();
queue.submit([commandBuffer]); queue.submit([commandBuffer]);
// requestAnimationFrame(renderLoop); requestAnimationFrame(renderLoop);
}; };
requestAnimationFrame(renderLoop); requestAnimationFrame(renderLoop);

16
shaders/rainRenderPass.wgsl
View File

@@ -18,8 +18,8 @@ let TWO_PI:f32 = 6.28318530718;
[[group(0), binding(3)]] var msdfTexture: texture_2d<f32>; [[group(0), binding(3)]] var msdfTexture: texture_2d<f32>;
[[block]] struct Time { [[block]] struct Time {
now: i32; seconds:f32;
frame: i32; frames:i32;
}; };
[[group(0), binding(4)]] var<uniform> time:Time; [[group(0), binding(4)]] var<uniform> time:Time;
@@ -63,7 +63,12 @@ struct VertexOutput {
// position = position * scene.screenSize; // position = position * scene.screenSize;
var depth:f32 = 0.0; var depth:f32 = 0.0;
var pos: vec4<f32> = vec4<f32>(position, depth, 1.0);
// depth = -0.5
// + sin(time.seconds * 2.0 + f32(cellPosition.x) / f32(config.numColumns) * 10.0) * 0.2
// + sin(time.seconds * 2.0 + f32(cellPosition.y) / f32(config.numColumns) * 10.0) * 0.2;
var pos:vec4<f32> = vec4<f32>(position, depth, 1.0);
pos.x = pos.x / config.glyphHeightToWidth; pos.x = pos.x / config.glyphHeightToWidth;
pos = scene.camera * scene.transform * pos; pos = scene.camera * scene.transform * pos;
@@ -77,9 +82,8 @@ struct VertexOutput {
[[stage(fragment)]] fn fragMain([[location(0)]] UV:vec2<f32>) -> [[location(0)]] vec4<f32> { [[stage(fragment)]] fn fragMain([[location(0)]] UV:vec2<f32>) -> [[location(0)]] vec4<f32> {
var color:vec4<f32> = textureSample(msdfTexture, msdfSampler, UV / f32(msdf.glyphTextureColumns)); 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 * (sin(time.seconds * TWO_PI) * 0.5 + 0.5);
color.b = color.b * f32(time.frame / 60 % 2); color.b = color.b * f32(time.frames / 60 % 2);
var now = time.now;
return color; return color;
} }