WebGLRendererの引数について教えて
WebGLRendererの引数には以下のものがあります。
canvas
描画先のcanvas要素を指定します。
省略可能で、省略した場合は新たにcanvas要素が作成されます。
context
WebGLRenderingContextオブジェクトを指定します。
省略可能で、省略した場合はWebGLRenderingContextオブジェクトが自動的に生成されます。
precision
レンダリングの精度を指定します。
デフォルトは"highp"です。
"lowp"、"mediump"、"highp"のいずれかを指定することができます。
alpha
canvas要素の背景にアルファ値を含めるかどうかを指定します。
デフォルトはfalseで、背景にアルファ値は含まれません。
premultipliedAlpha
色情報がRGBとアルファ値の乗算済みの値かどうかを指定します。
デフォルトはtrueで、乗算済みの値として扱われます。
antialias
アンチエイリアス処理を行うかどうかを指定します。
デフォルトはtrueで、アンチエイリアス処理が行われます。
stencil
ステンシルバッファを有効にするかどうかを指定します。
デフォルトはtrueで、ステンシルバッファが有効になります。
depth
深度バッファを有効にするかどうかを指定します。
デフォルトはtrueで、深度バッファが有効になります。
logarithmicDepthBuffer
対数的深度バッファを使用するかどうかを指定します。
デフォルトはfalseで、通常の深度バッファが使用されます。
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,
});
この記事が気に入ったらサポートをしてみませんか?