diff --git a/micropolis/dun-notes.md b/micropolis/dun-notes.md
new file mode 100644
index 0000000..2eeba70
--- /dev/null
+++ b/micropolis/dun-notes.md
@@ -0,0 +1,13 @@
+
+micropolis/src/lib/TileView.svelte
+-  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 
+    - 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/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..bd70792 100644
--- a/micropolis/src/lib/TileView.svelte
+++ b/micropolis/src/lib/TileView.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 
   import { onMount, onDestroy } from 'svelte';
-  import { TileRenderer, WebGLTileRenderer } from '$lib/WebGLTileRenderer';
+  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';
 
@@ -18,9 +19,9 @@
   let tileSetCount = 10;
   let tileSet: number = 0;
 
-  let canvasGL: HTMLCanvasElement | null = null;
-  let ctxGL: WebGL2RenderingContext | 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
@@ -56,23 +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');
-    //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();
 
     if (typeof window != "undefined") {
       //window.tileRenderer = tileRenderer;
@@ -85,8 +94,8 @@
     }
 
     await tileRenderer.initialize(
-      canvasGL, 
-      ctxGL, 
+      canvas, 
+      ctx, 
       micropolisSimulator.mapData!,
       micropolisSimulator.mopData!,
       micropolisSimulator.micropolisengine.WORLD_W,
@@ -104,7 +113,7 @@
     tileRenderer.tileLayer = 0;
 
     if (typeof window != "undefined") {
-      canvasGL.addEventListener('wheel', onwheel, {passive: false});
+      canvas.addEventListener('wheel', onwheel, {passive: false});
     }
 
     resizeCanvas();
@@ -119,13 +128,14 @@
 
   // 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) {
-        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);
       }
     }
   }
@@ -434,9 +444,9 @@
   }
   
   export function refocusCanvas() {
-    if (canvasGL && 
-        (document.activeElement !== canvasGL)) {
-      canvasGL.focus();
+    if (canvas && 
+        (document.activeElement !== canvas)) {
+      canvas.focus();
     }
   }
 
@@ -513,7 +523,7 @@
 
 <canvas
   class="tileview-canvas"
-  bind:this={canvasGL}
+  bind:this={canvas}
   tabindex="0"
   onmousedown={onmousedown}
   onmousemove={onmousemove}
diff --git a/micropolis/src/lib/WebGPUTileRenderer.ts b/micropolis/src/lib/WebGPUTileRenderer.ts
index 022b166..399d6ae 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(
@@ -45,7 +48,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.');
@@ -64,8 +68,11 @@ 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);
         this.tileTexture = this.device.createTexture({
             size: [tileImage.width, tileImage.height, 1],
             format: 'rgba8unorm',
@@ -81,95 +88,86 @@ 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> {
-                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)
-                );
-                let position = positions[VertexIndex];
-                return vec4<f32>(position, 0.0, 1.0);
+                @location(0) position : vec4f, @location(1) mapCoord : vec2f) -> VertexOutput {
+                return VertexOutput(position, mapCoord);
             }`,
         });
 
         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>,
                     @location(0) fragCoord: vec2<f32>,
                 };
 
                 struct Uniforms {
-                    tileSize: vec2<f32>;
-                    tilesSize: vec2<f32>;
-                    mapSize: vec2<f32>;
+                    tileSize: vec2<f32>,
+                    tilesSize: vec2<f32>,
+                    mapSize: vec2<f32>,
+                    misc: 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;
-                }
-
+                // Magic Number : number of tileSets in provided texture
+                override tileSetCount = f32(10);
+          
+               
                 @fragment
-                fn main(input: VertexOutput) -> @location(0) vec4<f32> {
-                    // Calculate the tile index from the map texture
-                    let mapCoord = vec2<i32>(input.fragCoord);
-                    let tileIndex = textureLoad(mapTexture, mapCoord, 0).x;
+                fn main(input: VertexOutput) -> @location(0) vec4f {
 
-                    // Calculate the UV coordinates for the tile texture
                     let tileSize = uniforms.tileSize;
                     let textureSize = uniforms.tilesSize;
-                    let tileUV = getTileUV(tileIndex, tileSize, textureSize);
-
+                    let mapSize = uniforms.mapSize;
+                    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) + 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    
+                    // 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);
-
+                    let color = textureSample(tileTexture, tileSampler, tileUV);                 
                     return color;
                 }`,
         });
@@ -196,6 +194,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
                     visibility: GPUShaderStage.FRAGMENT,
                     buffer: { type: 'uniform' },
                 },
+              
             ],
         });
         
@@ -205,6 +204,7 @@ class WebGPUTileRenderer extends TileRenderer<GPUCanvasContext> {
             vertex: {
                 module: vertexShaderModule,
                 entryPoint: 'main',
+                buffers: [verticesDescription()],
             },
             fragment: {
                 module: fragmentShaderModule,
@@ -222,19 +222,18 @@ 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
         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, 256.0, 256.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({
@@ -257,9 +256,10 @@ 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
                     },
                 },
+               
             ],
         });
     }
@@ -274,13 +274,21 @@ 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();
+        this.setUniforms();
+
+       
+        // 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,15 +302,91 @@ 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.draw(6);//, 1, 0, 0);
         passEncoder.end();
 
         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;
+        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;
+      }
+      
 }
 
 
-export { TileRenderer, WebGPUTileRenderer };
+ 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