color-conversion.js

/**
 * 色変換システム
 * スペクトル → CIE1931 XYZ → sRGB 変換
 * 波動光学計算結果を正確な色で表現
 */

class ColorConversion {
  constructor(webglUtils) {
    this.gl = webglUtils.gl;
    this.utils = webglUtils;
    this.colorMatchingFunctionTexture = null;
    this.initialized = false;
    this.programs = new Map();
  }

  /**
   * 色変換システムを初期化
   */
  initialize() {
    // WebGL2浮動小数点テクスチャサポートを確認
    const gl = this.gl;

    // 必要な拡張をチェック
    const extColorBufferFloat = gl.getExtension("EXT_color_buffer_float");
    const extTextureFloat = gl.getExtension("OES_texture_float_linear");

    console.log("WebGL2 Extensions:", {
      EXT_color_buffer_float: !!extColorBufferFloat,
      OES_texture_float_linear: !!extTextureFloat,
      "RGBA32F renderable": this.checkRenderable(gl.RGBA32F),
    });

    this.createColorMatchingFunctionTexture();
    // プログラムは外部から設定される
    this.initialized = true;
    console.log("Color conversion system initialized");
  }

  /**
   * レンダラブルフォーマットをチェック
   */
  checkRenderable(format) {
    const gl = this.gl;
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, format, 1, 1, 0, gl.RGBA, gl.FLOAT, null);

    const fb = gl.createFramebuffer();
    gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
    gl.framebufferTexture2D(
      gl.FRAMEBUFFER,
      gl.COLOR_ATTACHMENT0,
      gl.TEXTURE_2D,
      texture,
      0
    );

    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
    const isComplete = status === gl.FRAMEBUFFER_COMPLETE;

    // クリーンアップ
    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    gl.deleteFramebuffer(fb);
    gl.deleteTexture(texture);

