interpolate-lab gives the same result as RGB interpolate (rgb2xyz/xyz2rgb scale 0-1 channels by 255)

Abierto Apto para principiantes
  • ¿Algo no está bien?
#13,751 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
typescript
Área
backend, testing

Línea de trabajo

Empieza en src/style-spec/util/color_spaces.ts y sigue el recorrido de los valores de los canales de Color a través de rgb2xyz y xyz2rgb; el issue indica que la conversión aplica una escala innecesaria de 255. Comprueba las fixtures del espacio de color mencionadas en el issue y actualiza las que reflejen la salida actual. El trabajo estará terminado cuando el repro produzca los valores Lab y HCL esperados sin canales negativos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

auto-triaged bug :lady_beetle:
mapbox-gl-js version

style-spec only: @mapbox/mapbox-gl-style-spec 14.34.2 (same code on main 1f3879d)

Browser and version

Not browser specific (Node v26.13.0)

Expected behavior

interpolate-lab and interpolate-hcl interpolate in CIELAB/HCL. For the repro below, MapLibre's style spec (26.5.1, which fixed the same code in maplibre/maplibre-style-spec#94) gives:

lab black->white: [ 0.4663, 0.4663, 0.4663, 1 ]
lab red->blue: [ 0.7568, 0, 0.534, 1 ]
hcl red->blue: [ 0.9606, 0, 0.5259, 1 ]

(d3-interpolate gives the same values to 8-bit precision.)

Actual behavior
lab black->white: [ 0.5, 0.5, 0.5, 1 ]
rgb black->white: [ 0.5, 0.5, 0.5, 1 ]
lab red->blue: [ 0.5, 0, 0.5, 1 ]
hcl red->blue: [ 0.7783, -0.0837, 0.5091, 1 ]

interpolate-lab is identical to interpolate, and interpolate-hcl produces a negative channel (#10054).

Link to the demonstration

Not applicable: reproduced with the style-spec package in Node.

Steps to trigger the unexpected behavior
const { expression } = require("@mapbox/mapbox-gl-style-spec");
const spec = { type: "color", "property-type": "data-driven", expression: { interpolated: true, parameters: ["zoom", "feature"] } };
const ev = (e) => {
  const c = expression.createExpression(e, spec).value.evaluate({ zoom: 0 }, { properties: {} });
  return [c.r, c.g, c.b, c.a].map((v) => +v.toFixed(4));
};

console.log("lab black->white:", ev(["interpolate-lab", ["linear"], 0.5, 0, "black", 1, "white"]));
console.log("rgb black->white:", ev(["interpolate", ["linear"], 0.5, 0, "black", 1, "white"]));
console.log("lab red->blue:", ev(["interpolate-lab", ["linear"], 0.5, 0, "red", 1, "blue"]));
console.log("hcl red->blue:", ev(["interpolate-hcl", ["linear"], 0.5, 0, "red", 1, "blue"]));

src/style-spec/util/color_spaces.ts has x /= 255 in rgb2xyz and 255 * (...) in xyz2rgb, but Color channels are in [0, 1]. The values therefore always fall in the linear segments of the sRGB and Lab transfer functions. Removing the 255 factor in both places fixes it (fixtures generated with the current code would need updating).

Relevant log output

Nothing beyond the output shown in the steps above.

Credit: https://ucsbplse.github.io/

Lenguaje dominante
TypeScript
Estrellas
12.5k
Forks
2.4k
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de mapbox/mapbox-gl-js

Todos los issues de mapbox/mapbox-gl-js

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.