chartai 0.0.11 → 1.0.0

package/dist/gpu-worker.js

@@ -1,560 +1,313 @@
-import"./chunk-bgfkgcmg.js";
-
-// src/shaders/shared.ts
-var COMPUTE_WG = 256;
-var UNIFORM_STRUCT = `struct Uniforms{width: f32,height: f32,viewMinX: f32,viewMaxX: f32,viewMinY: f32,viewMaxY: f32,pointCount: u32,isDark: f32,bgR: f32,bgG: f32,bgB: f32,pointRadius: f32,dataMinY: f32,dataMaxY: f32,dataMinX: f32,dataMaxX: f32,visibleStart: u32,visibleCount: u32,dispatchXCount: u32,maxSamplesPerPixel: u32,seriesCount: u32,_pad2: u32,_pad3: u32,_pad4: u32,};struct SeriesInfo{color: vec4f,visibleRange: vec2u,pointSize: f32,_pad: f32,};struct SeriesIndex{index: u32,_pad0: u32,_pad1: u32,_pad2: u32,};`;
-var BINARY_SEARCH = `fn lowerBound(val: f32,count: u32)-> u32{var lo = 0u;var hi = count;while(lo < hi){let mid =(lo + hi)/ 2u;if(dataX[mid] < val){lo = mid + 1u;}else{hi = mid;}}return lo;}`;
-var FXAA_SHADER = `fn l(c:vec4f)->f32{return dot(c.rgb,vec3f(.299,.587,.114))+c.a*.25;}fn fxaa(u:vec2f,t:texture_2d<f32>,s:sampler)->vec4f{let r=1./vec2f(textureDimensions(t));let rM=textureSampleLevel(t,s,u,0.);let rN=textureSampleLevel(t,s,u+vec2f(0.,-r.y),0.);let rS=textureSampleLevel(t,s,u+vec2f(0.,r.y),0.);let rE=textureSampleLevel(t,s,u+vec2f(r.x,0.),0.);let rW=textureSampleLevel(t,s,u+vec2f(-r.x,0.),0.);let lM=l(rM);let lN=l(rN);let lS=l(rS);let lE=l(rE);let lW=l(rW);let mi=min(lM,min(min(lN,lS),min(lE,lW)));let ma=max(lM,max(max(lN,lS),max(lE,lW)));let ra=ma-mi;if(ra<max(.0833,ma*.166)){return rM;}let lNW=l(textureSampleLevel(t,s,u+vec2f(-r.x,-r.y),0.));let lNE=l(textureSampleLevel(t,s,u+vec2f(r.x,-r.y),0.));let lSW=l(textureSampleLevel(t,s,u+vec2f(-r.x,r.y),0.));let lSE=l(textureSampleLevel(t,s,u+vec2f(r.x,r.y),0.));let sB=min(.35,max(0.,abs((lN+lS+lE+lW)*.25-lM)/ra-.25)*1.33);let iH=abs(lNW+lNE-2.*lN)+abs(lW+lE-2.*lM)*2.+abs(lSW+lSE-2.*lS)>=abs(lNW+lSW-2.*lW)+abs(lN+lS-2.*lM)*2.+abs(lNE+lSE-2.*lE);let l1=select(lW,lN,iH);let l2=select(lE,lS,iH);let pD=abs(l2-lM)>abs(l1-lM);let sL=select(r.x,r.y,iH);let lA=.5*(select(l1,l2,pD)+lM);let gS=max(abs(l1-lM),abs(l2-lM))*.25;var eU=u;if(iH){eU.y+=select(-.5,.5,pD)*sL;}else{eU.x+=select(-.5,.5,pD)*sL;}let eS=select(vec2f(r.x,0.),vec2f(0.,r.y),iH);var uN=eU-eS;var uP=eU+eS;var eN=l(textureSampleLevel(t,s,uN,0.))-lA;var eP=l(textureSampleLevel(t,s,uP,0.))-lA;var dN=abs(eN)>=gS;var dP=abs(eP)>=gS;for(var i=1;i<8;i++){if(!dN){uN-=eS*1.5;eN=l(textureSampleLevel(t,s,uN,0.))-lA;dN=abs(eN)>=gS;}if(!dP){uP+=eS*1.5;eP=l(textureSampleLevel(t,s,uP,0.))-lA;dP=abs(eP)>=gS;}if(dN&&dP){break;}}let dtN=select(u.x-uN.x,u.y-uN.y,iH);let dtP=select(uP.x-u.x,uP.y-u.y,iH);let eB=select(0.,.5-min(dtN,dtP)/(dtN+dtP),(lM-lA<0.)!=(select(eP<0.,eN<0.,dtN<dtP)));var fU=u;let fL=max(eB,sB);if(iH){fU.y+=select(-1.,1.,pD)*fL*sL;}else{fU.x+=select(-1.,1.,pD)*fL*sL;}return textureSampleLevel(t,s,fU,0.);}`;
-var FXAA_RENDER_SHADER = `${UNIFORM_STRUCT}${FXAA_SHADER}@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var inputTex: texture_2d<f32>;@group(0)@binding(2)var samp: sampler;struct VertexOutput{@builtin(position)pos: vec4f,@location(0)uv: vec2f,};@vertex fn vs(@builtin(vertex_index)vi: u32)-> VertexOutput{var positions = array<vec2f,4>(vec2f(-1.0,-1.0),vec2f(1.0,-1.0),vec2f(-1.0,1.0),vec2f(1.0,1.0));var uvs = array<vec2f,4>(vec2f(0.0,1.0),vec2f(1.0,1.0),vec2f(0.0,0.0),vec2f(1.0,0.0));var out: VertexOutput;out.pos = vec4f(positions[vi],0.0,1.0);out.uv = uvs[vi];return out;}@fragment fn fs(in: VertexOutput)-> @location(0)vec4f{return fxaa(in.uv,inputTex,samp);}`;
-
-// src/shaders/line.ts
-var LINE_COMPUTE_SHADER = `${UNIFORM_STRUCT}struct LineData{screenX: f32,minScreenY: f32,maxScreenY: f32,valid: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> dataX: array<f32>;@group(0)@binding(2)var<storage,read> dataY: array<f32>;@group(0)@binding(3)var<storage,read_write> lineData: array<LineData>;@group(0)@binding(4)var<storage,read> allSeries: array<SeriesInfo>;${BINARY_SEARCH}@compute @workgroup_size(${COMPUTE_WG})fn main(@builtin(global_invocation_id)id: vec3u){let outputIdx = id.x;let maxCols = u32(u.width);let count = u.pointCount;if(outputIdx >= maxCols || count == 0u){if(outputIdx < maxCols){lineData[outputIdx] = LineData(-1.0,-1.0,-1.0,0.0);}return;}let viewRangeX = u.viewMaxX - u.viewMinX;let viewRangeY = u.viewMaxY - u.viewMinY;if(viewRangeX < 0.0001 || viewRangeY < 0.0001){lineData[outputIdx] = LineData(-1.0,-1.0,-1.0,0.0);return;}let relPx = f32(outputIdx);let pixelMinX = u.viewMinX +(relPx / u.width)* viewRangeX;let pixelMaxX = u.viewMinX +((relPx + 1.0)/ u.width)* viewRangeX;let startIdx = lowerBound(pixelMinX,count);var endIdx = lowerBound(pixelMaxX,count);endIdx = min(endIdx,count);let centerX =(pixelMinX + pixelMaxX)* 0.5;if(startIdx >= endIdx){var bestIdx = startIdx;if(startIdx > 0u && startIdx < count){let distPrev = abs(dataX[startIdx - 1u] - centerX);let distCurr = abs(dataX[startIdx] - centerX);if(distPrev < distCurr){bestIdx = startIdx - 1u;}}else if(startIdx >= count && count > 0u){bestIdx = count - 1u;}if(bestIdx >= count){lineData[outputIdx] = LineData(-1.0,-1.0,-1.0,0.0);return;}let y = dataY[bestIdx];let normY =(y - u.viewMinY)/ viewRangeY;let screenY = 1.0 - normY;let normX =(dataX[bestIdx] - u.viewMinX)/ viewRangeX;let screenX = normX;lineData[outputIdx] = LineData(screenX,screenY,screenY,1.0);return;}var dataMinY = dataY[startIdx];var dataMaxY = dataY[startIdx];let rangeCount = endIdx - startIdx;let maxSamples = u.maxSamplesPerPixel;if(maxSamples > 1u && rangeCount > maxSamples){let stride = f32(rangeCount - 1u)/ f32(maxSamples - 1u);for(var s = 0u;s < maxSamples;s++){let idx = startIdx + u32(f32(s)* stride);if(idx < endIdx){let y = dataY[idx];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let lastY = dataY[endIdx - 1u];dataMinY = min(dataMinY,lastY);dataMaxY = max(dataMaxY,lastY);}else{for(var i = startIdx + 1u;i < endIdx;i++){let y = dataY[i];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let normX =(centerX - u.viewMinX)/ viewRangeX;let screenX = normX;let normMaxY =(dataMaxY - u.viewMinY)/ viewRangeY;let normMinY =(dataMinY - u.viewMinY)/ viewRangeY;let minScreenY = 1.0 - normMaxY;let maxScreenY = 1.0 - normMinY;lineData[outputIdx] = LineData(screenX,minScreenY,maxScreenY,1.0);}`;
-var LINE_RENDER_SHADER = `${UNIFORM_STRUCT}struct LineData{screenX: f32,minScreenY: f32,maxScreenY: f32,valid: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> lineData: array<LineData>;@group(0)@binding(2)var<storage,read> allSeries: array<SeriesInfo>;struct VertexOutput{@builtin(position)pos: vec4f,@location(0)alpha: f32,@location(1)@interpolate(flat)seriesIdx: u32,};@vertex fn vs(@builtin(vertex_index)vi: u32,@builtin(instance_index)series_idx: u32)-> VertexOutput{var out: VertexOutput;out.seriesIdx = series_idx;let maxCols = u32(u.width);let segIdx = vi / 2u;let endpoint = vi % 2u;if(segIdx < maxCols){let d = lineData[segIdx];let y = select(d.maxScreenY,d.minScreenY,endpoint == 0u);out.pos = vec4f(d.screenX * 2.0 - 1.0,1.0 - y * 2.0,0.0,d.valid);out.alpha = d.valid;}else{let connIdx = segIdx - maxCols;if(connIdx + 1u >= maxCols){out.pos = vec4f(0.0,0.0,0.0,0.0);out.alpha = 0.0;return out;}let d0 = lineData[connIdx];let d1 = lineData[connIdx + 1u];let segValid = min(d0.valid,d1.valid);if(endpoint == 0u){let midY =(d0.minScreenY + d0.maxScreenY)* 0.5;out.pos = vec4f(d0.screenX * 2.0 - 1.0,1.0 - midY * 2.0,0.0,segValid);}else{let midY =(d1.minScreenY + d1.maxScreenY)* 0.5;out.pos = vec4f(d1.screenX * 2.0 - 1.0,1.0 - midY * 2.0,0.0,segValid);}out.alpha = segValid;}return out;}@fragment fn fs(in: VertexOutput)-> @location(0)vec4f{if(in.alpha < 0.1){discard;}let series = allSeries[in.seriesIdx];return vec4f(series.color.rgb,1.0);}`;
-
-// src/shaders/scatter.ts
-var SCATTER_COMPUTE_SHADER = `${UNIFORM_STRUCT}@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> dataX: array<f32>;@group(0)@binding(2)var<storage,read> dataY: array<f32>;@group(0)@binding(3)var outputTex: texture_storage_2d<rgba8unorm,write>;@group(0)@binding(4)var<storage,read> allSeries: array<SeriesInfo>;@group(0)@binding(5)var<uniform> seriesIdx: SeriesIndex;@compute @workgroup_size(${COMPUTE_WG})fn main(@builtin(global_invocation_id)id: vec3u){let series = allSeries[seriesIdx.index];let visStart = series.visibleRange.x;let visCount = series.visibleRange.y;let localIdx = id.y * u.dispatchXCount + id.x;if(localIdx >= visCount){return;}let idx = visStart + localIdx;let count = u.pointCount;if(idx >= count){return;}let x = dataX[idx];let y = dataY[idx];if(y < u.viewMinY || y > u.viewMaxY){return;}let width = u32(u.width);let height = u32(u.height);let rangeX = u.viewMaxX - u.viewMinX;let rangeY = u.viewMaxY - u.viewMinY;if(rangeX < 0.0001 || rangeY < 0.0001){return;}let normX =(x - u.viewMinX)/ rangeX;let normY =(y - u.viewMinY)/ rangeY;let screenX = normX;let screenY = 1.0 - normY;let pixelX = i32(screenX * f32(width));let pixelY = i32(screenY * f32(height));if(idx > visStart){let prevX = dataX[idx - 1u];let prevY = dataY[idx - 1u];let prevNormX =(prevX - u.viewMinX)/ rangeX;let prevNormY =(prevY - u.viewMinY)/ rangeY;let prevPx = i32(prevNormX * f32(width));let prevPy = i32((1.0 - prevNormY)* f32(height));if(pixelX == prevPx && pixelY == prevPy){return;}}let iWidth = i32(width);let iHeight = i32(height);if(pixelX < 0 || pixelX >= iWidth){return;}if(pixelY < 0 || pixelY >= iHeight){return;}let color = series.color;let radius = i32(series.pointSize);for(var dy = -radius;dy <= radius;dy++){for(var dx = -radius;dx <= radius;dx++){if(dx * dx + dy * dy > radius * radius){continue;}let px = pixelX + dx;let py = pixelY + dy;if(px >= 0 && px < iWidth && py >= 0 && py < iHeight){textureStore(outputTex,vec2i(px,py),color);}}}}`;
-
-// src/shaders/box.ts
-var BOX_COMPUTE_SHADER = `${UNIFORM_STRUCT}struct BarData{screenX: f32,minY: f32,maxY: f32,barWidth: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> dataX: array<f32>;@group(0)@binding(2)var<storage,read> dataY: array<f32>;@group(0)@binding(3)var<storage,read_write> barData: array<BarData>;@group(0)@binding(4)var<storage,read> allSeries: array<SeriesInfo>;@group(0)@binding(5)var<uniform> seriesIdx: SeriesIndex;${BINARY_SEARCH}fn barHalfWidth(idx: u32,count: u32)-> f32{if(count <= 1u){return(u.viewMaxX - u.viewMinX)* 0.4;}var spacing: f32;if(idx == 0u){spacing = dataX[1u] - dataX[0u];}else if(idx >= count - 1u){spacing = dataX[count - 1u] - dataX[count - 2u];}else{spacing = min(dataX[idx + 1u] - dataX[idx],dataX[idx] - dataX[idx - 1u]);}let seriesCount = max(1u,u.seriesCount);return(spacing * 0.4)/ f32(seriesCount);}@compute @workgroup_size(${COMPUTE_WG})fn main(@builtin(global_invocation_id)id: vec3u){let outputIdx = id.x;let maxCols = u32(u.width);let count = u.pointCount;if(outputIdx >= maxCols || count == 0u){if(outputIdx < maxCols){barData[outputIdx] = BarData(0.0,0.0,0.0,0.0);}return;}let viewRangeX = u.viewMaxX - u.viewMinX;let viewRangeY = u.viewMaxY - u.viewMinY;if(viewRangeX < 0.0001 || viewRangeY < 0.0001){barData[outputIdx] = BarData(0.0,0.0,0.0,0.0);return;}let relPx = f32(outputIdx);let pixelMinX = u.viewMinX +(relPx / u.width)* viewRangeX;let pixelMaxX = u.viewMinX +((relPx + 1.0)/ u.width)* viewRangeX;let startIdx = lowerBound(pixelMinX,count);var endIdx = lowerBound(pixelMaxX,count);endIdx = min(endIdx,count);let centerX =(pixelMinX + pixelMaxX)* 0.5;let onePixel = 1.0 / u.width;if(startIdx >= endIdx){var hit = false;var bestX: f32 = 0.0;var bestY: f32 = 0.0;var bestHW: f32 = 0.0;var bestDist: f32 = 1e10;if(startIdx < count){let bx = dataX[startIdx];let hw = barHalfWidth(startIdx,count);if(pixelMinX < bx + hw && pixelMaxX > bx - hw){let d = abs(bx - centerX);bestX = bx;bestY = dataY[startIdx];bestHW = hw;bestDist = d;hit = true;}}if(startIdx > 0u){let prev = startIdx - 1u;let bx = dataX[prev];let hw = barHalfWidth(prev,count);if(pixelMinX < bx + hw && pixelMaxX > bx - hw){let d = abs(bx - centerX);if(d < bestDist){bestX = bx;bestY = dataY[prev];bestHW = hw;bestDist = d;}hit = true;}}if(!hit){barData[outputIdx] = BarData(0.0,0.0,0.0,0.0);return;}let seriesCount = max(1u,u.seriesCount);let barOffset =(f32(seriesIdx.index)- f32(seriesCount - 1u)* 0.5)*(bestHW * 2.0);let offsetX = bestX + barOffset;let normX =(offsetX - u.viewMinX)/ viewRangeX;let fullWidth = bestHW * 2.0 / viewRangeX;let gapSize = max(onePixel,fullWidth * 0.05);let bw = max(fullWidth - gapSize,onePixel);barData[outputIdx] = BarData(normX,bestY,bestY,bw);return;}var dataMinY = dataY[startIdx];var dataMaxY = dataY[startIdx];let rangeCount = endIdx - startIdx;let maxSamples = u.maxSamplesPerPixel;if(maxSamples > 0u && rangeCount > maxSamples){let stride = f32(rangeCount - 1u)/ f32(maxSamples - 1u);for(var s = 0u;s < maxSamples;s++){let idx = startIdx + u32(f32(s)* stride);if(idx < endIdx){let y = dataY[idx];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let lastY = dataY[endIdx - 1u];dataMinY = min(dataMinY,lastY);dataMaxY = max(dataMaxY,lastY);}else{for(var i = startIdx + 1u;i < endIdx;i++){let y = dataY[i];dataMinY = min(dataMinY,y);dataMaxY = max(dataMaxY,y);}}let hw = barHalfWidth(startIdx,count);let fullWidth = hw * 2.0 / viewRangeX;let gapSize = max(onePixel,fullWidth * 0.05);let bw = max(fullWidth - gapSize,onePixel);let seriesCount = max(1u,u.seriesCount);let barOffset =(f32(seriesIdx.index)- f32(seriesCount - 1u)* 0.5)*(hw * 2.0);let dataX_centered = dataX[startIdx] + barOffset;let normX =(dataX_centered - u.viewMinX)/ viewRangeX;barData[outputIdx] = BarData(normX,dataMinY,dataMaxY,bw);}`;
-var BOX_RENDER_SHADER = `${UNIFORM_STRUCT}struct BarData{screenX: f32,minY: f32,maxY: f32,barWidth: f32,};@group(0)@binding(0)var<uniform> u: Uniforms;@group(0)@binding(1)var<storage,read> barData: array<BarData>;@group(0)@binding(2)var<storage,read> allSeries: array<SeriesInfo>;struct VertexOutput{@builtin(position)pos: vec4f,@location(0)normY: f32,@location(1)@interpolate(flat)seriesIdx: u32,};@vertex fn vs(@builtin(vertex_index)vi: u32,@builtin(instance_index)series_idx: u32)-> VertexOutput{var out: VertexOutput;out.seriesIdx = series_idx;let maxCols = u32(u.width);let colIdx = vi / 6u;let vertexType = vi % 6u;if(colIdx >= maxCols){out.pos = vec4f(0.0,0.0,0.0,0.0);out.normY = 0.0;return out;}let bd = barData[colIdx];if(bd.barWidth <= 0.0){out.pos = vec4f(0.0,0.0,0.0,0.0);out.normY = 0.0;return out;}let viewRangeY = u.viewMaxY - u.viewMinY;let safeRangeY = select(viewRangeY,1.0,viewRangeY < 0.0001);let normMinY =(min(bd.minY,0.0)- u.viewMinY)/ safeRangeY;let normMaxY =(max(bd.maxY,0.0)- u.viewMinY)/ safeRangeY;let top = 1.0 - normMaxY;let bottom = 1.0 - normMinY;let halfW = bd.barWidth * 0.5;let left = bd.screenX - halfW;let right = bd.screenX + halfW;var positions = array<vec2f,6>(vec2f(left,bottom),vec2f(right,bottom),vec2f(left,top),vec2f(left,top),vec2f(right,bottom),vec2f(right,top));let screenPos = positions[vertexType];let clipX = screenPos.x * 2.0 - 1.0;let clipY = 1.0 - screenPos.y * 2.0;out.pos = vec4f(clipX,clipY,0.0,1.0);out.normY = normMaxY;return out;}@fragment fn fs(in: VertexOutput)-> @location(0)vec4f{let series = allSeries[in.seriesIdx];return vec4f(series.color.rgb,0.85);}`;
+import {
+  BLIT_SHADER
+} from "./chunk-0jepamv9.js";
+import {
+  E,
+  M
+} from "./chunk-93yrr7er.js";
+import"./chunk-m17t3vjq.js";
 
 // src/gpu-worker.ts
 var device;
 var canvasFormat;
 var charts = new Map;
