From 4adcf09ccaa61c87181210ff86705a4ae5ca27ab Mon Sep 17 00:00:00 2001
From: Tristan Sommer <43797146+trsommer@users.noreply.github.com>
Date: Sat, 22 Nov 2025 15:07:16 +0100
Subject: [PATCH] GPU accelerated maskeditor rendering (#6767)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## GPU accelerated brush engine for the mask editor

- Full GPU acceleration using TypeGPU and type-safe shaders
- Catmull-Rom Spline Smoothing
- arc-length equidistant resampling
- much improved performance, even for huge images
- photoshop like opacity clamping for brush strokes
- much improved soft brushes
- fallback to CPU fully implemented, much improved CPU rendering
features as well

### Tested Browsers
- Chrome (fully supported)
- Safari 26 (fully supported, prev versions CPU fallback)
- Firefox (CPU fallback, flags needed for full support)



https://github.com/user-attachments/assets/b7b5cb8a-2290-4a95-ae7d-180e11fccdb0



https://github.com/user-attachments/assets/4297aaa5-f249-499a-9b74-869677f1c73b



https://github.com/user-attachments/assets/602b4783-3e2b-489e-bcb9-70534bcaac5e

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6767-GPU-accelerated-maskeditor-rendering-2b16d73d3650818cb294e1fca03f6169)
by [Unito](https://www.unito.io)
---
 package.json                                  |    3 +
 pnpm-lock.yaml                                |   86 +-
 pnpm-workspace.yaml                           |    3 +
 src/components/maskeditor/BrushCursor.vue     |   24 +-
 .../maskeditor/BrushSettingsPanel.vue         |   12 +-
 .../maskeditor/MaskEditorContent.vue          |   34 +-
 .../maskeditor/dialog/TopBarHeader.vue        |    1 +
 src/composables/maskeditor/ShiftClick.test.ts |   84 +
 .../maskeditor/StrokeProcessor.test.ts        |  108 ++
 src/composables/maskeditor/StrokeProcessor.ts |  115 ++
 src/composables/maskeditor/brushUtils.test.ts |   47 +
 src/composables/maskeditor/brushUtils.ts      |   34 +
 .../maskeditor/gpu/GPUBrushRenderer.ts        |  805 +++++++++
 .../maskeditor/gpu/brushShaders.ts            |  171 ++
 src/composables/maskeditor/gpu/gpuSchema.ts   |   17 +
 src/composables/maskeditor/splineUtils.ts     |  126 ++
 src/composables/maskeditor/useBrushDrawing.ts | 1498 +++++++++++++----
 .../maskeditor/useCanvasHistory.ts            |   70 +-
 .../maskeditor/useMaskEditorLoader.ts         |   63 +-
 src/extensions/core/maskeditor/types.ts       |    2 +-
 src/stores/maskEditorStore.ts                 |   25 +-
 .../maskeditor/useCanvasHistory.test.ts       |   21 +-
 tsconfig.json                                 |    3 +-
 vite.config.mts                               |    2 +
 24 files changed, 2945 insertions(+), 409 deletions(-)
 create mode 100644 src/composables/maskeditor/ShiftClick.test.ts
 create mode 100644 src/composables/maskeditor/StrokeProcessor.test.ts
 create mode 100644 src/composables/maskeditor/StrokeProcessor.ts
 create mode 100644 src/composables/maskeditor/brushUtils.test.ts
 create mode 100644 src/composables/maskeditor/brushUtils.ts
 create mode 100644 src/composables/maskeditor/gpu/GPUBrushRenderer.ts
 create mode 100644 src/composables/maskeditor/gpu/brushShaders.ts
 create mode 100644 src/composables/maskeditor/gpu/gpuSchema.ts
 create mode 100644 src/composables/maskeditor/splineUtils.ts

diff --git a/package.json b/package.json
index 294c9de65..1d00f12f3 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "@vitest/coverage-v8": "catalog:",
     "@vitest/ui": "catalog:",
     "@vue/test-utils": "catalog:",
+    "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
     "eslint-config-prettier": "catalog:",
@@ -112,6 +113,7 @@
     "typescript": "catalog:",
     "typescript-eslint": "catalog:",
     "unplugin-icons": "catalog:",
+    "unplugin-typegpu": "catalog:",
     "unplugin-vue-components": "catalog:",
     "uuid": "^11.1.0",
     "vite": "catalog:",
@@ -176,6 +178,7 @@
     "semver": "^7.7.2",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
+    "typegpu": "catalog:",
     "vue": "catalog:",
     "vue-i18n": "catalog:",
     "vue-router": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 87d1264de..6c7c36f58 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -126,6 +126,9 @@ catalogs:
     '@vueuse/integrations':
       specifier: ^13.9.0
       version: 13.9.0
+    '@webgpu/types':
+      specifier: ^0.1.66
+      version: 0.1.66
     algoliasearch:
       specifier: ^5.21.0
       version: 5.21.0
@@ -246,6 +249,9 @@ catalogs:
     tw-animate-css:
       specifier: ^1.3.8
       version: 1.3.8
+    typegpu:
+      specifier: ^0.8.2
+      version: 0.8.2
     typescript:
       specifier: ^5.9.2
       version: 5.9.2
@@ -255,6 +261,9 @@ catalogs:
     unplugin-icons:
       specifier: ^0.22.0
       version: 0.22.0
+    unplugin-typegpu:
+      specifier: 0.8.0
+      version: 0.8.0
     unplugin-vue-components:
       specifier: ^0.28.0
       version: 0.28.0
@@ -464,6 +473,9 @@ importers:
       tiptap-markdown:
         specifier: ^0.8.10
         version: 0.8.10(@tiptap/core@2.10.4(@tiptap/pm@2.10.4))
+      typegpu:
+        specifier: 'catalog:'
+        version: 0.8.2
       vue:
         specifier: 'catalog:'
         version: 3.5.13(typescript@5.9.2)
@@ -561,6 +573,9 @@ importers:
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
+      '@webgpu/types':
+        specifier: 'catalog:'
+        version: 0.1.66
       cross-env:
         specifier: 'catalog:'
         version: 10.1.0
@@ -672,6 +687,9 @@ importers:
       unplugin-icons:
         specifier: 'catalog:'
         version: 0.22.0(@vue/compiler-sfc@3.5.13)
+      unplugin-typegpu:
+        specifier: 'catalog:'
+        version: 0.8.0(typegpu@0.8.2)
       unplugin-vue-components:
         specifier: 'catalog:'
         version: 0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2))
@@ -1431,6 +1449,10 @@ packages:
     resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/standalone@7.28.5':
