Emulation-Only Guide（エミュレーション専用ガイド） / Emulation-Only Guide

日本語 | English

日本語

エミュレーション専用（outlineRenderMode: 'emulation-only'）は、標準の枠線やインセットを使わず、エッジのポリラインのみで「太い枠線」を表現するモードです。WebGLの1px制限の影響を受けず、密度に応じた太さ/濃さの表現に適しています。

最小設定

const heatbox = new Heatbox(viewer, {
  outlineRenderMode: 'emulation-only', // 標準/インセットを描かずポリラインのみで太線を表現
  showOutline: false,        // 標準枠線はオフ
  opacity: 0.0               // ボックス塗り無し（エッジのみ）
});

密度に応じて「太く・濃く」する

const heatbox = new Heatbox(viewer, {
  outlineRenderMode: 'emulation-only',
  showOutline: false,
  opacity: 0.0,
  outlineWidthResolver: ({ normalizedDensity }) => {
    const d = Math.max(0, Math.min(1, normalizedDensity || 0));
    const nd = Math.pow(d, 0.5);
    return 1.5 + nd * (10 - 1.5); // 1.5〜10px
  },
  outlineOpacityResolver: ({ normalizedDensity }) => {
    const d = Math.max(0, Math.min(1, normalizedDensity || 0));
    const nd = Math.pow(d, 0.5);
    return Math.max(0.15, Math.min(1.0, 0.15 + nd * 0.85));
  }
});

使いどころ

• 高密度領域を「はっきり」見せたい
• 標準の枠線（box.outline）では太さの制約がある

補足: emulationScope は標準/インセット描画に「部分エミュレーション」を重ねる場合に使用します（例: emulationScope: 'topn'）。emulation-only モードでは不要です。

English

Emulation-only (outlineRenderMode: 'emulation-only') renders thick edges using polylines without standard or inset outlines. It avoids the WebGL 1px limit and is suitable for density-driven thickness/opacity.

Minimal Setup

const heatbox = new Heatbox(viewer, {
  outlineRenderMode: 'emulation-only',
  showOutline: false,
  opacity: 0.0
});

Make dense voxels thicker and darker

const heatbox = new Heatbox(viewer, {
  outlineRenderMode: 'emulation-only',
  showOutline: false,
  opacity: 0.0,
  outlineWidthResolver: ({ normalizedDensity }) => {
    const d = Math.max(0, Math.min(1, normalizedDensity || 0));
    const nd = Math.pow(d, 0.5);
    return 1.5 + nd * (10 - 1.5);
  },
  outlineOpacityResolver: ({ normalizedDensity }) => {
    const d = Math.max(0, Math.min(1, normalizedDensity || 0));
    const nd = Math.pow(d, 0.5);
    return Math.max(0.15, Math.min(1.0, 0.15 + nd * 0.85));
  }
});

When to use

• Emphasize dense regions clearly
• Standard box outlines have thickness limitations

Note: emulationScope is used to overlay partial emulation on top of standard/inset rendering (e.g., emulationScope: 'topn'). It is not required in emulation-only mode.