Proof of concept with image data

Sekqies · Sekqies · commit bd885d128be3 · 2026-02-03T17:10:20.000-03:00
diff --git a/divider.wgsl b/divider.wgsl
@@ -0,0 +1,6 @@
+@group(0) @binding(0) var<storage, read_write> data: array<f32>;
+
+@compute @workgroup_size(1) fn divide(@builtin(global_invocation_id) id: vec3u){
+    let i = id.x;
+    data[i] = data[i] / 2.0;
+}
diff --git a/index.html b/index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
 <body>
+<script src="scripts/main.js" type="module"></script>
 
+<div id="container"></div>
 <table border="0" cellpadding="0" cellspacing="0" spacing="0" padding="0">
   <tr>
     <td bgcolor="#FF0000" width="1" height="1"></td>
@@ -13,5 +15,9 @@
   </tr>
 </table>
 
+<input id="width" type="number">
+<input id="height" type="number">
+<button id="render">Render</button>
+
 </body>
 </html>
diff --git a/scripts/cpu/image.js b/scripts/cpu/image.js
@@ -0,0 +1,29 @@
+function hsl2rgb(h, s, l) {
+    const f_final = (n) => {
+        const k = (n + h * 12) % 12;
+        const color = l - s * Math.min(l, 1 - l) * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+        return 255 * color;
+    };
+    return [f_final(0), f_final(8), f_final(4)];
+}
+
+export function generate_trash_data(width, height){
+    const out = []
+    const center_x = width / 2;
+    const center_y = height / 2;
+    for(let value_y=0;value_y<height;++value_y){
+        let line = []
+        for(let value_x=0;value_x<width;++value_x){
+            const x = value_x - center_x;
+            const y = center_y - value_y;
+
+            const angle = Math.atan2(y,x);
+            const hue = ((angle + Math.PI)/(2.0 * Math.PI));
+            const light = (2.0/Math.PI) * Math.atan(Math.sqrt(x**2 + y**2)/100);
+            const color = hsl2rgb(hue,1.0,light);
+            line.push(color);
+        }
+        out.push(line);
+    }
+    return out;
+}
diff --git a/scripts/cpu/transformer.js b/scripts/cpu/transformer.js
@@ -21,12 +21,10 @@ const color_grid = [[red]];
  * @param {vec3} color 
  * @returns {string}
  */
-function to_hexcode(color){
-    let output = "";
-    for(const component of color){
-        output += component.toString(16);
-    }
-    return output;
+function to_hexcode(color) {
+    return color
+        .map(c => Math.round(c).toString(16).padStart(2, '0'))
+        .join('');
 }
 
 /**
@@ -37,7 +35,7 @@ function to_hexcode(color){
 function normalize_grid_size(grid){
     let line_size = 0;
     for(const line of grid){
-        line_size = Math.max(line.length);
+        line_size = Math.max(line.length,line_size);
     }
     for(let line of grid){
         if(line.length == line_size) continue;
@@ -58,7 +56,7 @@ export function build_color_grid(color_grid){
     for(const row of color_grid){
         html+="<tr>";
         for(const color of row){
-            html+= '<td bgcolor="' + to_hexcode(color) +  '"width="1" height="1"></td>';
+            html+= '<td bgcolor="#' + to_hexcode(color) +  '"width="1" height="1"></td>';
         }
         html+="</tr>";
     }
diff --git a/scripts/main.js b/scripts/main.js
@@ -0,0 +1,15 @@
+import { generate_trash_data } from "./cpu/image.js";
+import { build_color_grid } from "./cpu/transformer.js";
+
+
+export function main(){
+    const target = document.getElementById('container');
+    const width = document.getElementById('width').valueAsNumber;
+    const height = document.getElementById('height').valueAsNumber;
+
+    const image_data = generate_trash_data(width,height);
+    const table_text = build_color_grid(image_data);
+    target.innerHTML = table_text;
+}
+
+document.getElementById('render').addEventListener('click', main);
diff --git a/testing.html b/testing.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <script>
+        const src = `
+        @group(0) @binding(0) var<storage, read_write> data: array<f32>;
+        @compute @workgroup_size(1) fn divide(@builtin(global_invocation_id) id: vec3u){
+            let i = id.x;
+            data[i] = data[i] / 2.0;
+        }            
+        `
+        async function main(){
+            const adapter = await navigator.gpu?.requestAdapter();
+            const device = await adapter?.requestDevice();
+            if(!device){
+                fail("browser does not support WebGPU");
+                return;
+            }
+            const module = device.createShaderModule({
+                label: 'i am the one who divides',
+                code: src
+            });
+            const pipeline = device.createComputePipeline({
+                label: 'i am the one who pipelines',
+                layout: 'auto',
+                compute:{
+                    module
+                }
+            })
+            const input = new Float32Array([1,3,5]);
+            const work_buffer = device.createBuffer({
+                label: 'work buffer',
+                size: input.byteLength,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
+            });
+            device.queue.writeBuffer(work_buffer,0,input);
+            const result_buffer = device.createBuffer({
+                label: 'result buffer',
+                size: input.byteLength,
+                usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
+            })
+            const bind_group = device.createBindGroup({
+                label: 'bind group for work buffer',
+                layout: pipeline.getBindGroupLayout(0),
+                entries: [
+                    {binding:0, resource: work_buffer}
+                ]
+            });
+              const encoder = device.createCommandEncoder({
+                label: 'doubling encoder',
+            });
+            const pass = encoder.beginComputePass({
+                label: 'doubling compute pass',
+            });
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bind_group);
+            pass.dispatchWorkgroups(input.length);
+            pass.end();
+            encoder.copyBufferToBuffer(work_buffer, 0, result_buffer, 0, result_buffer.size);
+            const commandBuffer = encoder.finish();
+            device.queue.submit([commandBuffer]);
+
+            await result_buffer.mapAsync(GPUMapMode.READ);
+            const result = new Float32Array(result_buffer.getMappedRange());
+
+            console.log('input',input);
+            console.log('result',result);
+            result_buffer.unmap();
+        }
+        main();
+
+
+
+
+
+
+    </script>
+</body>
+</html>
