From 761cfe4b114377119f31154f86f2a69d5e10bccf Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Fri, 4 Apr 2025 16:42:29 +0200
Subject: [PATCH 1/7] webgpu minimal support

to be finalized (zoom / pan / tileses)
webgpu / opengl switch
---
 micropolis/dun-notes.md                  |   8 ++
 micropolis/src/lib/MicropolisView.svelte |   6 +-
 micropolis/src/lib/TileView.svelte       |  16 +--
 micropolis/src/lib/WebGPUTileRenderer.ts | 123 +++++++++++++----------
 4 files changed, 91 insertions(+), 62 deletions(-)
 create mode 100644 micropolis/dun-notes.md

diff --git a/micropolis/dun-notes.md b/micropolis/dun-notes.md
new file mode 100644
index 0000000..3f302b0
--- /dev/null
+++ b/micropolis/dun-notes.md
@@ -0,0 +1,8 @@
+micropolis/src/lib/MicropolisView.svelte
+    set webgpu / opengl switch?
+
+
+micropolis/src/lib/TileView.svelte
+    allow webgpu / opengl switch
+    all tilesets
+    implement for gpu ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height); ??
\ No newline at end of file
diff --git a/micropolis/src/lib/MicropolisView.svelte b/micropolis/src/lib/MicropolisView.svelte
index f30aa72..aec48f8 100644
--- a/micropolis/src/lib/MicropolisView.svelte
+++ b/micropolis/src/lib/MicropolisView.svelte
@@ -2,7 +2,9 @@
 
   import { onMount, onDestroy } from 'svelte';
   import { loadMicropolisEngine, MicropolisSimulator } from '$lib/MicropolisSimulator';
-  import { TileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
+  //import { TileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
+  //import { TileRenderer, WebGPUTileRenderer } from '$lib/WebGPUTileRenderer';
+
   import initModule from "$lib/micropolisengine.js";
   import { MicropolisCallbackLog } from "$lib/MicropolisCallbackLog";
   import TileView from '$lib/TileView.svelte';
@@ -71,7 +73,7 @@
   bind:this={tileView}
 />
 
-<About showAbout={true}/>
+<About showAbout={false}/>
 
 <!--
 <SnapView
diff --git a/micropolis/src/lib/TileView.svelte b/micropolis/src/lib/TileView.svelte
index 5930643..6463f79 100644
--- a/micropolis/src/lib/TileView.svelte
+++ b/micropolis/src/lib/TileView.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 
   import { onMount, onDestroy } from 'svelte';
-  import { TileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
+  //import { TileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
+  import { TileRenderer, WebGPUTileRenderer } from '$lib/WebGPUTileRenderer';
   import { pan, pinch } from 'svelte-gestures';
   import { MicropolisSimulator } from '$lib/MicropolisSimulator';
 
   // Tile Sets
-  import tileLayer_all10 from '$lib/images/tilesets/all.png';
+  import tileLayer_all10 from '$lib/images/tilesets/classic.png';
 
   const tileLayers = [
     tileLayer_all10,
@@ -19,7 +20,8 @@
   let tileSet: number = 0;
 
   let canvasGL: HTMLCanvasElement | null = null;
-  let ctxGL: WebGL2RenderingContext | null = null;
+  //let ctxGL: WebGL2RenderingContext | null = null;
+  let ctxGL: GPUCanvasContext | null = null;
   let tileRenderer: TileRenderer<any> | null = null;
 
   let autoRepeatIntervalId: any | null = null;
@@ -65,14 +67,16 @@
       return;
     }
 
-    ctxGL = canvasGL.getContext('webgl2');
+    //ctxGL = canvasGL.getContext('webgl2');
+    ctxGL = canvasGL.getContext('webgpu');
     //console.log('TileView.svelte: initialize:', 'ctxGL:', ctxGL);
     if (ctxGL == null) {
       console.log('TileView.svelte: initialize: no ctxGL!');
       return;
     }
 
-    tileRenderer = new WebGLTileRenderer();
+    //tileRenderer = new WebGLTileRenderer();
+    tileRenderer = new WebGPUTileRenderer();
 
     if (typeof window != "undefined") {
       //window.tileRenderer = tileRenderer;
@@ -125,7 +129,7 @@
       canvasGL.height = canvasGL.clientHeight * ratio;
       //console.log("TileView.svelte: resizeCanvas:", "ratio:", ratio, "canvasGL.width:", canvasGL.width, "canvasGL.height:", canvasGL.height);
       if (ctxGL) {
-        ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height);
+      //  ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height);
       }
     }
   }