+var renderers = new Map;
 var isDark = false;
-var layouts = {};
-var pipelines = {};
+var blitPipeline;
+var blitLayout;
+var blitSampler;
 var frameCount = 0;
 var lastRenderMs = 0;
 var renderScheduled = false;
 var statsInterval = null;
-var uniformStagingBuffer = new ArrayBuffer(112);
+var uniformStagingBuffer = new ArrayBuffer(64);
 var uniformStagingF32 = new Float32Array(uniformStagingBuffer);
 var uniformStagingU32 = new Uint32Array(uniformStagingBuffer);
-var fxaaSampler;
-var writeAllSeriesData = (chart, perSeriesPointSize) => {
+function parseUsageFlags(usages) {
+  let flags = GPUBufferUsage.COPY_DST;
+  for (const u of usages) {
+    switch (u.toUpperCase()) {
+      case "STORAGE":
+        flags |= GPUBufferUsage.STORAGE;
+        break;
+      case "VERTEX":
+        flags |= GPUBufferUsage.VERTEX;
+        break;
+      case "UNIFORM":
+        flags |= GPUBufferUsage.UNIFORM;
+        break;
+      case "COPY_SRC":
+        flags |= GPUBufferUsage.COPY_SRC;
+        break;
+      case "COPY_DST":
+        flags |= GPUBufferUsage.COPY_DST;
+        break;
+      case "INDEX":
+        flags |= GPUBufferUsage.INDEX;
+        break;
+      case "INDIRECT":
+        flags |= GPUBufferUsage.INDIRECT;
+        break;
+    }
+  }
+  return flags;
+}
+function getBindingLayoutEntry(source, write, passType) {
+  const visibility = passType === "compute" ? GPUShaderStage.COMPUTE : GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT;
+  if (source === "uniforms" || source === "custom-uniforms" || source === "series-index") {
+    return { visibility, buffer: { type: "uniform" } };
+  }
+  if (source === "render-target") {
+    if (write) {
+      return {
+        visibility: GPUShaderStage.COMPUTE,
+        storageTexture: { access: "write-only", format: "rgba8unorm" }
+      };
+    }
+    return { visibility, texture: { sampleType: "float" } };
+  }
+  if (write) {
+    return { visibility, buffer: { type: "storage" } };
+  }
+  return { visibility, buffer: { type: "read-only-storage" } };
+}
+function getBindingResource(source, write, chart, series, renderer) {
+  switch (source) {
+    case "uniforms":
+      return { buffer: chart.uniformBuffer };
+    case "custom-uniforms":
+      return { buffer: chart.customUniformBuffer };
+    case "series-info":
+      return { buffer: chart.seriesStorageBuffer };
+    case "render-target":
+      return chart.outputTextureView;
+    case "x-data":
+      return { buffer: series.dataX };
+    case "y-data":
+      return { buffer: series.dataY };
+    case "series-index":
+      return { buffer: series.seriesIndexBuffer };
+  }
+  if (source.endsWith("-data")) {
+    const field = source.slice(0, -5);
+    return { buffer: series.extraBuffers.get(field) };
+  }
+  const bufDef = renderer.config.bufferDefs.find((b) => b.name === source);
+  if (bufDef?.perSeries) {
+    return { buffer: series.seriesBuffers.get(source) };
+  }
+  return { buffer: chart.chartBuffers.get(source) };
+}
+function compileRenderer(config) {
+  const pipelines = new Map;
+  const passLayouts = new Map;
+  for (let passIdx = 0;passIdx < config.passes.length; passIdx++) {
+    const pass = config.passes[passIdx];
+    const layoutEntries = pass.bindings.map((b) => ({
+      binding: b.binding,
+      ...getBindingLayoutEntry(b.source, b.write, pass.type)
+    }));
+    const layout = device.createBindGroupLayout({ entries: layoutEntries });
+    passLayouts.set(`pass-${passIdx}`, layout);
+    const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [layout] });
+    const shaderModule = device.createShaderModule({ code: config.shaders[pass.shader] });
+    if (pass.type === "compute") {
+      pipelines.set(`pass-${passIdx}`, device.createComputePipeline({
+        layout: pipelineLayout,
+        compute: { module: shaderModule, entryPoint: "main" }
+      }));
+    } else {
+      pipelines.set(`pass-${passIdx}`, device.createRenderPipeline({
+        layout: pipelineLayout,
+        vertex: { module: shaderModule, entryPoint: "vs" },
+        fragment: {
+          module: shaderModule,
+          entryPoint: "fs",
+          targets: [{ format: "rgba8unorm", blend: pass.blend }]
+        },
+        primitive: { topology: pass.topology ?? "triangle-list" }
+      }));
+    }
+  }
+  return { config, pipelines, passLayouts };
+}
+function writeAllSeriesData(chart) {
   if (!chart.seriesStorageBuffer || chart.series.length === 0)
     return;
   const data = new Float32Array(chart.series.length * 8);
   const dataU32 = new Uint32Array(data.buffer);
   for (let i = 0;i < chart.series.length; i++) {
     const s = chart.series[i];
-    const offset = i * 8;
-    data[offset + 0] = s.colorR;
-    data[offset + 1] = s.colorG;
-    data[offset + 2] = s.colorB;
-    data[offset + 3] = 1;
-    dataU32[offset + 4] = s.visibleStart;
-    dataU32[offset + 5] = s.visibleCount;
-    data[offset + 6] = perSeriesPointSize?.[i] ?? chart.pointSize;
-    data[offset + 7] = 0;
+    const off = i * 8;
+    data[off + 0] = s.colorR;
+    data[off + 1] = s.colorG;
+    data[off + 2] = s.colorB;
+    data[off + 3] = 1;
+    dataU32[off + 4] = s.visibleStart;
+    dataU32[off + 5] = s.visibleCount;
   }
   device.queue.writeBuffer(chart.seriesStorageBuffer, 0, data);
-};
-var writeUniforms = (chart, series, seriesIndex, pointSize) => {
+}
+function writeUniforms(chart, series) {
   const f32 = uniformStagingF32;
   const u32 = uniformStagingU32;
-  const rx = chart.maxX - chart.minX, ry = chart.maxY - chart.minY;
+  const rx = chart.maxX - chart.minX;
+  const ry = chart.maxY - chart.minY;
   const bg = chart.bgColor ?? (isDark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
-  f32.set([
-    chart.width,
-    chart.height,
-    chart.minX + chart.panX * rx,
-    chart.minX + chart.panX * rx + rx / chart.zoomX,
-    chart.minY + chart.panY * ry,
-    chart.minY + chart.panY * ry + ry / chart.zoomY
-  ], 0);
+  f32[0] = chart.width;
+  f32[1] = chart.height;
+  f32[2] = chart.minX + chart.panX * rx;
+  f32[3] = chart.minX + chart.panX * rx + rx / chart.zoomX;
+  f32[4] = chart.minY + chart.panY * ry;
+  f32[5] = chart.minY + chart.panY * ry + ry / chart.zoomY;
   u32[6] = series.pointCount;
-  f32.set([
-    isDark ? 1 : 0,
-    ...bg,
-    pointSize ?? chart.pointSize,
-    chart.minY,
-    chart.maxY,
-    chart.minX,
-    chart.maxX
-  ], 7);
-  u32[16] = series.visibleStart;
-  u32[17] = series.visibleCount;
-  u32[18] = 0;
-  u32[19] = chart.maxSamplesPerPixel;
-  u32[20] = chart.series.length;
+  u32[7] = chart.series.length;
+  u32[8] = isDark ? 1 : 0;
+  f32[9] = bg[0];
+  f32[10] = bg[1];
+  f32[11] = bg[2];
+  f32[12] = chart.minX;
+  f32[13] = chart.maxX;
+  f32[14] = chart.minY;
+  f32[15] = chart.maxY;
   device.queue.writeBuffer(chart.uniformBuffer, 0, uniformStagingBuffer);
-};
-var createChartPipeline = (name, cShader, rShader, topology, blend) => {
-  const cMod = device.createShaderModule({ code: cShader }), rMod = device.createShaderModule({ code: rShader });
-  pipelines[`${name}Compute`] = device.createComputePipeline({
-    layout: device.createPipelineLayout({
-      bindGroupLayouts: [layouts[`${name}Compute`]]
-    }),
-    compute: { module: cMod, entryPoint: "main" }
-  });
-  pipelines[`${name}Render`] = device.createRenderPipeline({
-    layout: device.createPipelineLayout({
-      bindGroupLayouts: [layouts[`${name}Render`]]
-    }),
-    vertex: { module: rMod, entryPoint: "vs" },
-    fragment: {
-      module: rMod,
-      entryPoint: "fs",
-      targets: [{ format: "rgba8unorm", blend }]
-    },
-    primitive: { topology }
-  });
-};
-async function init() {
-  if (device)
-    return true;
-  if (!navigator.gpu) {
-    postMessage({ type: "error", message: "WebGPU not supported" });
-    return false;
-  }
-  const adapter = await navigator.gpu.requestAdapter();
-  if (!adapter) {
-    postMessage({ type: "error", message: "No GPU adapter found" });
-    return false;
-  }
-  device = await adapter.requestDevice({
-    requiredLimits: {
-      maxBufferSize: adapter.limits.maxBufferSize,
-      maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize
-    }
-  });
-  canvasFormat = navigator.gpu.getPreferredCanvasFormat();
-  device.lost.then((info) => {
-    postMessage({
-      type: "error",
-      message: `GPU device lost: ${info.reason} - ${info.message}`
-    });
-  });
-  createPipelines();
-  postMessage({ type: "gpu-ready" });
-  return true;
-}
-function createPipelines() {
-  layouts.lineCompute = device.createBindGroupLayout({
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "uniform" }
-      },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 2,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 3,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "storage" }
-      },
-      {
-        binding: 4,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      }
-    ]
-  });
-  layouts.lineRender = device.createBindGroupLayout({
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-        buffer: { type: "uniform" }
-      },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.VERTEX,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 2,
-        visibility: GPUShaderStage.FRAGMENT,
-        buffer: { type: "read-only-storage" }
-      }
-    ]
-  });
-  layouts.scatterCompute = device.createBindGroupLayout({
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "uniform" }
-      },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 2,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 3,
-        visibility: GPUShaderStage.COMPUTE,
-        storageTexture: { access: "write-only", format: "rgba8unorm" }
-      },
-      {
-        binding: 4,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 5,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "uniform" }
-      }
-    ]
-  });
-  layouts.fxaaRender = device.createBindGroupLayout({
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-        buffer: { type: "uniform" }
-      },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.FRAGMENT,
-        texture: { sampleType: "float" }
-      },
-      { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
-    ]
-  });
-  layouts.boxCompute = device.createBindGroupLayout({
-    entries: [
-      {
-        binding: 0,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "uniform" }
-      },
-      {
-        binding: 1,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 2,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 3,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "storage" }
-      },
-      {
-        binding: 4,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "read-only-storage" }
-      },
-      {
-        binding: 5,
-        visibility: GPUShaderStage.COMPUTE,
-        buffer: { type: "uniform" }
-      }
-    ]
-  });
-  layouts.boxRender = layouts.lineRender;
-  createChartPipeline("line", LINE_COMPUTE_SHADER, LINE_RENDER_SHADER, "line-list", {
-    color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
-    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
-  });
-  createChartPipeline("box", BOX_COMPUTE_SHADER, BOX_RENDER_SHADER, "triangle-list", {
-    color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
-    alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" }
-  });
-  const scatterComputeModule = device.createShaderModule({
-    code: SCATTER_COMPUTE_SHADER
-  });
-  pipelines.scatterCompute = device.createComputePipeline({
-    layout: device.createPipelineLayout({
-      bindGroupLayouts: [layouts.scatterCompute]
-    }),
-    compute: { module: scatterComputeModule, entryPoint: "main" }
-  });
-  const fxaaRenderModule = device.createShaderModule({
-    code: FXAA_RENDER_SHADER
-  });
-  pipelines.fxaaRender = device.createRenderPipeline({
-    layout: device.createPipelineLayout({
-      bindGroupLayouts: [layouts.fxaaRender]
-    }),
-    vertex: { module: fxaaRenderModule, entryPoint: "vs" },
-    fragment: {
-      module: fxaaRenderModule,
-      entryPoint: "fs",
-      targets: [{ format: canvasFormat }]
-    },
-    primitive: { topology: "triangle-strip" }
-  });
-  fxaaSampler = device.createSampler({
-    magFilter: "linear",
-    minFilter: "linear"
-  });
 }
