WebGLRendererの引数について教えて

WebGLRendererの引数には以下のものがあります。

  1. canvas

    • 描画先のcanvas要素を指定します。

    • 省略可能で、省略した場合は新たにcanvas要素が作成されます。

  2. context

    • WebGLRenderingContextオブジェクトを指定します。

    • 省略可能で、省略した場合はWebGLRenderingContextオブジェクトが自動的に生成されます。

  3. precision

    • レンダリングの精度を指定します。

    • デフォルトは"highp"です。

    • "lowp"、"mediump"、"highp"のいずれかを指定することができます。

  4. alpha

    • canvas要素の背景にアルファ値を含めるかどうかを指定します。

    • デフォルトはfalseで、背景にアルファ値は含まれません。

  5. premultipliedAlpha

    • 色情報がRGBとアルファ値の乗算済みの値かどうかを指定します。

    • デフォルトはtrueで、乗算済みの値として扱われます。

  6. antialias

    • アンチエイリアス処理を行うかどうかを指定します。

    • デフォルトはtrueで、アンチエイリアス処理が行われます。

  7. stencil

    • ステンシルバッファを有効にするかどうかを指定します。

    • デフォルトはtrueで、ステンシルバッファが有効になります。

  8. depth

    • 深度バッファを有効にするかどうかを指定します。

    • デフォルトはtrueで、深度バッファが有効になります。

  9. logarithmicDepthBuffer

    • 対数的深度バッファを使用するかどうかを指定します。

    • デフォルトはfalseで、通常の深度バッファが使用されます。

  10. powerPreference

    • レンダリング処理に使用するGPUの電力消費量を指定します。

    • デフォルトは"high-performance"で、高パフォーマンスモードが使用されます。

    • "low-power"を指定することで、低消費電力モードが使用されます。

なお、WebGLRendererはSceneとCameraを引数として受け取るオーバーロードされたコンストラクタも提供しています。この場合、Canvas要素は自動的に作成されます。

// レンダラーを作成します
const renderer = new THREE.WebGLRenderer({
  // キャンバスの透過を有効にする
  alpha: true,
  // デバイスピクセル比の調整を行う
  pixelRatio: window.devicePixelRatio,
  // ステンシルバッファを有効にする
  stencil: false,
  // アンチエイリアシングを有効にする
  antialias: true,
  // カラースペースを設定する
  // 'auto': ブラウザが自動で選択
  // 'sRGB': sRGBカラースペース
  // 'linear': リニアカラースペース
  // その他に 'RGB' も指定可能
  // 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/renderers/WebGLRenderer.outputEncoding
  outputEncoding: THREE.sRGBEncoding,
  // フレームバッファオブジェクトを自動的にクリアする
  autoClear: true,
  // canvas 要素が WebGL コンテキストを失ったときにレンダラーを自動的に消去する
  autoDispose: true,
  // 頂点データをダイナミックに更新するかどうか
  // true にすると、頂点バッファオブジェクトを更新する際に、毎回 GPU にデータを転送する
  // false にすると、GPU にデータを一度転送した後、更新する際にはメモリ上でデータを保持する
  // ダイナミックな更新を頻繁に行う場合は true にするとパフォーマンスが向上する
  // 一方、頂点データの更新頻度が低い場合は false にするとメモリの節約になる
  // 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/core/BufferAttribute.dynamic
  attributes: {
    dynamic: true,
  },
  // インスタンス描画をサポートするかどうか
  // 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/core/InstancedBufferGeometry
  instancing: true,
  // WebGL のドライバがサポートするかどうかにかかわらず、3D テクスチャを有効にする
  // 詳しくは公式ドキュメントを参照: https://threejs.org/docs/#api/en/loaders/TextureLoader
  texture3D: true,
});

この記事が気に入ったらサポートをしてみませんか?