diff --git a/micropolis/src/lib/WebGPUTileRenderer.ts b/micropolis/src/lib/WebGPUTileRenderer.ts
index 022b166..d4b077b 100644
--- a/micropolis/src/lib/WebGPUTileRenderer.ts
+++ b/micropolis/src/lib/WebGPUTileRenderer.ts
@@ -45,7 +45,8 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
     ): Promise<void> {
 
         await super.initialize(canvas, this.context, mapData, mopData, mapWidth, mapHeight, tileWidth, tileHeight, tileTextureURLs);
-
+        console.log({mapData, mopData, mapWidth, mapHeight, tileWidth, tileHeight, tileTextureURLs})
+       
         this.context = canvas.getContext('webgpu') as GPUCanvasContext;
         if (!this.context) {
             throw new Error('WebGPU is not supported.');
@@ -66,6 +67,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
 
         // Load the tile texture
         const tileImage = await this.loadImage(tileTextureURLs[0]);
+        console.log("texture size",tileImage.width, tileImage.height);
         this.tileTexture = this.device.createTexture({
             size: [tileImage.width, tileImage.height, 1],
             format: 'rgba8unorm',
@@ -81,41 +83,33 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             [tileImage.width, tileImage.height, 1]
         );
 
+       
         // Create the map texture
         this.mapTexture = this.device.createTexture({
-            size: [mapHeight, mapWidth, 1], // Map data is column major order, so the width is the second dimension.
-            format: 'r16uint',
+            size: [mapHeight, mapWidth], // Map data is column major order, so the width is the second dimension.
+            format:'r16uint',
             usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
         });
         this.mapTextureView = this.mapTexture.createView();
 
-        // Copy map data to texture
-         // Map data is column major order, so the width is the second dimension.
-        const bytesPerRow = Math.ceil(mapHeight * 2 / 256) * 256;
-        const bufferSize = bytesPerRow * mapWidth;
-        
-        const mapBuffer = this.device.createBuffer({
-            size: bufferSize,
-            usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
-            mappedAtCreation: true,
-        });
-        new Uint16Array(mapBuffer.getMappedRange()).set(mapData);
-        mapBuffer.unmap();
-        
-        const commandEncoder = this.device.createCommandEncoder();
-        commandEncoder.copyBufferToTexture(
-            { buffer: mapBuffer, bytesPerRow: bytesPerRow },
-            { texture: this.mapTexture },
-            [mapHeight, mapWidth, 1] // Map data is column major order, so the width is the second dimension.
-        );
-        this.device.queue.submit([commandEncoder.finish()]);
+
+        this.device.queue.writeTexture( {texture:this.mapTexture}, mapData,
+             {bytesPerRow:mapHeight * Uint16Array.BYTES_PER_ELEMENT}, { width: mapHeight, height:mapWidth });
+
         
         // Create the shader modules
         const vertexShaderModule = this.device.createShaderModule({
-            code: `@vertex
+            code: /*wgsl*/`
+
+            struct VertexOutput {
+                    @builtin(position) position: vec4<f32>,
+                    @location(0) fragCoord: vec2<f32>,
+            };
+
+            @vertex
             fn main(
                 @builtin(vertex_index) VertexIndex: u32
-            ) -> @builtin(position) vec4<f32> {
+            ) -> VertexOutput {
                 var positions = array<vec2<f32>, 6>(
                     vec2<f32>(-1.0,  1.0),
                     vec2<f32>( 1.0,  1.0),
@@ -124,16 +118,29 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     vec2<f32>(-1.0, -1.0),
                     vec2<f32>( 1.0, -1.0)
                 );
+
+                  var mapCoords = array<vec2<f32>, 6>(
+                    vec2<f32>(0.0, 0.0),
+                    vec2<f32>(120.0, 0.0),
+                    vec2<f32>(0.0, 120.0),
+                    vec2<f32>(120.0, 0.0),
+                    vec2<f32>(0.0, 120.0),
+                    vec2<f32>(120.0, 120.0)
+                );
+
                 let position = positions[VertexIndex];
-                return vec4<f32>(position, 0.0, 1.0);
+                return VertexOutput(vec4<f32>(position, 0.0, 1.0), mapCoords[VertexIndex]);
             }`,
         });
 
         const fragmentShaderModule = this.device.createShaderModule({
-            code: `
+            code: /*wgsl*/`
+               
                 @group(0) @binding(0) var tileTexture: texture_2d<f32>;
                 @group(0) @binding(1) var tileSampler: sampler;
                 @group(0) @binding(2) var mapTexture: texture_2d<u32>;
+                @group(0) @binding(3) var<uniform> uniforms: Uniforms;
+               
 
                 struct VertexOutput {
                     @builtin(position) position: vec4<f32>,
@@ -141,35 +148,33 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                 };
 
                 struct Uniforms {
-                    tileSize: vec2<f32>;
-                    tilesSize: vec2<f32>;
-                    mapSize: vec2<f32>;
+                    tileSize: vec2<f32>,
+                    tilesSize: vec2<f32>,
+                    mapSize: vec2<f32>
                 };
 
-                @group(0) @binding(3) var<uniform> uniforms: Uniforms;
-
-                fn getTileUV(tileIndex: u32, tileSize: vec2<f32>, textureSize: vec2<f32>) -> vec2<f32> {
-                    let tilesPerRow = textureSize.x / tileSize.x;
-                    let tileRow = f32(tileIndex) / tilesPerRow;
-                    let tileCol = f32(tileIndex) - tileRow * tilesPerRow;
-                    let uv = vec2<f32>(tileCol * tileSize.x, tileRow * tileSize.y) / textureSize;
-                    return uv;
-                }
-
+               
                 @fragment
-                fn main(input: VertexOutput) -> @location(0) vec4<f32> {
+                fn main(input: VertexOutput) -> @location(0) vec4f {
                     // Calculate the tile index from the map texture
-                    let mapCoord = vec2<i32>(input.fragCoord);
-                    let tileIndex = textureLoad(mapTexture, mapCoord, 0).x;
-
+                    let mapCoord = vec2<i32>(floor(input.fragCoord));
+                    let outOfMap = mapCoord.x <0 || mapCoord.x >= 120 || mapCoord.y <0 || mapCoord.y>=100;
+                    let tileIndex = select(textureLoad(mapTexture, vec2<i32>(mapCoord.y, mapCoord.x), 0).r & 0x03ff, 0 ,outOfMap);
+                    //DEBUG let tileIndex = select(u32(32+20), 0 ,outOfMap);
+                
                     // Calculate the UV coordinates for the tile texture
                     let tileSize = uniforms.tileSize;
                     let textureSize = uniforms.tilesSize;
-                    let tileUV = getTileUV(tileIndex, tileSize, textureSize);
-
+                   
+                
+                    // tile coordinate in tile unit
+                    let tileCoords = vec2<f32>(f32(tileIndex) % 32.0, floor(f32(tileIndex) / 32.0));
+                    let cTilePx = tileCoords * 16.0; // pixel position of tile in tile texture
+                    let dTilePx = fract(input.fragCoord)*16; // delta pixel position of current fragment                  
+                    let tileUV = (cTilePx + dTilePx)/512.0; // pixel position of current fragment over texture size
+            
                     // Sample the color from the tile texture
-                    let color = textureSample(tileTexture, tileSampler, tileUV);
-
+                    let color = textureSample(tileTexture, tileSampler, tileUV);                 
                     return color;
                 }`,
         });
@@ -196,6 +201,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     visibility: GPUShaderStage.FRAGMENT,
                     buffer: { type: 'uniform' },
                 },
+              
             ],
         });
         
