diff --git a/src/assets/images/backgrounds/lake.webp b/src/assets/images/backgrounds/lake.webp
new file mode 100644
index 00000000..f9ca2397
Binary files /dev/null and b/src/assets/images/backgrounds/lake.webp differ
diff --git a/src/assets/images/generic/hyde.jpg b/src/assets/images/generic/hyde.jpg
deleted file mode 100644
index 5d64a36c..00000000
Binary files a/src/assets/images/generic/hyde.jpg and /dev/null differ
diff --git a/src/assets/images/generic/hyde.webp b/src/assets/images/generic/hyde.webp
new file mode 100644
index 00000000..dbcdd44b
Binary files /dev/null and b/src/assets/images/generic/hyde.webp differ
diff --git a/src/components/CanvasEditor/CanvasEditorTools.vue b/src/components/CanvasEditor/CanvasEditorTools.vue
index 8f39b75d..3f06dd72 100644
--- a/src/components/CanvasEditor/CanvasEditorTools.vue
+++ b/src/components/CanvasEditor/CanvasEditorTools.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Button } from '@/components/ui/button'
-import { ColorPicker } from '@/components/ui/color-picker'
-import BrushSize from './BrushSize.vue'
-import { Brush, Eraser, PaintBucket, Undo2, Redo2, Trash2, Download } from 'lucide-vue-next'
+import { DrawingToolbar } from '@/components/DrawingToolbar'
+import type { DrawingTool as CanvasDrawingTool } from '@/components/DrawingToolbar'
+import { Undo2, Redo2, Trash2, Download } from 'lucide-vue-next'
 import type { DrawingTool } from '@webgamekit/canvas-editor'
 import type { CanvasEditorToolButton } from './types'
 
@@ -46,6 +46,10 @@ const emit = defineEmits<{
   clear: []
 }>()
 
