Merge pull request #76 from Absulit/dev

Dev

README.md

@@ -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.

examples/circleblur/compute.js

@@ -4,7 +4,7 @@ const compute = /*wgsl*/`
 
 ${clearMix}
 
-const workgroupSize = 8;
+const workgroupSize = 1;
 
 //'function', 'private', 'push_constant', 'storage', 'uniform', 'workgroup'
 
@@ -15,42 +15,27 @@ fn main(
     @builtin(local_invocation_id) LocalInvocationID: vec3<u32>
 ) {
 
-    let filterDim = 128u;
-    let blockDim = 128u;
-    let flipValue = 0u;
+    // let filterDim = 128u;
+    // let blockDim = 128u;
+    // let flipValue = 0u;
 
-    let filterOffset : u32 = (filterDim - 1u) / 2u;
-    let dims : vec2<u32> = textureDimensions(feedbackTexture, 0);
+    // let filterOffset : u32 = (filterDim - 1u) / 2u;
 
-    let baseIndex = vec2<i32>(
-        WorkGroupID.xy * vec2<u32>(blockDim, 4u) +
-        LocalInvocationID.xy * vec2<u32>(4u, 1u)
-    ) - vec2<i32>(i32(filterOffset), 0);
+    // let baseIndex = vec2<i32>(
+    //     WorkGroupID.xy * vec2<u32>(blockDim, 4u) +
+    //     LocalInvocationID.xy * vec2<u32>(4u, 1u)
+    // ) - vec2<i32>(i32(filterOffset), 0);
 
     // ----------------------------------------------
-    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 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 ny = y / numRows;
-
-            var rgba = textureSampleLevel(feedbackTexture,feedbackSampler, vec2<f32>(x,y),  0.0);
-
-            rgba = clearMix(rgba, 1.01) + vec4<f32>(1.,0.,0., .5);
-
-            textureStore(outputTex, vec2<u32>(ux,uy), rgba);
-        }
-    }
+    var rgba = textureSampleLevel(
+        feedbackTexture,feedbackSampler,
+        vec2<f32>(f32(GlobalId.x), f32(GlobalId.y)),
+        0.0
+    );
+    rgba = clearMix(rgba, 1.01) + vec4<f32>(1.,0.,0., .5);
+    textureStore(outputTex, GlobalId.xy, rgba);
 }
 `;
 

examples/circleblur/index.js

@@ -1,10 +1,12 @@
 import vert from './vert.js';
 import compute from './compute.js';
 import frag from './frag.js';
+import { RenderPass } from '../../src/absulit.points.module.js';
 const circleblur = {
-    vert,
-    compute,
-    frag,
+    renderPasses: [
+        new RenderPass(null, null, compute, 800, 800, 1),
+        new RenderPass(vert, frag, null, 8, 1, 1)
+    ],
     init: async points => {
         points.addSampler('feedbackSampler');
         points.addTexture2d('feedbackTexture', true);

examples/dithering3/compute.js → examples/dithering3_1/compute.js

@@ -1,4 +1,4 @@
-import { brightness } from './../../src/core/color.js';
+import { brightness } from '../../src/core/color.js';
 
 const compute = /*wgsl*/`
 

examples/dithering3/index.js → examples/dithering3_1/index.js

@@ -16,7 +16,7 @@ const dithering3 = {
         await points.addTextureImage('image', './../img/absulit_800x800.jpg');
         points.addBindingTexture('outputTex', 'computeTexture');
         points.addLayers(2);
-        points.addStorage('variables', 1, 'Variable', 2, false, ShaderType.COMPUTE);
+        points.addStorage('variables', 1, 'Variable', 1, false, ShaderType.COMPUTE);
     },
     update: points => {
 

examples/dithering3_2/compute.js

@@ -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;

examples/dithering3_2/frag.js

@@ -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;

examples/dithering3_2/index.js

@@ -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', 1, false, ShaderType.COMPUTE);
+    },
+    update: points => {
+
+    }
+}
+
+export default dithering3;

examples/dithering3_2/vert.js

@@ -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;

examples/main.js

@@ -41,7 +41,7 @@ gui.add(stats2, 'visible').name('Show Stats').onChange(value => setStatsVisibili
 
 let isFullscreenData = { 'isFullscreen': false };
 let fullscreenCheck = gui.add(isFullscreenData, 'isFullscreen').name('Fullscreen').onChange(value => points.fullscreen = value);
-document.addEventListener("fullscreenchange", e => {
+document.addEventListener('fullscreenchange', e => {
     let isFullscreen = window.innerWidth == screen.width && window.innerHeight == screen.height;
     isFullscreenData.isFullscreen = isFullscreen;
     fullscreenCheck.updateDisplay();
@@ -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' },
@@ -147,6 +148,13 @@ const recordingOptions = [
         started: false,
         controller: null
     },
+    {
+        nameStopped: 'Download PNG Image',
+        fn: function (e) {
+            let image = document.getElementById('gl-canvas').toDataURL().replace('image/png', 'image/octet-stream');
+            window.location.href = image;
+        },
+    },
 ];
 
 recordingOptions.forEach(recordingOption => {

examples/random2/compute.js

@@ -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();
 }
 `;
 

examples/random2/index.js

@@ -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);