@@ -222,8 +228,10 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
 
         // Add a sampler creation
         this.sampler = this.device.createSampler({
-            magFilter: 'linear',
-            minFilter: 'linear',
+            magFilter: 'nearest',
+            minFilter: 'nearest',
+            addressModeU: "clamp-to-edge",
+            addressModeV: "clamp-to-edge",
         });
 
         // Make sure the uniform buffer is created and populated correctly
@@ -233,7 +241,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             mappedAtCreation: true,
         });
         // Map data is column major order, so the width is the second dimension.
-        new Float32Array(this.uniformBuffer.getMappedRange()).set([16.0, 16.0, 256.0, 256.0, mapHeight, mapWidth]);
+        new Float32Array(this.uniformBuffer.getMappedRange()).set([16.0, 16.0, 512.0, 512.0, mapHeight, mapWidth]);
         this.uniformBuffer.unmap();
 
         // Correct the bind group entries to ensure all resources are correctly specified
@@ -260,6 +268,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                         size: 6 * 4, // vec2<f32> for tileSize, tilesSize, and mapSize
                     },
                 },
+               
             ],
         });
     }
@@ -274,13 +283,18 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
     }
 
     render(): void {
+       // console.log('render', this.tileRotate, this.tileLayer);
+
         if (!this.canvas || !this.context || !this.pipeline || !this.bindGroup) {
             throw new Error('The canvas, WebGPU context, pipeline, or bind group are not properly initialized.');
         }
 
         this.setScreenSize(this.canvas.width, this.canvas.height);
 
-        const commandEncoder = this.device.createCommandEncoder();
+        // copy map data
+       this.device.queue.writeTexture( {texture:this.mapTexture}, this.mapData, {bytesPerRow:100 * Uint16Array.BYTES_PER_ELEMENT}, { width: 100, height:120 });
+
+        //
         const textureView = this.context.getCurrentTexture().createView();
 
         const renderPassDescriptor: GPURenderPassDescriptor = {
@@ -294,10 +308,11 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             ],
         };
 
+        const commandEncoder = this.device.createCommandEncoder();
         const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
         passEncoder.setPipeline(this.pipeline);
         passEncoder.setBindGroup(0, this.bindGroup);
-        passEncoder.draw(6, 1, 0, 0);
+        passEncoder.draw(6);//, 1, 0, 0);
         passEncoder.end();
 
         this.device.queue.submit([commandEncoder.finish()]);
@@ -305,4 +320,4 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
 }
 
 
-export { TileRenderer, WebGPUTileRenderer };
+export { TileRenderer, WebGPUTileRenderer };
\ No newline at end of file

From 9debfedc8bd2945649a0ced57bb01140f160fc12 Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Fri, 4 Apr 2025 19:43:11 +0200
Subject: [PATCH 2/7] pan & zoom

---
 micropolis/src/lib/WebGPUTileRenderer.ts | 95 ++++++++++++++++++------
 1 file changed, 73 insertions(+), 22 deletions(-)

diff --git a/micropolis/src/lib/WebGPUTileRenderer.ts b/micropolis/src/lib/WebGPUTileRenderer.ts
index d4b077b..9340cde 100644
--- a/micropolis/src/lib/WebGPUTileRenderer.ts
+++ b/micropolis/src/lib/WebGPUTileRenderer.ts
@@ -17,6 +17,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
     public bindGroup: GPUBindGroup;
     public sampler: GPUSampler;
     public uniformBuffer: GPUBuffer;