+const toolbarTools = computed(() =>
+  (['brush', 'eraser', 'fill', 'color', 'size'] as const).filter((t) => show.value.has(t))
+)
+
 const download = (): void => {
   const snapshot = props.getSnapshot()
   const dataUrl = (JSON.parse(snapshot) as { front: string }).front
@@ -59,46 +63,14 @@ const download = (): void => {
 
 <template>
   <div class="canvas-editor-tools">
-    <Button
-      v-if="show.has('brush')"
-      :variant="tool === 'brush' ? 'default' : 'outline'"
-      size="icon"
-      title="Brush"
-      @click="emit('update:tool', 'brush')"
-    >
-      <Brush class="canvas-editor-tools__icon" />
-    </Button>
-    <Button
-      v-if="show.has('eraser')"
-      :variant="tool === 'eraser' ? 'default' : 'outline'"
-      size="icon"
-      title="Eraser"
-      @click="emit('update:tool', 'eraser')"
-    >
-      <Eraser class="canvas-editor-tools__icon" />
-    </Button>
-    <Button
-      v-if="show.has('fill')"
-      :variant="tool === 'fill' ? 'default' : 'outline'"
-      size="icon"
-      title="Fill"
-      @click="emit('update:tool', 'fill')"
-    >
-      <PaintBucket class="canvas-editor-tools__icon" />
-    </Button>
-    <ColorPicker
-      v-if="show.has('color')"
-      :model-value="color"
-      :hide-value="hideColorValue"
-      title="Color"
-      @update:model-value="emit('update:color', $event)"
-    />
-    <BrushSize
-      v-if="show.has('size')"
-      :model-value="size"
-      :min="1"
-      :max="80"
-      @update:model-value="emit('update:size', $event)"
+    <DrawingToolbar
+      :tool="tool as CanvasDrawingTool"
+      :color="color"
+      :size="size"
+      :visible-tools="toolbarTools"
+      @update:tool="emit('update:tool', $event as DrawingTool)"
+      @update:color="emit('update:color', $event)"
+      @update:size="emit('update:size', $event)"
     />
     <Button
       v-if="show.has('undo')"
diff --git a/src/components/DrawingToolbar/DrawingToolbar.vue b/src/components/DrawingToolbar/DrawingToolbar.vue
new file mode 100644
index 00000000..c3127961
--- /dev/null
+++ b/src/components/DrawingToolbar/DrawingToolbar.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Button } from '@/components/ui/button'
+import { ColorPicker } from '@/components/ui/color-picker'
+import BrushSize from '@/components/CanvasEditor/BrushSize.vue'
+import { Brush, Eraser, PaintBucket, RotateCw, Undo2, Redo2 } from 'lucide-vue-next'
+
+export type DrawingTool = 'brush' | 'eraser' | 'fill' | 'rotate'
+export type DrawingToolbarButton = DrawingTool | 'color' | 'size' | 'undo' | 'redo'
+
+const props = withDefaults(
+  defineProps<{
+    tool: DrawingTool
+    color: string
+    size: number
+    canUndo?: boolean
+    canRedo?: boolean
+    visibleTools?: readonly DrawingToolbarButton[]
+  }>(),
+  {
+    canUndo: false,
+    canRedo: false,
+    visibleTools: () => ['brush', 'eraser', 'fill', 'color', 'size']
+  }
+)
+
+const emit = defineEmits<{
+  'update:tool': [value: DrawingTool]
+  'update:color': [value: string]
+  'update:size': [value: number]
+  undo: []
+  redo: []
+}>()
+
+const show = computed(() => new Set(props.visibleTools))
+</script>
+
+<template>
+  <div class="drawing-toolbar">
+    <Button
+      v-if="show.has('brush')"
+      :variant="tool === 'brush' ? 'default' : 'outline'"
+      size="icon"
+      title="Brush"
+      @click="emit('update:tool', 'brush')"
+    >
+      <Brush class="drawing-toolbar__icon" />
+    </Button>
+    <Button
+      v-if="show.has('eraser')"
+      :variant="tool === 'eraser' ? 'default' : 'outline'"
+      size="icon"
+      title="Eraser"
+      @click="emit('update:tool', 'eraser')"
+    >
+      <Eraser class="drawing-toolbar__icon" />
+    </Button>
+    <Button
+      v-if="show.has('fill')"
+      :variant="tool === 'fill' ? 'default' : 'outline'"
+      size="icon"
+      title="Fill"
+      @click="emit('update:tool', 'fill')"
+    >
+      <PaintBucket class="drawing-toolbar__icon" />
+    </Button>
+    <Button
+      v-if="show.has('rotate')"
+      :variant="tool === 'rotate' ? 'default' : 'outline'"
+      size="icon"
+      title="Rotate sphere"
+      @click="emit('update:tool', 'rotate')"
+    >
+      <RotateCw class="drawing-toolbar__icon" />
+    </Button>
+    <ColorPicker
+      v-if="show.has('color')"
+      :model-value="color"
+      :hide-value="true"
+      title="Color"
+      @update:model-value="emit('update:color', $event)"
+    />
+    <BrushSize
+      v-if="show.has('size')"
+      :model-value="size"
+      :min="1"
+      :max="80"
+      @update:model-value="emit('update:size', $event)"
+    />
+    <Button
+      v-if="show.has('undo')"
+      variant="outline"
+      size="icon"
+      :disabled="!canUndo"
+      title="Undo"
+      @click="emit('undo')"
+    >
+      <Undo2 class="drawing-toolbar__icon" />
+    </Button>
+    <Button
+      v-if="show.has('redo')"
+      variant="outline"
+      size="icon"
+      :disabled="!canRedo"
+      title="Redo"
+      @click="emit('redo')"
+    >
+      <Redo2 class="drawing-toolbar__icon" />
+    </Button>
+  </div>
+</template>
+
+<style scoped>
+.drawing-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+  align-items: center;
+}
+
+.drawing-toolbar__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+</style>
diff --git a/src/components/DrawingToolbar/index.ts b/src/components/DrawingToolbar/index.ts
new file mode 100644
index 00000000..027644d0
--- /dev/null
+++ b/src/components/DrawingToolbar/index.ts
@@ -0,0 +1,2 @@
+export { default as DrawingToolbar } from './DrawingToolbar.vue'
+export type { DrawingTool, DrawingToolbarButton } from './DrawingToolbar.vue'
diff --git a/src/components/panels/ConfigControls.vue b/src/components/panels/ConfigControls.vue
index 2540e98b..576b6c07 100644
--- a/src/components/panels/ConfigControls.vue
+++ b/src/components/panels/ConfigControls.vue
@@ -27,7 +27,7 @@ const props = defineProps<{
 }>()
 
 const isControlSchema = (object: any): object is ControlSchema => {
-  if (typeof object !== 'object' || object === null) return false
+  if (typeof object !== 'object' || object === null || Array.isArray(object)) return false
   const keys = Object.keys(object)
   const controlKeys = [
     'min',
@@ -83,6 +83,7 @@ const groups = computed(() => {
   const controls: { key: string; path: string; schema: ControlSchema }[] = []
 
   Object.entries(props.schema).forEach(([key, value]) => {
+    if (key.startsWith('__')) return
     if (isControlSchema(value)) {
       controls.push({ key, path: getFullPath(key), schema: value })
     } else {
@@ -93,8 +94,11 @@ const groups = computed(() => {
   return { groups: result, controls }
 })
 
-// All group keys for default-open accordion
-const defaultOpenGroups = computed(() => groups.value.groups.map((g) => g.key))
+const defaultOpenGroups = computed(() => {
+  const meta = (props.schema as Record<string, unknown>)['__defaultOpenGroups']
+  if (!props.basePath && Array.isArray(meta)) return meta as string[]
+  return groups.value.groups.map((g) => g.key)
+})
 
 const handleSliderUpdate = (path: string, value: number[]) => {
   props.onUpdate(path, value[0])
@@ -357,7 +361,6 @@ const handleButtonSelectorUpdate = (path: string, value: string) => {
 
 <style scoped>
 .config-controls {
-  overflow-x: hidden;
   padding-bottom: 0.25rem;
 }
 
diff --git a/src/components/panels/PanelContainer.vue b/src/components/panels/PanelContainer.vue
index 2b4af5b9..1b33b172 100644
--- a/src/components/panels/PanelContainer.vue
+++ b/src/components/panels/PanelContainer.vue
@@ -59,11 +59,14 @@ defineProps<{
   align-items: flex-start;
   z-index: calc(var(--z-overlay) + 1);
   pointer-events: none;
-  overflow-y: auto;
 
   > * {
     pointer-events: auto;
   }
+
+  @media (max-width: 600px) {
+    overflow-y: auto;
+  }
 }
 
 .panel-container--right {
@@ -81,6 +84,7 @@ defineProps<{
   background-color: var(--color-background);
   padding: var(--spacing-2);
   overflow-x: hidden;
+  overflow-y: auto;
   max-height: 100%;
   display: flex;
   flex-direction: column;
diff --git a/src/config/viewsMeta.json b/src/config/viewsMeta.json
index 7b07279a..d356802a 100644
--- a/src/config/viewsMeta.json
+++ b/src/config/viewsMeta.json
@@ -11,29 +11,45 @@
   "Continuous World": {
     "description": "Procedurally generated infinite terrain with real-time chunk streaming."
   },
-  "Draw Path": { "description": "Interactive path drawing tool with smooth curve generation." },
-  "Earth Gazer": { "description": "Realistic 3D Earth globe with atmosphere and cloud layers." },
-  "Earth View": { "description": "3D Earth view with satellite imagery and orbit controls." },
+  "Draw Path": {
+    "description": "Interactive path drawing tool with smooth curve generation."
+  },
+  "Earth Gazer": {
+    "description": "Realistic 3D Earth globe with atmosphere and cloud layers."
+  },
+  "Earth View": {
+    "description": "3D Earth view with satellite imagery and orbit controls."
+  },
   "Materials List": {
     "description": "Interactive showcase of all Three.js PBR material types with live property controls."
   },
   "Model Animation": {
     "description": "Load and preview animated 3D models with playback controls."
   },
-  "Moon Two": { "description": "3D Moon surface rendering with displacement mapping." },
-  "Moon View": { "description": "Detailed 3D Moon view with realistic surface shading." },
+  "Moon Two": {
+    "description": "3D Moon surface rendering with displacement mapping."
+  },
+  "Moon View": {
+    "description": "Detailed 3D Moon view with realistic surface shading."
+  },
   "Multiplayer P 2 P": {
     "description": "Peer-to-peer multiplayer demo using WebRTC data channels."
   },
   "Pathfinder Threejs": {
     "description": "3D pathfinding visualisation with A* algorithm on a Three.js grid."
   },
-  "Physic Ball": { "description": "Physics simulation with bouncing balls using Rapier.js." },
-  "Physic Basic": { "description": "Basic rigid body physics demo with Rapier.js and Three.js." },
+  "Physic Ball": {
+    "description": "Physics simulation with bouncing balls using Rapier.js."
+  },
+  "Physic Basic": {
+    "description": "Basic rigid body physics demo with Rapier.js and Three.js."
+  },
   "Physic Examples": {
     "description": "Collection of physics interaction examples: joints, colliders, forces."
   },
-  "Physic Fluid": { "description": "Fluid simulation with particle dynamics and surface tension." },
+  "Physic Fluid": {
+    "description": "Fluid simulation with particle dynamics and surface tension."
+  },
   "Threejs Example Controller": {
     "description": "Character controller demo with third-person camera."
   },
@@ -43,12 +59,18 @@
   "Timeline Game": {
     "description": "Game built entirely on the custom timeline animation system."
   },
-  "Visualizer Main": { "description": "Music visualiser with frequency-reactive 3D geometry." },
-  "Chick Run": { "description": "Endless runner game — dodge obstacles as a speedy chick." },
+  "Visualizer Main": {
+    "description": "Music visualiser with frequency-reactive 3D geometry."
+  },
+  "Chick Run": {
+    "description": "Endless runner game — dodge obstacles as a speedy chick."
+  },
   "Forest Game": {
     "description": "3D forest exploration game with character movement and environment."
   },
-  "Goomba Runner": { "description": "Side-scrolling platformer featuring Goomba-style enemies." },
+  "Goomba Runner": {
+    "description": "Side-scrolling platformer featuring Goomba-style enemies."
+  },
   "Maze Game": {
     "description": "3D maze navigation game with procedural maze generation and pathfinding enemies."
   },
@@ -64,8 +86,12 @@
   "Cube Matrix Threejs": {
     "description": "Three.js GPU-accelerated cube matrix with instanced rendering."
   },
-  "Cube Sequences": { "description": "Sequenced cube animations driven by a custom timeline." },
-  "Cube Shift": { "description": "Cubes shifting position in rhythmic wave patterns." },
+  "Cube Sequences": {
+    "description": "Sequenced cube animations driven by a custom timeline."
+  },
+  "Cube Shift": {
+    "description": "Cubes shifting position in rhythmic wave patterns."
+  },
   "Falling View": {
     "description": "Particles falling with physics-inspired motion and colour gradients."
   },
@@ -75,13 +101,21 @@
   "Metal Cubes": {
     "description": "Reflective metallic cubes with PBR shading and environment maps."
   },
-  "Metal Cubes 2": { "description": "Enhanced metallic cube array with dynamic lighting." },
-  "Simplex Cached": { "description": "Simplex noise terrain with chunk caching for performance." },
-  "Simplex Worker": { "description": "Simplex noise generation offloaded to a Web Worker." },
+  "Metal Cubes 2": {
+    "description": "Enhanced metallic cube array with dynamic lighting."
+  },
+  "Simplex Cached": {
+    "description": "Simplex noise terrain with chunk caching for performance."
+  },
+  "Simplex Worker": {
+    "description": "Simplex noise generation offloaded to a Web Worker."
+  },
   "Canvas Texture Editor": {
     "description": "Browser-based canvas texture painting and editing tool."
   },
-  "Mixamo Playground": { "description": "Test and preview Mixamo character animations in 3D." },
+  "Mixamo Playground": {
+    "description": "Test and preview Mixamo character animations in 3D."
+  },
   "Model Loader": {
     "description": "Drag-and-drop 3D model loader supporting GLB, GLTF, FBX formats."
   },
@@ -91,5 +125,10 @@
   "Scene Editor": {
     "description": "Visual 3D scene composition tool with object placement and lighting."
   },
-  "Tools Test": { "description": "Internal tooling test page for development utilities." }
+  "Tools Test": {
+    "description": "Internal tooling test page for development utilities."
+  },
+  "Texture Painter": {
+    "description": "Paint custom textures on a 3D sphere and preview them live across different material types."
+  }
 }
diff --git a/src/stores/viewConfig.ts b/src/stores/viewConfig.ts
index 164f545e..758de760 100644
--- a/src/stores/viewConfig.ts
+++ b/src/stores/viewConfig.ts
@@ -31,7 +31,7 @@ export type ControlSchema = {
 }
 
 export type ConfigControlsSchema = {
-  [key: string]: ControlSchema | ConfigControlsSchema
+  [key: string]: ControlSchema | ConfigControlsSchema | string[]
 }
 
 type OnChangeCallback = () => void
diff --git a/src/utils/materialBuilder.ts b/src/utils/materialBuilder.ts
new file mode 100644
index 00000000..5acf6fd2
--- /dev/null
+++ b/src/utils/materialBuilder.ts
@@ -0,0 +1,127 @@
+import * as THREE from 'three'
+import type {
+  MaterialTypeName,
+  MapToggleKey,
+  MaterialsListConfig
+} from '@/views/Experiments/MaterialsList/types'
+import {
+  EMISSIVE_COLOR,
+  EMISSIVE_INTENSITY,
+  CLEARCOAT_ROUGHNESS_VALUE,
+  ENV_MAP_INTENSITY,
+  ENV_MAP_REFLECTIVITY,
+  NORMAL_STRENGTH,
+  DISPLACEMENT_SCALE,
+  MATERIAL_COLOR
+} from '@/views/Experiments/MaterialsList/materialsListConfig'
+
+export interface BuildMaterialScene {
+  textures: Record<string, THREE.Texture>
+  envMap: THREE.Texture | null
+}
+
+const MATERIAL_CONSTRUCTORS: Record<MaterialTypeName, new (p: never) => THREE.Material> = {
+  MeshBasicMaterial: THREE.MeshBasicMaterial,
+  MeshLambertMaterial: THREE.MeshLambertMaterial,
+  MeshPhongMaterial: THREE.MeshPhongMaterial,
+  MeshStandardMaterial: THREE.MeshStandardMaterial,
+  MeshPhysicalMaterial: THREE.MeshPhysicalMaterial,
+  MeshToonMaterial: THREE.MeshToonMaterial,
+  MeshNormalMaterial: THREE.MeshNormalMaterial,
+  MeshDepthMaterial: THREE.MeshDepthMaterial
+}
+
+const applyTextureParameters = (
+  parameters: Record<string, unknown>,
+  hasFeature: (key: MapToggleKey) => boolean,
+  textures: Record<string, THREE.Texture>
+): void => {
+  if (hasFeature('diffuse')) parameters.map = textures.diffuse
+  if (hasFeature('normal')) {
+    parameters.normalMap = textures.normal
+    parameters.normalScale = new THREE.Vector2(NORMAL_STRENGTH, NORMAL_STRENGTH)
+  }
+  if (hasFeature('roughness')) parameters.roughnessMap = textures.roughness
+  if (hasFeature('metalness')) parameters.metalnessMap = textures.roughness
+  if (hasFeature('ao')) {
+    parameters.aoMap = textures.ao
+    parameters.aoMapIntensity = 1
+  }
+  if (hasFeature('displacement')) {
+    parameters.displacementMap = textures.displacement
+    parameters.displacementScale = DISPLACEMENT_SCALE
+  }
+}
+
+interface ApplyContext {
+  typeName: MaterialTypeName
+  hasFeature: (key: MapToggleKey) => boolean
+  textures: Record<string, THREE.Texture>
+  configValues: MaterialsListConfig
+  envMap: THREE.Texture | null
+}
+
+const applyMaterialTypeParameters = (
+  parameters: Record<string, unknown>,
+  { typeName, hasFeature, textures, configValues, envMap }: ApplyContext
+): void => {
+  if (hasFeature('emissive') && typeName !== 'MeshBasicMaterial') {
+    parameters.emissiveMap = textures.emissive
+    parameters.emissive = new THREE.Color(EMISSIVE_COLOR)
+    parameters.emissiveIntensity = EMISSIVE_INTENSITY
+  }
+  if (hasFeature('envMap') && envMap) {
+    const isPbr = ['MeshStandardMaterial', 'MeshPhysicalMaterial'].includes(typeName)
+    parameters.envMap = envMap
+    if (isPbr) {
+      parameters.envMapIntensity = ENV_MAP_INTENSITY
+    } else {
+      parameters.combine = THREE.AddOperation
+      parameters.reflectivity = ENV_MAP_REFLECTIVITY
+    }
+  }
+  if (['MeshStandardMaterial', 'MeshPhysicalMaterial'].includes(typeName)) {
+    parameters.roughness = configValues.properties.roughness
+    parameters.metalness = configValues.properties.metalness
+  }
+  if (typeName === 'MeshPhysicalMaterial') {
+    parameters.clearcoat = configValues.properties.clearcoat
+    parameters.clearcoatRoughness = CLEARCOAT_ROUGHNESS_VALUE
+    parameters.transmission = configValues.properties.transmission
+  }
+  if (typeName === 'MeshPhongMaterial') parameters.shininess = configValues.properties.shininess
+  if (typeName === 'MeshNormalMaterial')
+    parameters.flatShading = configValues.properties.flatShading
+}
+
+/**
+ * Build a Three.js material from type, enabled maps, config values, and scene resources.
+ * @param typeName - Material type identifier
+ * @param supported - Map keys this material type supports
+ * @param maps - Which maps are currently enabled
+ * @param configValues - Property values (roughness, metalness, etc.)
+ * @param scene - Scene resources containing textures and envMap
+ * @returns Constructed Three.js material
+ */
+export const buildMaterial = (
+  typeName: MaterialTypeName,
+  supported: MapToggleKey[],
+  maps: Record<MapToggleKey, boolean>,
+  configValues: MaterialsListConfig,
+  scene: BuildMaterialScene
+): THREE.Material => {
+  const { textures, envMap } = scene
+  const hasFeature = (key: MapToggleKey): boolean => supported.includes(key) && maps[key]
+  const parameters: Record<string, unknown> = {}
+
+  if (!['MeshNormalMaterial', 'MeshDepthMaterial'].includes(typeName)) {
+    parameters.color = MATERIAL_COLOR
+  }
+  applyTextureParameters(parameters, hasFeature, textures)
+  applyMaterialTypeParameters(parameters, { typeName, hasFeature, textures, configValues, envMap })
+
+  const Constructor = MATERIAL_CONSTRUCTORS[typeName]
+  const material = new Constructor(parameters as never)
+  ;(material as THREE.MeshBasicMaterial).wireframe = configValues.properties.wireframe
+  return material
+}
diff --git a/src/views/Experiments/MaterialsList/MaterialsList.vue b/src/views/Experiments/MaterialsList/MaterialsList.vue
index ffdda1a1..5e0c6c58 100644
--- a/src/views/Experiments/MaterialsList/MaterialsList.vue
+++ b/src/views/Experiments/MaterialsList/MaterialsList.vue
@@ -4,13 +4,14 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from 'vue-router'
 import { stats } from '@/utils/stats'
+import { buildMaterial } from '@/utils/materialBuilder'
 import { getTools, createTextSprite } from '@webgamekit/threejs'
 import { createTimelineManager, animateTimeline } from '@webgamekit/animation'
 import { useDebugSceneStore } from '@/stores/debugScene'
 import { registerViewConfig, unregisterViewConfig, createReactiveConfig } from '@/stores/viewConfig'
 import { useViewPanelsStore } from '@/stores/viewPanels'
 import brickTextureUrl from '@/assets/images/textures/brick.jpg'
-import type { MaterialTypeName, MapToggleKey, MaterialsListConfig } from './types'
+import type { MaterialTypeName, MaterialsListConfig } from './types'
 import {
   MATERIAL_TYPES,
   MAIN_MATERIAL_TYPES,
@@ -22,16 +23,9 @@ import {
   TEXT_COLOR_PROPERTIES,
   TEXT_COLOR_VALUE,
   PROCEDURAL_TEXTURE_SIZE,
-  DISPLACEMENT_SCALE,
-  NORMAL_STRENGTH,
   LIGHT_ORBIT_SPEED,
   LIGHT_ORBIT_RADIUS,
   LIGHT_Z_POSITION,
-  EMISSIVE_COLOR,
-  EMISSIVE_INTENSITY,
-  CLEARCOAT_ROUGHNESS_VALUE,
-  ENV_MAP_INTENSITY,
-  ENV_MAP_REFLECTIVITY,
   ENV_GROUND_SIZE,
   ENV_GROUND_Y,
   ENV_LIGHT_INTENSITY,
@@ -45,7 +39,6 @@ import {
   LIGHT_INTENSITY,
   HEMISPHERE_SKY,
   HEMISPHERE_GROUND,
-  MATERIAL_COLOR,
   ENV_LIGHT_COLOR,
   ORTHO_NEAR_PLANE,
   ORTHO_FAR_PLANE,
@@ -256,88 +249,14 @@ const createEnvironmentMap = (rendererInstance: THREE.WebGLRenderer): THREE.Text
   return renderTarget.texture
 }
 
-const buildMaterial = (
-  typeName: MaterialTypeName,
-  supported: MapToggleKey[],
-  maps: Record<MapToggleKey, boolean>,
-  configValues: MaterialsListConfig
-): THREE.Material => {
-  const parameters: Record<string, unknown> = {}
-  const hasFeature = (key: MapToggleKey): boolean => supported.includes(key) && maps[key]
-
-  if (!['MeshNormalMaterial', 'MeshDepthMaterial'].includes(typeName)) {
-    parameters.color = MATERIAL_COLOR
-  }
-  if (hasFeature('diffuse')) parameters.map = textures.diffuse
-  if (hasFeature('normal')) {
-    parameters.normalMap = textures.normal
-    parameters.normalScale = new THREE.Vector2(NORMAL_STRENGTH, NORMAL_STRENGTH)
-  }
-  if (hasFeature('roughness')) parameters.roughnessMap = textures.roughness
-  if (hasFeature('metalness')) parameters.metalnessMap = textures.roughness
-  if (hasFeature('ao')) {
-    parameters.aoMap = textures.ao
-    parameters.aoMapIntensity = 1
-  }
-  if (hasFeature('displacement')) {
-    parameters.displacementMap = textures.displacement
-    parameters.displacementScale = DISPLACEMENT_SCALE
-  }
-  if (hasFeature('emissive') && typeName !== 'MeshBasicMaterial') {
-    parameters.emissiveMap = textures.emissive
-    parameters.emissive = new THREE.Color(EMISSIVE_COLOR)
-    parameters.emissiveIntensity = EMISSIVE_INTENSITY
-  }
-  if (hasFeature('envMap') && envMap) {
-    const isPbr = ['MeshStandardMaterial', 'MeshPhysicalMaterial'].includes(typeName)
-    parameters.envMap = envMap
-    if (isPbr) {
-      parameters.envMapIntensity = ENV_MAP_INTENSITY
-    } else {
-      parameters.combine = THREE.AddOperation
-      parameters.reflectivity = ENV_MAP_REFLECTIVITY
-    }
-  }
-  if (['MeshStandardMaterial', 'MeshPhysicalMaterial'].includes(typeName)) {
-    parameters.roughness = configValues.properties.roughness
-    parameters.metalness = configValues.properties.metalness
-  }
-  if (typeName === 'MeshPhysicalMaterial') {
-    parameters.clearcoat = configValues.properties.clearcoat
-    parameters.clearcoatRoughness = CLEARCOAT_ROUGHNESS_VALUE
-    parameters.transmission = configValues.properties.transmission
-  }
-  if (typeName === 'MeshPhongMaterial') {
-    parameters.shininess = configValues.properties.shininess
-  }
-  if (typeName === 'MeshNormalMaterial') {
-    parameters.flatShading = configValues.properties.flatShading
-  }
-
-  const materialConstructors: Record<MaterialTypeName, new (p: never) => THREE.Material> = {
-    MeshBasicMaterial: THREE.MeshBasicMaterial,
-    MeshLambertMaterial: THREE.MeshLambertMaterial,
-    MeshPhongMaterial: THREE.MeshPhongMaterial,
-    MeshStandardMaterial: THREE.MeshStandardMaterial,
-    MeshPhysicalMaterial: THREE.MeshPhysicalMaterial,
-    MeshToonMaterial: THREE.MeshToonMaterial,
-    MeshNormalMaterial: THREE.MeshNormalMaterial,
-    MeshDepthMaterial: THREE.MeshDepthMaterial
-  }
-
-  const Constructor = materialConstructors[typeName]
-  const material = new Constructor(parameters as never)
-  ;(material as THREE.MeshBasicMaterial).wireframe = configValues.properties.wireframe
-  return material
-}
-
 const buildShowcaseMaterial = (): THREE.Material => {
   const typeName = MATERIAL_TYPES[currentMaterialIndex.value]
   return buildMaterial(
     typeName,
     MATERIAL_FEATURES[typeName],
     getEnabledMaps(reactiveConfig.value),
-    reactiveConfig.value
+    reactiveConfig.value,
+    { textures, envMap }
   )
 }
 
diff --git a/src/views/Experiments/TexturePainter/TexturePainter.vue b/src/views/Experiments/TexturePainter/TexturePainter.vue
new file mode 100644
index 00000000..67bb69a1
--- /dev/null
+++ b/src/views/Experiments/TexturePainter/TexturePainter.vue
@@ -0,0 +1,956 @@
+<script setup lang="ts">
+import * as THREE from 'three'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { getTools } from '@webgamekit/threejs'
+import { createTimelineManager, animateTimeline } from '@webgamekit/animation'
+import { storageSaveLocal, storageLoadLocal } from '@webgamekit/canvas-editor'
+import { registerViewConfig, unregisterViewConfig, createReactiveConfig } from '@/stores/viewConfig'
+import lakeUrl from '@/assets/images/backgrounds/lake.webp'
+import { useViewPanelsStore } from '@/stores/viewPanels'
+import { usePanelsStore } from '@/stores/panels'
+import { buildMaterial } from '@/utils/materialBuilder'
+import { DrawingToolbar } from '@/components/DrawingToolbar'
+import type { DrawingTool } from '@/components/DrawingToolbar'
+import {
+  MAIN_MATERIAL_TYPES,
+  MATERIAL_LABELS,
+  MATERIAL_FEATURES,
+  DEFAULT_CONFIG,
+  CONFIG_SCHEMA,
+  getEnabledMaps,
+  SPHERE_SEGMENT_COUNT,
+  BRICK_WIDTH,
+  BRICK_HEIGHT,
+  MORTAR_SIZE,
+  MORTAR_EDGE_OFFSET,
+  MORTAR_EDGE_SIZE,
+  LIGHT_INTENSITY,
+  AMBIENT_LIGHT_INTENSITY,
+  HEMISPHERE_SKY,
+  HEMISPHERE_GROUND,
+  LIGHT_ORBIT_RADIUS,
+  LIGHT_Z_POSITION,
+  PAINTER_SPHERE_RADIUS,
+  PAINTER_LIGHT_ORBIT_SPEED,
+  PAINTER_TARGET_FPS,
+  PAINTER_ORTHO_FRUSTUM,
+  PAINTER_ORTHO_NEAR,
+  PAINTER_ORTHO_FAR,
+  PAINTER_ORTHO_DISTANCE,
+  PAINTER_CANVAS_SIZE,
+  STORAGE_PREFIX,
+  TEXTURE_SLOTS,
+  TEXTURE_SLOT_LABELS,
+  TEXTURE_SLOT_PALETTE,
+  TEXTURE_SLOT_DEFAULT_COLOR
+} from './config'
+import type { MaterialTypeName, MaterialsListConfig, TextureSlotKey } from './config'
+
+const canvas = ref<HTMLCanvasElement | null>(null)
+const route = useRoute()
+const { setViewPanels, clearViewPanels } = useViewPanelsStore()
+
+let sphere: THREE.Mesh | null = null
+let envMap: THREE.Texture | null = null
+let backgroundTexture: THREE.Texture | null = null
+let orbitControls: OrbitControls | null = null
+let orthoCamera: THREE.OrthographicCamera | null = null
+let rendererReference: THREE.WebGLRenderer | null = null
+let canvasElement: HTMLCanvasElement | null = null
+
+const previewUrls = reactive<Partial<Record<TextureSlotKey, string>>>({})
+const updatePreviews = (): void => {
+  TEXTURE_SLOTS.forEach((slot) => {
+    const offscreen = offscreenCanvases[slot]
+    if (!offscreen) return
+    previewUrls[slot] = offscreen.toDataURL()
+  })
+}
+
+type ActiveMode = 'paint' | 'rotate' | 'none'
+let activeMode: ActiveMode = 'none'
+let lastPaintUv: THREE.Vector2 | null = null
+let didPaint = false
+let dragLastX = 0
+let dragLastY = 0
+
+const activeTool = ref<DrawingTool>('rotate')
+const brushColor = ref(TEXTURE_SLOT_DEFAULT_COLOR.diffuse)
+const BRUSH_SIZE_DEFAULT = 20
+const brushSize = ref(BRUSH_SIZE_DEFAULT)
+
+const HISTORY_LIMIT = 20
+const paintHistory = reactive<Record<TextureSlotKey, { stack: string[]; index: number }>>(
+  Object.fromEntries(
+    TEXTURE_SLOTS.map((s) => [s, { stack: [] as string[], index: -1 }])
+  ) as unknown as Record<TextureSlotKey, { stack: string[]; index: number }>
+)
+const canUndo = computed(() => paintHistory[activeSlot.value].index > 0)
+const canRedo = computed(() => {
+  const h = paintHistory[activeSlot.value]
+  return h.index < h.stack.length - 1
+})
+
+const textures: Record<string, THREE.CanvasTexture> = {}
+const offscreenCanvases: Record<string, HTMLCanvasElement> = {}
+
+const activeSlot = ref<TextureSlotKey>('diffuse')
+
+watch(activeSlot, (slot) => {
+  const palette = TEXTURE_SLOT_PALETTE[slot]
+  if (!palette.includes(brushColor.value)) brushColor.value = palette[0]
+})
+
+const reactiveConfig = createReactiveConfig<{
+  materialType: MaterialTypeName
+  config: {
+    normalScale: number
+    aoIntensity: number
+    displacementScale: number
+    emissiveIntensity: number
+    envMapIntensity: number
+  }
+  materials: MaterialsListConfig
+}>({
+  materialType: 'MeshPhysicalMaterial',
+  config: {
+    normalScale: 2,
+    aoIntensity: 1,
+    displacementScale: 0.25,
+    emissiveIntensity: 1.5,
+    envMapIntensity: 1
+  },
+  materials: { ...DEFAULT_CONFIG }
+})
+
+const configControls = {
+  __defaultOpenGroups: [] as string[],
+  materialType: {
+    label: 'Material',
+    component: 'ButtonSelector' as const,
+    options: MAIN_MATERIAL_TYPES.map((t) => ({ value: t, label: MATERIAL_LABELS[t] }))
+  },
+  config: {
+    normalScale: { min: 0, max: 5, step: 0.1, label: 'Normal Scale' },
+    aoIntensity: { min: 0, max: 2, step: 0.05, label: 'AO Intensity' },
+    displacementScale: { min: 0, max: 2, step: 0.01, label: 'Displacement Scale' },
+    emissiveIntensity: { min: 0, max: 5, step: 0.1, label: 'Emissive Intensity' },
+    envMapIntensity: { min: 0, max: 3, step: 0.1, label: 'Env Map Intensity' }
+  },
+  materials: {
+    properties: CONFIG_SCHEMA.properties,
+    maps: CONFIG_SCHEMA.maps
+  }
+}
+
+const storageKey = (slot: TextureSlotKey): string => `${STORAGE_PREFIX}-${slot}`
+
+const createOffscreenCanvas = (
+  drawFunction: (ctx: CanvasRenderingContext2D, size: number) => void
+): HTMLCanvasElement => {
+  const offscreen = document.createElement('canvas')
+  offscreen.width = PAINTER_CANVAS_SIZE
+  offscreen.height = PAINTER_CANVAS_SIZE
+  const ctx = offscreen.getContext('2d')!
+  drawFunction(ctx, PAINTER_CANVAS_SIZE)
+  return offscreen
+}
+
+const drawBrickGrid = (
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  fillColor: string,
+  baseColor: string
+): void => {
+  ctx.fillStyle = baseColor
+  ctx.fillRect(0, 0, size, size)
+  ctx.fillStyle = fillColor
+  Array.from({ length: Math.ceil(size / BRICK_HEIGHT) }, (_, row) =>
+    Array.from({ length: Math.ceil(size / BRICK_WIDTH) + 1 }, (__, col) => {
+      const offset = row % 2 === 0 ? 0 : BRICK_WIDTH / 2
+      const brickX = col * BRICK_WIDTH - offset
+      ctx.fillRect(brickX, row * BRICK_HEIGHT, MORTAR_SIZE, BRICK_HEIGHT)
+      ctx.fillRect(brickX, row * BRICK_HEIGHT, BRICK_WIDTH, MORTAR_SIZE)
+      return null
+    })
+  )
+}
+
+const drawNormalMap = (ctx: CanvasRenderingContext2D, size: number): void => {
+  const imageData = ctx.createImageData(size, size)
+  const neutral = 128
+  const blue = 255
+  const depressed = 100
+  const raised = 156
+  Array.from({ length: size * size }, (_, i) => {
+    const x = i % size
+    const y = Math.floor(i / size)
+    const offset = y % (BRICK_HEIGHT * 2) < BRICK_HEIGHT ? 0 : BRICK_WIDTH / 2
+    const bx = (x + offset) % BRICK_WIDTH
+    const by = y % BRICK_HEIGHT
+    const isMortar = bx < MORTAR_SIZE || by < MORTAR_SIZE
+    const d = i * 4
+    if (isMortar) {
+      imageData.data[d] = neutral
+      imageData.data[d + 1] = neutral
+    } else {
+      imageData.data[d] =
+        bx < MORTAR_SIZE + MORTAR_EDGE_OFFSET
+          ? depressed
+          : bx > BRICK_WIDTH - MORTAR_EDGE_OFFSET
+            ? raised
+            : neutral
+      imageData.data[d + 1] =
+        by < MORTAR_SIZE + MORTAR_EDGE_OFFSET
+          ? depressed
+          : by > BRICK_HEIGHT - MORTAR_EDGE_OFFSET
+            ? raised
+            : neutral
+    }
+    imageData.data[d + 2] = blue
+    imageData.data[d + 3] = blue
+    return null
+  })
+  ctx.putImageData(imageData, 0, 0)
+}
+
+const drawAoMap = (ctx: CanvasRenderingContext2D, size: number): void => {
+  ctx.fillStyle = '#ffffff'
+  ctx.fillRect(0, 0, size, size)
+  ctx.fillStyle = 'rgba(0,0,0,0.4)'
+  Array.from({ length: Math.ceil(size / BRICK_HEIGHT) }, (_, row) =>
+    Array.from({ length: Math.ceil(size / BRICK_WIDTH) + 1 }, (__, col) => {
+      const offset = row % 2 === 0 ? 0 : BRICK_WIDTH / 2
+      const brickX = col * BRICK_WIDTH - offset
+      ctx.fillRect(brickX, row * BRICK_HEIGHT, MORTAR_SIZE + MORTAR_EDGE_SIZE, BRICK_HEIGHT)
+      ctx.fillRect(brickX, row * BRICK_HEIGHT, BRICK_WIDTH, MORTAR_SIZE + MORTAR_EDGE_SIZE)
+      return null
+    })
+  )
+}
+
+const drawDisplacementMap = (ctx: CanvasRenderingContext2D, size: number): void => {
+  ctx.fillStyle = '#000000'
+  ctx.fillRect(0, 0, size, size)
+  ctx.fillStyle = '#cccccc'
+  Array.from({ length: Math.ceil(size / BRICK_HEIGHT) }, (_, row) =>
+    Array.from({ length: Math.ceil(size / BRICK_WIDTH) + 1 }, (__, col) => {
+      const offset = row % 2 === 0 ? 0 : BRICK_WIDTH / 2
+      const brickX = col * BRICK_WIDTH - offset
+      ctx.fillRect(
+        brickX + MORTAR_SIZE,
+        row * BRICK_HEIGHT + MORTAR_SIZE,
+        BRICK_WIDTH - MORTAR_SIZE * 2,
+        BRICK_HEIGHT - MORTAR_SIZE * 2
+      )
+      return null
+    })
+  )
+}
+
+const DEFAULT_DRAW_FUNCTIONS: Record<
+  TextureSlotKey,
+  (ctx: CanvasRenderingContext2D, size: number) => void
+> = {
+  diffuse: (ctx, size) => drawBrickGrid(ctx, size, '#cc8866', '#884433'),
+  normal: drawNormalMap,
+  roughness: (ctx, size) => drawBrickGrid(ctx, size, '#ffffff', '#999999'),
+  ao: drawAoMap,
+  displacement: drawDisplacementMap,
+  emissive: (ctx, size) => drawBrickGrid(ctx, size, '#ff6600', '#000000')
+}
+
+const handleTextureLoad = (event: Event): void => {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  const objectUrl = URL.createObjectURL(file)
+  const slot = activeSlot.value
+  const offscreen = offscreenCanvases[slot]
+  if (!offscreen) return
+  const img = new Image()
+  img.onload = () => {
+    const ctx = offscreen.getContext('2d')!
+    ctx.clearRect(0, 0, offscreen.width, offscreen.height)
+    ctx.drawImage(img, 0, 0, offscreen.width, offscreen.height)
+    textures[slot].needsUpdate = true
+    URL.revokeObjectURL(objectUrl)
+    const dataUrl = offscreen.toDataURL()
+    storageSaveLocal(storageKey(slot), dataUrl)
+    pushHistory(slot, dataUrl)
+    updatePreviews()
+  }
+  img.src = objectUrl
+  input.value = ''
+}
+
+const applyDataUrlToCanvas = (offscreen: HTMLCanvasElement, dataUrl: string): Promise<void> =>
+  new Promise((resolve) => {
+    const img = new Image()
+    img.onload = () => {
+      const ctx = offscreen.getContext('2d')!
+      ctx.clearRect(0, 0, offscreen.width, offscreen.height)
+      ctx.drawImage(img, 0, 0, offscreen.width, offscreen.height)
+      resolve()
+    }
+    img.src = dataUrl
+  })
+
+const initTextures = async (): Promise<void> => {
+  await Promise.all(
+    TEXTURE_SLOTS.map(async (slot) => {
+      const saved = storageLoadLocal(storageKey(slot))
+      const offscreen = createOffscreenCanvas(DEFAULT_DRAW_FUNCTIONS[slot])
+      if (saved?.dataUrl) await applyDataUrlToCanvas(offscreen, saved.dataUrl)
+      offscreenCanvases[slot] = offscreen
+      const texture = new THREE.CanvasTexture(offscreen)
+      texture.wrapS = THREE.RepeatWrapping
+      texture.wrapT = THREE.RepeatWrapping
+      if (slot === 'diffuse') texture.colorSpace = THREE.SRGBColorSpace
+      textures[slot] = texture
+    })
+  )
+}
+
+const createEnvironmentMap = async (renderer: THREE.WebGLRenderer): Promise<void> => {
+  const tex = await new THREE.TextureLoader().loadAsync(lakeUrl)
+  tex.mapping = THREE.EquirectangularReflectionMapping
+  tex.colorSpace = THREE.SRGBColorSpace
+  backgroundTexture = tex
+
+  const pmrem = new THREE.PMREMGenerator(renderer)
+  pmrem.compileEquirectangularShader()
+  envMap = pmrem.fromEquirectangular(tex).texture
+  pmrem.dispose()
+}
+
+const applyStrengths = (mat: THREE.Material): void => {
+  const s = reactiveConfig.value.config
+  const m = mat as THREE.MeshStandardMaterial
+  if (m.normalMap && m.normalScale) m.normalScale.set(s.normalScale, s.normalScale)
+  if (m.aoMap) m.aoMapIntensity = s.aoIntensity
+  if ('displacementMap' in m && m.displacementMap)
+    (m as unknown as { displacementScale: number }).displacementScale = s.displacementScale
+  if (m.emissiveMap) m.emissiveIntensity = s.emissiveIntensity
+  if (m.envMap) m.envMapIntensity = s.envMapIntensity
+}
+
+const buildSphereMaterial = (): THREE.Material => {
+  const mat = buildMaterial(
+    reactiveConfig.value.materialType,
+    MATERIAL_FEATURES[reactiveConfig.value.materialType],
+    getEnabledMaps(reactiveConfig.value.materials),
+    reactiveConfig.value.materials,
+    { textures: textures as Record<string, THREE.Texture>, envMap }
+  ) as THREE.MeshStandardMaterial
+  applyStrengths(mat)
+  return mat
+}
+
+const rebuildMaterial = (): void => {
+  if (!sphere) return
+  const old = sphere.material as THREE.Material
+  sphere.material = buildSphereMaterial()
+  old.dispose()
+}
+
+const pushHistory = (slot: TextureSlotKey, dataUrl: string): void => {
+  const h = paintHistory[slot]
+  h.stack = h.stack.slice(0, h.index + 1)
+  h.stack.push(dataUrl)
+  if (h.stack.length > HISTORY_LIMIT) h.stack.shift()
+  else h.index++
+}
+
+const applySnapshot = (slot: TextureSlotKey, dataUrl: string): void => {
+  applyDataUrlToCanvas(offscreenCanvases[slot], dataUrl).then(() => {
+    textures[slot].needsUpdate = true
+    storageSaveLocal(storageKey(slot), dataUrl)
+  })
+}
+
+const undoPaint = (): void => {
+  const slot = activeSlot.value
+  const h = paintHistory[slot]
+  if (h.index <= 0) return
+  h.index--
+  applySnapshot(slot, h.stack[h.index])
+}
+
+const redoPaint = (): void => {
+  const slot = activeSlot.value
+  const h = paintHistory[slot]
+  if (h.index >= h.stack.length - 1) return
+  h.index++
+  applySnapshot(slot, h.stack[h.index])
+}
+
+const floodFill = (
+  ctx: CanvasRenderingContext2D,
+  startX: number,
+  startY: number,
+  fillColor: string
+): void => {
+  const { width, height } = ctx.canvas
+  const imageData = ctx.getImageData(0, 0, width, height)
+  const data = imageData.data
+  const ix = Math.round(startX)
+  const iy = Math.round(startY)
+  if (ix < 0 || ix >= width || iy < 0 || iy >= height) return
+  const startIndex = (iy * width + ix) * 4
+  const [tr, tg, tb, ta] = [
+    data[startIndex],
+    data[startIndex + 1],
+    data[startIndex + 2],
+    data[startIndex + 3]
+  ]
+  const temporary = document.createElement('canvas')
+  temporary.width = 1
+  temporary.height = 1
+  const temporaryContext = temporary.getContext('2d')!
+  temporaryContext.fillStyle = fillColor
+  temporaryContext.fillRect(0, 0, 1, 1)
+  const [fr, fg, fb, fa] = [...temporaryContext.getImageData(0, 0, 1, 1).data]
+  if (tr === fr && tg === fg && tb === fb && ta === fa) return
+  const isSame = (i: number): boolean =>
+    data[i] === tr && data[i + 1] === tg && data[i + 2] === tb && data[i + 3] === ta
+  const queue: number[] = [ix + iy * width]
+  const visited = new Uint8Array(width * height)
+  while (queue.length > 0) {
+    const pos = queue.pop()!
+    if (visited[pos]) continue
+    visited[pos] = 1
+    const px = pos % width
+    const py = Math.floor(pos / width)
+    const i = pos * 4
+    if (!isSame(i)) continue
+    data[i] = fr
+    data[i + 1] = fg
+    data[i + 2] = fb
+    data[i + 3] = fa
+    if (px > 0) queue.push(pos - 1)
+    if (px < width - 1) queue.push(pos + 1)
+    if (py > 0) queue.push(pos - width)
+    if (py < height - 1) queue.push(pos + width)
+  }
+  ctx.putImageData(imageData, 0, 0)
+}
+
+const paintStroke = (fromUv: THREE.Vector2 | null, toUv: THREE.Vector2): void => {
+  const slot = activeSlot.value
+  const offscreen = offscreenCanvases[slot]
+  if (!offscreen) return
+  const ctx = offscreen.getContext('2d')!
+  const size = offscreen.width
+  const toX = toUv.x * size
+  const toY = (1 - toUv.y) * size
+
+  if (activeTool.value === 'fill') {
+    floodFill(ctx, toX, toY, brushColor.value)
+  } else {
+    const isEraser = activeTool.value === 'eraser'
+    ctx.globalCompositeOperation = isEraser ? 'destination-out' : 'source-over'
+    const color = isEraser ? 'rgba(0,0,0,1)' : brushColor.value
+    ctx.fillStyle = color
+    ctx.strokeStyle = color
+    ctx.lineWidth = brushSize.value
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+    ctx.beginPath()
+    if (fromUv) {
+      ctx.moveTo(fromUv.x * size, (1 - fromUv.y) * size)
+      ctx.lineTo(toX, toY)
+      ctx.stroke()
+    }
+    ctx.beginPath()
+    ctx.arc(toX, toY, brushSize.value / 2, 0, Math.PI * 2)
+    ctx.fill()
+    ctx.globalCompositeOperation = 'source-over'
+  }
+
+  textures[slot].needsUpdate = true
+  didPaint = true
+}
+
+const resetSlot = (slot: TextureSlotKey): void => {
+  const offscreen = offscreenCanvases[slot]
+  if (!offscreen) return
+  const ctx = offscreen.getContext('2d')!
+  ctx.clearRect(0, 0, offscreen.width, offscreen.height)
+  DEFAULT_DRAW_FUNCTIONS[slot](ctx, offscreen.width)
+  textures[slot].needsUpdate = true
+  const dataUrl = offscreen.toDataURL()
+  storageSaveLocal(storageKey(slot), dataUrl)
+  pushHistory(slot, dataUrl)
+  updatePreviews()
+}
+
+const resetTexture = (): void => resetSlot(activeSlot.value)
+
+const resetAll = (): void => TEXTURE_SLOTS.forEach(resetSlot)
+
+const getIntersection = (event: MouseEvent): THREE.Intersection | null => {
+  if (!orthoCamera || !sphere || !canvasElement) return null
+  const rect = canvasElement.getBoundingClientRect()
+  const ndc = new THREE.Vector2(
+    ((event.clientX - rect.left) / rect.width) * 2 - 1,
+    -((event.clientY - rect.top) / rect.height) * 2 + 1
+  )
+  const raycaster = new THREE.Raycaster()
+  raycaster.setFromCamera(ndc, orthoCamera)
+  const hits = raycaster.intersectObject(sphere)
+  return hits[0] ?? null
+}
+
+const handleMouseDown = (event: MouseEvent): void => {
+  if (!canvasElement) return
+  const hit = getIntersection(event)
+
+  const isPaintTool = activeTool.value !== 'rotate'
+  if (isPaintTool && hit?.uv) {
+    activeMode = 'paint'
+    lastPaintUv = null
+    didPaint = false
+    paintStroke(null, hit.uv)
+    lastPaintUv = hit.uv.clone()
+    canvasElement.style.cursor = 'crosshair'
+    return
+  }
+
+  if (hit) {
+    activeMode = 'rotate'
+    dragLastX = event.clientX
+    dragLastY = event.clientY
+    canvasElement.style.cursor = 'grabbing'
+  }
+}
+
+const handleMouseUp = (): void => {
+  if (activeMode === 'paint' && didPaint) {
+    const slot = activeSlot.value
+    const dataUrl = offscreenCanvases[slot].toDataURL()
+    pushHistory(slot, dataUrl)
+    storageSaveLocal(storageKey(slot), dataUrl)
+    updatePreviews()
+  }
+  activeMode = 'none'
+  lastPaintUv = null
+  didPaint = false
+  if (canvasElement) canvasElement.style.cursor = 'default'
+}
+
+const handleMouseMove = (event: MouseEvent): void => {
+  if (!sphere || !canvasElement) return
+
+  if (activeMode === 'paint') {
+    const hit = getIntersection(event)
+    if (hit?.uv) {
+      paintStroke(lastPaintUv, hit.uv)
+      lastPaintUv = hit.uv.clone()
+    }
+    return
+  }
+
+  if (activeMode === 'rotate') {
+    const dx = event.clientX - dragLastX
+    const dy = event.clientY - dragLastY
+    const DRAG_SENSITIVITY = 0.008
+    sphere.rotation.y += dx * DRAG_SENSITIVITY
+    sphere.rotation.x += dy * DRAG_SENSITIVITY
+    dragLastX = event.clientX
+    dragLastY = event.clientY
+    return
+  }
+
+  const hit = getIntersection(event)
+  const isPaint = activeTool.value !== 'rotate'
+  canvasElement.style.cursor = hit ? (isPaint ? 'crosshair' : 'grab') : 'default'
+}
+
+const createOrthoCamera = (): THREE.OrthographicCamera => {
+  const aspect = window.innerWidth / window.innerHeight
+  const halfWidth = PAINTER_ORTHO_FRUSTUM * aspect
+  const cam = new THREE.OrthographicCamera(
+    -halfWidth,
+    halfWidth,
+    PAINTER_ORTHO_FRUSTUM,
+    -PAINTER_ORTHO_FRUSTUM,
+    PAINTER_ORTHO_NEAR,
+    PAINTER_ORTHO_FAR
+  )
+  cam.position.set(0, 0, PAINTER_ORTHO_DISTANCE)
+  cam.lookAt(0, 0, 0)
+  return cam
+}
+
+const handleResize = (): void => {
+  if (!rendererReference || !orthoCamera) return
+  const width = window.innerWidth
+  const height = window.innerHeight
+  rendererReference.setSize(width, height)
+  const aspect = width / height
+  const halfWidth = PAINTER_ORTHO_FRUSTUM * aspect
+  orthoCamera.left = -halfWidth
+  orthoCamera.right = halfWidth
+  orthoCamera.updateProjectionMatrix()
+}
+
+const init = async (canvasReference: HTMLCanvasElement): Promise<void> => {
+  canvasElement = canvasReference
+  await initTextures()
+  TEXTURE_SLOTS.forEach((slot) => {
+    const initialDataUrl = offscreenCanvases[slot].toDataURL()
+    paintHistory[slot].stack = [initialDataUrl]
+    paintHistory[slot].index = 0
+  })
+  updatePreviews()
+
+  const { setup, renderer, scene } = await getTools({ canvas: canvasReference, resize: false })
+  rendererReference = renderer
+  await createEnvironmentMap(renderer)
+  orthoCamera = createOrthoCamera()
+
+  orbitControls = new OrbitControls(orthoCamera, renderer.domElement)
+  orbitControls.enableRotate = false
+  orbitControls.target.set(0, 0, 0)
+  orbitControls.update()
+
+  canvasReference.addEventListener('mousedown', handleMouseDown)
+  canvasReference.addEventListener('mouseup', handleMouseUp)
+  canvasReference.addEventListener('mousemove', handleMouseMove)
+
+  await setup({
+    config: {
+      orbit: false,
+      ground: false,
+      lights: {
+        ambient: { intensity: AMBIENT_LIGHT_INTENSITY },
+        directional: {
+          intensity: LIGHT_INTENSITY,
+          position: [LIGHT_ORBIT_RADIUS, LIGHT_ORBIT_RADIUS, LIGHT_Z_POSITION] as [
+            number,
+            number,
+            number
+          ]
+        },
+        hemisphere: { colors: [HEMISPHERE_SKY, HEMISPHERE_GROUND] }
+      }
+    },
+    defineSetup: async () => {
+      const geometry = new THREE.SphereGeometry(
+        PAINTER_SPHERE_RADIUS,
+        SPHERE_SEGMENT_COUNT,
+        SPHERE_SEGMENT_COUNT
+      )
+      geometry.setAttribute('uv2', geometry.attributes['uv'])
+      sphere = new THREE.Mesh(geometry, buildSphereMaterial())
+      sphere.castShadow = true
+      sphere.receiveShadow = true
+      scene.add(sphere)
+
+      const directionalLight =
+        scene.children.find(
+          (child): child is THREE.DirectionalLight => child instanceof THREE.DirectionalLight
+        ) ?? null
+
+      let frameCount = 0
+      const timelineManager = createTimelineManager()
+
+      timelineManager.addAction({
+        name: 'Light orbit',
+        category: 'animation',
+        action: () => {
+          if (directionalLight) {
+            const angle = (frameCount * PAINTER_LIGHT_ORBIT_SPEED) / PAINTER_TARGET_FPS
+            directionalLight.position.set(
+              Math.sin(angle) * LIGHT_ORBIT_RADIUS,
+              Math.cos(angle) * LIGHT_ORBIT_RADIUS,
+              LIGHT_Z_POSITION
+            )
+          }
+        }
+      })
+      timelineManager.addAction({
+        name: 'Render',
+        category: 'render',
+        action: () => {
+          orbitControls?.update()
+          if (orthoCamera) renderer.render(scene, orthoCamera)
+        }
+      })
+
+      const animateLoop = (): void => {
+        requestAnimationFrame(animateLoop)
+        animateTimeline(timelineManager, frameCount++)
+      }
+      animateLoop()
+    }
+  })
+
+  if (backgroundTexture) scene.background = backgroundTexture
+}
+
+onMounted(async () => {
+  setViewPanels({ showConfig: true })
+  usePanelsStore().openPanel('config')
+  registerViewConfig(route.name as string, reactiveConfig as never, configControls, rebuildMaterial)
+  if (canvas.value) await init(canvas.value)
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  clearViewPanels()
+  unregisterViewConfig(route.name as string)
+  window.removeEventListener('resize', handleResize)
+  if (canvasElement) {
+    canvasElement.removeEventListener('mousedown', handleMouseDown)
+    canvasElement.removeEventListener('mouseup', handleMouseUp)
+    canvasElement.removeEventListener('mousemove', handleMouseMove)
+  }
+  orbitControls?.dispose()
+  Object.values(textures).forEach((t) => t.dispose())
+  if (envMap) envMap.dispose()
+  if (backgroundTexture) backgroundTexture.dispose()
+  sphere = null
+  canvasElement = null
+})
+</script>
+
+<template>
+  <div class="texture-painter">
+    <canvas ref="canvas"></canvas>
+    <div class="texture-painter__strip">
+      <img
+        v-for="slot in TEXTURE_SLOTS"
+        :key="slot"
+        :src="previewUrls[slot]"
+        class="texture-painter__preview"
+        :class="{ 'texture-painter__preview--active': activeSlot === slot }"
+        :title="TEXTURE_SLOT_LABELS[slot]"
+        :alt="TEXTURE_SLOT_LABELS[slot]"
+        @click="activeSlot = slot"
+      />
+    </div>
+  </div>
+
+  <Teleport defer to="#config-panel-extra">
+    <div class="texture-painter-toolbar">
+      <p class="texture-painter-toolbar__label">Texture</p>
+      <div class="texture-painter-toolbar__slots">
+        <button
+          v-for="slot in TEXTURE_SLOTS"
+          :key="slot"
+          class="texture-painter-toolbar__slot-btn"
+          :class="{ 'texture-painter-toolbar__slot-btn--active': activeSlot === slot }"
+          @click="activeSlot = slot"
+        >
+          {{ TEXTURE_SLOT_LABELS[slot] }}
+        </button>
+      </div>
+
+      <div class="texture-painter-toolbar__palette">
+        <button
+          v-for="color in TEXTURE_SLOT_PALETTE[activeSlot]"
+          :key="color"
+          class="texture-painter-toolbar__swatch"
+          :class="{ 'texture-painter-toolbar__swatch--active': brushColor === color }"
+          :style="{ background: color }"
+          :title="color"
+          @click="brushColor = color"
+        />
+      </div>
+
+      <DrawingToolbar
+        :tool="activeTool"
+        :color="brushColor"
+        :size="brushSize"
+        :can-undo="canUndo"
+        :can-redo="canRedo"
+        :visible-tools="['brush', 'eraser', 'fill', 'rotate', 'color', 'size', 'undo', 'redo']"
+        @update:tool="activeTool = $event"
+        @update:color="brushColor = $event"
+        @update:size="brushSize = $event"
+        @undo="undoPaint"
+        @redo="redoPaint"
+      />
+
+      <div class="texture-painter-toolbar__resets">
+        <button class="texture-painter-toolbar__reset-btn" @click="resetTexture">
+          Reset texture
+        </button>
+        <button class="texture-painter-toolbar__reset-btn" @click="resetAll">Reset all</button>
+      </div>
+
+      <label class="texture-painter-toolbar__load-label">
+        Load image
+        <input
+          type="file"
+          accept="image/*"
+          class="texture-painter-toolbar__load-input"
+          @change="handleTextureLoad"
+        />
+      </label>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.texture-painter {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+}
+
+canvas {
+  display: block;
+  width: 100%;
+  height: 100vh;
+}
+
+.texture-painter__strip {
+  position: absolute;
+  bottom: var(--spacing-4);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2);
+  background: rgba(0, 0, 0, 0.55);
+  border-radius: var(--radius-md);
+  backdrop-filter: blur(4px);
+}
+
+.texture-painter__preview {
+  position: relative;
+  width: 4rem;
+  height: 4rem;
+  border-radius: var(--radius-sm);
+  border: 2px solid transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 150ms;
+  image-rendering: pixelated;
+}
+
+.texture-painter__preview:hover {
+  border-color: var(--color-muted-foreground);
+}
+
+.texture-painter__preview--active {
+  border-color: var(--color-primary);
+}
+
+.texture-painter-toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border);
+}
+
+.texture-painter-toolbar__label {
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--color-foreground);
+  margin: 0;
+}
+
+.texture-painter-toolbar__slots {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.texture-painter-toolbar__slot-btn {
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: var(--font-size-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary);
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+
+.texture-painter-toolbar__slot-btn:hover {
+  color: var(--color-foreground);
+  background: var(--color-muted);
+}
+
+.texture-painter-toolbar__slot-btn--active {
+  color: var(--color-foreground);
+  background: var(--color-muted);
+  border-color: var(--color-primary);
+}
+
+.texture-painter-toolbar__load-label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  color: var(--color-foreground);
+  cursor: pointer;
+}
+
+.texture-painter-toolbar__load-input {
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+
+.texture-painter-toolbar__load-input::file-selector-button {
+  font-size: var(--font-size-xs);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary);
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+
+.texture-painter-toolbar__palette {
+  display: flex;
+  gap: var(--spacing-1);
+  flex-wrap: wrap;
+}
+
+.texture-painter-toolbar__swatch {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--radius-sm);
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.texture-painter-toolbar__swatch--active {
+  border-color: var(--color-foreground);
+}
+
+.texture-painter-toolbar__swatch:hover {
+  opacity: 0.85;
+}
+
+.texture-painter-toolbar__resets {
+  display: flex;
+  gap: var(--spacing-1);
+}
+
+.texture-painter-toolbar__reset-btn {
+  flex: 1;
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: var(--font-size-xs);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-secondary);
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+}
+
+.texture-painter-toolbar__reset-btn:hover {
+  color: var(--color-foreground);
+  background: var(--color-muted);
+}
+</style>
diff --git a/src/views/Experiments/TexturePainter/config.ts b/src/views/Experiments/TexturePainter/config.ts
new file mode 100644
index 00000000..b39b6443
--- /dev/null
+++ b/src/views/Experiments/TexturePainter/config.ts
@@ -0,0 +1,84 @@
+export {
+  MATERIAL_TYPES,
+  MAIN_MATERIAL_TYPES,
+  MATERIAL_LABELS,
+  MATERIAL_FEATURES,
+  DEFAULT_CONFIG,
+  CONFIG_SCHEMA,
+  getEnabledMaps,
+  SPHERE_SEGMENT_COUNT,
+  PROCEDURAL_TEXTURE_SIZE,
+  BRICK_WIDTH,
+  BRICK_HEIGHT,
+  MORTAR_SIZE,
+  MORTAR_EDGE_OFFSET,
+  MORTAR_EDGE_SIZE,
+  SCENE_BG_COLOR,
+  LIGHT_INTENSITY,
+  AMBIENT_LIGHT_INTENSITY,
+  HEMISPHERE_SKY,
+  HEMISPHERE_GROUND,
+  LIGHT_ORBIT_RADIUS,
+  LIGHT_Z_POSITION,
+  ENV_SKY_COLOR,
+  ENV_GROUND_COLOR,
+  ENV_GROUND_SIZE,
+  ENV_GROUND_Y,
+  ENV_LIGHT_INTENSITY,
+  ENV_LIGHT_POSITION,
+  ENV_LIGHT_Y,
+  ENV_AMBIENT_COLOR,
+  ENV_AMBIENT_INTENSITY,
+  ENV_LIGHT_COLOR
+} from '@/views/Experiments/MaterialsList/materialsListConfig'
+
+export type { MaterialTypeName, MaterialsListConfig } from '@/views/Experiments/MaterialsList/types'
+
+export const PAINTER_SPHERE_RADIUS = 2.5
+export const PAINTER_CANVAS_SIZE = 512
+export const PAINTER_LIGHT_ORBIT_SPEED = 0.3
+export const PAINTER_TARGET_FPS = 60
+export const PAINTER_ORTHO_FRUSTUM = 5.0
+export const PAINTER_ORTHO_NEAR = 0.1
+export const PAINTER_ORTHO_FAR = 100
+export const PAINTER_ORTHO_DISTANCE = 20
+
+export const STORAGE_PREFIX = 'texture-painter'
+
+export type TextureSlotKey = 'diffuse' | 'normal' | 'roughness' | 'ao' | 'displacement' | 'emissive'
+
+export const TEXTURE_SLOTS: TextureSlotKey[] = [
+  'diffuse',
+  'normal',
+  'roughness',
+  'ao',
+  'displacement',
+  'emissive'
+]
+
+export const TEXTURE_SLOT_LABELS: Record<TextureSlotKey, string> = {
+  diffuse: 'Diffuse',
+  normal: 'Normal',
+  roughness: 'Roughness',
+  ao: 'Ambient Occlusion',
+  displacement: 'Displacement',
+  emissive: 'Emissive'
+}
+
+export const TEXTURE_SLOT_PALETTE: Record<TextureSlotKey, string[]> = {
+  diffuse: ['#cc8866', '#884433', '#ffffff', '#000000'],
+  normal: ['#8080ff', '#404080', '#ffffff'],
+  roughness: ['#ffffff', '#000000', '#888888'],
+  ao: ['#ffffff', '#000000', 'rgba(0,0,0,0.4)'],
+  displacement: ['#cccccc', '#000000', '#ffffff'],
+  emissive: ['#ff6600', '#000000', '#ff3300']
+}
+
+export const TEXTURE_SLOT_DEFAULT_COLOR: Record<TextureSlotKey, string> = {
+  diffuse: '#cc8866',
+  normal: '#8080ff',
+  roughness: '#ffffff',
+  ao: '#ffffff',
+  displacement: '#cccccc',
+  emissive: '#ff6600'
+}