Merge pull request #128 from Absulit/dev

Dev

examples/dithering_video_1/compute.js

@@ -0,0 +1,81 @@
+import { brightness } from 'color';
+
+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.quantError * 10));
+
+    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/dithering_video_1/frag.js

@@ -0,0 +1,32 @@
+import { snoise } from 'noise2d';
+import { texturePosition } from 'image';
+import { fnusin } from 'animation';
+
+const frag = /*wgsl*/`
+struct Variable{
+    init: i32
+}
+
+${fnusin}
+${snoise}
+${texturePosition}
+
+@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.scale, false); //* .998046;
+
+    return point;
+}
+`;
+
+export default frag;

examples/dithering_video_1/index.js

@@ -0,0 +1,46 @@
+import vert from './vert.js';
+import compute from './compute.js';
+import frag from './frag.js';
+import RenderPass from 'renderpass';
+import ShaderType from 'shadertype';
+import Points from 'points';
+
+const options = {
+    scale: 1,
+    quantError: .15,
+}
+
+const base = {
+    renderPasses: [
+        new RenderPass(vert, frag, compute, 800, 800)
+    ],
+    /**
+     *
+     * @param {Points} points
+     * @param {*} folder
+     */
+    init: async (points, folder) => {
+        let descriptor = {
+            addressModeU: 'repeat',
+            addressModeV: 'repeat',
+        }
+        points.addSampler('imageSampler', descriptor);
+        await points.addTextureVideo('image', './../../img/6982698-hd_1440_1080_25fps_800x800.mp4');
+        points.addBindingTexture('outputTex', 'computeTexture');
+        points.addLayers(2);
+        points.addStorage('variables', 'Variable', false, ShaderType.COMPUTE);
+
+        points.addUniform('scale', options.scale);
+        points.addUniform('quantError', options.quantError);
+
+        folder.add(options, 'scale', 0, 1, .0001).name('Scale');
+        folder.add(options, 'quantError', -1, 1, .0001).name('quantError');
+        folder.open();
+    },
+    update: points => {
+        points.updateUniform('scale', options.scale);
+        points.updateUniform('quantError', options.quantError);
+    }
+}
+
+export default base;

examples/dithering_video_1/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/index.html

@@ -13,6 +13,10 @@
                     <ul>
                         <li class="menu-main"><a href="https://github.com/Absulit/points/">POINTS Github</a></li>
                     </ul>
+                    <h2>showcase</h2>
+                    <ul class="showcase"></ul>
+                    <h2>reference</h2>
+                    <ul class="reference"></ul>
                 </nav>
             </div>
             <div class="content column right">