+    public verticeBuffer;
 
     constructor() {
         super();
@@ -30,6 +31,8 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
         this.bindGroup = {} as GPUBindGroup;
         this.sampler = {} as GPUSampler;
         this.uniformBuffer = {} as GPUBuffer;
+
+        this.verticeBuffer = {}  as GPUBuffer;
     }
 
     async initialize(
@@ -65,6 +68,8 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             format: 'bgra8unorm',
         });
 
+        this.verticeBuffer = this.squareVerticeBuffer();
+
         // Load the tile texture
         const tileImage = await this.loadImage(tileTextureURLs[0]);
         console.log("texture size",tileImage.width, tileImage.height);
@@ -108,28 +113,8 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
 
             @vertex
             fn main(
-                @builtin(vertex_index) VertexIndex: u32
-            ) -> VertexOutput {
-                var positions = array<vec2<f32>, 6>(
-                    vec2<f32>(-1.0,  1.0),
-                    vec2<f32>( 1.0,  1.0),
-                    vec2<f32>(-1.0, -1.0),
-                    vec2<f32>( 1.0,  1.0),
-                    vec2<f32>(-1.0, -1.0),
-                    vec2<f32>( 1.0, -1.0)
-                );
-
-                  var mapCoords = array<vec2<f32>, 6>(
-                    vec2<f32>(0.0, 0.0),
-                    vec2<f32>(120.0, 0.0),
-                    vec2<f32>(0.0, 120.0),
-                    vec2<f32>(120.0, 0.0),
-                    vec2<f32>(0.0, 120.0),
-                    vec2<f32>(120.0, 120.0)
-                );
-
-                let position = positions[VertexIndex];
-                return VertexOutput(vec4<f32>(position, 0.0, 1.0), mapCoords[VertexIndex]);
+                @location(0) position : vec4f, @location(1) mapCoord : vec2f) -> VertexOutput {
+                return VertexOutput(position, mapCoord);
             }`,
         });
 
@@ -211,6 +196,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             vertex: {
                 module: vertexShaderModule,
                 entryPoint: 'main',
+                buffers: [verticesDescription()],
             },
             fragment: {
                 module: fragmentShaderModule,
@@ -308,16 +294,81 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             ],
         };
 
+        this.verticeBuffer = this.squareVerticeBuffer();
+
         const commandEncoder = this.device.createCommandEncoder();
         const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
         passEncoder.setPipeline(this.pipeline);
+        passEncoder.setVertexBuffer(0, this.verticeBuffer);
         passEncoder.setBindGroup(0, this.bindGroup);
         passEncoder.draw(6);//, 1, 0, 0);
         passEncoder.end();
 
         this.device.queue.submit([commandEncoder.finish()]);
     }
+
+    squareVerticeBuffer() {
+        var px = this.panX * this.tileWidth;
+        var py = this.panY * this.tileHeight;
+        var z = 4 * this.zoom;
+    
+        var left =   (px - (this.screenWidth  / z)) / this.tileWidth;
+        var right =  (px + (this.screenWidth  / z)) / this.tileWidth;
+        var top =    (py - (this.screenHeight / z)) / this.tileHeight;
+        var bottom = (py + (this.screenHeight / z)) / this.tileHeight;
+
+       // console.log({left,right,top,bottom});
+
+        //
+        // C---D
+        // | \ |
+        // |  \|
+        // A---B
+        // prettier-ignore
+        const vertexArray = new Float32Array([
+            // float4 position,  float2 map cell coordinates,
+            -1, -1, 0, 1,   left, bottom,   //A
+             1, -1, 0, 1,   right, bottom,   //B
+            -1,  1, 0, 1,   left, top,   //C
+          
+            -1,  1, 0, 1,   left, top,   //C
+             1, -1, 0, 1 ,  right, bottom,   //B
+             1,  1, 0, 1,   right, top    //D
+          ]);
+      
+  
+        const verticeBuffer = this.device.createBuffer({
+          size: vertexArray.byteLength,
+          usage: GPUBufferUsage.VERTEX,
+          mappedAtCreation: true,
+        });
+        new Float32Array(verticeBuffer.getMappedRange()).set(vertexArray);
+        verticeBuffer.unmap();
+        return verticeBuffer;
+      }
+      
 }
 
 
+ function verticesDescription(): GPUVertexBufferLayout{
+    return {
+      arrayStride: 6 * 4,
+      attributes: [
+        {
+          // position
+          shaderLocation: 0,
+          offset: 0,
+          format: "float32x4",
+        },
+        {
+          // map coordinates
+          shaderLocation: 1,
+          offset: 4 * 4,
+          format: "float32x2",
+        },
+      ],
+    };
+  }
+
+
 export { TileRenderer, WebGPUTileRenderer };
\ No newline at end of file

From 3be41f94333bbe6c5d51e62476f538d18e56602b Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Fri, 4 Apr 2025 19:53:29 +0200
Subject: [PATCH 3/7] use uniforms

---
 micropolis/src/lib/WebGPUTileRenderer.ts | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/micropolis/src/lib/WebGPUTileRenderer.ts b/micropolis/src/lib/WebGPUTileRenderer.ts
index 9340cde..e5f8d6e 100644
--- a/micropolis/src/lib/WebGPUTileRenderer.ts
+++ b/micropolis/src/lib/WebGPUTileRenderer.ts
@@ -141,22 +141,25 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                
                 @fragment
                 fn main(input: VertexOutput) -> @location(0) vec4f {
+
+                    let tileSize = uniforms.tileSize;
+                    let textureSize = uniforms.tilesSize;
+                    let mapSize = uniforms.mapSize;
+
                     // Calculate the tile index from the map texture
                     let mapCoord = vec2<i32>(floor(input.fragCoord));
-                    let outOfMap = mapCoord.x <0 || mapCoord.x >= 120 || mapCoord.y <0 || mapCoord.y>=100;
+                    let outOfMap = mapCoord.x <0 || mapCoord.x >= i32(mapSize.y) || mapCoord.y <0 || mapCoord.y>=i32(mapSize.x);
                     let tileIndex = select(textureLoad(mapTexture, vec2<i32>(mapCoord.y, mapCoord.x), 0).r & 0x03ff, 0 ,outOfMap);
                     //DEBUG let tileIndex = select(u32(32+20), 0 ,outOfMap);
                 
-                    // Calculate the UV coordinates for the tile texture
-                    let tileSize = uniforms.tileSize;
-                    let textureSize = uniforms.tilesSize;
-                   
-                
+                    // Calculate the UV coordinates for the tile texture (assuming tiles and texture are squares)
+        
+                    let tilesPerRow = textureSize.x / tileSize.x;
                     // tile coordinate in tile unit
-                    let tileCoords = vec2<f32>(f32(tileIndex) % 32.0, floor(f32(tileIndex) / 32.0));
-                    let cTilePx = tileCoords * 16.0; // pixel position of tile in tile texture
-                    let dTilePx = fract(input.fragCoord)*16; // delta pixel position of current fragment                  
-                    let tileUV = (cTilePx + dTilePx)/512.0; // pixel position of current fragment over texture size
+                    let tileCoords = vec2<f32>(f32(tileIndex) % tilesPerRow, floor(f32(tileIndex) / tilesPerRow));
+                    let cTilePx = tileCoords * tileSize.x; // pixel position of tile in tile texture
+                    let dTilePx = fract(input.fragCoord) * tileSize.x; // delta pixel position of current fragment                  
+                    let tileUV = (cTilePx + dTilePx)/textureSize.x; // pixel position of current fragment over texture size
             
                     // Sample the color from the tile texture
                     let color = textureSample(tileTexture, tileSampler, tileUV);                 

From 5628b14a07f13c0108e17dca52ffaa45bc9befa8 Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Sat, 5 Apr 2025 09:02:03 +0200
Subject: [PATCH 4/7] support tilesets

---
 micropolis/dun-notes.md                  | 15 ++++++---
 micropolis/src/lib/TileView.svelte       |  2 +-
 micropolis/src/lib/WebGPUTileRenderer.ts | 40 +++++++++++++++---------
 3 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/micropolis/dun-notes.md b/micropolis/dun-notes.md
index 3f302b0..9a3a2bc 100644
--- a/micropolis/dun-notes.md
+++ b/micropolis/dun-notes.md
@@ -1,8 +1,15 @@
 micropolis/src/lib/MicropolisView.svelte
-    set webgpu / opengl switch?
+- set webgpu / opengl switch?
 
 
 micropolis/src/lib/TileView.svelte
-    allow webgpu / opengl switch
-    all tilesets
-    implement for gpu ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height); ??
\ No newline at end of file
+- allow webgpu / opengl switch
+- support of tileSets and tileLayers
+    - tileLayer = Tile Image file
+    - a tileLayer can contain several tileSets 
+    - mopData = tileset to use for given cell why ? in /src/lib/MicropolisSimulator.ts, all cells have same tileset
+        - In the meantime, quick implementation tilSet passed to uniforms with mopData[0] value
+- support of space / rotate
+
+
+- implement for gpu ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height); ??
\ No newline at end of file
diff --git a/micropolis/src/lib/TileView.svelte b/micropolis/src/lib/TileView.svelte
index 6463f79..1c36f47 100644
--- a/micropolis/src/lib/TileView.svelte
+++ b/micropolis/src/lib/TileView.svelte
@@ -7,7 +7,7 @@
   import { MicropolisSimulator } from '$lib/MicropolisSimulator';
 
   // Tile Sets
-  import tileLayer_all10 from '$lib/images/tilesets/classic.png';
+  import tileLayer_all10 from '$lib/images/tilesets/all.png';
 
   const tileLayers = [
     tileLayer_all10,
diff --git a/micropolis/src/lib/WebGPUTileRenderer.ts b/micropolis/src/lib/WebGPUTileRenderer.ts
index e5f8d6e..807a39a 100644
--- a/micropolis/src/lib/WebGPUTileRenderer.ts
+++ b/micropolis/src/lib/WebGPUTileRenderer.ts
@@ -126,7 +126,6 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                 @group(0) @binding(2) var mapTexture: texture_2d<u32>;
                 @group(0) @binding(3) var<uniform> uniforms: Uniforms;
                
-
                 struct VertexOutput {
                     @builtin(position) position: vec4<f32>,
                     @location(0) fragCoord: vec2<f32>,
@@ -135,7 +134,8 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                 struct Uniforms {
                     tileSize: vec2<f32>,
                     tilesSize: vec2<f32>,
-                    mapSize: vec2<f32>
+                    mapSize: vec2<f32>,
+                    tileRotate: vec2<f32>
                 };
 
                
@@ -145,10 +145,11 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     let tileSize = uniforms.tileSize;
                     let textureSize = uniforms.tilesSize;
                     let mapSize = uniforms.mapSize;
-
+                    let tileSet = uniforms.tileRotate.y; // tileSet index in a given tileset texture
+                   
                     // Calculate the tile index from the map texture
                     let mapCoord = vec2<i32>(floor(input.fragCoord));
-                    let outOfMap = mapCoord.x <0 || mapCoord.x >= i32(mapSize.y) || mapCoord.y <0 || mapCoord.y>=i32(mapSize.x);
+                    let outOfMap = mapCoord.x < 0 || mapCoord.x >= i32(mapSize.y) || mapCoord.y < 0 || mapCoord.y >= i32(mapSize.x);
                     let tileIndex = select(textureLoad(mapTexture, vec2<i32>(mapCoord.y, mapCoord.x), 0).r & 0x03ff, 0 ,outOfMap);
                     //DEBUG let tileIndex = select(u32(32+20), 0 ,outOfMap);
                 
@@ -157,9 +158,10 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     let tilesPerRow = textureSize.x / tileSize.x;
                     // tile coordinate in tile unit
                     let tileCoords = vec2<f32>(f32(tileIndex) % tilesPerRow, floor(f32(tileIndex) / tilesPerRow));
-                    let cTilePx = tileCoords * tileSize.x; // pixel position of tile in tile texture
-                    let dTilePx = fract(input.fragCoord) * tileSize.x; // delta pixel position of current fragment                  
-                    let tileUV = (cTilePx + dTilePx)/textureSize.x; // pixel position of current fragment over texture size
+                    let cTilePx = tileCoords * tileSize.x; // top left corner pixel position in tile texture
+                    let dTilePx = fract(input.fragCoord) * tileSize.x; // delta pixel position of current fragment    
+                    // magic number 10 is the number of tilesets in tile texture              
+                    let tileUV = (cTilePx + dTilePx + vec2f(0, tileSet * textureSize.y)) /vec2f(textureSize.x, textureSize.y * 10); // pixel position of current fragment over texture size
             
                     // Sample the color from the tile texture
                     let color = textureSample(tileTexture, tileSampler, tileUV);                 
@@ -225,13 +227,10 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
 
         // Make sure the uniform buffer is created and populated correctly
         this.uniformBuffer = this.device.createBuffer({
-            size: 6 * 4, // size for three vec2<f32>
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-            mappedAtCreation: true,
+            size: 8 * 4, // size for three vec2<f32>
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,           
         });
-        // Map data is column major order, so the width is the second dimension.
-        new Float32Array(this.uniformBuffer.getMappedRange()).set([16.0, 16.0, 512.0, 512.0, mapHeight, mapWidth]);
-        this.uniformBuffer.unmap();
+        this.setUniforms();
 
         // Correct the bind group entries to ensure all resources are correctly specified
         this.bindGroup = this.device.createBindGroup({
@@ -254,7 +253,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     resource: {
                         buffer: this.uniformBuffer,
                         offset: 0,
-                        size: 6 * 4, // vec2<f32> for tileSize, tilesSize, and mapSize
+                        size: 8 * 4, // vec2<f32> for tileSize, tilesSize, and mapSize, tileRotate
                     },
                 },
                
@@ -280,6 +279,9 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
 
         this.setScreenSize(this.canvas.width, this.canvas.height);
 
+        this.setUniforms();
+
+       
         // copy map data
        this.device.queue.writeTexture( {texture:this.mapTexture}, this.mapData, {bytesPerRow:100 * Uint16Array.BYTES_PER_ELEMENT}, { width: 100, height:120 });
 
@@ -310,6 +312,16 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
         this.device.queue.submit([commandEncoder.finish()]);
     }
 
+    setUniforms() {
+       // console.log(this.tileLayer, this.tileRotate, this.mopData[0]);
+        // Map data is column major order, so the width is the second dimension.
+        const data = new Float32Array(8);
+        // uniforms are : Tile size, Texture size, rotate, tileset index
+        // Hardcoded texture size works for all10.png ... thanks to some magic values in fragment shader
+        data.set([16.0, 16.0, 512.0, 512.0, this.mapHeight, this.mapWidth,this.tileRotate, this.mopData[0]]);
+        this.device.queue.writeBuffer(this.uniformBuffer, 0, data);      
+    }
+
     squareVerticeBuffer() {
         var px = this.panX * this.tileWidth;
         var py = this.panY * this.tileHeight;

From ddccf19ad00538eb9860dc9b5f5a7cae383f7aee Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Sat, 5 Apr 2025 09:35:31 +0200
Subject: [PATCH 5/7] support tileRotate

---
 micropolis/src/lib/WebGPUTileRenderer.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/micropolis/src/lib/WebGPUTileRenderer.ts b/micropolis/src/lib/WebGPUTileRenderer.ts
index 807a39a..399d6ae 100644
--- a/micropolis/src/lib/WebGPUTileRenderer.ts
+++ b/micropolis/src/lib/WebGPUTileRenderer.ts
@@ -135,9 +135,11 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     tileSize: vec2<f32>,
                     tilesSize: vec2<f32>,
                     mapSize: vec2<f32>,
-                    tileRotate: vec2<f32>
+                    misc: vec2<f32>
                 };
-
+                // Magic Number : number of tileSets in provided texture
+                override tileSetCount = f32(10);
+          
                
                 @fragment
                 fn main(input: VertexOutput) -> @location(0) vec4f {
@@ -145,23 +147,24 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     let tileSize = uniforms.tileSize;
                     let textureSize = uniforms.tilesSize;
                     let mapSize = uniforms.mapSize;
-                    let tileSet = uniforms.tileRotate.y; // tileSet index in a given tileset texture
+                    let tileRotate = u32(uniforms.misc.x);
+                    let tileSet = uniforms.misc.y; // tileSet index in a given tileset texture
+                    let tileCount = u32((textureSize.x / tileSize.x) *  (textureSize.x / tileSize.x));
                    
                     // Calculate the tile index from the map texture
                     let mapCoord = vec2<i32>(floor(input.fragCoord));
                     let outOfMap = mapCoord.x < 0 || mapCoord.x >= i32(mapSize.y) || mapCoord.y < 0 || mapCoord.y >= i32(mapSize.x);
-                    let tileIndex = select(textureLoad(mapTexture, vec2<i32>(mapCoord.y, mapCoord.x), 0).r & 0x03ff, 0 ,outOfMap);
-                    //DEBUG let tileIndex = select(u32(32+20), 0 ,outOfMap);
+                    let tileIndex = select(((textureLoad(mapTexture, vec2<i32>(mapCoord.y, mapCoord.x), 0).r & 0x03ff) + tileRotate) % tileCount, 0 ,outOfMap);
+                   
                 
                     // Calculate the UV coordinates for the tile texture (assuming tiles and texture are squares)
-        
                     let tilesPerRow = textureSize.x / tileSize.x;
                     // tile coordinate in tile unit
                     let tileCoords = vec2<f32>(f32(tileIndex) % tilesPerRow, floor(f32(tileIndex) / tilesPerRow));
                     let cTilePx = tileCoords * tileSize.x; // top left corner pixel position in tile texture
                     let dTilePx = fract(input.fragCoord) * tileSize.x; // delta pixel position of current fragment    
-                    // magic number 10 is the number of tilesets in tile texture              
-                    let tileUV = (cTilePx + dTilePx + vec2f(0, tileSet * textureSize.y)) /vec2f(textureSize.x, textureSize.y * 10); // pixel position of current fragment over texture size
+                    // pixel position of current fragment over texture size                               
+                    let tileUV = (cTilePx + dTilePx + vec2f(0, tileSet * textureSize.y)) /vec2f(textureSize.x, textureSize.y * tileSetCount); 
             
                     // Sample the color from the tile texture
                     let color = textureSample(tileTexture, tileSampler, tileUV);                 

From ed65e5ae0f6ae05435dd343eb68473994a432a0c Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Sat, 5 Apr 2025 09:56:00 +0200
Subject: [PATCH 6/7] webgpu / opengl fallback

---
 micropolis/dun-notes.md            |  6 +--
 micropolis/src/lib/TileView.svelte | 59 ++++++++++++++++--------------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/micropolis/dun-notes.md b/micropolis/dun-notes.md
index 9a3a2bc..2eeba70 100644
--- a/micropolis/dun-notes.md
+++ b/micropolis/dun-notes.md
@@ -1,9 +1,7 @@
-micropolis/src/lib/MicropolisView.svelte
-- set webgpu / opengl switch?
-
 
 micropolis/src/lib/TileView.svelte
-- allow webgpu / opengl switch
+-  webgpu / opengl fallback
+    if webgpu is not available, opengl is used
 - support of tileSets and tileLayers
     - tileLayer = Tile Image file
     - a tileLayer can contain several tileSets 
diff --git a/micropolis/src/lib/TileView.svelte b/micropolis/src/lib/TileView.svelte
index 1c36f47..c17f8b2 100644
--- a/micropolis/src/lib/TileView.svelte
+++ b/micropolis/src/lib/TileView.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 
   import { onMount, onDestroy } from 'svelte';
-  //import { TileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
-  import { TileRenderer, WebGPUTileRenderer } from '$lib/WebGPUTileRenderer';
+  import { TileRenderer as glTileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
+  import { TileRenderer as gpuTileRenderer, WebGPUTileRenderer } from '$lib/WebGPUTileRenderer';
   import { pan, pinch } from 'svelte-gestures';
   import { MicropolisSimulator } from '$lib/MicropolisSimulator';
 
@@ -19,10 +19,9 @@
   let tileSetCount = 10;
   let tileSet: number = 0;
 
-  let canvasGL: HTMLCanvasElement | null = null;
-  //let ctxGL: WebGL2RenderingContext | null = null;
-  let ctxGL: GPUCanvasContext | null = null;
-  let tileRenderer: TileRenderer<any> | null = null;
+  let canvas: HTMLCanvasElement | null = null;
+  let ctx: GPUCanvasContext | WebGL2RenderingContext | null = null;
+  let tileRenderer: glTileRenderer<any> | gpuTileRenderer<any> | null = null;
 
   let autoRepeatIntervalId: any | null = null;
   let autoRepeatDelay = 1000 / 60; // 60 repeats per second
@@ -58,25 +57,31 @@
   
     micropolisSimulator = micropolisSimulator_;
 
-    if (!micropolisSimulator || !canvasGL) return;
+    if (!micropolisSimulator || !canvas) return;
 
     // Create 3d canvas drawing context and tileRenderer.
     //console.log('TileView.svelte: onMount', 'canvasGL:', canvasGL);
-    if (canvasGL == null) {
+    if (canvas == null) {
       console.log('TileView.svelte: initialize: canvasGL is null!');
       return;
     }
 
-    //ctxGL = canvasGL.getContext('webgl2');
-    ctxGL = canvasGL.getContext('webgpu');
-    //console.log('TileView.svelte: initialize:', 'ctxGL:', ctxGL);
-    if (ctxGL == null) {
-      console.log('TileView.svelte: initialize: no ctxGL!');
-      return;
+    ctx = canvas.getContext('webgpu');
+    if (ctx == null) {
+      console.log('TileView.svelte: WebGPU not available. Fallback to webgl2.');
+      ctx = canvas.getContext('webgl2');
+      if (ctx==null) {
+        console.log('TileView.svelte: webgl2 not available');
+        return;
+      }
+      console.log('TileView.svelte: webgl2 rendering');
+      tileRenderer = new WebGLTileRenderer();
+    }
+    else {
+      console.log('TileView.svelte: WebGPU rendering');
+      tileRenderer = new WebGPUTileRenderer();
     }
 
-    //tileRenderer = new WebGLTileRenderer();
-    tileRenderer = new WebGPUTileRenderer();
 
     if (typeof window != "undefined") {
       //window.tileRenderer = tileRenderer;
@@ -89,8 +94,8 @@
     }
 
     await tileRenderer.initialize(
-      canvasGL, 
-      ctxGL, 
+      canvas, 
+      ctx, 
       micropolisSimulator.mapData!,
       micropolisSimulator.mopData!,
       micropolisSimulator.micropolisengine.WORLD_W,
@@ -108,7 +113,7 @@
     tileRenderer.tileLayer = 0;
 
     if (typeof window != "undefined") {
-      canvasGL.addEventListener('wheel', onwheel, {passive: false});
+      canvas.addEventListener('wheel', onwheel, {passive: false});
     }
 
     resizeCanvas();
@@ -123,12 +128,12 @@
 
   // Function to resize the canvas to match the screen size.
   function resizeCanvas() {
-    if (canvasGL) {
+    if (canvas) {
       const ratio = window.devicePixelRatio || 1;
-      canvasGL.width = canvasGL.clientWidth * ratio;
-      canvasGL.height = canvasGL.clientHeight * ratio;
+      canvas.width = canvas.clientWidth * ratio;
+      canvas.height = canvas.clientHeight * ratio;
       //console.log("TileView.svelte: resizeCanvas:", "ratio:", ratio, "canvasGL.width:", canvasGL.width, "canvasGL.height:", canvasGL.height);
-      if (ctxGL) {
+      if (ctx) {
       //  ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height);
       }
     }
@@ -438,9 +443,9 @@
   }
   
   export function refocusCanvas() {
-    if (canvasGL && 
-        (document.activeElement !== canvasGL)) {
-      canvasGL.focus();
+    if (canvas && 
+        (document.activeElement !== canvas)) {
+      canvas.focus();
     }
   }
 
@@ -517,7 +522,7 @@
 
 <canvas
   class="tileview-canvas"
-  bind:this={canvasGL}
+  bind:this={canvas}
   tabindex="0"
   onmousedown={onmousedown}
   onmousemove={onmousemove}

From 27e6c8ad60cebe6c9e60e171fb1bd7467a61df81 Mon Sep 17 00:00:00 2001
From: Dun Darach <dun.darach@orange.fr>
Date: Sat, 5 Apr 2025 10:02:11 +0200
Subject: [PATCH 7/7] canvas resize in webgl2

---
 micropolis/src/lib/TileView.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/micropolis/src/lib/TileView.svelte b/micropolis/src/lib/TileView.svelte
index c17f8b2..bd70792 100644
--- a/micropolis/src/lib/TileView.svelte
+++ b/micropolis/src/lib/TileView.svelte
@@ -133,8 +133,9 @@
       canvas.width = canvas.clientWidth * ratio;
       canvas.height = canvas.clientHeight * ratio;
       //console.log("TileView.svelte: resizeCanvas:", "ratio:", ratio, "canvasGL.width:", canvasGL.width, "canvasGL.height:", canvasGL.height);
-      if (ctx) {
-      //  ctxGL.viewport(0, 0, canvasGL.width, canvasGL.height);
+      if (ctx && "viewport" in ctx) {
+        // only applies to webgl2 renderer
+        ctx.viewport(0, 0, canvas.width, canvas.height);
       }
     }
   }