three.jsのRawShaderMaterialを使い回す - Qiita

three.jsのRawShaderMaterial(またはShaderMaterial)を使うとシェーダーを自分で書くことができます。このときにシェーダーのコードは同じだけどuniform変数の値だけを変えて複数のメッシュを描画したいときがあります。 単純な例ですが、以下のように色だけを変えて複数の四角形をRawShaderMaterialで描画したいとします。 何も考えずに書くと、次のコードのようにシェーダー自体は同じなのにも関わらず一つのメッシュごとにマテリアルを作成してしまいます。しかし、これではCPU的にもメモリ的にも無駄な作業をしているように見えます(正確なパフォーマンスの検証はしていませんが...)。 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.i