    return isComplete;
  }

  /**
   * CIE 1931 標準等色関数のテクスチャを作成
   * 380nm〜780nmの波長範囲で1nmごとにサンプリング
   */
  createColorMatchingFunctionTexture() {
    const gl = this.gl;
    const wavelengthCount = 401; // 380-780nm, 1nm間隔

    // CIE 1931 標準等色関数の近似データ
    const colorMatchingData = new Float32Array(wavelengthCount * 3);

    for (let i = 0; i < wavelengthCount; i++) {
      const lambda = 380 + i; // 波長 (nm)
      const xyz = this.calculateCIE1931(lambda);

      colorMatchingData[i * 3 + 0] = xyz.x;
      colorMatchingData[i * 3 + 1] = xyz.y;
      colorMatchingData[i * 3 + 2] = xyz.z;
    }

    this.colorMatchingFunctionTexture = this.utils.createTexture(
      wavelengthCount,
      1,
      gl.RGB32F,
      gl.RGB,
      gl.FLOAT,
      colorMatchingData,
      "colorMatchingFunction"
    );

    // 線形フィルタリングを有効化 (波長間の補間用)
    gl.bindTexture(gl.TEXTURE_2D, this.colorMatchingFunctionTexture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  }

  /**
   * CIE 1931 標準等色関数の近似計算
   * @param {number} lambda 波長 (nm)
   * @returns {{x: number, y: number, z: number}}
   */
  calculateCIE1931(lambda) {
    // 修正されたWyman, Sloan & Shirley (2013) 近似式
    // 係数を正しいスケールに調整

    // x̄(λ) 近似
    const x1 = this.gaussian(lambda, 442.0, 62.4, 37.4);
    const x2 = this.gaussian(lambda, 599.8, 26.4, 32.3);
    const x3 = this.gaussian(lambda, 501.1, 49.0, 38.2);
    const xBar = 1.056 * x1 + 0.362 * x2 - 0.065 * x3;

    // ȳ(λ) 近似
    const y1 = this.gaussian(lambda, 568.8, 21.3, 24.7);
    const y2 = this.gaussian(lambda, 530.9, 61.3, 32.2);
    const yBar = 0.821 * y1 + 0.286 * y2;

    // z̄(λ) 近似
    const z1 = this.gaussian(lambda, 437.0, 84.5, 27.8);
    const z2 = this.gaussian(lambda, 459.0, 38.5, 72.5);
    const zBar = 1.217 * z1 + 0.681 * z2;

    return { x: Math.max(0, xBar), y: Math.max(0, yBar), z: Math.max(0, zBar) };
  }

  /**
   * ガウシアン関数
   * @param {number} x
   * @param {number} mu 平均
   * @param {number} s1 左側の標準偏差
   * @param {number} s2 右側の標準偏差
   * @returns {number}
   */
  gaussian(x, mu, s1, s2) {
    const sigma = x < mu ? s1 : s2;
    const exp_arg = -0.5 * Math.pow((x - mu) / sigma, 2);
    return Math.exp(exp_arg);
  }

  /**
   * 色変換用シェーダープログラムを設定
   * shader-loaderから作成されたプログラムを受け取る
   */
  setPrograms(programMap) {
    // MapオブジェクトとObjectの両方に対応
    if (programMap instanceof Map) {
      this.programs.set("spectrumToXYZ", programMap.get("spectrumToXYZ"));
      this.programs.set("XYZToSRGB", programMap.get("XYZToSRGB"));
      this.programs.set(
        "monochromaticColor",
        programMap.get("monochromaticColor")
      );
      this.programs.set("phaseColor", programMap.get("phaseColor"));
    } else {
      // Object形式
      this.programs.set("spectrumToXYZ", programMap.spectrumToXYZ);
      this.programs.set("XYZToSRGB", programMap.XYZToSRGB);
      this.programs.set("monochromaticColor", programMap.monochromaticColor);
      this.programs.set("phaseColor", programMap.phaseColor);
    }

    // 設定確認
    console.log("Color conversion programs set:", {
      spectrumToXYZ: !!this.programs.get("spectrumToXYZ"),
      XYZToSRGB: !!this.programs.get("XYZToSRGB"),
      monochromaticColor: !!this.programs.get("monochromaticColor"),
      phaseColor: !!this.programs.get("phaseColor"),
    });
  }

  /**
   * スペクトル強度からXYZ色空間に変換
   * @param {Array<{wavelength: number, texture: WebGLTexture, weight: number}>} spectrumData
   * @param {number} width
   * @param {number} height
   * @returns {WebGLTexture}
   */
  convertSpectrumToXYZ(spectrumData, width, height) {
    if (!this.initialized) {
      throw new Error("Color conversion system not initialized");
    }

    const gl = this.gl;
    const program = this.programs.get("spectrumToXYZ");

    if (!program) {
      console.error(
        "spectrumToXYZ program not found. Available programs:",
        Array.from(this.programs.keys())
      );
      throw new Error("spectrumToXYZ program not initialized");
    }

    const quad = this.utils.createFullscreenQuad();

    // 出力テクスチャ作成 (フォーマットフォールバック付き)
    let internalFormat, format, type, dataType;

    if (this.checkRenderable(gl.RGBA32F)) {
      internalFormat = gl.RGBA32F;
      format = gl.RGBA;
      type = gl.FLOAT;
      dataType = "FLOAT32";
    } else if (this.checkRenderable(gl.RGBA16F)) {
      internalFormat = gl.RGBA16F;
      format = gl.RGBA;
      type = gl.HALF_FLOAT;
      dataType = "HALF_FLOAT";
      console.warn("Using RGBA16F fallback for XYZ texture");
    } else {
      internalFormat = gl.RGBA;
      format = gl.RGBA;
      type = gl.UNSIGNED_BYTE;
      dataType = "UBYTE";
      console.warn("Using RGBA8 fallback for XYZ texture - reduced precision");
    }

    const xyzTexture = this.utils.createTexture(
      width,
      height,
      internalFormat,
      format,
      type,
      null,
      "XYZ_output"
    );
    const framebuffer = this.utils.createFramebuffer(xyzTexture);

    // 波長間隔を計算 (IMPL.md仕様のΔλ)
    const numWavelengths = Math.min(spectrumData.length, 15);
    let deltaLambda = 1.0; // デフォルト値

    if (numWavelengths > 1) {
      const firstWavelength = spectrumData[0].wavelength * 1e9; // nm
      const lastWavelength = spectrumData[numWavelengths - 1].wavelength * 1e9; // nm
      deltaLambda = (lastWavelength - firstWavelength) / (numWavelengths - 1);
    }

    // ユニフォーム準備
    const uniforms = {
      u_colorMatchingFunction: this.colorMatchingFunctionTexture,
      u_numWavelengths: numWavelengths,
      u_wavelengthMin: 380.0,
      u_wavelengthMax: 780.0,
      u_deltaLambda: deltaLambda,
    };

    // スペクトラムテクスチャとパラメータを設定
    const wavelengths = new Float32Array(15);
    const weights = new Float32Array(15);

    for (let i = 0; i < Math.min(spectrumData.length, 15); i++) {
      const data = spectrumData[i];
      uniforms[`u_spectrum${i}`] = data.texture;
      wavelengths[i] = data.wavelength * 1e9; // m → nm変換
      weights[i] = data.weight || 1.0;
    }

    uniforms.u_wavelengths = Array.from(wavelengths);
    uniforms.u_weights = Array.from(weights);

    // レンダリング実行
    this.utils.renderPass(program, framebuffer, uniforms, quad);

    return xyzTexture;
  }

  /**
   * XYZ色空間からsRGB色空間に変換
   * @param {WebGLTexture} xyzTexture
   * @param {number} exposure 露出
   * @param {number} gamma ガンマ値 (0なら標準sRGBガンマ関数を使用)
   * @returns {WebGLTexture}
   */
  convertXYZToSRGB(xyzTexture, exposure = 1.0, gamma = 0.0) {
    const gl = this.gl;
    const program = this.programs.get("XYZToSRGB");

    if (!program) {
      console.error(
        "XYZToSRGB program not found. Available programs:",
        Array.from(this.programs.keys())
      );
      throw new Error("XYZToSRGB program not initialized");
    }

    const quad = this.utils.createFullscreenQuad();

    // 出力サイズを取得 (簡略化)
    const width = 512; // 実際はxyzTextureから取得
    const height = 512;

    const srgbTexture = this.utils.createTexture(
      width,
      height,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      null,
      "sRGB_output"
    );
    const framebuffer = this.utils.createFramebuffer(srgbTexture);

    const uniforms = {
      u_XYZ: xyzTexture,
      u_exposure: exposure,
      u_gamma: gamma,
    };

    this.utils.renderPass(program, framebuffer, uniforms, quad);

    return srgbTexture;
  }

  /**
   * 単色光の強度分布を色変換
   * @param {WebGLTexture} intensityTexture
   * @param {number} wavelength 波長 (nm)
   * @param {number} exposure 露出
   * @returns {WebGLTexture}
   */
  convertMonochromaticToColor(intensityTexture, wavelength, exposure = 1.0) {
    const gl = this.gl;
    const program = this.programs.get("monochromaticColor");

    if (!program) {
      console.error(
        "monochromaticColor program not found. Available programs:",
        Array.from(this.programs.keys())
      );
      throw new Error("monochromaticColor program not initialized");
    }

    const quad = this.utils.createFullscreenQuad();

    const width = 512;
    const height = 512;

    const colorTexture = this.utils.createTexture(
      width,
      height,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE,
      null,
      "monochromatic_color"
    );
    const framebuffer = this.utils.createFramebuffer(colorTexture);

    const uniforms = {
      u_intensity: intensityTexture,
      u_wavelength: wavelength,
      u_exposure: exposure,
      u_colorMatchingFunction: this.colorMatchingFunctionTexture,
      u_wavelengthMin: 380.0,
      u_wavelengthMax: 780.0,
    };

    this.utils.renderPass(program, framebuffer, uniforms, quad);

    return colorTexture;
  }

  /**
   * 複素振幅を位相色表示に変換 (デバッグ用)
   * @param {WebGLTexture} realTexture
   * @param {WebGLTexture} imagTexture
   * @param {number} scale スケール
   * @returns {WebGLTexture}
   */
  convertToPhaseColor(realTexture, imagTexture, scale = 1.0) {
    const gl = this.gl;
    const program = this.programs.get("phaseColor");
    const quad = this.utils.createFullscreenQuad();

    const width = 512;
    const height = 512;

    const phaseColorTexture = this.utils.createTexture(
      width,
      height,
      gl.RGBA,
      gl.RGBA,
      gl.UNSIGNED_BYTE
    );
    const framebuffer = this.utils.createFramebuffer(phaseColorTexture);

    const uniforms = {
      u_realPart: realTexture,
      u_imagPart: imagTexture,
      u_scale: scale,
    };

    this.utils.renderPass(program, framebuffer, uniforms, quad);

    return phaseColorTexture;
  }

  /**
   * 波長から近似RGB値を取得 (プレビュー用)
   * @param {number} wavelength 波長 (nm)
   * @returns {{r: number, g: number, b: number}}
   */
  wavelengthToRGB(wavelength) {
    const xyz = this.calculateCIE1931(wavelength);

    // XYZ → sRGB 変換行列
    const r = 3.2406 * xyz.x - 1.5372 * xyz.y - 0.4986 * xyz.z;
    const g = -0.9689 * xyz.x + 1.8758 * xyz.y + 0.0415 * xyz.z;
    const b = 0.0557 * xyz.x - 0.204 * xyz.y + 1.057 * xyz.z;

    // 正規化とクランプ
    const max = Math.max(r, g, b, 1e-10);
    return {
      r: Math.max(0, Math.min(1, r / max)),
      g: Math.max(0, Math.min(1, g / max)),
      b: Math.max(0, Math.min(1, b / max)),
    };
  }

  /**
   * リソースをクリーンアップ
   */
  cleanup() {
    const gl = this.gl;

    if (this.colorMatchingFunctionTexture) {
      gl.deleteTexture(this.colorMatchingFunctionTexture);
    }

    for (const program of this.programs.values()) {
      gl.deleteProgram(program);
    }

    this.programs.clear();
    this.initialized = false;
  }
}