3d-retina-resolution

3D Retina 解像度

明示的な200% レンダリングの要求は、CSS ピクセルごとに描画バッファのピクセルを各次元で2つ使用することを意味します。そのため、CSS キャンバスが1200 × 800の場合、描画バッファは2400 × 1600となり、100%の場合と比べてピクセル数は4倍になります。レイアウトとカメラのフレーミングは変わりません。

スケールを意図的に選択する

• 固定200%： 有効なピクセル比は、デバイスのピクセル比にかかわらず2です。ユーザーが明示的に200%を要求した場合のデフォルトです。
• 自動Retina、上限2×： 有効な比率はMath.min(window.devicePixelRatio || 1, 2)です。一般的なディスプレイでは1×でレンダリングされることがあるため、常に200%でレンダリングすると主張せず、「自動」と表示してください。
• ネイティブ解像度を基準にする： ユーザーがその意味を明示的に希望した場合にのみ、ネイティブDPRを乗算します。ネイティブの2×にさらに2を乗算すると、各次元で4×、つまりCSSピクセル数の16倍になります。

明示的な品質設定は、自動調整とは区別してください。サイズを変更する前に、プロジェクトのレンダラーとポストプロセッシングの構成を確認してください。

レンダリングパイプラインを同期する

CSSでキャンバスとそのコンテナーのサイズを指定し、コンテナーのサイズをCSSピクセル単位で測定します。Three.js WebGLでは、論理サイズとピクセル比を使う方法が一貫した規約の一つです。

function resize3D(width, height, ratio = 2) {
  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
  if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError('Invalid render ratio');
  renderer.setPixelRatio(ratio);
  renderer.setSize(width, height, false); // CSS owns displayed dimensions
  camera.aspect = width / height;        // perspective camera
  camera.updateProjectionMatrix();
  if (composer) {
    composer.setPixelRatio(ratio);
    composer.setSize(width, height);     // logical pixels; do not multiply again
  }
  const physicalWidth = renderer.domElement.width;
  const physicalHeight = renderer.domElement.height;
  resizeCustomTargets(physicalWidth, physicalHeight);
}

このスニペットは、既存のrenderer、透視カメラのcamera、任意のcomposer（またはnull）、およびアプリから提供されるresizeCustomTargetsアダプターを前提としています。正射影カメラの場合は、aspectを設定する代わりに、既存のフレーミング方針に従って境界を更新してください。

このアダプターは、アプリが所有するターゲットとユニフォームのみを更新します。コンポーザーが管理するパスは、コンポーザーを通じてすでにサイズが設定されています。フル解像度の深度／法線ターゲットは物理寸法に設定してください。低解像度のAO、ブルーム、レイ用ターゲットは、意図したスケール係数でサイズを設定します。サンプリング解像度のユニフォームは、シェーダーが逆数の解像度を必要とする場合も含め、実際にサンプリングするテクスチャの寸法に合わせて設定してください。

レンダラーとコンポーザーは、それぞれ独自のピクセル比を管理します。キャンバスだけを更新すると、低解像度の中間画像がRetina出力に引き伸ばされることがあります。逆に、すでに2倍にした寸法を、DPRも2のコンポーザーに渡すと、寸法が4倍のバッファが確保されます。サイズ設定APIについては、レンダラーとコンポーザーを参照してください。

レイアウトとディスプレイの変更に対応する

ResizeObserverでキャンバスコンテナーを監視し、通知をまとめて処理したうえで、寸法または有効な比率が変わった場合にのみサイズを変更してください。サイズが0の非表示ビューはスキップし、表示されたときに再試行します。自動モードでは、CSS寸法が変わらない場合も含め、ブラウザーのズームやディスプレイの変更時にネイティブDPRを再評価してください。その方法を使う場合は、DPRが変わるたびに解像度のメディアクエリーリスナーを再作成します。

ポインター位置の正規化にはcanvas.getBoundingClientRect()を使用します。X座標は(clientX - rect.left) / rect.widthで計算し、Y座標も同様に計算してください。レイキャスティングでは、描画バッファのピクセルではなく、CSS空間から導出した正規化座標を使用します。ピクセル読み戻しなどのAPIで必要な場合にのみ、物理ピクセルへ個別に変換してください。

Retina出力にしても、ぼやけたテクスチャ、粗いモデル、シャドウマップ、低解像度の反射が自動的に改善するわけではありません。これらの要因は個別に確認してください。正しい描画バッファの代わりに、CSSによる拡大縮小やimage-rendering: pixelatedを使うことは避けてください。高解像度化とアンチエイリアシングは関連していますが、異なるアーティファクトを解決します。

予算とフォールバック

同じカメラを使い、1×と2×でシーンを計測します。フレーム時間、ターゲットの寸法、割り当ての失敗、パスの合計数を追跡します。特に大きなターゲットを割り当てる前に、最大テクスチャ／レンダーバッファー寸法やビューポートの上限など、GPU の制限を確認します。

要求された鮮明なメインビューの品質を損なう前に、任意のポストエフェクトの解像度やサンプル数を下げます。Auto モードでは、フレーム時間が継続的に悪化した場合に段階的に品質を下げ、ヒステリシスを使って回復させることがあります。数フレームごとにリサイズしないでください。固定の200%設定は、具体的なハードウェアまたは割り当ての失敗によって目に見えるフォールバックが必要な場合を除き、固定のままにします。200%と表示しながら、実際には低い解像度で描画することなく、実際に適用されているスケールを報告します。

非表示のビューは一時停止し、静的なシーンは必要に応じて描画します。モーション低減設定が有効な場合は、鮮明な静止画像を維持します。アニメーションを減らすために解像度を下げる必要はありません。置き換えたレンダーターゲットは破棄します。

検証

• 200%固定時に、キャンバスのCSSサイズとcanvas.width／canvas.height、およびrenderer.getDrawingBufferSize()を比較します。整数丸めの範囲内で、各軸がおよそ2倍になっていることを確認します。
• フル解像度のコンポーザーバッファーのサイズが一致していること、また、解像度を下げたパスが意図的なものであることを確認します。
• 横長 ↔ 縦長へのリサイズ、ビューの非表示／再表示、Auto モードでのブラウザーズームやディスプレイ変更をテストします。
• 同じ見かけのサイズで細いエッジや精細なマテリアルを確認します。ポインターによる選択とUIの配置は正確に保たれている必要があります。
• DPR 1のディスプレイとRetinaディスプレイでテストします。固定200%は2×を維持し、Auto は上限に従います。

API とリファレンスプロジェクトについては、REFERENCES.mdを参照してください。Seijaku には複数のレンダラー品質上限と適応型のメイン描画経路があります。これらの値は参考情報であり、メインビューがすでに固定200%で描画されている証拠ではありません。