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

Fixing the names of shaders in the passes. The loadShader utility function now returns the code and the module, since I'm hoping to parse uniform buffer layouts from the code.

Browse Source
This commit is contained in:
Rezmason
2021-11-07 00:40:50 -07:00
parent bade1667ad
commit bd3d0c76d2
8 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
js/webgpu/imagePass.js
View File

@@ -1,5 +1,5 @@
import std140 from "./std140.js";
import { loadTexture, loadShaderModule, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
import { loadTexture, loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a loaded in image
@@ -35,20 +35,20 @@ export default (context, getInputs) => {
let backgroundTex;
const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
const assets = [loadTexture(device, bgURL), loadShaderModule(device, "shaders/wgsl/imagePass.wgsl")];
const assets = [loadTexture(device, bgURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")];
const ready = (async () => {
const [bgTex, rainShader] = await Promise.all(assets);
const [bgTex, imageShader] = await Promise.all(assets);
backgroundTex = bgTex;
renderPipeline = device.createRenderPipeline({
vertex: {
module: rainShader,
module: imageShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader,
module: imageShader.module,
entryPoint: "fragMain",
targets: [
{

10
js/webgpu/palettePass.js
View File

@@ -1,5 +1,5 @@
import std140 from "./std140.js";
import { loadShaderModule, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
import { loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
// Maps the brightness of the rendered rain and bloom to colors
// in a linear gradient buffer generated from the passed-in color sequence
@@ -106,18 +106,18 @@ export default (context, getInputs) => {
let renderPipeline;
let output;
const assets = [loadShaderModule(device, "shaders/wgsl/palettePass.wgsl")];
const assets = [loadShader(device, "shaders/wgsl/palettePass.wgsl")];
const ready = (async () => {
const [rainShader] = await Promise.all(assets);
const [paletteShader] = await Promise.all(assets);
renderPipeline = device.createRenderPipeline({
vertex: {
module: rainShader,
module: paletteShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader,
module: paletteShader.module,
entryPoint: "fragMain",
targets: [
{

10
js/webgpu/rainPass.js
View File

@@ -1,5 +1,5 @@
import std140 from "./std140.js";
import { makePassFBO, loadTexture, loadShaderModule, makeUniformBuffer, makePass } from "./utils.js";
import { makePassFBO, loadTexture, loadShader, makeUniformBuffer, makePass } from "./utils.js";
const { mat4, vec3 } = glMatrix;
@@ -72,7 +72,7 @@ const makeConfigBuffer = (device, config, density, gridSize) => {
export default (context, getInputs) => {
const { config, adapter, device, canvasContext, timeBuffer } = context;
const assets = [loadTexture(device, config.glyphTexURL), loadShaderModule(device, "shaders/wgsl/rainPass.wgsl")];
const assets = [loadTexture(device, config.glyphTexURL), loadShader(device, "shaders/wgsl/rainPass.wgsl")];
// The volumetric mode multiplies the number of columns
// to reach the desired density, and then overlaps them
@@ -126,7 +126,7 @@ export default (context, getInputs) => {
computePipeline = device.createComputePipeline({
compute: {
module: rainShader,
module: rainShader.module,
entryPoint: "computeMain",
},
});
@@ -139,11 +139,11 @@ export default (context, getInputs) => {
renderPipeline = device.createRenderPipeline({
vertex: {
module: rainShader,
module: rainShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader,
module: rainShader.module,
entryPoint: "fragMain",
targets: [
{

10
js/webgpu/resurrectionPass.js
View File

@@ -1,5 +1,5 @@
import std140 from "./std140.js";
import { loadShaderModule, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
import { loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
// Matrix Resurrections isn't in theaters yet,
// and this version of the effect is still a WIP.
@@ -38,18 +38,18 @@ export default (context, getInputs) => {
let renderPipeline;
let output;
const assets = [loadShaderModule(device, "shaders/wgsl/resurrectionPass.wgsl")];
const assets = [loadShader(device, "shaders/wgsl/resurrectionPass.wgsl")];
const ready = (async () => {
const [rainShader] = await Promise.all(assets);
const [resurrectionShader] = await Promise.all(assets);
renderPipeline = device.createRenderPipeline({
vertex: {
module: rainShader,
module: resurrectionShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader,
module: resurrectionShader.module,
entryPoint: "fragMain",
targets: [
{

10
js/webgpu/stripePass.js
View File

@@ -1,5 +1,5 @@
import std140 from "./std140.js";
import { loadShaderModule, make1DTexture, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
import { loadShader, make1DTexture, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
// Multiplies the rendered rain and bloom by a 1D gradient texture
// generated from the passed-in color sequence
@@ -73,18 +73,18 @@ export default (context, getInputs) => {
let renderPipeline;
let output;
const assets = [loadShaderModule(device, "shaders/wgsl/stripePass.wgsl")];
const assets = [loadShader(device, "shaders/wgsl/stripePass.wgsl")];
const ready = (async () => {
const [rainShader] = await Promise.all(assets);
const [stripeShader] = await Promise.all(assets);
renderPipeline = device.createRenderPipeline({
vertex: {
module: rainShader,
module: stripeShader.module,
entryPoint: "vertMain",
},
fragment: {
module: rainShader,
module: stripeShader.module,
entryPoint: "fragMain",
targets: [
{

9
js/webgpu/utils.js
View File

@@ -35,10 +35,13 @@ const makePassFBO = (device, width, height, format = "rgba8unorm") =>
// TODO: whittle these down
});
const loadShaderModule = async (device, url) => {
const loadShader = async (device, url) => {
const response = await fetch(url);
const code = await response.text();
return device.createShaderModule({ code });
return {
code,
module: device.createShaderModule({ code }),
};
};
const makeUniformBuffer = (device, structLayout, values = null) => {
@@ -77,4 +80,4 @@ const makePass = (ready, setSize, getOutputs, execute) => ({
const makePipeline = (context, steps) =>
steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : pipeline[i - 1].getOutputs)], []);
export { getCanvasSize, makePassFBO, make1DTexture, loadTexture, loadShaderModule, makeUniformBuffer, makePass, makePipeline };
export { getCanvasSize, makePassFBO, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline };