Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set worgroups #74

Merged
merged 7 commits into from
Jun 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,12 @@ await points.init(renderPasses);

You can pass a Compute Shader only, or a Vertex and Fragment together only. This way you can have a Compute Shader without visual output, create calculations and return their response values, or a regular Render Pipeline without Compute Shader calculations.

There's also three extra parameters in the RenderPass, these are to dispatch the workgroups for each dimension (x, y, z):

```js
new RenderPass(vert1, frag1, compute1, 800, 800, 1);
```

# Create your custom Shader project
1. Copy the `/examples/base/` and place it where you want to store your project.
2. Rename folder.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { brightness } from './../../src/core/color.js';
import { brightness } from '../../src/core/color.js';

const compute = /*wgsl*/`

Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
81 changes: 81 additions & 0 deletions examples/dithering3_2/compute.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { brightness } from '../../src/core/color.js';

const compute = /*wgsl*/`

struct Variable{
init: i32
}

${brightness}

const workgroupSize = 1;

@compute @workgroup_size(workgroupSize,workgroupSize,1)
fn main(
@builtin(global_invocation_id) GlobalId: vec3<u32>,
@builtin(workgroup_id) WorkGroupID: vec3<u32>,
@builtin(local_invocation_id) LocalInvocationID: vec3<u32>
) {
//--------------------------------------------------
let dims = textureDimensions(image);

var layerIndex = 0;
if(variables.init == 0){

let pointIndex = i32(GlobalId.y + (GlobalId.x * dims.x));

var point = textureLoad(image, GlobalId.yx, 0); // image
// var point = textureLoad(image, GlobalId.yx); // video
layers[0][pointIndex] = point;
layers[1][pointIndex] = point;

// variables.init = 1;
}else{
layerIndex = 1;
}

//--------------------------------------------------

let pointIndex = i32(GlobalId.x + (GlobalId.y * dims.y));

var point = layers[layerIndex][pointIndex];
let b = brightness(point);
var newBrightness = 0.;
if(b > .5){
newBrightness = 1.;
}

let quant_error = b - newBrightness;
let distance = 1;
let distanceU = u32(distance);
let distanceF = f32(distance);
point = vec4(newBrightness);

let pointP = &layers[layerIndex][pointIndex];
(*pointP) = point;


let pointIndexC = i32(GlobalId.x + ((GlobalId.y+distanceU) * dims.y));
var rightPoint = layers[layerIndex][pointIndexC];
rightPoint = vec4(brightness(rightPoint) + (.5 * quant_error * params.sliderB));

let pointPC = &layers[layerIndex][pointIndexC];
(*pointPC) = rightPoint;


let pointIndexR = i32((GlobalId.y+distanceU) + (GlobalId.x * dims.x));
var bottomPoint = layers[layerIndex][pointIndexR];
bottomPoint = vec4(brightness(bottomPoint) + (.5 * quant_error));

let pointPR = &layers[layerIndex][pointIndexR];
(*pointPR) = bottomPoint;

point = layers[layerIndex][pointIndex];
let positionU = GlobalId.xy;
textureStore(outputTex, positionU, point);
storageBarrier();
// workgroupBarrier();
}
`;

export default compute;
63 changes: 63 additions & 0 deletions examples/dithering3_2/frag.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { snoise } from '../../src/core/noise2d.js';
import { getClosestColorInPalette, orderedDithering, orderedDithering_threshold_map } from '../../src/core/effects.js';
import { texturePosition } from '../../src/core/image.js';
import { fnusin } from '../../src/core/animation.js';

const frag = /*wgsl*/`
struct Variable{
init: i32
}

${fnusin}
${snoise}
${getClosestColorInPalette}
${orderedDithering}
${texturePosition}

${orderedDithering_threshold_map}

const numPaletteItems = 21;
const getClosestColorInPalette_palette = array< vec4<f32>, numPaletteItems>(
vec4(255./255, 69./255, 0, 1.),
vec4(255./255, 168./255, 0, 1.),
vec4(255./255, 214./255, 53./255, 1.),
vec4(0, 204./255, 120./255, 1.),
vec4(126./255, 237./255, 86./255, 1.),
vec4(0./255, 117./255, 111./255, 1.),
vec4(0./255, 158./255, 170./255, 1.),
vec4(36./255, 80./255, 164./255, 1.),
vec4(54./255, 144./255, 234./255, 1.),
vec4(81./255, 233./255, 244./255, 1.),
vec4(73./255, 58./255, 193./255, 1.),
vec4(106./255, 92./255, 255./255, 1.),
vec4(129./255, 30./255, 159./255, 1.),
vec4(180./255, 74./255, 192./255, 1.),
vec4(255./255, 56./255, 129./255, 1.),
vec4(255./255, 153./255, 170./255, 1.),
vec4(109./255, 72./255, 48./255, 1.),
vec4(156./255, 105./255, 38./255, 1.),
vec4(0, 0, 0, 1.),
vec4(137./255, 141./255, 144./255, 1.),
vec4(212./255, 215./255, 217./255, 1.),
);


@fragment
fn main(
@location(0) color: vec4<f32>,
@location(1) uv: vec2<f32>,
@location(2) ratio: vec2<f32>,
@location(3) uvRatio: vec2<f32>,
@location(4) mouse: vec2<f32>,
@builtin(position) position: vec4<f32>
) -> @location(0) vec4<f32> {

//let imageUV = (uv / f + vec2(0, .549 ) ) * vec2(1,-1 * dimsRatio) * ratio.y / params.sliderA;
//var point = textureSample(computeTexture, imageSampler, imageUV); //* .998046;
var point = texturePosition(computeTexture, imageSampler, vec2(0.), uv / params.sliderA, false); //* .998046;

return point;
}
`;

export default frag;
26 changes: 26 additions & 0 deletions examples/dithering3_2/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import vert from './vert.js';
import compute from './compute.js';
import frag from './frag.js';
import { RenderPass, ShaderType } from '../../src/absulit.points.module.js';
const dithering3 = {
renderPasses: [
new RenderPass(vert, frag, compute, 800, 800)
],
init: async points => {
points.addSampler('imageSampler', null);
// await points.addTextureImage('image', './../img/carmen_lyra_423x643.jpg');
// await points.addTextureImage('image', './../img/old_king_800x00.jpg');
// await points.addTextureWebcam('image');
// await points.addTextureImage('image', './../img/angel_600x600.jpg');
// await points.addTextureImage('image', './../img/gratia_800x800.jpg');
await points.addTextureImage('image', './../img/absulit_800x800.jpg');
points.addBindingTexture('outputTex', 'computeTexture');
points.addLayers(2);
points.addStorage('variables', 1, 'Variable', 2, false, ShaderType.COMPUTE);
},
update: points => {

}
}

export default dithering3;
19 changes: 19 additions & 0 deletions examples/dithering3_2/vert.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const vert = /*wgsl*/`

struct Variable{
init: i32
}

@vertex
fn main(
@location(0) position: vec4<f32>,
@location(1) color: vec4<f32>,
@location(2) uv: vec2<f32>,
@builtin(vertex_index) vertexIndex: u32
) -> Fragment {

return defaultVertexBody(position, color, uv);
}
`;

export default vert;
3 changes: 2 additions & 1 deletion examples/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ const shaderProjects = [
{ name: 'Demo 6', path: './demo_6/index.js' },
{ name: 'Dithering 1', path: './dithering1/index.js' },
{ name: 'Dithering 2', path: './dithering2/index.js' },
{ name: 'Dithering 3', path: './dithering3/index.js' },
{ name: 'Dithering 3 - 1', path: './dithering3_1/index.js' },
{ name: 'Dithering 3 - 2', path: './dithering3_2/index.js' },
{ name: 'Dithering 4', path: './dithering4/index.js' },
{ name: 'Image Scale 1', path: './imagescale1/index.js' },
{ name: 'Image Texture 1', path: './imagetexture1/index.js' },
Expand Down
34 changes: 4 additions & 30 deletions examples/random2/compute.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,15 @@ fn main(
@builtin(workgroup_id) WorkGroupID: vec3<u32>,
@builtin(local_invocation_id) LocalInvocationID: vec3<u32>
) {


let dims = textureDimensions(feedbackTexture);

let numColumns:f32 = f32(dims.x);
let numRows:f32 = f32(dims.y);

let numColumnsPiece:i32 = i32(numColumns / f32(workgroupSize));
let numRowsPiece:i32 = i32(numRows / f32(workgroupSize));


//--------------------------------------------------

for (var indexColumns:i32 = 0; indexColumns < numColumnsPiece; indexColumns++) {
let x:f32 = f32(WorkGroupID.x) * f32(numColumnsPiece) + f32(indexColumns);
let ux = u32(x);
// let ix = i32(x);
// let nx = x / numColumns;
for (var indexRows:i32 = 0; indexRows < numRowsPiece; indexRows++) {

let y:f32 = f32(WorkGroupID.y) * f32(numRowsPiece) + f32(indexRows);
let uy = u32(y);
// let iy = i32(y);
// let ny = y / numRows;
// let uv = vec2(nx,ny);

let pointIndex = i32(y + (x * numColumns));
let c = rands[pointIndex];

let positionU = vec2<u32>(ux,uy);
textureStore(outputTex, positionU, vec4<f32>(c));
storageBarrier();
}
}
let pointIndex = i32(GlobalId.y + (GlobalId.x * dims.x));
let c = rands[pointIndex];

textureStore(outputTex, GlobalId.xy, vec4<f32>(c));
storageBarrier();
}
`;

Expand Down
7 changes: 4 additions & 3 deletions examples/random2/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import vert from './vert.js';
import compute from './compute.js';
import frag from './frag.js';
import { RenderPass } from '../../src/absulit.points.module.js';
const random2 = {
vert,
compute,
frag,
renderPasses: [
new RenderPass(vert, frag, compute, 800, 800)
],
init: async points => {
points.addUniform('randNumber', 0);
points.addUniform('randNumber2', 0);
Expand Down
55 changes: 21 additions & 34 deletions examples/random3/compute.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ ${rand}
${RGBAFromHSV}
${fnusin}

const workgroupSize = 8;
const workgroupSize = 1;

@compute @workgroup_size(workgroupSize,workgroupSize,1)
fn main(
Expand All @@ -21,40 +21,27 @@ fn main(
let numColumns:f32 = params.screenWidth;
let numRows:f32 = params.screenHeight;

let numColumnsPiece:i32 = i32(numColumns / f32(workgroupSize));
let numRowsPiece:i32 = i32(numRows / f32(workgroupSize));

for (var indexColumns:i32 = 0; indexColumns < numColumnsPiece; indexColumns++) {
let x:f32 = f32(WorkGroupID.x) * f32(numColumnsPiece) + f32(indexColumns);
let ux = u32(x);
let ix = i32(x);
let nx = x / numColumns;
for (var indexRows:i32 = 0; indexRows < numRowsPiece; indexRows++) {

let y:f32 = f32(WorkGroupID.y) * f32(numRowsPiece) + f32(indexRows);
let uy = u32(y);
let iy = i32(y);
let ny = y / numRows;

rand_seed.x += f32(WorkGroupID.x);
rand_seed.y += f32(WorkGroupID.y);

seed += i32(WorkGroupID.x + WorkGroupID.y);

let randNumber = rand();
rand_seed.y += randNumber + fract(params.sliderA);
var v = 0.;
if(randNumber < .5){
v = 1.;
}

// textureStore(outputTex, vec2<u32>(ux,uy), vec4(randNumber));
// textureStore(outputTex, vec2<u32>(ux,uy), RGBAFromHSV(randNumber, 1, 1));
// textureStore(outputTex, vec2<u32>(ux,uy), RGBAFromHSV( fnusin(randNumber), 1, 1));
// textureStore(outputTex, vec2<u32>(ux,uy), vec4( fnusin(randNumber)));
textureStore(outputTex, vec2<u32>(ux,uy), vec4( fract(randNumber + fnusin(1))));
}
rand_seed.x += f32(WorkGroupID.x);
rand_seed.y += f32(WorkGroupID.y);

seed += i32(WorkGroupID.x + WorkGroupID.y);

let randNumber = rand();
rand_seed.y += randNumber + fract(params.sliderA);
var v = 0.;
if(randNumber < .5){
v = 1.;
}

// textureStore(outputTex, GlobalId.xy, vec4(randNumber));
// textureStore(outputTex, GlobalId.xy, RGBAFromHSV(randNumber, 1, 1));
// textureStore(outputTex, GlobalId.xy, RGBAFromHSV( fnusin(randNumber), 1, 1));
// textureStore(outputTex, GlobalId.xy, vec4( fnusin(randNumber)));

textureStore(outputTex, GlobalId.xy, vec4( fract(randNumber + fnusin(1))));
// textureStore(outputTex, WorkGroupID.xy, vec4( fract(randNumber + fnusin(1))));
// textureStore(outputTex, LocalInvocationID.xy, vec4( fract(randNumber + fnusin(1))));

}
`;

Expand Down
9 changes: 6 additions & 3 deletions examples/random3/index.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import vert from './vert.js';
import compute from './compute.js';
import frag from './frag.js';
import { RenderPass } from '../../src/absulit.points.module.js';

const random3 = {
vert,
compute,
frag,

renderPasses: [
new RenderPass(vert, frag, compute, 800, 800)
],
init: async points => {
points.addSampler('feedbackSampler');
points.addTexture2d('feedbackTexture', true);
Expand Down
14 changes: 6 additions & 8 deletions examples/shapes1/compute.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const compute = /*wgsl*/`

const workgroupSize = 8;
const workgroupSize = 1;

@compute @workgroup_size(8,8,1)
@compute @workgroup_size(workgroupSize,workgroupSize,1)
fn main(
@builtin(global_invocation_id) GlobalId: vec3<u32>,
@builtin(workgroup_id) WorkGroupID: vec3<u32>,
Expand All @@ -12,12 +12,10 @@ fn main(
let numPoints = u32(params.numPoints);

// list of points for the sine wave
for(var k:u32; k < numPoints; k++){
let fk = f32(k);
let point = &points[k];
(*point).x = fk / params.numPoints;
(*point).y = sin( ((*point).x * 32) + time) * .1;
}
let fk = f32(GlobalId.x);
let point = &points[GlobalId.x];
(*point).x = fk / params.numPoints;
(*point).y = sin( ((*point).x * 32) + time) * .1;

}
`;
Expand Down
Loading