Merge pull request #75 from Absulit/fixes

Fixes
Absulit · Jul 2, 2023 · da05db1 · da05db1
2 parents 3a57ef0 + 6a08210
commit da05db1
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 47 deletions.
diff --git a/examples/circleblur/compute.js b/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);
 }
 `;
 

diff --git a/examples/circleblur/index.js b/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);

diff --git a/examples/dithering3_1/index.js b/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 => {
 

diff --git a/examples/dithering3_2/index.js b/examples/dithering3_2/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 => {
 

diff --git a/examples/main.js b/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();
@@ -148,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 => {

diff --git a/src/absulit.points.module.js b/src/absulit.points.module.js
@@ -259,17 +259,20 @@ export default class Points {
             window.addEventListener('resize', this._resizeCanvasToFitWindow, false);
 
             document.addEventListener("fullscreenchange", e => {
-                let isFullscreen = window.innerWidth == screen.width && window.innerHeight == screen.height;
+                let isFullscreen = !!document.fullscreenElement;
                 this._fullscreen = isFullscreen;
                 if (!isFullscreen && !this._fitWindow) {
                     this._resizeCanvasToDefault();
                 }
+                if (!isFullscreen) {
+                    this.fitWindow = this._lastFitWindow;
+                }
             });
         }
 
         this._fullscreen = false;
         this._fitWindow = false;
-
+        this._lastFitWindow = false;
 
         // _readStorage should only be read once
         this._readStorageCopied = false;
@@ -743,15 +746,11 @@ export default class Points {
 
         let dynamicStructParams = '';
         this._uniforms.forEach(variable => {
-            dynamicStructParams += /*wgsl*/`${variable.name}:f32, \n\t\t\t\t\t`;
+            dynamicStructParams += /*wgsl*/`${variable.name}:f32, \n\t`;
         });
 
         if (this._uniforms.length) {
-            dynamicStructParams = /*wgsl*/`
-                struct Params {
-                    ${dynamicStructParams}
-                }
-            \n`;
+            dynamicStructParams = /*wgsl*/`struct Params {\n\t${dynamicStructParams}\n}\n`;
         }
 
         renderPass.hasVertexShader && (dynamicGroupBindingsVertex += dynamicStructParams);
@@ -1196,7 +1195,7 @@ export default class Points {
         }
 
         if (this._storage.length) {
-            this._storage.forEach((storageItem, index) => {
+            this._storage.forEach(storageItem => {
                 let internalCheck = internal == storageItem.internal;
                 if (!storageItem.shaderType && internalCheck || storageItem.shaderType == shaderType && internalCheck) {
                     entries.push(
@@ -1334,7 +1333,7 @@ export default class Points {
                     entries.push(
                         {
                             label: 'binding texture 2',
-                            binding: bindingIndex, // this does not increase, must match the previous block
+                            binding: bindingIndex++,
                             resource: bindingTexture.texture.createView(),
                             type: {
                                 name: 'texture',
@@ -1603,6 +1602,8 @@ export default class Points {
 
     set fullscreen(value) {
         if (value) {
+            this._lastFitWindow = this._fitWindow;
+            this.fitWindow = value;
             this._canvas.requestFullscreen().catch(err => {
                 throw `Error attempting to enable fullscreen mode: ${err.message} (${err.name})`;
             });