+    resolution: {integrity: sha512-1DViPYJpRU50irpGMfLBQ9B4kyfQuL6X7SS7pwTeWeZX0mNkjzPi0XFqxCjSdddZXUQy4AhnQnnesA/ZHnvAdw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -3790,8 +3812,8 @@ packages:
     peerDependencies:
       vue: ^3.5.0
 
-  '@webgpu/types@0.1.51':
-    resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
+  '@webgpu/types@0.1.66':
+    resolution: {integrity: sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==}
 
   '@xstate/fsm@1.6.5':
     resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
@@ -6038,6 +6060,10 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
+  magic-string-ast@1.0.3:
+    resolution: {integrity: sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==}
+    engines: {node: '>=20.19.0'}
+
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -7411,6 +7437,14 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyest-for-wgsl@0.1.3:
+    resolution: {integrity: sha512-Wm5ADG1UyDxykf42S1gLYP4U9e1QP/TdtJeovQi6y68zttpiFLKqQGioHmPs9Mjysh7YMSAr/Lpuk0cD2MVdGA==}
+    engines: {node: '>=12.20.0'}
+
+  tinyest@0.1.2:
+    resolution: {integrity: sha512-aHRmouyowIq1P5jrTF+YK6pGX+WuvFtSCLbqk91yHnU3SWQRIcNIamZLM5XF6lLqB13AWz0PGPXRff2QGDsxIg==}
+    engines: {node: '>=12.20.0'}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
@@ -7537,6 +7571,13 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
+  typed-binary@4.3.2:
+    resolution: {integrity: sha512-HT3pIBM2njCZUmeczDaQUUErGiM6GXFCqMsHegE12HCoBtvHCkfR10JJni0TeGOTnLilTd6YFyj+YhflqQDrDQ==}
+
+  typegpu@0.8.2:
+    resolution: {integrity: sha512-wkMJWhJE0pSkw2G/FesjqjbtHkREyOKu1Zmyj19xfmaX5+65YFwgfQNKSK8CxqN4kJkP7JFelLDJTSYY536TYg==}
+    engines: {node: '>=12.20.0'}
+
   typescript-eslint@8.44.0:
     resolution: {integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -7641,6 +7682,11 @@ packages:
       vue-template-es2015-compiler:
         optional: true
 
+  unplugin-typegpu@0.8.0:
+    resolution: {integrity: sha512-VJHdXSXGOkAx0WhwFczhVUjAI6HyDkrQXk20HnwyuzIE3FdqE5l9sJTCYZzoVGo3z8i/IA5TMHCDzzP0Bc97Cw==}
+    peerDependencies:
+      typegpu: ^0.8.0
+
   unplugin-vue-components@0.28.0:
     resolution: {integrity: sha512-jiTGtJ3JsRFBjgvyilfrX7yUoGKScFgbdNw+6p6kEXU+Spf/rhxzgvdfuMcvhCcLmflB/dY3pGQshYBVGOUx7Q==}
     engines: {node: '>=14'}
@@ -8969,6 +9015,8 @@ snapshots:
 
   '@babel/runtime@7.28.4': {}
 
+  '@babel/standalone@7.28.5': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -11016,7 +11064,7 @@ snapshots:
       '@tweenjs/tween.js': 23.1.3
       '@types/stats.js': 0.17.3
       '@types/webxr': 0.5.20
-      '@webgpu/types': 0.1.51
+      '@webgpu/types': 0.1.66
       fflate: 0.8.2
       meshoptimizer: 0.18.1
 
@@ -11519,7 +11567,7 @@ snapshots:
     dependencies:
       vue: 3.5.13(typescript@5.9.2)
 
-  '@webgpu/types@0.1.51': {}
+  '@webgpu/types@0.1.66': {}
 
   '@xstate/fsm@1.6.5': {}
 
@@ -14000,6 +14048,10 @@ snapshots:
 
   lz-string@1.5.0: {}
 
+  magic-string-ast@1.0.3:
+    dependencies:
+      magic-string: 0.30.19
+
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -15864,6 +15916,12 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinyest-for-wgsl@0.1.3:
+    dependencies:
+      tinyest: 0.1.2
+
+  tinyest@0.1.2: {}
+
   tinyexec@0.3.2: {}
 
   tinyexec@1.0.1: {}
@@ -15995,6 +16053,13 @@ snapshots:
       reflect.getprototypeof: 1.0.10
     optional: true
 
+  typed-binary@4.3.2: {}
+
+  typegpu@0.8.2:
+    dependencies:
+      tinyest: 0.1.2
+      typed-binary: 4.3.2
+
   typescript-eslint@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2):
     dependencies:
       '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2))(eslint@9.35.0(jiti@2.4.2))(typescript@5.9.2)
@@ -16090,6 +16155,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  unplugin-typegpu@0.8.0(typegpu@0.8.2):
+    dependencies:
+      '@babel/standalone': 7.28.5
+      defu: 6.1.4
+      estree-walker: 3.0.3
+      magic-string-ast: 1.0.3
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      tinyest: 0.1.2
+      tinyest-for-wgsl: 0.1.3
+      typegpu: 0.8.2
+      unplugin: 2.3.5
+
   unplugin-vue-components@0.28.0(@babel/parser@7.28.4)(rollup@4.22.4)(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       '@antfu/utils': 0.7.10
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9da20a48a..03b59cd17 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -43,6 +43,7 @@ catalog:
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^11.0.0
   '@vueuse/integrations': ^13.9.0
+  '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
   axios: ^1.8.2
   cross-env: ^10.1.0
@@ -83,9 +84,11 @@ catalog:
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
+  typegpu: ^0.8.2
   typescript: ^5.9.2
   typescript-eslint: ^8.44.0
   unplugin-icons: ^0.22.0
+  unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^0.28.0
   vite: ^5.4.19
   vite-plugin-dts: ^4.5.4
diff --git a/src/components/maskeditor/BrushCursor.vue b/src/components/maskeditor/BrushCursor.vue
index 0f9c3463c..f43f69b6d 100644
--- a/src/components/maskeditor/BrushCursor.vue
+++ b/src/components/maskeditor/BrushCursor.vue
@@ -26,6 +26,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import {
+  getEffectiveBrushSize,
+  getEffectiveHardness
+} from '@/composables/maskeditor/brushUtils'
 import { BrushShape } from '@/extensions/core/maskeditor/types'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
@@ -36,11 +40,14 @@ const { containerRef } = defineProps<{
 const store = useMaskEditorStore()
 
 const brushOpacity = computed(() => {
-  return store.brushVisible ? '1' : '0'
+  return store.brushVisible ? 1 : 0
 })
 
 const brushRadius = computed(() => {
-  return store.brushSettings.size * store.zoomRatio
+  const size = store.brushSettings.size
+  const hardness = store.brushSettings.hardness
+  const effectiveSize = getEffectiveBrushSize(size, hardness)
+  return effectiveSize * store.zoomRatio
 })
 
 const brushSize = computed(() => {
@@ -78,19 +85,26 @@ const gradientVisible = computed(() => {
 })
 
 const gradientBackground = computed(() => {
+  const size = store.brushSettings.size
   const hardness = store.brushSettings.hardness
+  const effectiveSize = getEffectiveBrushSize(size, hardness)
+  const effectiveHardness = getEffectiveHardness(size, hardness, effectiveSize)
 
-  if (hardness === 1) {
+  if (effectiveHardness === 1) {
     return 'rgba(255, 0, 0, 0.5)'
   }
 
-  const midStop = hardness * 100
+  const midStop = effectiveHardness * 100
   const outerStop = 100
+  // Add an intermediate stop to approximate the squared falloff
+  // At 50% of the fade region, squared falloff is 0.25 (relative to max)
+  const fadeMidStop = midStop + (outerStop - midStop) * 0.5
 
   return `radial-gradient(
     circle,
     rgba(255, 0, 0, 0.5) 0%,
-    rgba(255, 0, 0, 0.25) ${midStop}%,
+    rgba(255, 0, 0, 0.5) ${midStop}%,
+    rgba(255, 0, 0, 0.125) ${fadeMidStop}%,
     rgba(255, 0, 0, 0) ${outerStop}%
   )`
 })
diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index 082c34653..7f81359fc 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -55,7 +55,7 @@
     <SliderControl
       :label="t('maskEditor.thickness')"
       :min="1"
-      :max="100"
+      :max="500"
       :step="1"
       :model-value="store.brushSettings.size"
       @update:model-value="onThicknessChange"
@@ -80,12 +80,12 @@
     />
 
     <SliderControl
-      :label="t('maskEditor.smoothingPrecision')"
+      label="Stepsize"
       :min="1"
       :max="100"
       :step="1"
-      :model-value="store.brushSettings.smoothingPrecision"
-      @update:model-value="onSmoothingPrecisionChange"
+      :model-value="store.brushSettings.stepSize"
+      @update:model-value="onStepSizeChange"
     />
   </div>
 </template>
@@ -119,8 +119,8 @@ const onHardnessChange = (value: number) => {
   store.setBrushHardness(value)
 }
 
-const onSmoothingPrecisionChange = (value: number) => {
-  store.setBrushSmoothingPrecision(value)
+const onStepSizeChange = (value: number) => {
+  store.setBrushStepSize(value)
 }
 
 const resetToDefault = () => {
diff --git a/src/components/maskeditor/MaskEditorContent.vue b/src/components/maskeditor/MaskEditorContent.vue
index 421ef8a54..999f81775 100644
--- a/src/components/maskeditor/MaskEditorContent.vue
+++ b/src/components/maskeditor/MaskEditorContent.vue
@@ -12,19 +12,28 @@
     >
       <canvas
         ref="imgCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
+        class="absolute top-0 left-0 w-full h-full z-0"
         @contextmenu.prevent
       />
       <canvas
         ref="rgbCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
+        class="absolute top-0 left-0 w-full h-full z-10"
         @contextmenu.prevent
       />
       <canvas
         ref="maskCanvasRef"
-        class="absolute top-0 left-0 w-full h-full"
+        class="absolute top-0 left-0 w-full h-full z-30"
         @contextmenu.prevent
       />
+      <!-- GPU Preview Canvas -->
+      <canvas
+        ref="gpuCanvasRef"
+        class="absolute top-0 left-0 w-full h-full pointer-events-none"
+        :class="{
+          'z-20': store.activeLayer === 'rgb',
+          'z-40': store.activeLayer === 'mask'
+        }"
+      />
       <div ref="canvasBackgroundRef" class="bg-white w-full h-full" />
     </div>
 
@@ -87,6 +96,7 @@ const canvasContainerRef = ref<HTMLDivElement>()
 const imgCanvasRef = ref<HTMLCanvasElement>()
 const maskCanvasRef = ref<HTMLCanvasElement>()
 const rgbCanvasRef = ref<HTMLCanvasElement>()
+const gpuCanvasRef = ref<HTMLCanvasElement>()
 const canvasBackgroundRef = ref<HTMLDivElement>()
 
 const toolPanelRef = ref<InstanceType<typeof ToolPanel>>()
@@ -97,7 +107,7 @@ const initialized = ref(false)
 const keyboard = useKeyboard()
 const panZoom = usePanAndZoom()
 
-let toolManager: ReturnType<typeof useToolManager> | null = null
+const toolManager = useToolManager(keyboard, panZoom)
 
 let resizeObserver: ResizeObserver | null = null
 
@@ -135,8 +145,6 @@ const initUI = async () => {
   try {
     await loader.loadFromNode(node)
 
-    toolManager = useToolManager(keyboard, panZoom)
-
     const imageLoader = useImageLoader()
     const image = await imageLoader.loadImages()
 
@@ -149,6 +157,18 @@ const initUI = async () => {
 
     store.canvasHistory.saveInitialState()
 
+    // Initialize GPU resources
+    if (toolManager.brushDrawing) {
+      await toolManager.brushDrawing.initGPUResources()
+      if (gpuCanvasRef.value && toolManager.brushDrawing.initPreviewCanvas) {
+        // Match preview canvas resolution to mask canvas
+        gpuCanvasRef.value.width = maskCanvasRef.value.width
+        gpuCanvasRef.value.height = maskCanvasRef.value.height
+
+        toolManager.brushDrawing.initPreviewCanvas(gpuCanvasRef.value)
+      }
+    }
+
     initialized.value = true
   } catch (error) {
     console.error('[MaskEditorContent] Initialization failed:', error)
@@ -172,7 +192,7 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
-  toolManager?.brushDrawing.saveBrushSettings()
+  toolManager.brushDrawing.saveBrushSettings()
 
   keyboard?.removeListeners()
 
diff --git a/src/components/maskeditor/dialog/TopBarHeader.vue b/src/components/maskeditor/dialog/TopBarHeader.vue
index 99a531795..91362d24b 100644
--- a/src/components/maskeditor/dialog/TopBarHeader.vue
+++ b/src/components/maskeditor/dialog/TopBarHeader.vue
@@ -102,6 +102,7 @@ const onInvert = () => {
 
 const onClear = () => {
   canvasTools.clearMask()
+  store.triggerClear()
 }
 
 const handleSave = async () => {
diff --git a/src/composables/maskeditor/ShiftClick.test.ts b/src/composables/maskeditor/ShiftClick.test.ts
new file mode 100644
index 000000000..c96d6e2c3
--- /dev/null
+++ b/src/composables/maskeditor/ShiftClick.test.ts
@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest'
+import { resampleSegment } from './splineUtils'
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+describe('Shift+Click Drawing Logic', () => {
+  it('should generate equidistant points across connected segments', () => {
+    const spacing = 4
+    let remainder = spacing // Simulate start point already painted
+    const outputPoints: Point[] = []
+
+    // Define points: A -> B -> C
+    // A(0,0) -> B(10,0) -> C(20,0)
+    // Total length 20. Spacing 4.
+    // Expected points at x = 4, 8, 12, 16, 20
+    const pA = { x: 0, y: 0 }
+    const pB = { x: 10, y: 0 }
+    const pC = { x: 20, y: 0 }
+
+    // Segment 1: A -> B
+    const result1 = resampleSegment([pA, pB], spacing, remainder)
+    outputPoints.push(...result1.points)
+    remainder = result1.remainder
+
+    // Verify intermediate state
+    // Length 10. Spacing 4. Start offset 4.
+    // Points at 4, 8. Next at 12.
+    // Remainder = 12 - 10 = 2.
+    expect(result1.points.length).toBe(2)
+    expect(result1.points[0].x).toBeCloseTo(4)
+    expect(result1.points[1].x).toBeCloseTo(8)
+    expect(remainder).toBeCloseTo(2)
+
+    // Segment 2: B -> C
+    const result2 = resampleSegment([pB, pC], spacing, remainder)
+    outputPoints.push(...result2.points)
+    remainder = result2.remainder
+
+    // Verify final state
+    // Start offset 2. Points at 2, 6, 10 (relative to B).
+    // Absolute x: 12, 16, 20.
+    expect(result2.points.length).toBe(3)
+    expect(result2.points[0].x).toBeCloseTo(12)
+    expect(result2.points[1].x).toBeCloseTo(16)
+    expect(result2.points[2].x).toBeCloseTo(20)
+
+    // Verify all distances
+    // Note: The first point is at distance `spacing` from start (0,0)
+    // Subsequent points are `spacing` apart.
+    let prevX = 0
+    for (const p of outputPoints) {
+      const dist = p.x - prevX
+      expect(dist).toBeCloseTo(spacing)
+      prevX = p.x
+    }
+  })
+
+  it('should handle segments shorter than spacing', () => {
+    const spacing = 10
+    let remainder = spacing // Simulate start point already painted
+
+    // A(0,0) -> B(5,0) -> C(15,0)
+    const pA = { x: 0, y: 0 }
+    const pB = { x: 5, y: 0 }
+    const pC = { x: 15, y: 0 }
+
+    // Segment 1: A -> B (Length 5)
+    // Spacing 10. No points should be generated.
+    // Remainder should be 5 (next point needs 5 more units).
+    const result1 = resampleSegment([pA, pB], spacing, remainder)
+    expect(result1.points.length).toBe(0)
+    expect(result1.remainder).toBeCloseTo(5)
+    remainder = result1.remainder
+
+    // Segment 2: B -> C (Length 10)
+    // Start offset 5. First point at 5 (relative to B).
+    // Absolute x = 10.
+    // Next point at 15 (relative to B). Segment ends at 10.
+    // Remainder = 15 - 10 = 5.
+    const result2 = resampleSegment([pB, pC], spacing, remainder)
+    expect(result2.points.length).toBe(1)
+    expect(result2.points[0].x).toBeCloseTo(10)
+    expect(result2.remainder).toBeCloseTo(5)
+  })
+})
diff --git a/src/composables/maskeditor/StrokeProcessor.test.ts b/src/composables/maskeditor/StrokeProcessor.test.ts
new file mode 100644
index 000000000..247773091
--- /dev/null
+++ b/src/composables/maskeditor/StrokeProcessor.test.ts
@@ -0,0 +1,108 @@
+import { describe, it, expect } from 'vitest'
+import { StrokeProcessor } from './StrokeProcessor'
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+describe('StrokeProcessor', () => {
+  it('should generate equidistant points from irregular input', () => {
+    const spacing = 10
+    const processor = new StrokeProcessor(spacing)
+    const outputPoints: Point[] = []
+
+    // Simulate a horizontal line drawn with irregular speed
+    // Points: (0,0) -> (5,0) -> (25,0) -> (30,0) -> (100,0)
+    const inputPoints: Point[] = [
+      { x: 0, y: 0 },
+      { x: 5, y: 0 }, // dist 5
+      { x: 25, y: 0 }, // dist 20
+      { x: 30, y: 0 }, // dist 5
+      { x: 100, y: 0 } // dist 70
+    ]
+
+    for (const p of inputPoints) {
+      outputPoints.push(...processor.addPoint(p))
+    }
+    outputPoints.push(...processor.endStroke())
+
+    // Verify we have points
+    expect(outputPoints.length).toBeGreaterThan(0)
+
+    // Verify spacing
+    // Note: The first few points might be affected by the start condition,
+    // but the middle section should be perfectly spaced.
+    // Also, Catmull-Rom splines don't necessarily pass through control points in a straight line
+    // if the points are collinear, they should be straight.
+
+    // Let's check distances between consecutive points
+    const distances: number[] = []
+    for (let i = 1; i < outputPoints.length; i++) {
+      const dx = outputPoints[i].x - outputPoints[i - 1].x
+      const dy = outputPoints[i].y - outputPoints[i - 1].y
+      distances.push(Math.hypot(dx, dy))
+    }
+
+    // Check that distances are close to spacing
+    // We allow a small epsilon because of floating point and spline approximation
+    // Filter out the very last segment which might be shorter (remainder)
+    // But wait, our logic doesn't output the last point if it's not a full spacing step?
+    // resampleSegment outputs points at [start + spacing, start + 2*spacing, ...]
+    // It does NOT output the end point of the segment.
+    // So all distances between output points should be exactly `spacing`.
+    // EXCEPT possibly if the spline curvature makes the straight-line distance slightly different
+    // from the arc length. But for a straight line input, it should be exact.
+
+    // However, catmull-rom with collinear points IS a straight line.
+
+    // Let's log the distances for debugging if test fails
+    // console.log('Distances:', distances)
+
+    // All distances should be approximately equal to spacing
+    // We might have a gap between segments if the logic isn't perfect,
+    // but within a segment it's guaranteed by resampleSegment.
+    // The critical part is the transition between segments.
+
+    for (let i = 0; i < distances.length; i++) {
+      const d = distances[i]
+      if (Math.abs(d - spacing) > 0.5) {
+        console.log(
+          `Distance mismatch at index ${i}: ${d} (expected ${spacing})`
+        )
+        console.log(`Point ${i}:`, outputPoints[i])
+        console.log(`Point ${i + 1}:`, outputPoints[i + 1])
+      }
+      expect(d).toBeCloseTo(spacing, 1)
+    }
+  })
+
+  it('should handle a simple 3-point stroke', () => {
+    const spacing = 5
+    const processor = new StrokeProcessor(spacing)
+    const points: Point[] = []
+
+    points.push(...processor.addPoint({ x: 0, y: 0 }))
+    points.push(...processor.addPoint({ x: 10, y: 0 }))
+    points.push(...processor.addPoint({ x: 20, y: 0 }))
+    points.push(...processor.endStroke())
+
+    expect(points.length).toBeGreaterThan(0)
+
+    // Check distances
+    for (let i = 1; i < points.length; i++) {
+      const dx = points[i].x - points[i - 1].x
+      const dy = points[i].y - points[i - 1].y
+      const d = Math.hypot(dx, dy)
+      expect(d).toBeCloseTo(spacing, 1)
+    }
+  })
+
+  it('should handle a single point click', () => {
+    const spacing = 5
+    const processor = new StrokeProcessor(spacing)
+    const points: Point[] = []
+
+    points.push(...processor.addPoint({ x: 100, y: 100 }))
+    points.push(...processor.endStroke())
+
+    expect(points.length).toBe(1)
+    expect(points[0]).toEqual({ x: 100, y: 100 })
+  })
+})
diff --git a/src/composables/maskeditor/StrokeProcessor.ts b/src/composables/maskeditor/StrokeProcessor.ts
new file mode 100644
index 000000000..828231c21
--- /dev/null
+++ b/src/composables/maskeditor/StrokeProcessor.ts
@@ -0,0 +1,115 @@
+import type { Point } from '@/extensions/core/maskeditor/types'
+import { catmullRomSpline, resampleSegment } from './splineUtils'
+
+export class StrokeProcessor {
+  private controlPoints: Point[] = []
+  private remainder: number = 0
+  private spacing: number
+  private isFirstPoint: boolean = true
+  private hasProcessedSegment: boolean = false
+
+  constructor(spacing: number) {
+    this.spacing = spacing
+  }
+
+  /**
+   * Adds a point to the stroke and returns any new equidistant points generated.
+   * Maintain a sliding window of 4 control points for spline generation
+   */
+  public addPoint(point: Point): Point[] {
+    // Initialize buffer with the first point
+    if (this.isFirstPoint) {
+      this.controlPoints.push(point) // p0: phantom start point
+      this.controlPoints.push(point) // p1: actual start point
+      this.isFirstPoint = false
+      return [] // Wait for more points to form a segment
+    }
+
+    this.controlPoints.push(point)
+
+    // Require 4 points for a spline segment
+    if (this.controlPoints.length < 4) {
+      return []
+    }
+
+    // Generate segment p1->p2
+    const p0 = this.controlPoints[0]
+    const p1 = this.controlPoints[1]
+    const p2 = this.controlPoints[2]
+    const p3 = this.controlPoints[3]
+
+    const newPoints = this.processSegment(p0, p1, p2, p3)
+
+    // Slide window
+    this.controlPoints.shift()
+
+    return newPoints
+  }
+
+  /**
+   * End stroke and flush remaining segments
+   */
+  public endStroke(): Point[] {
+    if (this.controlPoints.length < 2) {
+      // Insufficient points for a segment
+      return []
+    }
+
+    // Process remaining segments by duplicating the last point
+
+    const newPoints: Point[] = []
+
+    // Flush the buffer by processing the final segment
+
+    while (this.controlPoints.length >= 3) {
+      const p0 = this.controlPoints[0]
+      const p1 = this.controlPoints[1]
+      const p2 = this.controlPoints[2]
+      const p3 = p2 // Duplicate last point as phantom end
+
+      const points = this.processSegment(p0, p1, p2, p3)
+      newPoints.push(...points)
+
+      this.controlPoints.shift()
+    }
+
+    // Handle single point click
+    if (!this.hasProcessedSegment && this.controlPoints.length >= 2) {
+      // Process zero-length segment for single point
+      const p = this.controlPoints[1]
+      const points = this.processSegment(p, p, p, p)
+      newPoints.push(...points)
+    }
+
+    return newPoints
+  }
+
+  private processSegment(p0: Point, p1: Point, p2: Point, p3: Point): Point[] {
+    this.hasProcessedSegment = true
+    // Generate dense points for the segment
+    const densePoints: Point[] = []
+
+    // Adaptive sampling based on segment length
+    const dist = Math.hypot(p2.x - p1.x, p2.y - p1.y)
+    // Use 1 sample per pixel, but at least 5 samples to ensure smoothness for short segments
+    // and cap at a reasonable maximum if needed (though not strictly necessary with density)
+    const samples = Math.max(5, Math.ceil(dist))
+
+    for (let i = 0; i < samples; i++) {
+      const t = i / samples
+      densePoints.push(catmullRomSpline(p0, p1, p2, p3, t))
+    }
+    // Add segment end point
+    densePoints.push(p2)
+
+    // Resample points with carried-over remainder
+    const { points, remainder } = resampleSegment(
+      densePoints,
+      this.spacing,
+      this.remainder
+    )
+
+    this.remainder = remainder
+    return points
+  }
+}
diff --git a/src/composables/maskeditor/brushUtils.test.ts b/src/composables/maskeditor/brushUtils.test.ts
new file mode 100644
index 000000000..c101b5f37
--- /dev/null
+++ b/src/composables/maskeditor/brushUtils.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { getEffectiveBrushSize, getEffectiveHardness } from './brushUtils'
+
+describe('brushUtils', () => {
+  describe('getEffectiveBrushSize', () => {
+    it('should return original size when hardness is 1.0', () => {
+      const size = 100
+      const hardness = 1.0
+      expect(getEffectiveBrushSize(size, hardness)).toBe(100)
+    })
+
+    it('should return 1.5x size when hardness is 0.0', () => {
+      const size = 100
+      const hardness = 0.0
+      expect(getEffectiveBrushSize(size, hardness)).toBe(150)
+    })
+
+    it('should interpolate linearly', () => {
+      const size = 100
+      const hardness = 0.5
+      // Scale should be 1.0 + 0.5 * 0.5 = 1.25
+      expect(getEffectiveBrushSize(size, hardness)).toBe(125)
+    })
+  })
+
+  describe('getEffectiveHardness', () => {
+    it('should return same hardness if effective size matches size', () => {
+      const size = 100
+      const hardness = 0.8
+      const effectiveSize = 100
+      expect(getEffectiveHardness(size, hardness, effectiveSize)).toBe(0.8)
+    })
+
+    it('should scale hardness down as effective size increases', () => {
+      const size = 100
+      const hardness = 0.5
+      // Effective size at 0.5 hardness is 125
+      const effectiveSize = 125
+      // Hard core radius = 50. New hardness = 50 / 125 = 0.4
+      expect(getEffectiveHardness(size, hardness, effectiveSize)).toBe(0.4)
+    })
+
+    it('should return 0 if effective size is 0', () => {
+      expect(getEffectiveHardness(100, 0.5, 0)).toBe(0)
+    })
+  })
+})
diff --git a/src/composables/maskeditor/brushUtils.ts b/src/composables/maskeditor/brushUtils.ts
new file mode 100644
index 000000000..e13a77aec
--- /dev/null
+++ b/src/composables/maskeditor/brushUtils.ts
@@ -0,0 +1,34 @@
+/**
+ * Calculates the effective brush size based on the base size and hardness.
+ * As hardness decreases, the effective size increases to allow for a softer falloff.
+ *
+ * @param size - The base radius of the brush
+ * @param hardness - The hardness of the brush (0.0 to 1.0)
+ * @returns The effective radius of the brush
+ */
+export function getEffectiveBrushSize(size: number, hardness: number): number {
+  // Scale factor for maximum softness
+  const MAX_SCALE = 1.5
+  const scale = 1.0 + (1.0 - hardness) * (MAX_SCALE - 1.0)
+  return size * scale
+}
+
+/**
+ * Calculates the effective hardness to maintain the visual "hard core" of the brush.
+ * Since the effective size is larger, we need to adjust the hardness value so that
+ * the inner hard circle remains at the same physical radius as the original size * hardness.
+ *
+ * @param size - The base radius of the brush
+ * @param hardness - The base hardness of the brush
+ * @param effectiveSize - The effective radius (calculated by getEffectiveBrushSize)
+ * @returns The adjusted hardness value (0.0 to 1.0)
+ */
+export function getEffectiveHardness(
+  size: number,
+  hardness: number,
+  effectiveSize: number
+): number {
+  if (effectiveSize <= 0) return 0
+  // Adjust hardness to maintain the physical radius of the hard core
+  return (size * hardness) / effectiveSize
+}
diff --git a/src/composables/maskeditor/gpu/GPUBrushRenderer.ts b/src/composables/maskeditor/gpu/GPUBrushRenderer.ts
new file mode 100644
index 000000000..23f8c5841
--- /dev/null
+++ b/src/composables/maskeditor/gpu/GPUBrushRenderer.ts
@@ -0,0 +1,805 @@
+import * as d from 'typegpu/data'
+import { StrokePoint } from './gpuSchema'
+import {
+  brushFragment,
+  brushVertex,
+  blitShader,
+  compositeShader,
+  readbackShader
+} from './brushShaders'
+
+// ... (rest of the file)
+
+const QUAD_VERTS = new Float32Array([-1, -1, 1, -1, 1, 1, -1, 1])
+const QUAD_INDICES = new Uint16Array([0, 1, 2, 0, 2, 3])
+
+const UNIFORM_SIZE = 48 // Uniform buffer size aligned to 16 bytes
+const STROKE_STRIDE = d.sizeOf(StrokePoint) // 16
+const MAX_STROKES = 10000
+
+export class GPUBrushRenderer {
+  private device: GPUDevice
+
+  // Buffers
+  private quadVertexBuffer: GPUBuffer
+  private indexBuffer: GPUBuffer
+  private instanceBuffer: GPUBuffer
+  private uniformBuffer: GPUBuffer
+
+  // Pipelines
+  private renderPipeline: GPURenderPipeline // Standard alpha blending pipeline
+  private accumulatePipeline: GPURenderPipeline // SourceOver blending pipeline for stroke accumulation
+  private blitPipeline: GPURenderPipeline
+  private compositePipeline: GPURenderPipeline // Composite pipeline that applies opacity
+  private compositePipelinePreview: GPURenderPipeline // Pipeline for rendering to the preview canvas
+  private erasePipeline: GPURenderPipeline // Pipeline for erasing (Destination Out)
+  private erasePipelinePreview: GPURenderPipeline // Eraser pipeline for the preview canvas
+  readbackPipeline: GPUComputePipeline // Compute pipeline for texture readback
+
+  // Bind Group Layouts
+  private uniformBindGroupLayout: GPUBindGroupLayout
+  private textureBindGroupLayout: GPUBindGroupLayout
+
+  // Shared Bind Groups
+  private mainUniformBindGroup: GPUBindGroup
+
+  // Textures
+  private currentStrokeTexture: GPUTexture | null = null
+  private currentStrokeView: GPUTextureView | null = null
+
+  // Cached Bind Groups
+  private compositeTextureBindGroup: GPUBindGroup | null = null
+  private previewTextureBindGroup: GPUBindGroup | null = null
+
+  // Removed separate uniform bind groups as we will use mainUniformBindGroup
+
+  private lastReadbackTexture: GPUTexture | null = null
+  private lastReadbackBuffer: GPUBuffer | null = null
+  private readbackBindGroup: GPUBindGroup | null = null
+
+  private lastBackgroundTexture: GPUTexture | null = null
+  private backgroundBindGroup: GPUBindGroup | null = null
+
+  constructor(
+    device: GPUDevice,
+    presentationFormat: GPUTextureFormat = 'rgba8unorm'
+  ) {
+    this.device = device
+
+    // --- 1. Initialize Buffers ---
+    this.quadVertexBuffer = device.createBuffer({
+      size: QUAD_VERTS.byteLength,
+      usage: GPUBufferUsage.VERTEX,
+      mappedAtCreation: true
+    })
+    new Float32Array(this.quadVertexBuffer.getMappedRange()).set(QUAD_VERTS)
+    this.quadVertexBuffer.unmap()
+
+    this.indexBuffer = device.createBuffer({
+      size: QUAD_INDICES.byteLength,
+      usage: GPUBufferUsage.INDEX,
+      mappedAtCreation: true
+    })
+    new Uint16Array(this.indexBuffer.getMappedRange()).set(QUAD_INDICES)
+    this.indexBuffer.unmap()
+
+    this.instanceBuffer = device.createBuffer({
+      size: MAX_STROKES * STROKE_STRIDE,
+      usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
+    })
+
+    this.uniformBuffer = device.createBuffer({
+      size: UNIFORM_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    })
+
+    // --- 2. Brush Shader (Drawing) ---
+    const brushModuleV = device.createShaderModule({ code: brushVertex })
+    const brushModuleF = device.createShaderModule({ code: brushFragment })
+
+    // Create explicit bind group layouts
+    this.uniformBindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+          buffer: { type: 'uniform' }
+        }
+      ]
+    })
+
+    this.textureBindGroupLayout = device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          texture: {} // default is float, 2d
+        }
+      ]
+    })
+
+    this.mainUniformBindGroup = device.createBindGroup({
+      layout: this.uniformBindGroupLayout,
+      entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
+    })
+
+    const renderPipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [this.uniformBindGroupLayout]
+    })
+
+    // Standard Render Pipeline (Alpha Blend)
+    this.renderPipeline = device.createRenderPipeline({
+      layout: renderPipelineLayout,
+      vertex: {
+        module: brushModuleV,
+        entryPoint: 'vs',
+        buffers: [
+          {
+            arrayStride: 8,
+            stepMode: 'vertex',
+            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }] // Quad vertex attributes
+          },
+          {
+            arrayStride: 16,
+            stepMode: 'instance',
+            attributes: [
+              { shaderLocation: 1, offset: 0, format: 'float32x2' }, // Instance attributes: position
+              { shaderLocation: 2, offset: 8, format: 'float32' }, // size
+              { shaderLocation: 3, offset: 12, format: 'float32' } // pressure
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module: brushModuleF,
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // Accumulate strokes using SourceOver blending to ensure smooth intersections.
+    this.accumulatePipeline = device.createRenderPipeline({
+      layout: renderPipelineLayout,
+      vertex: {
+        module: brushModuleV,
+        entryPoint: 'vs',
+        buffers: [
+          {
+            arrayStride: 8,
+            stepMode: 'vertex',
+            attributes: [{ shaderLocation: 0, offset: 0, format: 'float32x2' }]
+          },
+          {
+            arrayStride: 16,
+            stepMode: 'instance',
+            attributes: [
+              { shaderLocation: 1, offset: 0, format: 'float32x2' },
+              { shaderLocation: 2, offset: 8, format: 'float32' },
+              { shaderLocation: 3, offset: 12, format: 'float32' }
+            ]
+          }
+        ]
+      },
+      fragment: {
+        module: brushModuleF,
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              // Use SourceOver blending for smooth stroke intersections.
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 3. Blit Pipeline (For Preview) ---
+    const blitPipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [this.textureBindGroupLayout]
+    })
+
+    this.blitPipeline = device.createRenderPipeline({
+      layout: blitPipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: blitShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: blitShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: presentationFormat, // Use the presentation format
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 4. Composite Pipeline ---
+
+    const compositePipelineLayout = device.createPipelineLayout({
+      bindGroupLayouts: [
+        this.textureBindGroupLayout,
+        this.uniformBindGroupLayout
+      ]
+    })
+
+    // Standard composite pipeline for offscreen textures
+    this.compositePipeline = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // Composite pipeline for the preview canvas
+    this.compositePipelinePreview = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: presentationFormat,
+            blend: {
+              color: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'one',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 5. Erase Pipeline (Destination Out) ---
+    // Standard erase pipeline for offscreen textures
+    this.erasePipeline = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: 'rgba8unorm',
+            blend: {
+              color: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha', // dst * (1 - src_alpha)
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha', // dst_alpha * (1 - src_alpha)
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // Erase pipeline for the preview canvas
+    this.erasePipelinePreview = device.createRenderPipeline({
+      layout: compositePipelineLayout,
+      vertex: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'vs'
+      },
+      fragment: {
+        module: device.createShaderModule({ code: compositeShader }),
+        entryPoint: 'fs',
+        targets: [
+          {
+            format: presentationFormat,
+            blend: {
+              color: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              },
+              alpha: {
+                srcFactor: 'zero',
+                dstFactor: 'one-minus-src-alpha',
+                operation: 'add'
+              }
+            }
+          }
+        ]
+      },
+      primitive: { topology: 'triangle-list' }
+    })
+
+    // --- 6. Readback Pipeline (Compute) ---
+    this.readbackPipeline = device.createComputePipeline({
+      layout: 'auto',
+      compute: {
+        module: device.createShaderModule({ code: readbackShader }),
+        entryPoint: 'main'
+      }
+    })
+  }
+
+  public prepareStroke(width: number, height: number) {
+    // Initialize or resize the accumulation texture
+    if (
+      !this.currentStrokeTexture ||
+      this.currentStrokeTexture.width !== width ||
+      this.currentStrokeTexture.height !== height
+    ) {
+      if (this.currentStrokeTexture) this.currentStrokeTexture.destroy()
+      this.currentStrokeTexture = this.device.createTexture({
+        size: [width, height],
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.RENDER_ATTACHMENT |
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_SRC
+      })
+      this.currentStrokeView = this.currentStrokeTexture.createView()
+
+      // Invalidate texture-dependent bind groups
+      this.compositeTextureBindGroup = null
+      this.previewTextureBindGroup = null
+      // Readback bind group might also be invalid if it was using the old texture
+      if (this.lastReadbackTexture === this.currentStrokeTexture) {
+        this.readbackBindGroup = null
+        this.lastReadbackTexture = null
+      }
+    }
+
+    // Clear the accumulation texture
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: this.currentStrokeView!,
+          loadOp: 'clear',
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
+          storeOp: 'store'
+        }
+      ]
+    })
+    pass.end()
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  public renderStrokeToAccumulator(
+    points: { x: number; y: number; pressure: number }[],
+    settings: {
+      size: number
+      opacity: number
+      hardness: number
+      color: [number, number, number]
+      width: number
+      height: number
+      brushShape: number
+    }
+  ) {
+    if (!this.currentStrokeView) return
+    // Render stroke using accumulation pipeline
+    this.renderStrokeInternal(
+      this.currentStrokeView,
+      this.accumulatePipeline,
+      points,
+      settings
+    )
+  }
+
+  public compositeStroke(
+    targetView: GPUTextureView,
+    settings: {
+      opacity: number
+      color: [number, number, number]
+      hardness: number // Required for uniform buffer layout
+      screenSize: [number, number]
+      brushShape: number
+      isErasing?: boolean
+    }
+  ) {
+    if (!this.currentStrokeTexture) return
+
+    // Update uniforms for the composite pass
+    const buffer = new ArrayBuffer(UNIFORM_SIZE)
+    const f32 = new Float32Array(buffer)
+    const u32 = new Uint32Array(buffer)
+
+    f32[0] = settings.color[0]
+    f32[1] = settings.color[1]
+    f32[2] = settings.color[2]
+    f32[3] = settings.opacity
+    f32[4] = settings.hardness
+    f32[5] = 0 // Padding
+    f32[6] = settings.screenSize[0]
+    f32[7] = settings.screenSize[1]
+    u32[8] = settings.brushShape // Brush shape: 0=Circle, 1=Square
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
+
+    const encoder = this.device.createCommandEncoder()
+
+    // Choose pipeline based on operation
+    const pipeline = settings.isErasing
+      ? this.erasePipeline
+      : this.compositePipeline
+
+    // 1. Texture Bind Group (Group 0)
+    if (!this.compositeTextureBindGroup) {
+      this.compositeTextureBindGroup = this.device.createBindGroup({
+        layout: this.textureBindGroupLayout,
+        entries: [
+          { binding: 0, resource: this.currentStrokeTexture.createView() }
+        ]
+      })
+    }
+
+    // 2. Uniform Bind Group (Group 1) - Use shared mainUniformBindGroup
+    // It is compatible because we used the same layout
+
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: targetView,
+          loadOp: 'load',
+          storeOp: 'store'
+        }
+      ]
+    })
+
+    pass.setPipeline(pipeline)
+    pass.setBindGroup(0, this.compositeTextureBindGroup)
+    pass.setBindGroup(1, this.mainUniformBindGroup)
+    pass.draw(3)
+    pass.end()
+
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  // Direct rendering method
+  public renderStroke(
+    targetView: GPUTextureView,
+    points: { x: number; y: number; pressure: number }[],
+    settings: {
+      size: number
+      opacity: number
+      hardness: number
+      color: [number, number, number]
+      width: number
+      height: number
+      brushShape: number
+    }
+  ) {
+    this.renderStrokeInternal(targetView, this.renderPipeline, points, settings)
+  }
+
+  private renderStrokeInternal(
+    targetView: GPUTextureView,
+    pipeline: GPURenderPipeline,
+    points: { x: number; y: number; pressure: number }[],
+    settings: {
+      size: number
+      opacity: number
+      hardness: number
+      color: [number, number, number]
+      width: number
+      height: number
+      brushShape: number
+    }
+  ) {
+    if (points.length === 0) return
+
+    // 1. Update Uniforms
+    const buffer = new ArrayBuffer(UNIFORM_SIZE)
+    const f32 = new Float32Array(buffer)
+    const u32 = new Uint32Array(buffer)
+
+    f32[0] = settings.color[0]
+    f32[1] = settings.color[1]
+    f32[2] = settings.color[2]
+    f32[3] = settings.opacity
+    f32[4] = settings.hardness
+    f32[5] = 0 // Padding
+    f32[6] = settings.width
+    f32[7] = settings.height
+    u32[8] = settings.brushShape
+    this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
+
+    // 2. Batch Rendering
+    let processedPoints = 0
+    while (processedPoints < points.length) {
+      const batchSize = Math.min(points.length - processedPoints, MAX_STROKES)
+      const iData = new Float32Array(batchSize * 4)
+
+      for (let i = 0; i < batchSize; i++) {
+        const p = points[processedPoints + i]
+        iData[i * 4 + 0] = p.x
+        iData[i * 4 + 1] = p.y
+        iData[i * 4 + 2] = settings.size
+        iData[i * 4 + 3] = p.pressure
+      }
+
+      this.device.queue.writeBuffer(this.instanceBuffer, 0, iData)
+
+      // 3. Render Pass
+      const encoder = this.device.createCommandEncoder()
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: targetView,
+            loadOp: 'load',
+            storeOp: 'store'
+          }
+        ]
+      })
+
+      pass.setPipeline(pipeline)
+      pass.setBindGroup(0, this.mainUniformBindGroup)
+      pass.setVertexBuffer(0, this.quadVertexBuffer)
+      pass.setVertexBuffer(1, this.instanceBuffer)
+      pass.setIndexBuffer(this.indexBuffer, 'uint16')
+      pass.drawIndexed(6, batchSize)
+      pass.end()
+
+      this.device.queue.submit([encoder.finish()])
+
+      processedPoints += batchSize
+    }
+  }
+
+  // Blit the accumulated stroke to the preview canvas
+  public blitToCanvas(
+    destinationCtx: GPUCanvasContext,
+    settings: {
+      opacity: number
+      color: [number, number, number]
+      hardness: number
+      screenSize: [number, number]
+      brushShape: number
+      isErasing?: boolean
+    },
+    backgroundTexture?: GPUTexture
+  ) {
+    const encoder = this.device.createCommandEncoder()
+    const destView = destinationCtx.getCurrentTexture().createView()
+
+    if (backgroundTexture) {
+      // Draw background texture to allow erasing effect on existing content
+      if (
+        this.lastBackgroundTexture !== backgroundTexture ||
+        !this.backgroundBindGroup
+      ) {
+        this.backgroundBindGroup = this.device.createBindGroup({
+          layout: this.textureBindGroupLayout,
+          entries: [{ binding: 0, resource: backgroundTexture.createView() }]
+        })
+        this.lastBackgroundTexture = backgroundTexture
+      }
+
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: destView,
+            loadOp: 'clear', // Clear attachment before drawing
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            storeOp: 'store'
+          }
+        ]
+      })
+      pass.setPipeline(this.blitPipeline)
+      pass.setBindGroup(0, this.backgroundBindGroup)
+      pass.draw(3)
+      pass.end()
+    } else {
+      // Clear the destination texture
+      const clearPass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: destView,
+            loadOp: 'clear',
+            clearValue: { r: 0, g: 0, b: 0, a: 0 },
+            storeOp: 'store'
+          }
+        ]
+      })
+      clearPass.end()
+    }
+
+    // Draw the accumulated stroke
+    if (this.currentStrokeTexture) {
+      // Update uniforms for the preview pass
+      const buffer = new ArrayBuffer(UNIFORM_SIZE)
+      const f32 = new Float32Array(buffer)
+      const u32 = new Uint32Array(buffer)
+
+      f32[0] = settings.color[0]
+      f32[1] = settings.color[1]
+      f32[2] = settings.color[2]
+      f32[3] = settings.opacity
+      f32[4] = settings.hardness
+      f32[5] = 0 // Padding
+      f32[6] = settings.screenSize[0]
+      f32[7] = settings.screenSize[1]
+      u32[8] = settings.brushShape
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, buffer)
+
+      // Select preview pipeline based on operation
+      const pipeline = settings.isErasing
+        ? this.erasePipelinePreview
+        : this.compositePipelinePreview
+
+      // 1. Texture Bind Group (Group 0)
+      if (!this.previewTextureBindGroup) {
+        this.previewTextureBindGroup = this.device.createBindGroup({
+          layout: this.textureBindGroupLayout,
+          entries: [
+            { binding: 0, resource: this.currentStrokeTexture.createView() }
+          ]
+        })
+      }
+
+      // 2. Uniform Bind Group (Group 1) - Use shared mainUniformBindGroup
+
+      const passStroke = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: destView,
+            loadOp: 'load', // Load the previous pass result
+            storeOp: 'store'
+          }
+        ]
+      })
+      passStroke.setPipeline(pipeline)
+      passStroke.setBindGroup(0, this.previewTextureBindGroup)
+      passStroke.setBindGroup(1, this.mainUniformBindGroup)
+      passStroke.draw(3)
+      passStroke.end()
+    }
+
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  // Clear the preview canvas
+  public clearPreview(destinationCtx: GPUCanvasContext) {
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: destinationCtx.getCurrentTexture().createView(),
+          loadOp: 'clear',
+          clearValue: { r: 0, g: 0, b: 0, a: 0 },
+          storeOp: 'store'
+        }
+      ]
+    })
+    pass.end()
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  public prepareReadback(texture: GPUTexture, outputBuffer: GPUBuffer) {
+    if (
+      this.lastReadbackTexture !== texture ||
+      this.lastReadbackBuffer !== outputBuffer ||
+      !this.readbackBindGroup
+    ) {
+      this.readbackBindGroup = this.device.createBindGroup({
+        layout: this.readbackPipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: texture.createView() },
+          { binding: 1, resource: { buffer: outputBuffer } }
+        ]
+      })
+      this.lastReadbackTexture = texture
+      this.lastReadbackBuffer = outputBuffer
+    }
+
+    const encoder = this.device.createCommandEncoder()
+    const pass = encoder.beginComputePass()
+    pass.setPipeline(this.readbackPipeline)
+    pass.setBindGroup(0, this.readbackBindGroup)
+
+    const width = texture.width
+    const height = texture.height
+    // Dispatch workgroups based on texture dimensions (8x8 block size)
+    pass.dispatchWorkgroups(Math.ceil(width / 8), Math.ceil(height / 8))
+    pass.end()
+
+    this.device.queue.submit([encoder.finish()])
+  }
+
+  public destroy() {
+    this.quadVertexBuffer.destroy()
+    this.indexBuffer.destroy()
+    this.instanceBuffer.destroy()
+    this.uniformBuffer.destroy()
+    if (this.currentStrokeTexture) this.currentStrokeTexture.destroy()
+
+    // Clear cached bind groups
+    this.compositeTextureBindGroup = null
+    this.previewTextureBindGroup = null
+    this.readbackBindGroup = null
+    this.backgroundBindGroup = null
+    this.lastReadbackTexture = null
+    this.lastReadbackBuffer = null
+    this.lastBackgroundTexture = null
+  }
+}
diff --git a/src/composables/maskeditor/gpu/brushShaders.ts b/src/composables/maskeditor/gpu/brushShaders.ts
new file mode 100644
index 000000000..659c9ddb4
--- /dev/null
+++ b/src/composables/maskeditor/gpu/brushShaders.ts
@@ -0,0 +1,171 @@
+import tgpu from 'typegpu'
+import * as d from 'typegpu/data'
+import { BrushUniforms } from './gpuSchema'
+
+const VertexOutput = d.struct({
+  position: d.builtin.position,
+  localUV: d.location(0, d.vec2f),
+  color: d.location(1, d.vec3f),
+  opacity: d.location(2, d.f32),
+  hardness: d.location(3, d.f32)
+})
+
+const brushVertexTemplate = `
+@group(0) @binding(0) var<uniform> globals: BrushUniforms;
+
+@vertex
+fn vs(
+  @location(0) quadPos: vec2<f32>,
+  @location(1) pos: vec2<f32>,
+  @location(2) size: f32,
+  @location(3) pressure: f32
+) -> VertexOutput {
+  // Convert diameter to radius
+  let radius = size * pressure;
+  let pixelPos = pos + (quadPos * radius);
+  
+  // Convert pixel coordinates to Normalized Device Coordinates (NDC)
+  let ndcX = (pixelPos.x / globals.screenSize.x) * 2.0 - 1.0;
+  let ndcY = 1.0 - ((pixelPos.y / globals.screenSize.y) * 2.0);  // Flip Y axis for WebGPU coordinate system
+
+  return VertexOutput(
+    vec4<f32>(ndcX, ndcY, 0.0, 1.0),
+    quadPos,
+    globals.brushColor,
+    pressure * globals.brushOpacity,
+    globals.hardness
+  );
+}
+`
+
+export const brushVertex = tgpu.resolve({
+  template: brushVertexTemplate,
+  externals: {
+    BrushUniforms,
+    VertexOutput
+  }
+})
+
+const brushFragmentTemplate = `
+@group(0) @binding(0) var<uniform> globals: BrushUniforms;
+
+@fragment
+fn fs(v: VertexOutput) -> @location(0) vec4<f32> {
+  var dist: f32;
+  if (globals.brushShape == 1u) {
+    // Calculate Chebyshev distance for square shape
+    dist = max(abs(v.localUV.x), abs(v.localUV.y));
+  } else {
+    // Calculate Euclidean distance for circle shape
+    dist = length(v.localUV);
+  }
+
+  if (dist > 1.0) { discard; }
+
+  // Calculate alpha with hardness and anti-aliasing
+  let edgeWidth = fwidth(dist);
+  let startFade = min(v.hardness, 1.0 - edgeWidth * 2.0);
+  let linearAlpha = 1.0 - smoothstep(startFade, 1.0, dist);
+  // Apply quadratic falloff for smoother edges
+  let alphaShape = pow(linearAlpha, 2.0);
+  
+  // Return premultiplied alpha color
+  let alpha = alphaShape * v.opacity;
+  return vec4<f32>(v.color * alpha, alpha);
+}
+`
+
+export const brushFragment = tgpu.resolve({
+  template: brushFragmentTemplate,
+  externals: {
+    VertexOutput,
+    BrushUniforms
+  }
+})
+
+const blitShaderTemplate = `
+@vertex fn vs(@builtin(vertex_index) vIdx: u32) -> @builtin(position) vec4<f32> {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0)
+  );
+  return vec4<f32>(pos[vIdx], 0.0, 1.0);
+}
+
+@group(0) @binding(0) var myTexture: texture_2d<f32>;
+
+@fragment fn fs(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
+  let c = textureLoad(myTexture, vec2<i32>(pos.xy), 0);
+  // Treat texture as premultiplied to prevent double-darkening on overlaps
+  return c;
+}
+`
+
+export const blitShader = tgpu.resolve({
+  template: blitShaderTemplate,
+  externals: {}
+})
+
+const compositeShaderTemplate = `
+@vertex fn vs(@builtin(vertex_index) vIdx: u32) -> @builtin(position) vec4<f32> {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0)
+  );
+  return vec4<f32>(pos[vIdx], 0.0, 1.0);
+}
+
+@group(0) @binding(0) var myTexture: texture_2d<f32>;
+@group(1) @binding(0) var<uniform> globals: BrushUniforms;
+
+@fragment fn fs(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
+  let sampled = textureLoad(myTexture, vec2<i32>(pos.xy), 0);
+  // Apply global brush opacity to accumulated coverage
+  return sampled * globals.brushOpacity;
+}
+`
+
+export const compositeShader = tgpu.resolve({
+  template: compositeShaderTemplate,
+  externals: {
+    BrushUniforms
+  }
+})
+
+const readbackShaderTemplate = `
+@group(0) @binding(0) var inputTex: texture_2d<f32>;
+@group(0) @binding(1) var<storage, read_write> outputBuf: array<u32>;
+
+@compute @workgroup_size(8, 8)
+fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+  let dims = textureDimensions(inputTex);
+  if (id.x >= dims.x || id.y >= dims.y) { return; }
+
+  let color = textureLoad(inputTex, vec2<i32>(id.xy), 0);
+  
+  var r = color.r;
+  var g = color.g;
+  var b = color.b;
+  let a = color.a;
+
+  if (a > 0.0) {
+    r = r / a;
+    g = g / a;
+    b = b / a;
+  }
+
+  let ir = u32(clamp(r * 255.0, 0.0, 255.0));
+  let ig = u32(clamp(g * 255.0, 0.0, 255.0));
+  let ib = u32(clamp(b * 255.0, 0.0, 255.0));
+  let ia = u32(clamp(a * 255.0, 0.0, 255.0));
+
+  // Pack RGBA channels into a single u32 (Little Endian)
+  let packed = ir | (ig << 8u) | (ib << 16u) | (ia << 24u);
+
+  let index = id.y * dims.x + id.x;
+  outputBuf[index] = packed;
+}
+`
+
+export const readbackShader = tgpu.resolve({
+  template: readbackShaderTemplate,
+  externals: {}
+})
diff --git a/src/composables/maskeditor/gpu/gpuSchema.ts b/src/composables/maskeditor/gpu/gpuSchema.ts
new file mode 100644
index 000000000..b9275eac6
--- /dev/null
+++ b/src/composables/maskeditor/gpu/gpuSchema.ts
@@ -0,0 +1,17 @@
+import * as d from 'typegpu/data'
+
+// Global brush uniforms
+export const BrushUniforms = d.struct({
+  brushColor: d.vec3f,
+  brushOpacity: d.f32,
+  hardness: d.f32,
+  screenSize: d.vec2f,
+  brushShape: d.u32 // 0: Circle, 1: Square
+})
+
+// Per-point instance data
+export const StrokePoint = d.struct({
+  pos: d.location(0, d.vec2f), // Center position
+  size: d.location(1, d.f32), // Brush radius
+  pressure: d.location(2, d.f32) // Pressure value (0.0 - 1.0)
+})
diff --git a/src/composables/maskeditor/splineUtils.ts b/src/composables/maskeditor/splineUtils.ts
new file mode 100644
index 000000000..6379bf165
--- /dev/null
+++ b/src/composables/maskeditor/splineUtils.ts
@@ -0,0 +1,126 @@
+import type { Point } from '@/extensions/core/maskeditor/types'
+
+/**
+ * Evaluates a Catmull-Rom spline at parameter t between p1 and p2
+ * @param p0 Previous control point
+ * @param p1 Start point of the curve segment
+ * @param p2 End point of the curve segment
+ * @param p3 Next control point
+ * @param t Parameter in range [0, 1]
+ * @returns Interpolated point on the curve
+ */
+export function catmullRomSpline(
+  p0: Point,
+  p1: Point,
+  p2: Point,
+  p3: Point,
+  t: number
+): Point {
+  // Centripetal Catmull-Rom Spline (alpha = 0.5) to prevent loops and overshoots
+  const alpha = 0.5
+
+  const getT = (t: number, p0: Point, p1: Point) => {
+    const d = Math.hypot(p1.x - p0.x, p1.y - p0.y)
+    return t + Math.pow(d, alpha)
+  }
+
+  const t0 = 0
+  const t1 = getT(t0, p0, p1)
+  const t2 = getT(t1, p1, p2)
+  const t3 = getT(t2, p2, p3)
+
+  // Map normalized t to parameter range
+  const tInterp = t1 + (t2 - t1) * t
+
+  // Safe interpolation for coincident points
+  const interp = (
+    pA: Point,
+    pB: Point,
+    tA: number,
+    tB: number,
+    t: number
+  ): Point => {
+    if (Math.abs(tB - tA) < 0.0001) return pA
+    const k = (t - tA) / (tB - tA)
+    return add(mul(pA, 1 - k), mul(pB, k))
+  }
+
+  // Barry-Goldman pyramidal interpolation
+  const A1 = interp(p0, p1, t0, t1, tInterp)
+  const A2 = interp(p1, p2, t1, t2, tInterp)
+  const A3 = interp(p2, p3, t2, t3, tInterp)
+
+  const B1 = interp(A1, A2, t0, t2, tInterp)
+  const B2 = interp(A2, A3, t1, t3, tInterp)
+
+  const C = interp(B1, B2, t1, t2, tInterp)
+
+  return C
+}
+
+function add(p1: Point, p2: Point): Point {
+  return { x: p1.x + p2.x, y: p1.y + p2.y }
+}
+
+function mul(p: Point, s: number): Point {
+  return { x: p.x * s, y: p.y * s }
+}
+
+/**
+ * Resamples a curve segment with a starting offset (remainder from previous segment).
+ * Returns the resampled points and the new remainder distance.
+ *
+ * @param points Points defining the curve segment
+ * @param spacing Desired spacing between points
+ * @param startOffset Distance to travel before placing the first point (remainder)
+ * @returns Object containing points and new remainder
+ */
+export function resampleSegment(
+  points: Point[],
+  spacing: number,
+  startOffset: number
+): { points: Point[]; remainder: number } {
+  if (points.length === 0) return { points: [], remainder: startOffset }
+
+  const result: Point[] = []
+  let currentDist = 0
+  let nextSampleDist = startOffset
+
+  // Iterate through segment points
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i]
+    const p2 = points[i + 1]
+
+    const dx = p2.x - p1.x
+    const dy = p2.y - p1.y
+    const segmentLen = Math.hypot(dx, dy)
+
+    // Handle zero-length segments
+    if (segmentLen < 0.0001) {
+      while (nextSampleDist <= currentDist) {
+        result.push(p1)
+        nextSampleDist += spacing
+      }
+      continue
+    }
+
+    // Generate samples within the segment
+    while (nextSampleDist <= currentDist + segmentLen) {
+      const t = (nextSampleDist - currentDist) / segmentLen
+
+      // Interpolate
+      const x = p1.x + t * dx
+      const y = p1.y + t * dy
+      result.push({ x, y })
+
+      nextSampleDist += spacing
+    }
+
+    currentDist += segmentLen
+  }
+
+  // Calculate remainder distance for the next segment
+  const remainder = nextSampleDist - currentDist
+
+  return { points: result, remainder }
+}
diff --git a/src/composables/maskeditor/useBrushDrawing.ts b/src/composables/maskeditor/useBrushDrawing.ts
index c55d9b784..27b580ee3 100644
--- a/src/composables/maskeditor/useBrushDrawing.ts
+++ b/src/composables/maskeditor/useBrushDrawing.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, watch, nextTick, onUnmounted } from 'vue'
 import QuickLRU from '@alloc/quick-lru'
 import { debounce } from 'es-toolkit/compat'
 import { hexToRgb, parseToRgb } from '@/utils/colorUtil'
