Add support for function-based shadings (bug 1254066)

It fixes #5046.
We just generate a mesh for the pattern rectangle where the color of each vertex is computed from the function.
Since the mesh is generated in the worker we don't really take into account the current transform when it's drawn.
That being said, there are maybe some possible improvements in using directly the gpu for the shading creation
which could then take into account the current transform, but it could only work with ps function we can convert
ino wgsl language and simple enough color spaces (gray and rgb).

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",