Merge pull request #21012 from calixteman/shading_function

Add support for function-based shadings (bug 1254066)

Author: calixteman

src/core/obj_bin_transform_core.js

@@ -294,7 +294,7 @@ function compilePatternInfo(ir) {
   }
 
   const nCoord = Math.floor(coords.length / 2);
-  const nColor = Math.floor(colors.length / 3);
+  const nColor = Math.floor(colors.length / 4);
   const nStop = colorStops.length;
   const nFigures = figures.length;
 
@@ -312,7 +312,7 @@ function compilePatternInfo(ir) {
   const byteLen =
     20 +
     nCoord * 8 +
-    nColor * 3 +
+    nColor * 4 +
     nStop * 8 +
     (bbox ? 16 : 0) +
     (background ? 3 : 0) +
@@ -336,7 +336,7 @@ function compilePatternInfo(ir) {
   offset += nCoord * 8;
 
   u8data.set(colors, offset);
-  offset += nColor * 3;
+  offset += nColor * 4;
 
   for (const [pos, hex] of colorStops) {
     dataView.setFloat32(offset, pos, true);

src/core/pattern.js

@@ -29,6 +29,7 @@ import {
   isNumberArray,
   lookupMatrix,
   lookupNormalRect,
+  lookupRect,
   MissingDataException,
 } from "./core_utils.js";
 import { BaseStream } from "./base_stream.js";
@@ -63,6 +64,16 @@ class Pattern {
 
     try {
       switch (type) {
+        case ShadingType.FUNCTION_BASED:
+          prepareWebGPU?.();
+          return new FunctionBasedShading(
+            dict,
+            xref,
+            res,
+            pdfFunctionFactory,
+            globalColorSpaceCache,
+            localColorSpaceCache
+          );
         case ShadingType.AXIAL:
         case ShadingType.RADIAL:
           return new RadialAxialShading(
@@ -312,6 +323,183 @@ class RadialAxialShading extends BaseShading {
   }
 }
 
+// Helpers for MeshShading, which builds its mesh from a stream.
+function meshUpdateBounds(self) {
+  let minX = self.coords[0][0],
+    minY = self.coords[0][1],
+    maxX = minX,
+    maxY = minY;
+  for (let i = 1, ii = self.coords.length; i < ii; i++) {
+    const x = self.coords[i][0],
+      y = self.coords[i][1];
+    minX = minX > x ? x : minX;
+    minY = minY > y ? y : minY;
+    maxX = maxX < x ? x : maxX;
+    maxY = maxY < y ? y : maxY;
+  }
+  self.bounds = [minX, minY, maxX, maxY];
+}
+
+function meshPackData(self) {
+  let i, j, ii;
+
+  const coords = self.coords;
+  const coordsPacked = new Float32Array(coords.length * 2);
+  for (i = 0, j = 0, ii = coords.length; i < ii; i++) {
+    const xy = coords[i];
+    coordsPacked[j++] = xy[0];
+    coordsPacked[j++] = xy[1];
+  }
+  self.coords = coordsPacked;
+
+  // Stride 4 (RGB + 1 padding byte) so each color fits in one u32, letting
+  // the WebGPU vertex shader read colors as array<u32> without repacking.
+  const colors = self.colors;
+  const colorsPacked = new Uint8Array(colors.length * 4);
+  for (i = 0, j = 0, ii = colors.length; i < ii; i++) {
+    const c = colors[i];
+    colorsPacked[j++] = c[0];
+    colorsPacked[j++] = c[1];
+    colorsPacked[j++] = c[2];
+    j++; // alpha — unused, stays 0
+  }
+  self.colors = colorsPacked;
+
+  // Store raw vertex indices (not byte offsets) so the GPU shader can
+  // address coords / colors without knowing their strides, and so the
+  // arrays are transferable Uint32Arrays.
+  for (const figure of self.figures) {
+    figure.coords = new Uint32Array(figure.coords);
+    figure.colors = new Uint32Array(figure.colors);
+  }
+}
+
+// Type 1 shading: a 2-in, n-out function sampled over a rectangular domain.
+class FunctionBasedShading extends BaseShading {
+  // Maximum grid steps per axis to avoid huge meshes.
+  static MAX_STEP_COUNT = 512;
+
+  constructor(
+    dict,
+    xref,
+    resources,
+    pdfFunctionFactory,
+    globalColorSpaceCache,
+    localColorSpaceCache
+  ) {
+    super();
+    this.bbox = lookupNormalRect(dict.getArray("BBox"), null);
+
+    const cs = ColorSpaceUtils.parse({
+      cs: dict.getRaw("CS") || dict.getRaw("ColorSpace"),
+      xref,
+      resources,
+      pdfFunctionFactory,
+      globalColorSpaceCache,
+      localColorSpaceCache,
+    });
+    this.background = dict.has("Background")
+      ? cs.getRgb(dict.get("Background"), 0)
+      : null;
+
+    const fnObj = dict.getRaw("Function");
+    if (!fnObj) {
+      throw new FormatError("FunctionBasedShading: missing /Function");
+    }
+    const fn = pdfFunctionFactory.create(fnObj, /* parseArray = */ true);
+
+    // Domain [x0, x1, y0, y1]; defaults to [0, 1, 0, 1].
+    let x0 = 0,
+      x1 = 1,
+      y0 = 0,
+      y1 = 1;
+    const domainArr = lookupRect(dict.getArray("Domain"), null);
+    if (domainArr) {
+      [x0, x1, y0, y1] = domainArr;
+    }
+
+    // Matrix maps shading (domain) space to user space; defaults to identity.
+    const matrix = lookupMatrix(dict.getArray("Matrix"), IDENTITY_MATRIX);
+
+    // Transform the four domain corners to find the user-space bounding box.
+    this.bounds = [Infinity, Infinity, -Infinity, -Infinity];
+    Util.axialAlignedBoundingBox([x0, y0, x1, y1], matrix, this.bounds);
+
+    const bboxW = this.bounds[2] - this.bounds[0];
+    const bboxH = this.bounds[3] - this.bounds[1];
+
+    // 1 step per user-space unit, capped for performance.
+    const stepsX = MathClamp(
+      Math.ceil(bboxW),
+      1,
+      FunctionBasedShading.MAX_STEP_COUNT
+    );
+    const stepsY = MathClamp(
+      Math.ceil(bboxH),
+      1,
+      FunctionBasedShading.MAX_STEP_COUNT
+    );
+
+    const verticesPerRow = stepsX + 1;
+    const totalVertices = (stepsY + 1) * verticesPerRow;
+    const coords = (this.coords = new Float32Array(totalVertices * 2));
+    const colors = (this.colors = new Uint8ClampedArray(totalVertices * 4));
+
+    const xyBuf = new Float32Array(2);
+    const colorBuf = new Float32Array(cs.numComps);
+    const rangeX = (x1 - x0) / stepsX;
+    const rangeY = (y1 - y0) / stepsY;
+    const halfStepX = rangeX / 2;
+    const halfStepY = rangeY / 2;
+    let coordOffset = 0;
+    let colorOffset = 0;
+    for (let row = 0; row <= stepsY; row++) {
+      const yDomain = y0 + rangeY * row;
+      // Evaluate half a step inside at boundary vertices to avoid a spurious
+      // strip for discontinuous functions; vertex positions stay unchanged.
+      xyBuf[1] = row === stepsY ? yDomain - halfStepY : yDomain;
+      for (let col = 0; col <= stepsX; col++) {
+        const xDomain = x0 + rangeX * col;
+        xyBuf[0] = col === stepsX ? xDomain - halfStepX : xDomain;
+        fn(xyBuf, 0, colorBuf, 0);
+        coords[coordOffset] = xDomain;
+        coords[coordOffset + 1] = yDomain;
+        Util.applyTransform(coords, matrix, coordOffset);
+        coordOffset += 2;
+
+        cs.getRgbItem(colorBuf, 0, colors, colorOffset);
+        colorOffset += 4; // alpha — unused, stays 0
+      }
+    }
+
+    const ps = new Uint32Array(totalVertices);
+    for (let i = 0; i < totalVertices; i++) {
+      ps[i] = i;
+    }
+    this.figures = [
+      {
+        type: MeshFigureType.LATTICE,
+        coords: ps,
+        colors: new Uint32Array(ps),
+        verticesPerRow,
+      },
+    ];
+  }
+
+  getIR() {
+    return [
+      "Mesh",
+      ShadingType.FUNCTION_BASED,
+      this.coords,
+      this.colors,
+      this.figures,
+      this.bounds,
+      this.bbox,
+      this.background,
+    ];
+  }
+}
+
 // All mesh shadings. For now, they will be presented as set of the triangles
 // to be drawn on the canvas and rgb color for each vertex.
 class MeshStreamReader {
@@ -920,55 +1108,11 @@ class MeshShading extends BaseShading {
   }
 
   _updateBounds() {
-    let minX = this.coords[0][0],
-      minY = this.coords[0][1],
-      maxX = minX,
-      maxY = minY;
-    for (let i = 1, ii = this.coords.length; i < ii; i++) {
-      const x = this.coords[i][0],
-        y = this.coords[i][1];
-      minX = minX > x ? x : minX;
-      minY = minY > y ? y : minY;
-      maxX = maxX < x ? x : maxX;
-      maxY = maxY < y ? y : maxY;
-    }
-    this.bounds = [minX, minY, maxX, maxY];
+    meshUpdateBounds(this);
   }
 
   _packData() {
-    let i, ii, j;
-
-    const coords = this.coords;
-    const coordsPacked = new Float32Array(coords.length * 2);
-    for (i = 0, j = 0, ii = coords.length; i < ii; i++) {
-      const xy = coords[i];
-      coordsPacked[j++] = xy[0];
-      coordsPacked[j++] = xy[1];
-    }
-    this.coords = coordsPacked;
-
-    // Stride 4 (RGBA layout, alpha unused) so the buffer maps directly to
-    // array<u32> in the WebGPU vertex shader without any repacking.
-    const colors = this.colors;
-    const colorsPacked = new Uint8Array(colors.length * 4);
-    for (i = 0, j = 0, ii = colors.length; i < ii; i++) {
-      const c = colors[i];
-      colorsPacked[j++] = c[0];
-      colorsPacked[j++] = c[1];
-      colorsPacked[j++] = c[2];
-      j++; // alpha — unused, stays 0
-    }
-    this.colors = colorsPacked;
-
-    // Store raw vertex indices (not byte offsets) so the GPU shader can
-    // address coords / colors without knowing their strides, and so the
-    // arrays are transferable Uint32Arrays.
-    const figures = this.figures;
-    for (i = 0, ii = figures.length; i < ii; i++) {
-      const figure = figures[i];
-      figure.coords = new Uint32Array(figure.coords);
-      figure.colors = new Uint32Array(figure.colors);
-    }
+    meshPackData(this);
   }
 
   getIR() {

src/display/obj_bin_transform_display.js

@@ -353,8 +353,8 @@ class PatternInfo {
     let offset = 20;
     const coords = new Float32Array(this.buffer, offset, nCoord * 2);
     offset += nCoord * 8;
-    const colors = new Uint8Array(this.buffer, offset, nColor * 3);
-    offset += nColor * 3;
+    const colors = new Uint8Array(this.buffer, offset, nColor * 4);
+    offset += nColor * 4;
     const stops = [];
     for (let i = 0; i < nStop; ++i) {
       const p = dataView.getFloat32(offset, true);

src/shared/obj_bin_transform_utils.js

@@ -61,7 +61,7 @@ class PATTERN_INFO {
 
   static N_COORD = 4; // number of coordinate pairs
 
-  static N_COLOR = 8; // number of rgb triplets
+  static N_COLOR = 8; // number of RGBA-stride color entries
 
   static N_STOP = 12; // number of gradient stops
 

test/pdfs/.gitignore

@@ -895,3 +895,4 @@
 !bug2025674.pdf
 !bug2026037.pdf
 !tiling_patterns_variations.pdf
+!function_based_shading.pdf

test/pdfs/function_based_shading.pdf

@@ -14035,5 +14035,12 @@
     "md5": "2870c3136be00ddd975149b2c7d1e6df",
     "rounds": 1,
     "type": "eq"
+  },
+  {
+    "id": "function-based-shading",
+    "file": "pdfs/function_based_shading.pdf",
+    "md5": "7796f0131e7d6428c1bf24a73ff13f95",
+    "rounds": 1,
+    "type": "eq"
   }
 ]

test/test_manifest.json

@@ -36,6 +36,7 @@
     "node_stream_spec.js",
     "obj_bin_transform_spec.js",
     "parser_spec.js",
+    "pattern_spec.js",
     "pdf.image_decoders_spec.js",
     "pdf.worker_spec.js",
     "pdf_find_controller_spec.js",

test/unit/clitests.json

@@ -79,6 +79,7 @@ async function initializePDFJS(callback) {
       "pdfjs-test/unit/network_utils_spec.js",
       "pdfjs-test/unit/obj_bin_transform_spec.js",
       "pdfjs-test/unit/parser_spec.js",
+      "pdfjs-test/unit/pattern_spec.js",
       "pdfjs-test/unit/pdf.image_decoders_spec.js",
       "pdfjs-test/unit/pdf.worker_spec.js",
       "pdfjs-test/unit/pdf_find_controller_spec.js",