@@ -11,7 +11,17 @@ import {
 import type { Brush, Point } from '@/extensions/core/maskeditor/types'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { useCoordinateTransform } from './useCoordinateTransform'
+import { resampleSegment } from './splineUtils'
+import TGPU from 'typegpu'
+import { GPUBrushRenderer } from './gpu/GPUBrushRenderer'
+import { StrokeProcessor } from './StrokeProcessor'
+import { getEffectiveBrushSize, getEffectiveHardness } from './brushUtils'
 
+/**
+ * Saves the brush settings to local storage with a debounce.
+ * @param key - The storage key.
+ * @param brush - The brush settings object.
+ */
 const saveBrushToCache = debounce(function (key: string, brush: Brush): void {
   try {
     const brushString = JSON.stringify(brush)
@@ -21,6 +31,11 @@ const saveBrushToCache = debounce(function (key: string, brush: Brush): void {
   }
 }, 300)
 
+/**
+ * Loads brush settings from local storage.
+ * @param key - The storage key.
+ * @returns The brush settings object or null if not found.
+ */
 function loadBrushFromCache(key: string): Brush | null {
   try {
     const brushString = getStorageValue(key)
@@ -43,96 +58,53 @@ export function useBrushDrawing(initialSettings?: {
 
   const coordinateTransform = useCoordinateTransform()
 
+  // GPU Resources (Scoped to this composable instance)
+  let maskTexture: GPUTexture | null = null
+  let rgbTexture: GPUTexture | null = null
+  let device: GPUDevice | null = null
+  let renderer: GPUBrushRenderer | null = null
+  let previewContext: GPUCanvasContext | null = null
+  let previewCanvas: HTMLCanvasElement | null = null
+
+  // Readback buffers
+  let readbackStorageMask: GPUBuffer | null = null
+  let readbackStorageRgb: GPUBuffer | null = null
+  let readbackStagingMask: GPUBuffer | null = null
+  let readbackStagingRgb: GPUBuffer | null = null
+  let currentBufferSize = 0
+
+  // Flag to prevent redundant GPU updates
+  const isSavingHistory = ref(false)
+
+  // Brush texture cache
   const brushTextureCache = new QuickLRU<string, HTMLCanvasElement>({
-    maxSize: 8
+    maxSize: 20
   })
 
-  const SMOOTHING_MAX_STEPS = 30
-  const SMOOTHING_MIN_STEPS = 2
-
-  const isDrawing = ref(false)
-  const isDrawingLine = ref(false)
-  const lineStartPoint = ref<Point | null>(null)
-  const smoothingCordsArray = ref<Point[]>([])
-  const smoothingLastDrawTime = ref(new Date())
-  const initialDraw = ref(true)
-
-  const brushStrokeCanvas = ref<HTMLCanvasElement | null>(null)
-  const brushStrokeCtx = ref<CanvasRenderingContext2D | null>(null)
-
-  const initialPoint = ref<Point | null>(null)
-  const useDominantAxis = ref(initialSettings?.useDominantAxis ?? false)
-  const brushAdjustmentSpeed = ref(initialSettings?.brushAdjustmentSpeed ?? 1.0)
-
-  const cachedBrushSettings = loadBrushFromCache('maskeditor_brush_settings')
-  if (cachedBrushSettings) {
-    store.setBrushSize(cachedBrushSettings.size)
-    store.setBrushOpacity(cachedBrushSettings.opacity)
-    store.setBrushHardness(cachedBrushSettings.hardness)
-    store.brushSettings.type = cachedBrushSettings.type
-    store.setBrushSmoothingPrecision(cachedBrushSettings.smoothingPrecision)
-  }
-
-  const createBrushStrokeCanvas = async (): Promise<void> => {
-    if (brushStrokeCanvas.value !== null) {
-      return
-    }
-
-    const maskCanvas = store.maskCanvas
-    if (!maskCanvas) {
-      throw new Error('Mask canvas not initialized')
-    }
-
-    const canvas = document.createElement('canvas')
-    canvas.width = maskCanvas.width
-    canvas.height = maskCanvas.height
-
-    brushStrokeCanvas.value = canvas
-    brushStrokeCtx.value = canvas.getContext('2d')!
-  }
-
-  const initShape = (compositionOperation: CompositionOperation) => {
-    const blendMode = store.maskBlendMode
-    const mask_ctx = store.maskCtx
-    const rgb_ctx = store.rgbCtx
-
-    if (!mask_ctx || !rgb_ctx) {
-      throw new Error('Canvas contexts are required')
-    }
-
-    mask_ctx.beginPath()
-    rgb_ctx.beginPath()
-
-    if (compositionOperation === CompositionOperation.SourceOver) {
-      mask_ctx.fillStyle = blendMode
-      mask_ctx.globalCompositeOperation = CompositionOperation.SourceOver
-      rgb_ctx.globalCompositeOperation = CompositionOperation.SourceOver
-    } else if (compositionOperation === CompositionOperation.DestinationOut) {
-      mask_ctx.globalCompositeOperation = CompositionOperation.DestinationOut
-      rgb_ctx.globalCompositeOperation = CompositionOperation.DestinationOut
-    }
-  }
-
-  const formatRgba = (hex: string, alpha: number): string => {
-    const { r, g, b } = hexToRgb(hex)
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`
-  }
-
-  const getCachedBrushTexture = (
+  /**
+   * Retrieves a cached brush texture or creates a new one if not found.
+   * @param radius - The radius of the brush.
+   * @param hardness - The hardness of the brush (0 to 1).
+   * @param color - The color of the brush.
+   * @param opacity - The opacity of the brush (0 to 1).
+   * @returns The canvas element containing the brush texture.
+   */
+  function getCachedBrushTexture(
     radius: number,
     hardness: number,
     color: string,
     opacity: number
-  ): HTMLCanvasElement => {
+  ): HTMLCanvasElement {
     const cacheKey = `${radius}_${hardness}_${color}_${opacity}`
 
     if (brushTextureCache.has(cacheKey)) {
       return brushTextureCache.get(cacheKey)!
     }
 
+    // Use integer dimensions
+    const size = Math.ceil(radius * 2)
     const tempCanvas = document.createElement('canvas')
     const tempCtx = tempCanvas.getContext('2d')!
-    const size = radius * 2
     tempCanvas.width = size
     tempCanvas.height = size
 
@@ -147,12 +119,13 @@ export function useBrushDrawing(initialSettings?: {
     const fadeRange = radius - hardRadius
 
     for (let y = 0; y < size; y++) {
-      const dy = y - centerY
+      // Calculate distance from pixel center
+      const dy = y + 0.5 - centerY
       for (let x = 0; x < size; x++) {
-        const dx = x - centerX
+        const dx = x + 0.5 - centerX
         const index = (y * size + x) * 4
 
-        // Calculate square distance (Chebyshev distance)
+        // Calculate Chebyshev distance
         const distFromEdge = Math.max(Math.abs(dx), Math.abs(dy))
 
         let pixelOpacity = 0
@@ -160,7 +133,8 @@ export function useBrushDrawing(initialSettings?: {
           pixelOpacity = opacity
         } else if (distFromEdge <= radius) {
           const fadeProgress = (distFromEdge - hardRadius) / fadeRange
-          pixelOpacity = opacity * (1 - fadeProgress)
+          // Apply quadratic falloff
+          pixelOpacity = opacity * Math.pow(1 - fadeProgress, 2)
         }
 
         data[index] = r
@@ -176,146 +150,276 @@ export function useBrushDrawing(initialSettings?: {
     return tempCanvas
   }
 
-  const createBrushGradient = (
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    radius: number,
-    hardness: number,
-    color: string,
-    opacity: number,
-    isErasing: boolean
-  ): CanvasGradient => {
-    const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
+  const isDrawing = ref(false)
+  const isDrawingLine = ref(false)
+  const lineStartPoint = ref<Point | null>(null)
+  const lineRemainder = ref(0)
+  const smoothingLastDrawTime = ref(new Date())
+  const initialDraw = ref(true)
 
-    if (isErasing) {
-      gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity})`)
-      gradient.addColorStop(hardness, `rgba(255, 255, 255, ${opacity * 0.5})`)
-      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`)
-    } else {
-      const { r, g, b } = parseToRgb(color)
-      gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${opacity})`)
-      gradient.addColorStop(
-        hardness,
-        `rgba(${r}, ${g}, ${b}, ${opacity * 0.5})`
-      )
-      gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`)
+  // Dirty rectangle tracking
+  const dirtyRect = ref({
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  })
+
+  /**
+   * Resets the dirty rectangle to its initial infinite state.
+   */
+  function resetDirtyRect() {
+    dirtyRect.value = {
+      minX: Infinity,
+      minY: Infinity,
+      maxX: -Infinity,
+      maxY: -Infinity
     }
-
-    return gradient
   }
 
-  const drawShapeOnContext = (
-    ctx: CanvasRenderingContext2D,
-    brushType: BrushShape,
-    x: number,
-    y: number,
-    radius: number
-  ): void => {
-    ctx.beginPath()
-    if (brushType === BrushShape.Rect) {
-      ctx.rect(x - radius, y - radius, radius * 2, radius * 2)
-    } else {
-      ctx.arc(x, y, radius, 0, Math.PI * 2, false)
-    }
-    ctx.fill()
+  /**
+   * Updates the dirty rectangle to include the specified area.
+   * @param x - The x-coordinate of the center.
+   * @param y - The y-coordinate of the center.
+   * @param radius - The radius of the area.
+   */
+  function updateDirtyRect(x: number, y: number, radius: number) {
+    // Add padding for anti-aliasing
+    const padding = 2
+    dirtyRect.value.minX = Math.min(dirtyRect.value.minX, x - radius - padding)
+    dirtyRect.value.minY = Math.min(dirtyRect.value.minY, y - radius - padding)
+    dirtyRect.value.maxX = Math.max(dirtyRect.value.maxX, x + radius + padding)
+    dirtyRect.value.maxY = Math.max(dirtyRect.value.maxY, y + radius + padding)
   }
 
-  const drawRgbShape = (
-    ctx: CanvasRenderingContext2D,
-    point: Point,
-    brushType: BrushShape,
-    brushRadius: number,
-    hardness: number,
-    opacity: number
-  ): void => {
-    const { x, y } = point
-    const rgbColor = store.rgbColor
+  // Stroke processor instance
+  let strokeProcessor: StrokeProcessor | null = null
 
-    if (brushType === BrushShape.Rect && hardness < 1) {
-      const rgbaColor = formatRgba(rgbColor, opacity)
-      const brushTexture = getCachedBrushTexture(
-        brushRadius,
-        hardness,
-        rgbaColor,
-        opacity
-      )
-      ctx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
+  const initialPoint = ref<Point | null>(null)
+  const useDominantAxis = ref(initialSettings?.useDominantAxis ?? false)
+  const brushAdjustmentSpeed = ref(initialSettings?.brushAdjustmentSpeed ?? 1.0)
+
+  const cachedBrushSettings = loadBrushFromCache('maskeditor_brush_settings')
+  if (cachedBrushSettings) {
+    store.setBrushSize(cachedBrushSettings.size)
+    store.setBrushOpacity(cachedBrushSettings.opacity)
+    store.setBrushHardness(cachedBrushSettings.hardness)
+    store.brushSettings.type = cachedBrushSettings.type
+    store.setBrushStepSize(cachedBrushSettings.stepSize ?? 5)
+  }
+
+  // Handle external clear events
+  watch(
+    () => store.clearTrigger,
+    () => {
+      clearGPU()
+    }
+  )
+
+  // Sync GPU on Undo/Redo
+  watch(
+    () => store.canvasHistory.currentStateIndex,
+    async () => {
+      // Skip update if state was just saved
+      if (isSavingHistory.value) return
+
+      // Update GPU textures to match restored canvas state
+      await updateGPUFromCanvas()
+
+      // Clear preview to remove artifacts
+      if (renderer && previewContext) {
+        renderer.clearPreview(previewContext)
+      }
+    }
+  )
+
+  // Cleanup GPU resources on unmount
+  onUnmounted(() => {
+    if (renderer) {
+      renderer.destroy()
+      renderer = null
+    }
+    if (maskTexture) {
+      maskTexture.destroy()
+      maskTexture = null
+    }
+    if (rgbTexture) {
+      rgbTexture.destroy()
+      rgbTexture = null
+    }
+    if (readbackStorageMask) {
+      readbackStorageMask.destroy()
+      readbackStorageMask = null
+    }
+    if (readbackStorageRgb) {
+      readbackStorageRgb.destroy()
+      readbackStorageRgb = null
+    }
+    if (readbackStagingMask) {
+      readbackStagingMask.destroy()
+      readbackStagingMask = null
+    }
+    if (readbackStagingRgb) {
+      readbackStagingRgb.destroy()
+      readbackStagingRgb = null
+    }
+    // We do not destroy the device as it might be shared or managed by TGPU
+  })
+
+  /**
+   * Initializes the TypeGPU root and device if not already initialized.
+   */
+  async function initTypeGPU(): Promise<void> {
+    if (store.tgpuRoot) {
+      device = store.tgpuRoot.device
       return
     }
 
-    if (hardness === 1) {
-      const rgbaColor = formatRgba(rgbColor, opacity)
-      ctx.fillStyle = rgbaColor
-      drawShapeOnContext(ctx, brushType, x, y, brushRadius)
-      return
+    try {
+      const root = await TGPU.init()
+      store.tgpuRoot = root
+      device = root.device
+      console.warn('✅ TypeGPU initialized! Root:', root)
+      console.warn('Device info:', root.device.limits)
+    } catch (error: any) {
+      console.warn('Failed to initialize TypeGPU:', error.message)
     }
+  }
 
-    const gradient = createBrushGradient(
-      ctx,
-      x,
-      y,
-      brushRadius,
-      hardness,
-      rgbColor,
-      opacity,
-      false
+  /**
+   * Premultiplies the alpha of an ImageData array in place.
+   * @param data - The Uint8ClampedArray to modify.
+   */
+  function premultiplyData(data: Uint8ClampedArray) {
+    for (let i = 0; i < data.length; i += 4) {
+      const a = data[i + 3] / 255
+      data[i] = Math.round(data[i] * a)
+      data[i + 1] = Math.round(data[i + 1] * a)
+      data[i + 2] = Math.round(data[i + 2] * a)
+    }
+  }
+
+  /**
+   * Updates the GPU textures from the current canvas state.
+   */
+  async function updateGPUFromCanvas(): Promise<void> {
+    if (
+      !device ||
+      !maskTexture ||
+      !rgbTexture ||
+      !store.maskCanvas ||
+      !store.rgbCtx
     )
-    ctx.fillStyle = gradient
-    drawShapeOnContext(ctx, brushType, x, y, brushRadius)
-  }
-
-  const drawMaskShape = (
-    ctx: CanvasRenderingContext2D,
-    point: Point,
-    brushType: BrushShape,
-    brushRadius: number,
-    hardness: number,
-    opacity: number,
-    isErasing: boolean
-  ): void => {
-    const { x, y } = point
-    const maskColor = store.maskColor
-
-    if (brushType === BrushShape.Rect && hardness < 1) {
-      const baseColor = isErasing
-        ? `rgba(255, 255, 255, ${opacity})`
-        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
-
-      const brushTexture = getCachedBrushTexture(
-        brushRadius,
-        hardness,
-        baseColor,
-        opacity
-      )
-      ctx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
       return
-    }
 
-    if (hardness === 1) {
-      ctx.fillStyle = isErasing
-        ? `rgba(255, 255, 255, ${opacity})`
-        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
-      drawShapeOnContext(ctx, brushType, x, y, brushRadius)
-      return
-    }
+    const canvasWidth = store.maskCanvas.width
+    const canvasHeight = store.maskCanvas.height
 
-    const maskColorHex = `rgb(${maskColor.r}, ${maskColor.g}, ${maskColor.b})`
-    const gradient = createBrushGradient(
-      ctx,
-      x,
-      y,
-      brushRadius,
-      hardness,
-      maskColorHex,
-      opacity,
-      isErasing
+    // Upload canvas data to GPU
+    const maskImageData = store.maskCtx!.getImageData(
+      0,
+      0,
+      canvasWidth,
+      canvasHeight
+    )
+    premultiplyData(maskImageData.data)
+    device.queue.writeTexture(
+      { texture: maskTexture },
+      maskImageData.data,
+      { bytesPerRow: canvasWidth * 4 },
+      { width: canvasWidth, height: canvasHeight }
+    )
+
+    const rgbImageData = store.rgbCtx.getImageData(
+      0,
+      0,
+      canvasWidth,
+      canvasHeight
+    )
+    premultiplyData(rgbImageData.data)
+    device.queue.writeTexture(
+      { texture: rgbTexture },
+      rgbImageData.data,
+      { bytesPerRow: canvasWidth * 4 },
+      { width: canvasWidth, height: canvasHeight }
     )
-    ctx.fillStyle = gradient
-    drawShapeOnContext(ctx, brushType, x, y, brushRadius)
   }
 
-  const drawShape = (point: Point, overrideOpacity?: number) => {
+  /**
+   * Initializes all GPU resources including textures and the brush renderer.
+   */
+  async function initGPUResources(): Promise<void> {
+    // Initialize TypeGPU
+    await initTypeGPU()
+
+    if (!store.tgpuRoot || !device) {
+      console.warn('TypeGPU not initialized, skipping GPU resource setup')
+      return
+    }
+
+    if (
+      !store.maskCanvas ||
+      !store.rgbCanvas ||
+      !store.maskCtx ||
+      !store.rgbCtx
+    ) {
+      console.warn('Canvas contexts not ready, skipping GPU resource setup')
+      return
+    }
+
+    const canvasWidth = store.maskCanvas!.width
+    const canvasHeight = store.maskCanvas!.height
+
+    try {
+      console.warn(
+        `🎨 Initializing GPU resources for ${canvasWidth}x${canvasHeight} canvas`
+      )
+
+      // Create read/write textures
+      maskTexture = device.createTexture({
+        size: [canvasWidth, canvasHeight],
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.STORAGE_BINDING |
+          GPUTextureUsage.RENDER_ATTACHMENT |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.COPY_SRC
+      })
+
+      rgbTexture = device.createTexture({
+        size: [canvasWidth, canvasHeight],
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.STORAGE_BINDING |
+          GPUTextureUsage.RENDER_ATTACHMENT |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.COPY_SRC
+      })
+
+      // Upload initial data
+      await updateGPUFromCanvas()
+
+      console.warn('✅ GPU resources initialized successfully')
+
+      const preferredFormat = navigator.gpu.getPreferredCanvasFormat()
+      renderer = new GPUBrushRenderer(device!, preferredFormat)
+      console.warn('✅ Brush renderer initialized')
+    } catch (error) {
+      console.error('Failed to initialize GPU resources:', error)
+      // Reset to null on failure
+      maskTexture = null
+      rgbTexture = null
+    }
+  }
+
+  /**
+   * Draws a shape on the appropriate canvas based on the current tool and layer.
+   * @param point - The center point of the shape.
+   * @param overrideOpacity - Optional opacity override.
+   */
+  function drawShape(point: Point, overrideOpacity?: number) {
     const brush = store.brushSettings
     const mask_ctx = store.maskCtx
     const rgb_ctx = store.rgbCtx
@@ -338,204 +442,406 @@ export function useBrushDrawing(initialSettings?: {
       currentTool &&
       (currentTool === Tools.Eraser || currentTool === Tools.PaintPen)
     ) {
-      drawRgbShape(rgb_ctx, point, brushType, brushRadius, hardness, opacity)
+      // Calculate effective size and hardness
+      const effectiveRadius = getEffectiveBrushSize(brushRadius, hardness)
+      const effectiveHardness = getEffectiveHardness(
+        brushRadius,
+        hardness,
+        effectiveRadius
+      )
+
+      drawRgbShape(
+        rgb_ctx,
+        point,
+        brushType,
+        effectiveRadius,
+        effectiveHardness,
+        opacity
+      )
       return
     }
 
+    // Calculate effective size and hardness
+    const effectiveRadius = getEffectiveBrushSize(brushRadius, hardness)
+    const effectiveHardness = getEffectiveHardness(
+      brushRadius,
+      hardness,
+      effectiveRadius
+    )
+
     drawMaskShape(
       mask_ctx,
       point,
       brushType,
-      brushRadius,
-      hardness,
+      effectiveRadius,
+      effectiveHardness,
       opacity,
       isErasing
     )
+
+    updateDirtyRect(point.x, point.y, effectiveRadius)
   }
 
-  const clampSmoothingPrecision = (value: number): number => {
-    return Math.min(Math.max(value, 1), 100)
-  }
+  /**
+   * Draws a shape on the RGB canvas.
+   * @param ctx - The canvas rendering context.
+   * @param point - The center point.
+   * @param brushType - The type of brush (circle/rect).
+   * @param brushRadius - The radius of the brush.
+   * @param hardness - The hardness of the brush.
+   * @param opacity - The opacity of the brush.
+   */
+  function drawRgbShape(
+    ctx: CanvasRenderingContext2D,
+    point: Point,
+    brushType: BrushShape,
+    brushRadius: number,
+    hardness: number,
+    opacity: number
+  ): void {
+    const { x, y } = point
+    const rgbColor = store.rgbColor
 
-  const generateEquidistantPoints = (
-    points: Point[],
-    distance: number
-  ): Point[] => {
-    const result: Point[] = []
-    const cumulativeDistances: number[] = [0]
-
-    for (let i = 1; i < points.length; i++) {
-      const dx = points[i].x - points[i - 1].x
-      const dy = points[i].y - points[i - 1].y
-      const dist = Math.hypot(dx, dy)
-      cumulativeDistances[i] = cumulativeDistances[i - 1] + dist
-    }
-
-    const totalLength = cumulativeDistances[cumulativeDistances.length - 1]
-    const numPoints = Math.floor(totalLength / distance)
-
-    for (let i = 0; i <= numPoints; i++) {
-      const targetDistance = i * distance
-      let idx = 0
-
-      while (
-        idx < cumulativeDistances.length - 1 &&
-        cumulativeDistances[idx + 1] < targetDistance
-      ) {
-        idx++
-      }
-
-      if (idx >= points.length - 1) {
-        result.push(points[points.length - 1])
-        continue
-      }
-
-      const d0 = cumulativeDistances[idx]
-      const d1 = cumulativeDistances[idx + 1]
-      const t = (targetDistance - d0) / (d1 - d0)
-
-      const x = points[idx].x + t * (points[idx + 1].x - points[idx].x)
-      const y = points[idx].y + t * (points[idx + 1].y - points[idx].y)
-
-      result.push({ x, y })
-    }
-
-    return result
-  }
-
-  const drawWithBetterSmoothing = (point: Point): void => {
-    if (!smoothingCordsArray.value) {
-      smoothingCordsArray.value = []
-    }
-
-    const opacityConstant = 1 / (1 + Math.exp(3))
-    const interpolatedOpacity =
-      1 / (1 + Math.exp(-6 * (store.brushSettings.opacity - 0.5))) -
-      opacityConstant
-
-    smoothingCordsArray.value.push(point)
-
-    const POINTS_NR = 5
-    if (smoothingCordsArray.value.length < POINTS_NR) {
+    if (brushType === BrushShape.Rect && hardness < 1) {
+      const rgbaColor = formatRgba(rgbColor, opacity)
+      const brushTexture = getCachedBrushTexture(
+        brushRadius,
+        hardness,
+        rgbaColor,
+        opacity
+      )
+      ctx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
+      updateDirtyRect(x, y, brushRadius)
       return
     }
 
-    let totalLength = 0
-    const points = smoothingCordsArray.value
-    const len = points.length - 1
-
-    let dx, dy
-    for (let i = 0; i < len; i++) {
-      dx = points[i + 1].x - points[i].x
-      dy = points[i + 1].y - points[i].y
-      totalLength += Math.sqrt(dx * dx + dy * dy)
+    if (hardness === 1) {
+      const rgbaColor = formatRgba(rgbColor, opacity)
+      ctx.fillStyle = rgbaColor
+      drawShapeOnContext(ctx, brushType, x, y, brushRadius)
+      updateDirtyRect(x, y, brushRadius)
+      return
     }
 
-    const maxSteps = SMOOTHING_MAX_STEPS
-    const minSteps = SMOOTHING_MIN_STEPS
-
-    const smoothing = clampSmoothingPrecision(
-      store.brushSettings.smoothingPrecision
+    const gradient = createBrushGradient(
+      ctx,
+      x,
+      y,
+      brushRadius,
+      hardness,
+      rgbColor,
+      opacity,
+      false
     )
-    const normalizedSmoothing = (smoothing - 1) / 99
+    ctx.fillStyle = gradient
+    drawShapeOnContext(ctx, brushType, x, y, brushRadius)
+    updateDirtyRect(x, y, brushRadius)
+  }
 
-    const stepNr = Math.round(
-      Math.round(minSteps + (maxSteps - minSteps) * normalizedSmoothing)
-    )
+  /**
+   * Draws a shape on the Mask canvas.
+   * @param ctx - The canvas rendering context.
+   * @param point - The center point.
+   * @param brushType - The type of brush (circle/rect).
+   * @param brushRadius - The radius of the brush.
+   * @param hardness - The hardness of the brush.
+   * @param opacity - The opacity of the brush.
+   * @param isErasing - Whether the operation is erasing.
+   */
+  function drawMaskShape(
+    ctx: CanvasRenderingContext2D,
+    point: Point,
+    brushType: BrushShape,
+    brushRadius: number,
+    hardness: number,
+    opacity: number,
+    isErasing: boolean
+  ): void {
+    const { x, y } = point
+    const maskColor = store.maskColor
 
-    const distanceBetweenPoints = totalLength / stepNr
+    if (brushType === BrushShape.Rect && hardness < 1) {
+      const baseColor = isErasing
+        ? `rgba(255, 255, 255, ${opacity})`
+        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
 
-    let interpolatedPoints = points
-
-    if (stepNr > 0) {
-      interpolatedPoints = generateEquidistantPoints(
-        smoothingCordsArray.value,
-        distanceBetweenPoints
+      const brushTexture = getCachedBrushTexture(
+        brushRadius,
+        hardness,
+        baseColor,
+        opacity
       )
+      ctx.drawImage(brushTexture, x - brushRadius, y - brushRadius)
+      updateDirtyRect(x, y, brushRadius)
+      return
     }
 
-    if (!initialDraw.value) {
-      const spliceIndex = interpolatedPoints.findIndex(
-        (p) =>
-          p.x === smoothingCordsArray.value[2].x &&
-          p.y === smoothingCordsArray.value[2].y
-      )
+    if (hardness === 1) {
+      ctx.fillStyle = isErasing
+        ? `rgba(255, 255, 255, ${opacity})`
+        : `rgba(${maskColor.r}, ${maskColor.g}, ${maskColor.b}, ${opacity})`
+      drawShapeOnContext(ctx, brushType, x, y, brushRadius)
+      updateDirtyRect(x, y, brushRadius)
+      return
+    }
 
-      if (spliceIndex !== -1) {
-        interpolatedPoints = interpolatedPoints.slice(spliceIndex + 1)
+    const maskColorHex = `rgb(${maskColor.r}, ${maskColor.g}, ${maskColor.b})`
+    const gradient = createBrushGradient(
+      ctx,
+      x,
+      y,
+      brushRadius,
+      hardness,
+      maskColorHex,
+      opacity,
+      isErasing
+    )
+    ctx.fillStyle = gradient
+    drawShapeOnContext(ctx, brushType, x, y, brushRadius)
+    updateDirtyRect(x, y, brushRadius)
+  }
+
+  /**
+   * Helper to draw the path of the shape on the context.
+   * @param ctx - The canvas rendering context.
+   * @param brushType - The type of brush.
+   * @param x - Center x.
+   * @param y - Center y.
+   * @param radius - Radius.
+   */
+  function drawShapeOnContext(
+    ctx: CanvasRenderingContext2D,
+    brushType: BrushShape,
+    x: number,
+    y: number,
+    radius: number
+  ): void {
+    ctx.beginPath()
+    if (brushType === BrushShape.Rect) {
+      ctx.rect(x - radius, y - radius, radius * 2, radius * 2)
+    } else {
+      ctx.arc(x, y, radius, 0, Math.PI * 2, false)
+    }
+    ctx.fill()
+  }
+
+  /**
+   * Formats a hex color and alpha into an rgba string.
+   * @param hex - The hex color string.
+   * @param alpha - The alpha value (0-1).
+   * @returns The rgba string.
+   */
+  function formatRgba(hex: string, alpha: number): string {
+    const { r, g, b } = hexToRgb(hex)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+
+  /**
+   * Creates a radial gradient for soft brushes.
+   * @param ctx - The canvas context.
+   * @param x - Center x.
+   * @param y - Center y.
+   * @param radius - Radius.
+   * @param hardness - Hardness (0-1).
+   * @param color - Color string.
+   * @param opacity - Opacity (0-1).
+   * @param isErasing - Whether erasing.
+   * @returns The canvas gradient.
+   */
+  function createBrushGradient(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    radius: number,
+    hardness: number,
+    color: string,
+    opacity: number,
+    isErasing: boolean
+  ): CanvasGradient {
+    if (
+      !Number.isFinite(x) ||
+      !Number.isFinite(y) ||
+      !Number.isFinite(radius)
+    ) {
+      return ctx.createRadialGradient(0, 0, 0, 0, 0, 0)
+    }
+
+    const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
+
+    if (isErasing) {
+      gradient.addColorStop(0, `rgba(255, 255, 255, ${opacity})`)
+      gradient.addColorStop(hardness, `rgba(255, 255, 255, ${opacity})`)
+      gradient.addColorStop(1, `rgba(255, 255, 255, 0)`)
+    } else {
+      const { r, g, b } = parseToRgb(color)
+      gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, ${opacity})`)
+      gradient.addColorStop(hardness, `rgba(${r}, ${g}, ${b}, ${opacity})`)
+      gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`)
+    }
+
+    return gradient
+  }
+
+  /**
+   * Draws a point using the stroke processor for smoothing.
+   * @param point - The point to draw.
+   */
+  async function drawWithBetterSmoothing(point: Point): Promise<void> {
+    if (!strokeProcessor) return
+
+    // Process point to generate equidistant points
+    const newPoints = strokeProcessor.addPoint(point)
+
+    if (newPoints.length === 0) {
+      // Update preview even if no points generated to ensure background visibility
+      if (renderer && initialDraw.value) {
+        gpuRender([], true)
+      }
+      return
+    }
+
+    // Render points on GPU
+    if (renderer) {
+      gpuRender(newPoints, true) // Skip resampling
+    } else {
+      // CPU fallback
+      for (const p of newPoints) {
+        drawShape(p)
       }
     }
 
-    for (const p of interpolatedPoints) {
-      drawShape(p, interpolatedOpacity)
+    initialDraw.value = false
+  }
+
+  /**
+   * Initializes the canvas context for a new shape.
+   * @param compositionOperation - The composition operation to use.
+   */
+  function initShape(compositionOperation: CompositionOperation) {
+    const blendMode = store.maskBlendMode
+    const mask_ctx = store.maskCtx
+    const rgb_ctx = store.rgbCtx
+
+    if (!mask_ctx || !rgb_ctx) {
+      throw new Error('Canvas contexts are required')
     }
 
-    if (!initialDraw.value) {
-      smoothingCordsArray.value = smoothingCordsArray.value.slice(2)
-    } else {
-      initialDraw.value = false
+    mask_ctx.beginPath()
+    rgb_ctx.beginPath()
+
+    if (compositionOperation === CompositionOperation.SourceOver) {
+      mask_ctx.fillStyle = blendMode
+      mask_ctx.globalCompositeOperation = CompositionOperation.SourceOver
+      rgb_ctx.globalCompositeOperation = CompositionOperation.SourceOver
+    } else if (compositionOperation === CompositionOperation.DestinationOut) {
+      mask_ctx.globalCompositeOperation = CompositionOperation.DestinationOut
+      rgb_ctx.globalCompositeOperation = CompositionOperation.DestinationOut
     }
   }
 
-  const drawLine = async (
+  /**
+   * Draws a line between two points.
+   * @param p1 - Start point.
+   * @param p2 - End point.
+   * @param compositionOp - Composition operation.
+   * @param spacing - Spacing between points.
+   */
+  async function drawLine(
     p1: Point,
     p2: Point,
-    compositionOp: CompositionOperation
-  ): Promise<void> => {
-    try {
-      const brush_size = store.brushSettings.size
-      const distance = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2)
-      const steps = Math.ceil(
-        distance / ((brush_size / store.brushSettings.smoothingPrecision) * 4)
-      )
-      const interpolatedOpacity =
-        1 / (1 + Math.exp(-6 * (store.brushSettings.opacity - 0.5))) -
-        1 / (1 + Math.exp(3))
+    compositionOp: CompositionOperation,
+    spacing: number
+  ): Promise<void> {
+    // Generate equidistant points using segment resampling
+    const { points, remainder } = resampleSegment(
+      [p1, p2],
+      spacing,
+      lineRemainder.value
+    )
 
-      initShape(compositionOp)
+    lineRemainder.value = remainder
 
-      for (let i = 0; i <= steps; i++) {
-        const t = i / steps
-        const x = p1.x + (p2.x - p1.x) * t
-        const y = p1.y + (p2.y - p1.y) * t
-        const point = { x, y }
+    // Ensure context state is initialized (sets globalCompositeOperation for isErasing checks)
+    initShape(compositionOp)
 
-        drawShape(point, interpolatedOpacity)
+    if (renderer) {
+      gpuRender(points)
+    } else {
+      // CPU fallback
+      for (const point of points) {
+        drawShape(point, 1) // Opacity handled by brush texture
       }
-    } catch (error) {
-      console.error('[useBrushDrawing] Failed to draw line:', error)
-      throw error
     }
   }
 
-  const startDrawing = async (event: PointerEvent): Promise<void> => {
+  /**
+   * Starts the drawing process.
+   * @param event - The pointer event.
+   */
+  async function startDrawing(event: PointerEvent): Promise<void> {
     isDrawing.value = true
+    resetDirtyRect()
 
     try {
+      // Initialize stroke accumulator
+      if (renderer && store.maskCanvas) {
+        renderer.prepareStroke(store.maskCanvas.width, store.maskCanvas.height)
+      }
+
       let compositionOp: CompositionOperation
       const currentTool = store.currentTool
       const coords = { x: event.offsetX, y: event.offsetY }
       const coords_canvas = coordinateTransform.screenToCanvas(coords)
 
-      await createBrushStrokeCanvas()
-
       if (currentTool === 'eraser' || event.buttons === 2) {
         compositionOp = CompositionOperation.DestinationOut
       } else {
         compositionOp = CompositionOperation.SourceOver
       }
 
+      // Calculate target spacing based on step size percentage
+      const stepPercentage = store.brushSettings.stepSize / 100
+      const targetSpacing = Math.max(
+        1.0,
+        store.brushSettings.size * stepPercentage
+      )
+
       if (event.shiftKey && lineStartPoint.value) {
         isDrawingLine.value = true
-        await drawLine(lineStartPoint.value, coords_canvas, compositionOp)
+        await drawLine(
+          lineStartPoint.value,
+          coords_canvas,
+          compositionOp,
+          targetSpacing
+        )
       } else {
         isDrawingLine.value = false
         initShape(compositionOp)
-        drawShape(coords_canvas)
+        // Reset remainder
+        lineRemainder.value = targetSpacing
       }
 
       lineStartPoint.value = coords_canvas
-      smoothingCordsArray.value = [coords_canvas]
+
+      // Hide main canvas to prevent double rendering
+      if (renderer) {
+        const isRgb = store.activeLayer === 'rgb'
+        if (isRgb && store.rgbCanvas) {
+          store.rgbCanvas.style.opacity = '0'
+          if (previewCanvas) previewCanvas.style.opacity = '1'
+        } else if (!isRgb && store.maskCanvas) {
+          store.maskCanvas.style.opacity = '0'
+          if (previewCanvas)
+            previewCanvas.style.opacity = String(store.maskOpacity)
+        }
+      }
+
+      // Initialize stroke processor
+      strokeProcessor = new StrokeProcessor(targetSpacing)
+
+      // Process first point
+      await drawWithBetterSmoothing(coords_canvas)
+
       smoothingLastDrawTime.value = new Date()
     } catch (error) {
       console.error('[useBrushDrawing] Failed to start drawing:', error)
@@ -545,32 +851,37 @@ export function useBrushDrawing(initialSettings?: {
     }
   }
 
-  const handleDrawing = async (event: PointerEvent): Promise<void> => {
+  /**
+   * Handles the drawing movement.
+   * @param event - The pointer event.
+   */
+  async function handleDrawing(event: PointerEvent): Promise<void> {
     const diff = performance.now() - smoothingLastDrawTime.value.getTime()
     const coords = { x: event.offsetX, y: event.offsetY }
     const coords_canvas = coordinateTransform.screenToCanvas(coords)
     const currentTool = store.currentTool
 
     if (diff > 20 && !isDrawing.value) {
-      requestAnimationFrame(() => {
+      requestAnimationFrame(async () => {
+        if (!isDrawing.value) return // Fix: Prevent race condition
         try {
           initShape(CompositionOperation.SourceOver)
-          drawShape(coords_canvas)
-          smoothingCordsArray.value.push(coords_canvas)
+          await gpuDrawPoint(coords_canvas)
+          // smoothingCordsArray.value.push(coords_canvas) // Removed in favor of StrokeProcessor
         } catch (error) {
           console.error('[useBrushDrawing] Drawing error:', error)
         }
       })
     } else {
-      requestAnimationFrame(() => {
+      requestAnimationFrame(async () => {
+        if (!isDrawing.value) return // Fix: Prevent race condition
         try {
           if (currentTool === 'eraser' || event.buttons === 2) {
             initShape(CompositionOperation.DestinationOut)
           } else {
             initShape(CompositionOperation.SourceOver)
           }
-
-          drawWithBetterSmoothing(coords_canvas)
+          await drawWithBetterSmoothing(coords_canvas)
         } catch (error) {
           console.error('[useBrushDrawing] Drawing error:', error)
         }
@@ -580,19 +891,110 @@ export function useBrushDrawing(initialSettings?: {
     smoothingLastDrawTime.value = new Date()
   }
 
-  const drawEnd = async (event: PointerEvent): Promise<void> => {
+  /**
+   * Ends the drawing process.
+   * @param event - The pointer event.
+   */
+  async function drawEnd(event: PointerEvent): Promise<void> {
     const coords = { x: event.offsetX, y: event.offsetY }
     const coords_canvas = coordinateTransform.screenToCanvas(coords)
 
     if (isDrawing.value) {
       isDrawing.value = false
-      store.canvasHistory.saveState()
+
       lineStartPoint.value = coords_canvas
       initialDraw.value = true
+
+      // Flush remaining points from StrokeProcessor
+      if (strokeProcessor) {
+        const finalPoints = strokeProcessor.endStroke()
+        if (finalPoints.length > 0) {
+          if (renderer) {
+            gpuRender(finalPoints, true)
+          } else {
+            for (const p of finalPoints) {
+              drawShape(p)
+            }
+          }
+        }
+        strokeProcessor = null
+      }
+
+      // Composite the stroke accumulator into the main texture
+      if (renderer && maskTexture && rgbTexture) {
+        const isRgb = store.activeLayer === 'rgb'
+        const targetTex = isRgb ? rgbTexture : maskTexture
+
+        // Use the actual brush opacity for the composite pass
+        const size = store.brushSettings.size
+        const hardness = store.brushSettings.hardness
+        const effectiveSize = getEffectiveBrushSize(size, hardness)
+        const effectiveHardness = getEffectiveHardness(
+          size,
+          hardness,
+          effectiveSize
+        )
+
+        const isErasing =
+          store.currentTool === 'eraser' ||
+          store.maskCtx?.globalCompositeOperation === 'destination-out'
+
+        const brushShape = store.brushSettings.type === BrushShape.Rect ? 1 : 0
+
+        renderer.compositeStroke(targetTex.createView(), {
+          opacity: store.brushSettings.opacity,
+          color: [0, 0, 0], // Color is handled by accumulator, this is just for uniforms if needed
+          hardness: effectiveHardness,
+          screenSize: [store.maskCanvas!.width, store.maskCanvas!.height],
+          brushShape,
+          isErasing
+        })
+      }
+
+      let maskData: ImageData | undefined
+      let rgbData: ImageData | undefined
+
+      if (renderer && maskTexture && rgbTexture) {
+        try {
+          const result = await copyGpuToCanvas()
+          maskData = result.maskData
+          rgbData = result.rgbData
+        } catch (error) {
+          console.warn('GPU readback failed, falling back to CPU:', error)
+        }
+      }
+
+      isSavingHistory.value = true
+      store.canvasHistory.saveState(maskData, rgbData)
+      // Wait for watcher to trigger (if any) before clearing flag
+      await nextTick()
+
+      isSavingHistory.value = false
+
+      // Fix: Clear the preview canvas when drawing ends
+      if (renderer && previewContext) {
+        renderer.clearPreview(previewContext)
+      }
+
+      // Restore main canvas visibility
+      if (store.activeLayer === 'rgb' && store.rgbCanvas) {
+        store.rgbCanvas.style.opacity = '1'
+      } else if (store.activeLayer === 'mask' && store.maskCanvas) {
+        store.maskCanvas.style.opacity = String(store.maskOpacity)
+      }
+
+      // Reset preview canvas opacity to 1 (for hover preview)
+      if (previewCanvas) {
+        previewCanvas.style.opacity = '1'
+      }
     }
   }
 
-  const startBrushAdjustment = async (event: PointerEvent): Promise<void> => {
+  /**
+   * Starts the brush adjustment interaction.
+   * @param event - The pointer event.
+   */
+  async function startBrushAdjustment(event: PointerEvent): Promise<void> {
     event.preventDefault()
 
     const coords = { x: event.offsetX, y: event.offsetY }
@@ -602,7 +1004,11 @@ export function useBrushDrawing(initialSettings?: {
     initialPoint.value = coords_canvas
   }
 
-  const handleBrushAdjustment = async (event: PointerEvent): Promise<void> => {
+  /**
+   * Handles the brush adjustment movement.
+   * @param event - The pointer event.
+   */
+  async function handleBrushAdjustment(event: PointerEvent): Promise<void> {
     if (!initialPoint.value) {
       return
     }
@@ -637,7 +1043,7 @@ export function useBrushDrawing(initialSettings?: {
     const newSize = Math.max(
       1,
       Math.min(
-        100,
+        500,
         store.brushSettings.size +
           (cappedDeltaX / 35) * brushAdjustmentSpeed.value
       )
@@ -656,16 +1062,412 @@ export function useBrushDrawing(initialSettings?: {
     store.setBrushHardness(newHardness)
   }
 
-  const saveBrushSettings = (): void => {
+  /**
+   * Saves the current brush settings to cache.
+   */
+  function saveBrushSettings(): void {
     saveBrushToCache('maskeditor_brush_settings', store.brushSettings)
   }
 
+  /**
+   * Reads back the GPU textures to CPU ImageDatas.
+   * @returns Object containing mask and rgb ImageDatas.
+   */
+  async function copyGpuToCanvas(): Promise<{
+    maskData: ImageData
+    rgbData: ImageData
+  }> {
+    if (
+      !device ||
+      !maskTexture ||
+      !rgbTexture ||
+      !store.maskCanvas ||
+      !store.rgbCanvas ||
+      !store.maskCtx ||
+      !store.rgbCtx ||
+      !renderer
+    )
+      throw new Error('GPU resources not ready')
+
+    const width = store.maskCanvas.width
+    const height = store.maskCanvas.height
+    const bufferSize = width * height * 4
+
+    // 1. Initialize/Resize Buffers if needed
+    if (
+      !readbackStorageMask ||
+      !readbackStorageRgb ||
+      !readbackStagingMask ||
+      !readbackStagingRgb ||
+      currentBufferSize !== bufferSize
+    ) {
+      // Destroy old buffers if they exist
+      readbackStorageMask?.destroy()
+      readbackStorageRgb?.destroy()
+      readbackStagingMask?.destroy()
+      readbackStagingRgb?.destroy()
+
+      // Create Storage Buffers (for compute shader output)
+      readbackStorageMask = device.createBuffer({
+        size: bufferSize,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+      })
+      readbackStorageRgb = device.createBuffer({
+        size: bufferSize,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+      })
+
+      // Create Staging Buffers (for reading back)
+      readbackStagingMask = device.createBuffer({
+        size: bufferSize,
+        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+      })
+      readbackStagingRgb = device.createBuffer({
+        size: bufferSize,
+        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+      })
+
+      currentBufferSize = bufferSize
+    }
+
+    // 2. Run Compute Shaders (Un-premultiply and pack)
+    renderer.prepareReadback(maskTexture, readbackStorageMask)
+    renderer.prepareReadback(rgbTexture, readbackStorageRgb)
+
+    // 3. Copy Storage -> Staging
+    const encoder = device.createCommandEncoder()
+    encoder.copyBufferToBuffer(
+      readbackStorageMask,
+      0,
+      readbackStagingMask,
+      0,
+      bufferSize
+    )
+    encoder.copyBufferToBuffer(
+      readbackStorageRgb,
+      0,
+      readbackStagingRgb,
+      0,
+      bufferSize
+    )
+    device.queue.submit([encoder.finish()])
+
+    // 4. Map Staging Buffers
+    await Promise.all([
+      readbackStagingMask.mapAsync(GPUMapMode.READ),
+      readbackStagingRgb.mapAsync(GPUMapMode.READ)
+    ])
+
+    // 5. Read Data & Update Canvas
+    // We use slice(0) to copy data because unmap() invalidates the array
+    const maskDataArr = new Uint8ClampedArray(
+      readbackStagingMask.getMappedRange().slice(0)
+    )
+    const rgbDataArr = new Uint8ClampedArray(
+      readbackStagingRgb.getMappedRange().slice(0)
+    )
+
+    // Unmap immediately after copying
+    readbackStagingMask.unmap()
+    readbackStagingRgb.unmap()
+
+    const maskImageData = new ImageData(maskDataArr, width, height)
+    const rgbImageData = new ImageData(rgbDataArr, width, height)
+
+    // Calculate Dirty Rect
+    let dx = 0
+    let dy = 0
+    let dw = width
+    let dh = height
+
+    if (
+      dirtyRect.value.minX !== Infinity &&
+      dirtyRect.value.maxX !== -Infinity
+    ) {
+      const r = dirtyRect.value
+      dx = Math.floor(Math.max(0, r.minX))
+      dy = Math.floor(Math.max(0, r.minY))
+      const max_x = Math.ceil(Math.min(width, r.maxX))
+      const max_y = Math.ceil(Math.min(height, r.maxY))
+      dw = max_x - dx
+      dh = max_y - dy
+    }
+
+    // Ensure valid dimensions
+    if (dw > 0 && dh > 0) {
+      store.maskCtx.putImageData(maskImageData, 0, 0, dx, dy, dw, dh)
+      store.rgbCtx.putImageData(rgbImageData, 0, 0, dx, dy, dw, dh)
+    } else {
+      // Fallback to full update if rect is invalid (shouldn't happen if drawn)
+      store.maskCtx.putImageData(maskImageData, 0, 0)
+      store.rgbCtx.putImageData(rgbImageData, 0, 0)
+    }
+
+    return { maskData: maskImageData, rgbData: rgbImageData }
+  }
+
+  /**
+   * Cleans up GPU resources and buffers.
+   */
+  function destroy(): void {
+    renderer?.destroy()
+    if (maskTexture) {
+      maskTexture.destroy()
+      maskTexture = null
+    }
+    if (rgbTexture) {
+      rgbTexture.destroy()
+      rgbTexture = null
+    }
+    // Cleanup Readback Buffers
+    readbackStorageMask?.destroy()
+    readbackStorageRgb?.destroy()
+    readbackStagingMask?.destroy()
+    readbackStagingRgb?.destroy()
+    readbackStorageMask = null
+    readbackStorageRgb = null
+    readbackStagingMask = null
+    readbackStagingRgb = null
+    currentBufferSize = 0
+
+    if (store.tgpuRoot) {
+      store.tgpuRoot.destroy()
+      store.tgpuRoot = null
+    }
+    device = null
+  }
+
+  /**
+   * Draws a single point using the GPU renderer.
+   * @param point - The point to draw.
+   * @param opacity - The opacity of the point.
+   */
+  async function gpuDrawPoint(point: Point, opacity: number = 1) {
+    if (renderer) {
+      const width = store.maskCanvas!.width
+      const height = store.maskCanvas!.height
+      const strokePoints = [{ x: point.x, y: point.y, pressure: opacity }]
+
+      const size = store.brushSettings.size
+      const hardness = store.brushSettings.hardness
+      const effectiveSize = getEffectiveBrushSize(size, hardness)
+      const effectiveHardness = getEffectiveHardness(
+        size,
+        hardness,
+        effectiveSize
+      )
+
+      const brushShape = store.brushSettings.type === BrushShape.Rect ? 1 : 0
+
+      // Use accumulator with fixed high opacity to build shape
+      renderer.renderStrokeToAccumulator(strokePoints, {
+        size: effectiveSize,
+        opacity: 0.5, // Fixed flow for smooth accumulation
+        hardness: effectiveHardness,
+        color: [1, 1, 1],
+        width,
+        height,
+        brushShape
+      })
+
+      // Update preview with correct settings
+      if (maskTexture && previewContext) {
+        const isRgb = store.activeLayer === 'rgb'
+        let color: [number, number, number] = [1, 1, 1]
+        if (isRgb) {
+          const c = parseToRgb(store.rgbColor)
+          color = [c.r / 255, c.g / 255, c.b / 255]
+        } else {
+          const c = store.maskColor as { r: number; g: number; b: number }
+          color = [c.r / 255, c.g / 255, c.b / 255]
+        }
+
+        const isErasing =
+          store.currentTool === 'eraser' ||
+          store.maskCtx?.globalCompositeOperation === 'destination-out'
+
+        renderer.blitToCanvas(
+          previewContext,
+          {
+            opacity: store.brushSettings.opacity,
+            color,
+            hardness: effectiveHardness,
+            screenSize: [width, height],
+            brushShape,
+            isErasing
+          },
+          undefined // Do not draw background texture for preview to avoid double rendering
+        )
+      }
+    } else {
+      drawShape(point, opacity)
+    }
+  }
+
+  /**
+   * Initializes the preview canvas context for WebGPU.
+   * @param canvas - The canvas element.
+   */
+  function initPreviewCanvas(canvas: HTMLCanvasElement) {
+    if (!device) return
+
+    const ctx = canvas.getContext('webgpu')
+    if (!ctx) return
+
+    ctx.configure({
+      device,
+      format: navigator.gpu.getPreferredCanvasFormat(),
+      alphaMode: 'premultiplied'
+    })
+    previewContext = ctx
+    previewCanvas = canvas
+    console.warn('✅ Preview Canvas Initialized')
+  }
+
+  /**
+   * Renders a set of points using the GPU.
+   * @param points - The points to render.
+   * @param skipResampling - Whether to skip resampling (if points are already spaced).
+   */
+  function gpuRender(points: Point[], skipResampling: boolean = false) {
+    if (!renderer || !maskTexture || !rgbTexture) return
+
+    const isRgb = store.activeLayer === 'rgb'
+
+    // 1. Get Correct Color
+    let color: [number, number, number] = [1, 1, 1]
+    if (isRgb) {
+      const c = parseToRgb(store.rgbColor)
+      color = [c.r / 255, c.g / 255, c.b / 255]
+    } else {
+      // Mask color - properly typed
+      const c = store.maskColor as { r: number; g: number; b: number }
+      color = [c.r / 255, c.g / 255, c.b / 255]
+    }
+
+    // 2. Prepare stroke points
+    let strokePoints: { x: number; y: number; pressure: number }[] = []
+
+    if (skipResampling) {
+      // Points are already properly spaced from Catmull-Rom spline interpolation
+      strokePoints = points.map((p) => ({ x: p.x, y: p.y, pressure: 1.0 }))
+    } else {
+      // Legacy resampling for shift+click and other cases
+      for (let i = 0; i < points.length - 1; i++) {
+        const p1 = points[i]
+        const p2 = points[i + 1]
+        const dist = Math.hypot(p2.x - p1.x, p2.y - p1.y)
+
+        // Calculate target spacing based on stepSize
+        const stepPercentage = store.brushSettings.stepSize / 100
+        const stepSize = Math.max(
+          1.0,
+          store.brushSettings.size * stepPercentage
+        )
+        const steps = Math.max(1, Math.ceil(dist / stepSize))
+
+        for (let step = 0; step <= steps; step++) {
+          const t = step / steps
+          const pressure = 1.0
+
+          const x = p1.x + (p2.x - p1.x) * t
+          const y = p1.y + (p2.y - p1.y) * t
+
+          strokePoints.push({ x, y, pressure })
+        }
+      }
+    }
+
+    // Render to Accumulator (SourceOver blending)
+    // Use fixed opacity (0.5) to build up the shape smoothly without creases.
+    // The final opacity is applied in the composite pass.
+    const size = store.brushSettings.size
+    const hardness = store.brushSettings.hardness
+    const effectiveSize = getEffectiveBrushSize(size, hardness)
+    const effectiveHardness = getEffectiveHardness(
+      size,
+      hardness,
+      effectiveSize
+    )
+
+    const brushShape = store.brushSettings.type === BrushShape.Rect ? 1 : 0
+
+    // Render to Accumulator (SourceOver blending)
+    // Use fixed opacity (0.5) to build up the shape smoothly without creases.
+    // The final opacity is applied in the composite pass.
+    renderer.renderStrokeToAccumulator(strokePoints, {
+      size: effectiveSize,
+      opacity: 0.5,
+      hardness: effectiveHardness,
+      color: color,
+      width: store.maskCanvas!.width,
+      height: store.maskCanvas!.height,
+      brushShape
+    })
+
+    // Update Dirty Rect
+    for (const p of strokePoints) {
+      updateDirtyRect(p.x, p.y, effectiveSize)
+    }
+
+    // 3. Blit to Preview with correct settings
+    if (previewContext) {
+      const isErasing =
+        store.currentTool === 'eraser' ||
+        store.maskCtx?.globalCompositeOperation === 'destination-out'
+
+      const targetTex = isRgb ? rgbTexture : maskTexture
+      renderer.blitToCanvas(
+        previewContext,
+        {
+          opacity: store.brushSettings.opacity,
+          color,
+          hardness: effectiveHardness,
+          screenSize: [store.maskCanvas!.width, store.maskCanvas!.height],
+          brushShape,
+          isErasing
+        },
+        targetTex ?? undefined
+      )
+    }
+  }
+
+  /**
+   * Clears the GPU textures.
+   */
+  function clearGPU() {
+    if (!device || !maskTexture || !rgbTexture || !store.maskCanvas) return
+
+    const width = store.maskCanvas.width
+    const height = store.maskCanvas.height
+
+    // Clear Mask Texture
+    device.queue.writeTexture(
+      { texture: maskTexture },
+      new Uint8Array(width * height * 4), // Zeros
+      { bytesPerRow: width * 4 },
+      { width, height }
+    )
+
+    // Clear RGB Texture
+    device.queue.writeTexture(
+      { texture: rgbTexture },
+      new Uint8Array(width * height * 4), // Zeros
+      { bytesPerRow: width * 4 },
+      { width, height }
+    )
+  }
+
   return {
     startDrawing,
     handleDrawing,
     drawEnd,
     startBrushAdjustment,
     handleBrushAdjustment,
-    saveBrushSettings
+    saveBrushSettings,
+    destroy,
+    initGPUResources,
+    initPreviewCanvas,
+    clearGPU // Export this
   }
 }
diff --git a/src/composables/maskeditor/useCanvasHistory.ts b/src/composables/maskeditor/useCanvasHistory.ts
index fcb8185b6..122e888c7 100644
--- a/src/composables/maskeditor/useCanvasHistory.ts
+++ b/src/composables/maskeditor/useCanvasHistory.ts
@@ -4,7 +4,9 @@ import { useMaskEditorStore } from '@/stores/maskEditorStore'
 export function useCanvasHistory(maxStates = 20) {
   const store = useMaskEditorStore()
 
-  const states = ref<{ mask: ImageData; rgb: ImageData }[]>([])
+  const states = ref<
+    { mask: ImageData | ImageBitmap; rgb: ImageData | ImageBitmap }[]
+  >([])
   const currentStateIndex = ref(-1)
   const initialized = ref(false)
 
@@ -53,7 +55,10 @@ export function useCanvasHistory(maxStates = 20) {
     initialized.value = true
   }
 
-  const saveState = () => {
+  const saveState = (
+    providedMaskData?: ImageData | ImageBitmap,
+    providedRgbData?: ImageData | ImageBitmap
+  ) => {
     const maskCtx = store.maskCtx
     const rgbCtx = store.rgbCtx
     const maskCanvas = store.maskCanvas
@@ -68,23 +73,32 @@ export function useCanvasHistory(maxStates = 20) {
 
     states.value = states.value.slice(0, currentStateIndex.value + 1)
 
-    const maskState = maskCtx.getImageData(
-      0,
-      0,
-      maskCanvas.width,
-      maskCanvas.height
-    )
-    const rgbState = rgbCtx.getImageData(
-      0,
-      0,
-      rgbCanvas.width,
-      rgbCanvas.height
-    )
+    let maskState: ImageData | ImageBitmap
+    let rgbState: ImageData | ImageBitmap
+
+    if (providedMaskData && providedRgbData) {
+      maskState = providedMaskData
+      rgbState = providedRgbData
+    } else {
+      maskState = maskCtx.getImageData(
+        0,
+        0,
+        maskCanvas.width,
+        maskCanvas.height
+      )
+      rgbState = rgbCtx.getImageData(0, 0, rgbCanvas.width, rgbCanvas.height)
+    }
+
     states.value.push({ mask: maskState, rgb: rgbState })
     currentStateIndex.value++
 
     if (states.value.length > maxStates) {
-      states.value.shift()
+      const removed = states.value.shift()
+      // Cleanup ImageBitmaps to avoid memory leaks
+      if (removed) {
+        if (removed.mask instanceof ImageBitmap) removed.mask.close()
+        if (removed.rgb instanceof ImageBitmap) removed.rgb.close()
+      }
       currentStateIndex.value--
     }
   }
@@ -109,16 +123,35 @@ export function useCanvasHistory(maxStates = 20) {
     restoreState(states.value[currentStateIndex.value])
   }
 
-  const restoreState = (state: { mask: ImageData; rgb: ImageData }) => {
+  const restoreState = (state: {
+    mask: ImageData | ImageBitmap
+    rgb: ImageData | ImageBitmap
+  }) => {
     const maskCtx = store.maskCtx
     const rgbCtx = store.rgbCtx
     if (!maskCtx || !rgbCtx) return
 
-    maskCtx.putImageData(state.mask, 0, 0)
-    rgbCtx.putImageData(state.rgb, 0, 0)
+    if (state.mask instanceof ImageBitmap) {
+      maskCtx.clearRect(0, 0, state.mask.width, state.mask.height)
+      maskCtx.drawImage(state.mask, 0, 0)
+    } else {
+      maskCtx.putImageData(state.mask, 0, 0)
+    }
+
+    if (state.rgb instanceof ImageBitmap) {
+      rgbCtx.clearRect(0, 0, state.rgb.width, state.rgb.height)
+      rgbCtx.drawImage(state.rgb, 0, 0)
+    } else {
+      rgbCtx.putImageData(state.rgb, 0, 0)
+    }
   }
 
   const clearStates = () => {
+    // Cleanup bitmaps
+    states.value.forEach((state) => {
+      if (state.mask instanceof ImageBitmap) state.mask.close()
+      if (state.rgb instanceof ImageBitmap) state.rgb.close()
+    })
     states.value = []
     currentStateIndex.value = -1
     initialized.value = false
@@ -127,6 +160,7 @@ export function useCanvasHistory(maxStates = 20) {
   return {
     canUndo,
     canRedo,
+    currentStateIndex,
     saveInitialState,
     saveState,
     undo,
diff --git a/src/composables/maskeditor/useMaskEditorLoader.ts b/src/composables/maskeditor/useMaskEditorLoader.ts
index d87795d16..01aaaf0e3 100644
--- a/src/composables/maskeditor/useMaskEditorLoader.ts
+++ b/src/composables/maskeditor/useMaskEditorLoader.ts
@@ -80,21 +80,64 @@ export function useMaskEditorLoader() {
     try {
       validateNode(node)
 
-      const nodeImageUrl = getNodeImageUrl(node)
+      let nodeImageUrl = getNodeImageUrl(node)
 
-      const nodeImageRef = parseImageRef(nodeImageUrl)
+      let nodeImageRef = parseImageRef(nodeImageUrl)
 
       let widgetFilename: string | undefined
       if (node.widgets) {
         const imageWidget = node.widgets.find((w) => w.name === 'image')
-        if (
-          imageWidget &&
-          typeof imageWidget.value === 'object' &&
-          imageWidget.value &&
-          'filename' in imageWidget.value &&
-          typeof imageWidget.value.filename === 'string'
-        ) {
-          widgetFilename = imageWidget.value.filename
+        if (imageWidget) {
+          if (typeof imageWidget.value === 'string') {
+            widgetFilename = imageWidget.value
+          } else if (
+            typeof imageWidget.value === 'object' &&
+            imageWidget.value &&
+            'filename' in imageWidget.value &&
+            typeof imageWidget.value.filename === 'string'
+          ) {
+            widgetFilename = imageWidget.value.filename
+          }
+        }
+      }
+
+      // If we have a widget filename, we should prioritize it over the node image
+      // because the node image might be stale (e.g. from a previous save)
+      // while the widget value reflects the current selection.
+      if (widgetFilename) {
+        try {
+          // Parse the widget value which might be in format "subfolder/filename [type]" or just "filename"
+          let filename = widgetFilename
+          let subfolder: string | undefined = undefined
+          let type: string | undefined = 'input' // Default to input for widget values
+
+          // Check for type in brackets at the end
+          const typeMatch = filename.match(/ \[([^\]]+)\]$/)
+          if (typeMatch) {
+            type = typeMatch[1]
+            filename = filename.substring(
+              0,
+              filename.length - typeMatch[0].length
+            )
+          }
+
+          // Check for subfolder (forward slash separator)
+          const lastSlashIndex = filename.lastIndexOf('/')
+          if (lastSlashIndex !== -1) {
+            subfolder = filename.substring(0, lastSlashIndex)
+            filename = filename.substring(lastSlashIndex + 1)
+          }
+
+          nodeImageRef = {
+            filename,
+            type,
+            subfolder
+          }
+
+          // We also need to update nodeImageUrl to match this new ref so subsequent logic works
+          nodeImageUrl = mkFileUrl({ ref: nodeImageRef })
+        } catch (e) {
+          console.warn('Failed to parse widget filename as ref', e)
         }
       }
 
diff --git a/src/extensions/core/maskeditor/types.ts b/src/extensions/core/maskeditor/types.ts
index 78f1d4dc5..d5b1b5c6c 100644
--- a/src/extensions/core/maskeditor/types.ts
+++ b/src/extensions/core/maskeditor/types.ts
@@ -61,5 +61,5 @@ export interface Brush {
   size: number
   opacity: number
   hardness: number
-  smoothingPrecision: number
+  stepSize: number
 }
diff --git a/src/stores/maskEditorStore.ts b/src/stores/maskEditorStore.ts
index e6546ee96..b52edf7be 100644
--- a/src/stores/maskEditorStore.ts
+++ b/src/stores/maskEditorStore.ts
@@ -22,7 +22,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     size: 10,
     opacity: 0.7,
     hardness: 1,
-    smoothingPrecision: 10
+    stepSize: 10
   })
 
   const maskBlendMode = ref<MaskBlendMode>(MaskBlendMode.Black)
@@ -50,6 +50,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
   const panOffset = ref<Offset>({ x: 0, y: 0 })
   const cursorPoint = ref<Point>({ x: 0, y: 0 })
   const resetZoomTrigger = ref<number>(0)
+  const clearTrigger = ref<number>(0)
 
   const maskCanvas = ref<HTMLCanvasElement | null>(null)
   const maskCtx = ref<CanvasRenderingContext2D | null>(null)
@@ -70,6 +71,8 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
 
   const canvasHistory = useCanvasHistory(20)
 
+  const tgpuRoot = ref<any>(null)
+
   watch(maskCanvas, (canvas) => {
     if (canvas) {
       maskCtx.value = canvas.getContext('2d', { willReadFrequently: true })
@@ -110,7 +113,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
   })
 
   function setBrushSize(size: number): void {
-    brushSettings.value.size = _.clamp(size, 1, 100)
+    brushSettings.value.size = _.clamp(size, 1, 500)
   }
 
   function setBrushOpacity(opacity: number): void {
@@ -121,8 +124,8 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     brushSettings.value.hardness = _.clamp(hardness, 0, 1)
   }
 
-  function setBrushSmoothingPrecision(precision: number): void {
-    brushSettings.value.smoothingPrecision = _.clamp(precision, 1, 100)
+  function setBrushStepSize(step: number): void {
+    brushSettings.value.stepSize = _.clamp(step, 1, 100)
   }
 
   function resetBrushToDefault(): void {
@@ -130,7 +133,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     brushSettings.value.size = 20
     brushSettings.value.opacity = 1
     brushSettings.value.hardness = 1
-    brushSettings.value.smoothingPrecision = 60
+    brushSettings.value.stepSize = 5
   }
 
   function setPaintBucketTolerance(tolerance: number): void {
@@ -169,6 +172,10 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     resetZoomTrigger.value++
   }
 
+  function triggerClear(): void {
+    clearTrigger.value++
+  }
+
   function setMaskOpacity(opacity: number): void {
     maskOpacity.value = _.clamp(opacity, 0, 1)
   }
@@ -179,7 +186,7 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
       size: 10,
       opacity: 0.7,
       hardness: 1,
-      smoothingPrecision: 10
+      stepSize: 5
     }
     maskBlendMode.value = MaskBlendMode.Black
     activeLayer.value = 'mask'
@@ -243,10 +250,12 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
 
     canvasHistory,
 
+    tgpuRoot,
+
     setBrushSize,
     setBrushOpacity,
     setBrushHardness,
-    setBrushSmoothingPrecision,
+    setBrushStepSize,
     resetBrushToDefault,
     setPaintBucketTolerance,
     setFillOpacity,
@@ -257,6 +266,8 @@ export const useMaskEditorStore = defineStore('maskEditor', () => {
     setPanOffset,
     setCursorPoint,
     resetZoom,
+    triggerClear,
+    clearTrigger,
     setMaskOpacity,
     resetState
   }
diff --git a/tests-ui/tests/composables/maskeditor/useCanvasHistory.test.ts b/tests-ui/tests/composables/maskeditor/useCanvasHistory.test.ts
index c70546f82..0bff43669 100644
--- a/tests-ui/tests/composables/maskeditor/useCanvasHistory.test.ts
+++ b/tests-ui/tests/composables/maskeditor/useCanvasHistory.test.ts
@@ -18,6 +18,19 @@ vi.mock('@/stores/maskEditorStore', () => ({
   useMaskEditorStore: vi.fn(() => mockStore)
 }))
 
+// Mock ImageBitmap for test environment
+if (typeof globalThis.ImageBitmap === 'undefined') {
+  globalThis.ImageBitmap = class ImageBitmap {
+    width: number
+    height: number
+    constructor(width = 100, height = 100) {
+      this.width = width
+      this.height = height
+    }
+    close() {}
+  } as any
+}
+
 describe('useCanvasHistory', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -42,12 +55,16 @@ describe('useCanvasHistory', () => {
 
     mockMaskCtx = {
       getImageData: vi.fn(() => createMockImageData()),
-      putImageData: vi.fn()
+      putImageData: vi.fn(),
+      clearRect: vi.fn(),
+      drawImage: vi.fn()
     }
 
     mockRgbCtx = {
       getImageData: vi.fn(() => createMockImageData()),
-      putImageData: vi.fn()
+      putImageData: vi.fn(),
+      clearRect: vi.fn(),
+      drawImage: vi.fn()
     }
 
     mockMaskCanvas = {
diff --git a/tsconfig.json b/tsconfig.json
index 6bb37354c..e490ca672 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -45,7 +45,8 @@
       "./node_modules"
     ],
     "types": [
-      "vitest/globals"
+      "vitest/globals",
+      "@webgpu/types"
     ],
     "outDir": "./dist",
     "rootDir": "./"
diff --git a/vite.config.mts b/vite.config.mts
index 67db74650..1d97bcf53 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -10,6 +10,7 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 import IconsResolver from 'unplugin-icons/resolver'
 import Icons from 'unplugin-icons/vite'
 import Components from 'unplugin-vue-components/vite'
+import typegpuPlugin from 'unplugin-typegpu/vite'
 import { defineConfig } from 'vite'
 import type { ProxyOptions, UserConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
@@ -231,6 +232,7 @@ export default defineConfig({
       ? [vueDevTools(), vue(), createHtmlPlugin({})]
       : [vue()]),
     tailwindcss(),
+    typegpuPlugin({}),
     comfyAPIPlugin(IS_DEV),
     // Twitter/Open Graph meta tags plugin (cloud distribution only)
     {