-function createChart(id, canvas, type, pointSize = 3, maxSamplesPerPixel = 0, bgColor = null) {
-  const ctx = device ? canvas.getContext("webgpu") : null;
-  if (!ctx) {
-    postMessage({
-      type: "error",
-      message: `Failed to initialize WebGPU context: ${id}`
-    });
+function writeCustomUniforms(chart, config) {
+  if (!chart.customUniformBuffer || config.uniformDefs.length === 0)
     return;
+  const n = config.uniformDefs.length;
+  const byteCount = Math.ceil(n * 4 / 16) * 16;
+  const buffer = new ArrayBuffer(byteCount);
+  const f32 = new Float32Array(buffer);
+  const u32 = new Uint32Array(buffer);
+  for (let i = 0;i < n; i++) {
+    const def = config.uniformDefs[i];
+    const val = chart.customUniformValues[def.name] ?? def.default;
+    if (def.type === "u32")
+      u32[i] = val >>> 0;
+    else
+      f32[i] = val;
   }
-  try {
-    ctx.configure({ device, format: canvasFormat, alphaMode: "premultiplied" });
-  } catch (e) {
-    postMessage({
-      type: "error",
-      message: `Failed to configure WebGPU context: ${id}`,
-      err: e.toString()
-    });
-    return;
+  device.queue.writeBuffer(chart.customUniformBuffer, 0, buffer);
+}
+function allocateChartBuffers(chart, renderer, bufferSizes) {
+  for (const [, buf] of chart.chartBuffers)
+    buf.destroy();
+  chart.chartBuffers.clear();
+  for (const bufDef of renderer.config.bufferDefs) {
+    if (!bufDef.perSeries) {
+      const size = Math.max(16, bufferSizes[bufDef.name] ?? 16);
+      chart.chartBuffers.set(bufDef.name, device.createBuffer({ size, usage: parseUsageFlags(bufDef.usages) }));
+    }
   }
-  const limit = device.limits.maxTextureDimension2D;
-  const width = Math.min(Math.floor(Number(canvas.width) || 800), limit);
-  const height = Math.min(Math.floor(Number(canvas.height) || 400), limit);
-  const uniformBuffer = device.createBuffer({
-    size: 112,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-  });
-  const chart = {
-    id,
-    canvas,
-    ctx,
-    type,
-    visible: true,
-    pointSize,
-    maxSamplesPerPixel,
-    series: [],
-    uniformBuffer,
-    seriesStorageBuffer: null,
-    outputTexture: null,
-    outputTextureView: null,
-    fxaaBindGroup: null,
-    width,
-    height,
-    panX: 0,
-    panY: 0,
-    zoomX: 1,
-    zoomY: 1,
-    minX: 0,
-    maxX: 1,
-    minY: 0,
-    maxY: 1,
-    bgColor,
-    dirty: true
-  };
-  try {
-    createChartResources(chart);
-  } catch (e) {
-    postMessage({
-      type: "error",
-      message: `Cannot create chart ${id}: resource creation failed - ${e}`
+  if (renderer.config.uniformDefs.length > 0) {
+    if (chart.customUniformBuffer)
+      chart.customUniformBuffer.destroy();
+    const alignedSize = Math.max(16, Math.ceil(renderer.config.uniformDefs.length * 4 / 16) * 16);
+    chart.customUniformBuffer = device.createBuffer({
+      size: alignedSize,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
     });
-    return;
+    writeCustomUniforms(chart, renderer.config);
   }
-  charts.set(id, chart);
-  postMessage({ type: "chart-registered", id });
 }
-function createChartResources(chart) {
-  if (chart.outputTexture)
-    chart.outputTexture.destroy();
-  const w = Math.max(1, chart.width);
-  const h = Math.max(1, chart.height);
-  const usage = chart.type === "scatter" ? GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT : GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT;
-  chart.outputTexture = device.createTexture({
-    size: [w, h],
-    format: "rgba8unorm",
-    usage
-  });
-  chart.outputTextureView = chart.outputTexture.createView();
-  chart.fxaaBindGroup = device.createBindGroup({
-    layout: layouts.fxaaRender,
-    entries: [
-      { binding: 0, resource: { buffer: chart.uniformBuffer } },
-      { binding: 1, resource: chart.outputTextureView },
-      { binding: 2, resource: fxaaSampler }
-    ]
+function allocateSeriesBuffers(series, seriesIndex, renderer, bufferSizes) {
+  for (const [, buf] of series.seriesBuffers)
+    buf.destroy();
+  series.seriesBuffers.clear();
+  for (const bufDef of renderer.config.bufferDefs) {
+    if (bufDef.perSeries) {
+      const size = Math.max(16, bufferSizes[bufDef.name] ?? 16);
+      series.seriesBuffers.set(bufDef.name, device.createBuffer({ size, usage: parseUsageFlags(bufDef.usages) }));
+    }
+  }
+  if (series.seriesIndexBuffer)
+    series.seriesIndexBuffer.destroy();
+  series.seriesIndexBuffer = device.createBuffer({
+    size: 16,
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
   });
+  device.queue.writeBuffer(series.seriesIndexBuffer, 0, new Uint32Array([seriesIndex, 0, 0, 0]));
 }
-function buildSeriesBindGroups(chart, series, seriesIndex) {
+function buildAllBindGroups(chart, renderer) {
   if (!chart.seriesStorageBuffer)
     return;
-  if (chart.type === "scatter") {
-    if (series.seriesIndexBuffer)
-      series.seriesIndexBuffer.destroy();
-    series.seriesIndexBuffer = device.createBuffer({
-      size: 16,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    const indexData = new Uint32Array([seriesIndex, 0, 0, 0]);
-    device.queue.writeBuffer(series.seriesIndexBuffer, 0, indexData);
-    series.computeBindGroup = device.createBindGroup({
-      layout: layouts.scatterCompute,
-      entries: [
-        { binding: 0, resource: { buffer: chart.uniformBuffer } },
-        { binding: 1, resource: { buffer: series.dataX } },
-        { binding: 2, resource: { buffer: series.dataY } },
-        { binding: 3, resource: chart.outputTextureView },
-        { binding: 4, resource: { buffer: chart.seriesStorageBuffer } },
-        { binding: 5, resource: { buffer: series.seriesIndexBuffer } }
-      ]
-    });
-  } else {
-    const computeLayout = chart.type === "line" ? layouts.lineCompute : layouts.boxCompute;
-    const renderLayout = chart.type === "line" ? layouts.lineRender : layouts.boxRender;
-    if (series.lineBuffer)
-      series.lineBuffer.destroy();
-    series.lineBuffer = device.createBuffer({
-      size: chart.width * 16,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX
-    });
-    if (chart.type === "box") {
-      if (series.seriesIndexBuffer)
-        series.seriesIndexBuffer.destroy();
-      series.seriesIndexBuffer = device.createBuffer({
-        size: 16,
-        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-      });
-      const indexData = new Uint32Array([seriesIndex, 0, 0, 0]);
-      device.queue.writeBuffer(series.seriesIndexBuffer, 0, indexData);
-    }
-    const computeEntries = [
-      { binding: 0, resource: { buffer: chart.uniformBuffer } },
-      { binding: 1, resource: { buffer: series.dataX } },
-      { binding: 2, resource: { buffer: series.dataY } },
-      { binding: 3, resource: { buffer: series.lineBuffer } },
-      { binding: 4, resource: { buffer: chart.seriesStorageBuffer } }
-    ];
-    if (chart.type === "box" && series.seriesIndexBuffer) {
-      computeEntries.push({
-        binding: 5,
-        resource: { buffer: series.seriesIndexBuffer }
-      });
+  for (let si = 0;si < chart.series.length; si++) {
+    const series = chart.series[si];
+    series.passBindGroups = [];
+    for (let passIdx = 0;passIdx < renderer.config.passes.length; passIdx++) {
+      const pass = renderer.config.passes[passIdx];
+      if (!pass.perSeries) {
+        series.passBindGroups.push(null);
+        continue;
+      }
+      const layout = renderer.passLayouts.get(`pass-${passIdx}`);
+      try {
+        const entries = pass.bindings.map((b) => ({
+          binding: b.binding,
+          resource: getBindingResource(b.source, b.write, chart, series, renderer)
+        }));
+        series.passBindGroups.push(device.createBindGroup({ layout, entries }));
+      } catch (e) {
+        postMessage({ type: M.ERROR, code: E.BIND_S });
+        series.passBindGroups.push(null);
+      }
     }
-    series.computeBindGroup = device.createBindGroup({
-      layout: computeLayout,
-      entries: computeEntries
-    });
-    series.renderBindGroup = device.createBindGroup({
-      layout: renderLayout,
-      entries: [
-        { binding: 0, resource: { buffer: chart.uniformBuffer } },
-        { binding: 1, resource: { buffer: series.lineBuffer } },
-        { binding: 2, resource: { buffer: chart.seriesStorageBuffer } }
-      ]
-    });
   }
-}
-function resizeChart(chart, width, height) {
-  if (width === chart.width && height === chart.height)
-    return;
-  if (width <= 0 || height <= 0)
-    return;
-  chart.width = width;
-  chart.height = height;
-  chart.canvas.width = width;
-  chart.canvas.height = height;
-  try {
-    createChartResources(chart);
-    for (let i = 0;i < chart.series.length; i++) {
-      buildSeriesBindGroups(chart, chart.series[i], i);
+  chart.chartPassBindGroups = [];
+  for (let passIdx = 0;passIdx < renderer.config.passes.length; passIdx++) {
+    const pass = renderer.config.passes[passIdx];
+    if (pass.perSeries) {
+      chart.chartPassBindGroups.push(null);
+      continue;
+    }
+    const layout = renderer.passLayouts.get(`pass-${passIdx}`);
+    try {
+      const entries = pass.bindings.map((b) => ({
+        binding: b.binding,
+        resource: getBindingResource(b.source, b.write, chart, null, renderer)
+      }));
+      chart.chartPassBindGroups.push(device.createBindGroup({ layout, entries }));
+    } catch (e) {
+      postMessage({ type: M.ERROR, code: E.BIND_C });
+      chart.chartPassBindGroups.push(null);
     }
-  } catch (e) {
-    postMessage({
-      type: "error",
-      message: `resize failed for chart ${chart.id}: ${e}`
-    });
   }
 }
-function updateSeries(id, seriesData, bounds) {
-  const chart = charts.get(id);
-  if (!chart || !device) {
-    if (!chart)
-      postMessage({
-        type: "error",
-        message: `update-series failed: chart ${id} not found`
-      });
-    return;
-  }
-  try {
-    chart.minX = bounds.minX;
-    chart.maxX = bounds.maxX;
-    chart.minY = bounds.minY;
-    chart.maxY = bounds.maxY;
-    for (const s of chart.series) {
-      s.dataX.destroy();
-      s.dataY.destroy();
-      if (s.lineBuffer)
-        s.lineBuffer.destroy();
-      if (s.seriesIndexBuffer)
-        s.seriesIndexBuffer.destroy();
-    }
-    chart.series = [];
-    if (chart.seriesStorageBuffer)
-      chart.seriesStorageBuffer.destroy();
-    if (seriesData.length > 0) {
-      chart.seriesStorageBuffer = device.createBuffer({
-        size: Math.max(32, seriesData.length * 32),
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-      });
-    }
-    for (const sd of seriesData) {
-      const dataX = device.createBuffer({
-        size: Math.max(16, sd.dataX.byteLength),
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-      });
-      const dataY = device.createBuffer({
-        size: Math.max(16, sd.dataY.byteLength),
-        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-      });
-      device.queue.writeBuffer(dataX, 0, sd.dataX);
-      device.queue.writeBuffer(dataY, 0, sd.dataY);
-      const series = {
-        label: sd.label,
-        colorR: sd.colorR,
-        colorG: sd.colorG,
-        colorB: sd.colorB,
-        dataX,
-        dataY,
-        lineBuffer: null,
-        seriesIndexBuffer: null,
-        pointCount: sd.dataX.length,
-        visibleStart: 0,
-        visibleCount: sd.dataX.length,
-        computeBindGroup: null,
-        renderBindGroup: null
-      };
-      chart.series.push(series);
-    }
-    for (let i = 0;i < chart.series.length; i++) {
-      buildSeriesBindGroups(chart, chart.series[i], i);
+function createChartTexture(chart) {
+  if (chart.outputTexture)
+    chart.outputTexture.destroy();
+  const w = Math.max(1, chart.width);
+  const h = Math.max(1, chart.height);
+  const renderer = renderers.get(chart.rendererName);
+  let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.RENDER_ATTACHMENT;
+  if (renderer) {
+    for (const pass of renderer.config.passes) {
+      if (pass.type === "compute") {
+        for (const b of pass.bindings) {
+          if (b.source === "render-target" && b.write) {
+            usage |= GPUTextureUsage.STORAGE_BINDING;
+            break;
+          }
+        }
+      }
     }
-    postMessage({ type: "bounds-update", id, ...bounds });
-  } catch (e) {
-    postMessage({
-      type: "error",
-      message: `update-series failed for chart ${id}: ${e}`
-    });
   }
+  chart.outputTexture = device.createTexture({ size: [w, h], format: "rgba8unorm", usage });
+  chart.outputTextureView = chart.outputTexture.createView();
+  chart.blitBindGroup = device.createBindGroup({
+    layout: blitLayout,
+    entries: [
+      { binding: 0, resource: chart.outputTextureView },
+      { binding: 1, resource: blitSampler }
+    ]
+  });
 }
-function render(chart) {
-  if (!chart.ctx)
-    return;
-  if (chart.width === 0 || chart.height === 0)
+function renderChart(chart) {
+  const renderer = renderers.get(chart.rendererName);
+  if (!renderer)
     return;
-  if (chart.series.length === 0)
+  if (!chart.ctx || chart.width === 0 || chart.height === 0 || chart.series.length === 0)
     return;
   let textureView;
   try {
@@ -562,102 +315,99 @@ function render(chart) {
   } catch {
     return;
   }
-  renderChartWithFXAA(chart, textureView);
-}
-function renderChartWithFXAA(chart, textureView) {
   const encoder = device.createCommandEncoder();
-  let perSeriesPointSizes;
-  if (chart.type === "scatter") {
-    const canvasArea = chart.width * chart.height;
-    const budget = canvasArea * 4;
-    perSeriesPointSizes = chart.series.map((s) => {
-      const visCount = Math.max(1, s.visibleCount);
-      const pixelsPerPoint = Math.PI * chart.pointSize * chart.pointSize;
-      if (visCount * pixelsPerPoint > budget) {
-        return Math.max(1, Math.sqrt(budget / (visCount * Math.PI)));
-      }
-      return chart.pointSize;
-    });
-  }
-  writeAllSeriesData(chart, perSeriesPointSizes);
-  if (chart.series.length > 0) {
-    writeUniforms(chart, chart.series[0], 0);
-  }
+  writeAllSeriesData(chart);
+  if (chart.series.length > 0)
+    writeUniforms(chart, chart.series[0]);
   const clearPass = encoder.beginRenderPass({
-    colorAttachments: [
-      {
-        view: chart.outputTextureView,
-        loadOp: "clear",
-        storeOp: "store",
-        clearValue: { r: 0, g: 0, b: 0, a: 0 }
-      }
-    ]
+    colorAttachments: [{
+      view: chart.outputTextureView,
+      loadOp: "clear",
+      storeOp: "store",
+      clearValue: { r: 0, g: 0, b: 0, a: 0 }
+    }]
   });
   clearPass.end();
-  for (let seriesIndex = 0;seriesIndex < chart.series.length; seriesIndex++) {
-    const series = chart.series[seriesIndex];
-    if (series.pointCount === 0)
+  for (let passIdx = 0;passIdx < renderer.config.passes.length; passIdx++) {
+    const pass = renderer.config.passes[passIdx];
+    const pipeline = renderer.pipelines.get(`pass-${passIdx}`);
+    if (!pipeline)
       continue;
-    if (chart.type === "scatter") {
-      const MAX_WG_DIM = 65535;
-      const totalWG = Math.ceil(series.visibleCount / COMPUTE_WG);
-      const wgX = Math.min(totalWG, MAX_WG_DIM);
-      const wgY = Math.ceil(totalWG / MAX_WG_DIM);
-      const dispatchBuf = new Uint32Array([wgX * COMPUTE_WG]);
-      device.queue.writeBuffer(chart.uniformBuffer, 72, dispatchBuf);
-      const computePass = encoder.beginComputePass();
-      computePass.setPipeline(pipelines.scatterCompute);
-      computePass.setBindGroup(0, series.computeBindGroup);
-      computePass.dispatchWorkgroups(wgX, wgY);
-      computePass.end();
-    } else {
-      writeUniforms(chart, series, seriesIndex);
-      const computePipeline = chart.type === "line" ? pipelines.lineCompute : pipelines.boxCompute;
-      const computePass = encoder.beginComputePass();
-      computePass.setPipeline(computePipeline);
-      computePass.setBindGroup(0, series.computeBindGroup);
-      computePass.dispatchWorkgroups(Math.ceil(chart.width / COMPUTE_WG));
-      computePass.end();
-    }
-  }
-  if (chart.type !== "scatter") {
-    const renderPipeline = chart.type === "line" ? pipelines.lineRender : pipelines.boxRender;
-    const drawCount = chart.type === "line" ? Math.max(0, chart.width * 4 - 2) : chart.width * 6;
-    const renderPass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
+    if (pass.type === "compute") {
+      if (pass.perSeries) {
+        for (let si = 0;si < chart.series.length; si++) {
+          const series = chart.series[si];
+          if (series.pointCount === 0)
+            continue;
+          writeUniforms(chart, series);
+          const meta = chart.perSeriesPassMeta[si]?.[passIdx];
+          const dispatch = meta?.dispatch ?? { x: 1 };
+          const bg = series.passBindGroups[passIdx];
+          if (!bg)
+            continue;
+          const cp = encoder.beginComputePass();
+          cp.setPipeline(pipeline);
+          cp.setBindGroup(0, bg);
+          cp.dispatchWorkgroups(dispatch.x, dispatch.y ?? 1, dispatch.z ?? 1);
+          cp.end();
+        }
+      } else {
+        const bg = chart.chartPassBindGroups[passIdx];
+        if (!bg)
+          continue;
+        const meta = chart.perSeriesPassMeta[0]?.[passIdx];
+        const dispatch = meta?.dispatch ?? { x: 1 };
+        const cp = encoder.beginComputePass();
+        cp.setPipeline(pipeline);
+        cp.setBindGroup(0, bg);
+        cp.dispatchWorkgroups(dispatch.x, dispatch.y ?? 1, dispatch.z ?? 1);
+        cp.end();
+      }
+    } else if (pass.type === "render") {
+      const meta0 = chart.perSeriesPassMeta[0]?.[passIdx];
+      const drawCount = meta0?.draw ?? 0;
+      const rp = encoder.beginRenderPass({
+        colorAttachments: [{
           view: chart.outputTextureView,
-          loadOp: "load",
+          loadOp: pass.loadOp ?? "load",
           storeOp: "store"
+        }]
+      });
+      rp.setPipeline(pipeline);
+      if (pass.perSeries) {
+        for (let si = 0;si < chart.series.length; si++) {
+          const series = chart.series[si];
+          if (series.pointCount === 0)
+            continue;
+          const bg = series.passBindGroups[passIdx];
+          if (!bg)
+            continue;
+          rp.setBindGroup(0, bg);
+          rp.draw(drawCount, 1, 0, si);
         }
-      ]
-    });
-    renderPass.setPipeline(renderPipeline);
-    for (let seriesIndex = 0;seriesIndex < chart.series.length; seriesIndex++) {
-      const series = chart.series[seriesIndex];
-      if (series.pointCount === 0)
-        continue;
-      renderPass.setBindGroup(0, series.renderBindGroup);
-      renderPass.draw(drawCount, 1, 0, seriesIndex);
+      } else {
+        const bg = chart.chartPassBindGroups[passIdx];
+        if (bg) {
+          rp.setBindGroup(0, bg);
+          rp.draw(drawCount, 1, 0, 0);
+        }
+      }
+      rp.end();
     }
-    renderPass.end();
   }
-  const fxaaPass = encoder.beginRenderPass({
-    colorAttachments: [
-      {
-        view: textureView,
-        loadOp: "clear",
-        storeOp: "store",
-        clearValue: { r: 0, g: 0, b: 0, a: 0 }
-      }
-    ]
+  const blitPass = encoder.beginRenderPass({
+    colorAttachments: [{
+      view: textureView,
+      loadOp: "clear",
+      storeOp: "store",
+      clearValue: { r: 0, g: 0, b: 0, a: 0 }
+    }]
   });
-  fxaaPass.setPipeline(pipelines.fxaaRender);
-  if (chart.fxaaBindGroup) {
-    fxaaPass.setBindGroup(0, chart.fxaaBindGroup);
-  }
-  fxaaPass.draw(4);
-  fxaaPass.end();
+  blitPass.setPipeline(blitPipeline);
+  if (chart.blitBindGroup)
+    blitPass.setBindGroup(0, chart.blitBindGroup);
+  blitPass.draw(4);
+  blitPass.end();
   device.queue.submit([encoder.finish()]);
 }
 function scheduleRender() {
@@ -681,128 +431,305 @@ function markAllDirty() {
   if (anyVisible)
     scheduleRender();
 }
-function countActiveCharts() {
-  let n = 0;
+function renderFrame() {
+  renderScheduled = false;
+  const t0 = performance.now();
   for (const chart of charts.values()) {
+    if (chart.visible && chart.dirty && chart.width > 0) {
+      renderChart(chart);
+      chart.dirty = false;
+    }
+  }
+  lastRenderMs = performance.now() - t0;
+  frameCount++;
+}
+function countActive() {
+  let n = 0;
+  for (const chart of charts.values())
     if (chart.visible && chart.width > 0)
       n++;
-  }
   return n;
 }
-function startStats() {
-  if (statsInterval !== null)
-    return;
+async function init() {
+  if (device)
+    return true;
+  if (!navigator.gpu) {
+    postMessage({ type: M.ERROR, code: E.NO_GPU });
+    return false;
+  }
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    postMessage({ type: M.ERROR, code: E.NO_ADAPTER });
+    return false;
+  }
+  device = await adapter.requestDevice({
+    requiredLimits: {
+      maxBufferSize: adapter.limits.maxBufferSize,
+      maxStorageBufferBindingSize: adapter.limits.maxStorageBufferBindingSize
+    }
+  });
+  canvasFormat = navigator.gpu.getPreferredCanvasFormat();
+  device.lost.then((info) => {
+    postMessage({ type: M.ERROR, code: E.DEVICE_LOST });
+  });
+  blitLayout = device.createBindGroupLayout({
+    entries: [
+      { binding: 0, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: "float" } },
+      { binding: 1, visibility: GPUShaderStage.FRAGMENT, sampler: {} }
+    ]
+  });
+  const blitModule = device.createShaderModule({ code: BLIT_SHADER });
+  blitPipeline = device.createRenderPipeline({
+    layout: device.createPipelineLayout({ bindGroupLayouts: [blitLayout] }),
+    vertex: { module: blitModule, entryPoint: "vs" },
+    fragment: { module: blitModule, entryPoint: "fs", targets: [{ format: canvasFormat }] },
+    primitive: { topology: "triangle-strip" }
+  });
+  blitSampler = device.createSampler({ magFilter: "linear", minFilter: "linear" });
   statsInterval = setInterval(() => {
     postMessage({
-      type: "stats",
+      type: M.STATS,
       fps: frameCount,
       renderMs: lastRenderMs,
       totalCharts: charts.size,
-      activeCharts: countActiveCharts()
+      activeCharts: countActive()
     });
     frameCount = 0;
   }, 1000);
+  postMessage({ type: M.GPU_READY });
+  return true;
 }
-function renderFrame() {
-  renderScheduled = false;
-  const t0 = performance.now();
-  for (const chart of charts.values()) {
-    if (chart.visible && chart.dirty && chart.width > 0) {
-      render(chart);
-      chart.dirty = false;
+function destroySeriesData(series) {
+  series.dataX.destroy();
+  series.dataY.destroy();
+  for (const [, buf] of series.extraBuffers)
+    buf.destroy();
+  for (const [, buf] of series.seriesBuffers)
+    buf.destroy();
+  if (series.seriesIndexBuffer)
+    series.seriesIndexBuffer.destroy();
+}
+function processUpdateSeries(id, seriesData, bounds, bufferSizes, perSeriesPassMeta) {
+  const chart = charts.get(id);
+  if (!chart || !device)
+    return;
+  const renderer = renderers.get(chart.rendererName);
+  if (!renderer) {
+    postMessage({ type: M.ERROR, code: E.NO_RENDERER });
+    return;
+  }
+  try {
+    chart.minX = bounds.minX;
+    chart.maxX = bounds.maxX;
+    chart.minY = bounds.minY;
+    chart.maxY = bounds.maxY;
+    chart.perSeriesPassMeta = perSeriesPassMeta;
+    for (const s of chart.series)
+      destroySeriesData(s);
+    chart.series = [];
+    if (chart.seriesStorageBuffer)
+      chart.seriesStorageBuffer.destroy();
+    if (seriesData.length > 0) {
+      chart.seriesStorageBuffer = device.createBuffer({
+        size: Math.max(32, seriesData.length * 32),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
     }
+    allocateChartBuffers(chart, renderer, bufferSizes);
+    for (let i = 0;i < seriesData.length; i++) {
+      const sd = seriesData[i];
+      const dataX = device.createBuffer({
+        size: Math.max(16, sd.dataX.byteLength),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
+      const dataY = device.createBuffer({
+        size: Math.max(16, sd.dataY.byteLength),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+      });
+      device.queue.writeBuffer(dataX, 0, sd.dataX);
+      device.queue.writeBuffer(dataY, 0, sd.dataY);
+      const extraBuffers = new Map;
+      for (const [key, arr] of Object.entries(sd.extra ?? {})) {
+        const buf = device.createBuffer({
+          size: Math.max(16, arr.byteLength),
+          usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+        });
+        device.queue.writeBuffer(buf, 0, arr);
+        extraBuffers.set(key, buf);
+      }
+      const series = {
+        label: sd.label,
+        colorR: sd.colorR,
+        colorG: sd.colorG,
+        colorB: sd.colorB,
+        dataX,
+        dataY,
+        extraBuffers,
+        seriesBuffers: new Map,
+        seriesIndexBuffer: null,
+        pointCount: sd.dataX.length,
+        visibleStart: 0,
+        visibleCount: sd.dataX.length,
+        passBindGroups: []
+      };
+      chart.series.push(series);
+      allocateSeriesBuffers(series, i, renderer, bufferSizes);
+    }
+    buildAllBindGroups(chart, renderer);
+  } catch (e) {
+    postMessage({ type: M.ERROR, code: E.UPDATE });
   }
-  lastRenderMs = performance.now() - t0;
-  frameCount++;
 }
 self.onmessage = async (e) => {
   const { type, ...data } = e.data;
   switch (type) {
-    case "init":
+    case M.INIT:
       isDark = data.isDark || false;
-      if (await init()) {
-        startStats();
-      }
+      await init();
       break;
-    case "theme":
+    case M.THEME:
       isDark = data.isDark;
       markAllDirty();
       break;
-    case "register-chart":
-      createChart(data.id, data.canvas, data.chartType || "scatter", data.pointSize ?? 3, data.maxSamplesPerPixel ?? 100, data.bgColor ?? null);
-      {
-        const chart = charts.get(data.id);
-        if (chart)
-          markDirty(chart);
+    case M.REGISTER_RENDERER: {
+      if (!device) {
+        postMessage({ type: M.ERROR, code: E.NOT_READY });
+        break;
+      }
+      const config = {
+        name: data.name,
+        shaders: data.shaders,
+        passes: data.passes,
+        bufferDefs: data.bufferDefs ?? [],
+        uniformDefs: data.uniformDefs ?? []
+      };
+      try {
+        renderers.set(data.name, compileRenderer(config));
+      } catch (e2) {
+        postMessage({ type: M.ERROR, code: E.COMPILE });
       }
       break;
-    case "unregister-chart": {
+    }
+    case M.REGISTER_CHART: {
+      if (!device)
+        break;
+      const ctx = data.canvas.getContext("webgpu");
+      if (!ctx) {
+        postMessage({ type: M.ERROR, code: E.CTX_GET });
+        break;
+      }
+      try {
+        ctx.configure({ device, format: canvasFormat, alphaMode: "premultiplied" });
+      } catch (e2) {
+        postMessage({ type: M.ERROR, code: E.CTX_CFG });
+        break;
+      }
+      const limit = device.limits.maxTextureDimension2D;
+      const w = Math.min(Math.max(1, Math.floor(Number(data.canvas.width) || 800)), limit);
+      const h = Math.min(Math.max(1, Math.floor(Number(data.canvas.height) || 400)), limit);
+      const chart = {
+        id: data.id,
+        canvas: data.canvas,
+        ctx,
+        rendererName: data.rendererName,
+        visible: true,
+        series: [],
+        uniformBuffer: device.createBuffer({
+          size: 64,
+          usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+        }),
+        seriesStorageBuffer: null,
+        outputTexture: null,
+        outputTextureView: null,
+        blitBindGroup: null,
+        chartBuffers: new Map,
+        customUniformBuffer: null,
+        customUniformValues: data.customUniformValues ?? {},
+        chartPassBindGroups: [],
+        perSeriesPassMeta: data.perSeriesPassMeta ?? [],
+        width: w,
+        height: h,
+        panX: 0,
+        panY: 0,
+        zoomX: 1,
+        zoomY: 1,
+        minX: 0,
+        maxX: 1,
+        maxY: 1,
+        minY: 0,
+        bgColor: data.bgColor ?? null,
+        dirty: true
+      };
+      try {
+        createChartTexture(chart);
+      } catch (e2) {
+        postMessage({ type: M.ERROR, code: E.TEX });
+        break;
+      }
+      charts.set(data.id, chart);
+      break;
+    }
+    case M.UNREGISTER_CHART: {
       const chart = charts.get(data.id);
       if (chart) {
         try {
           chart.ctx.unconfigure();
-        } catch {
-        }
+        } catch {}
         chart.uniformBuffer.destroy();
         if (chart.seriesStorageBuffer)
           chart.seriesStorageBuffer.destroy();
         if (chart.outputTexture)
           chart.outputTexture.destroy();
-        for (const s of chart.series) {
-          s.dataX.destroy();
-          s.dataY.destroy();
-          if (s.lineBuffer)
-            s.lineBuffer.destroy();
-          if (s.seriesIndexBuffer)
-            s.seriesIndexBuffer.destroy();
-        }
+        if (chart.customUniformBuffer)
+          chart.customUniformBuffer.destroy();
+        for (const [, buf] of chart.chartBuffers)
+          buf.destroy();
+        for (const s of chart.series)
+          destroySeriesData(s);
         charts.delete(data.id);
       }
-      postMessage({ type: "chart-unregistered", id: data.id });
-      break;
-    }
-    case "set-point-size": {
-      const chart = charts.get(data.id);
-      if (chart) {
-        chart.pointSize = Math.max(1, Math.min(8, data.pointSize));
-        markDirty(chart);
-      }
-      break;
-    }
-    case "set-max-samples": {
-      const chart = charts.get(data.id);
-      if (chart) {
-        chart.maxSamplesPerPixel = Math.max(0, data.maxSamplesPerPixel | 0);
-        markDirty(chart);
-      }
-      break;
-    }
-    case "set-style": {
-      const chart = charts.get(data.id);
-      if (chart) {
-        if (data.bgColor !== undefined)
-          chart.bgColor = data.bgColor;
-        markDirty(chart);
-      }
       break;
     }
-    case "update-series": {
-      updateSeries(data.id, data.series, data.bounds);
+    case M.UPDATE_SERIES: {
+      processUpdateSeries(data.id, data.series, data.bounds, data.bufferSizes ?? {}, data.perSeriesPassMeta ?? []);
       const chart = charts.get(data.id);
       if (chart)
         markDirty(chart);
       break;
     }
-    case "set-visibility": {
+    case M.RESIZE: {
       const chart = charts.get(data.id);
-      if (chart) {
-        chart.visible = data.visible;
-        if (data.visible && chart.dirty)
-          scheduleRender();
+      if (!chart || data.width <= 0 || data.height <= 0)
+        break;
+      const limit = device.limits.maxTextureDimension2D;
+      const w = Math.min(data.width, limit);
+      const h = Math.min(data.height, limit);
+      if (w === chart.width && h === chart.height)
+        break;
+      chart.width = w;
+      chart.height = h;
+      chart.canvas.width = w;
+      chart.canvas.height = h;
+      if (data.perSeriesPassMeta?.length > 0) {
+        chart.perSeriesPassMeta = data.perSeriesPassMeta;
+      }
+      const renderer = renderers.get(chart.rendererName);
+      try {
+        createChartTexture(chart);
+        if (renderer && data.bufferSizes) {
+          allocateChartBuffers(chart, renderer, data.bufferSizes);
+          for (let i = 0;i < chart.series.length; i++) {
+            allocateSeriesBuffers(chart.series[i], i, renderer, data.bufferSizes);
+          }
+          buildAllBindGroups(chart, renderer);
+        }
+      } catch (e2) {
+        postMessage({ type: M.ERROR, code: E.RESIZE });
       }
+      markDirty(chart);
       break;
     }
-    case "view-transform": {
+    case M.VIEW_TRANSFORM: {
       const chart = charts.get(data.id);
       if (chart) {
         chart.panX = data.panX;
@@ -813,15 +740,7 @@ self.onmessage = async (e) => {
       }
       break;
     }
-    case "resize": {
-      const chart = charts.get(data.id);
-      if (chart && data.width > 0 && data.height > 0) {
-        resizeChart(chart, data.width, data.height);
-        markDirty(chart);
-      }
-      break;
-    }
-    case "batch-view-transform": {
+    case M.BATCH_VIEW_TRANSFORM: {
       const zX = Math.max(0.1, Math.min(1e6, data.zoomX));
       const zY = Math.max(0.1, Math.min(1e6, data.zoomY));
       for (const t of data.transforms) {
@@ -837,14 +756,34 @@ self.onmessage = async (e) => {
       scheduleRender();
       break;
     }
-    case "sync-view":
-      for (const chart of charts.values()) {
-        chart.panX = data.panX;
-        chart.panY = data.panY;
-        chart.zoomX = data.zoomX;
-        chart.zoomY = data.zoomY;
+    case M.SET_VISIBILITY: {
+      const chart = charts.get(data.id);
+      if (chart) {
+        chart.visible = data.visible;
+        if (data.visible && chart.dirty)
+          scheduleRender();
       }
-      markAllDirty();
       break;
+    }
+    case M.SET_STYLE: {
+      const chart = charts.get(data.id);
+      if (chart) {
+        if (data.bgColor !== undefined)
+          chart.bgColor = data.bgColor;
+        markDirty(chart);
+      }
+      break;
+    }
+    case M.SET_UNIFORMS: {
+      const chart = charts.get(data.id);
+      if (!chart)
+        break;
+      Object.assign(chart.customUniformValues, data.values);
+      const renderer = renderers.get(chart.rendererName);
+      if (renderer)
+        writeCustomUniforms(chart, renderer.config);
+      markDirty(chart);
+      break;
+    }
   }
 };