three.js r187で何が凄くなった？粗い面・影・映り込みをr186と並べて比べた

3Dのサイトやゲームを作るときによく使われる JavaScript のライブラリ「three.js」の新しい版、r187 が2026年10月30日に公開されました（GitHub のリリース r187）。

変更点の一覧はとても長く、ほとんどが細かな不具合の直しです。その中から「見た目が変わるもの」と「速くなるもの」を拾い、1つ前の r186 と同じ場面を並べて試しました。

結論：r187 で凄くなった3つ

1. 粗い面（布・土・コンクリート）の陰が本物に近くなった。新しい設定 diffuseRoughness で、ざらざらした面の「月のように平らに見える」性質を出せるようになりました。
2. 点光源の影の「継ぎ目」が消えた。部屋の中に電球のような光を置くと、床や天井に四角い線が出ることがありましたが、これが直りました。
3. 環境の映り込み（PMREM）の作りが新しくなった。公式の測定では、Blender の Cycles に近い見た目になり、GPU のメモリも減っています。

このほか、WebGPU で描くときの準備や描画が速くなる改善がいくつも入っています。

1. 粗い面の陰：diffuseRoughness（EON）

MeshPhysicalMaterial に diffuseRoughness という設定が増えました。中身は EON（Energy-preserving Oren-Nayar）という計算で、粗い材質の平らに見える感じと、光の来た方へ光を返す性質をよりよく表す、と説明されています（PR #34379）。

これまでの three.js は、つやの無い面の陰を「なめらかな面」と同じ計算（Lambert）で出していました。r187 でも何も設定しなければ今までどおりで、diffuseRoughness を使わないかぎり追加の計算は組み込まれません（同じ PR）。

const mat = new THREE.MeshPhysicalMaterial({ color: 0xc9805a, roughness: 1 });
mat.diffuseRoughness = 1; // 0＝今までどおり、1＝いちばん粗い

カツプロ調べ：r186 と並べてみた

同じ茶色の球を5つ並べ、左から diffuseRoughness を 0・0.25・0.5・0.75・1 にしました。光は見る人の後ろ側から当てています。

r186 にはこの設定が無いので、5つとも同じ見え方です。r187 は右の球ほど縁まで明るくなり、満月のように平らに見えます。毛並み・布・土・素焼きの器のような材質で効きます。

2. 点光源の影の継ぎ目が消えた

点光源（電球のように四方へ光る光）の影は、光のまわりを箱の6面に分けて記録しています。r182 からこの6面の記録の仕方が変わり、両面表示の壁などでは、面と面の境目に継ぎ目が出て、光と一緒に動くことがありました。r187 では、比べ方を「各面の奥行き」から「光からの距離」に変えて、この継ぎ目を消しています（PR #35267）。

カツプロ調べ：同じ部屋で比べた

PR に付いている再現例と同じ部屋（両面表示の壁・影をぼかした点光源）を、r186 と r187 で描きました。

r186 は床と天井に、くっきりした四角い明るい区切りが出ます。r187 では消えています。部屋の中を歩くタイプの3Dサイトや、ランプを置いた展示の場面で効きます。

3. 環境の映り込み（PMREM）の作り直し

金属やつやのある物に周りの景色を映すとき、three.js は PMREM という「粗さごとにぼかした景色」を前もって作っています。r187 はこの入れ物を作り直しました（PR #34585）。公式の PR に書かれている測定は次のとおりです。

粗さが 0 の鏡のような面でも、ぼかしていない景色をそのまま映すのはやめ、動かしたときのちらつきを抑えています（PR #34645）。

カツプロ調べ：差は小さい

左から粗さ（roughness）を 0 → 1 にした金属の球で比べました。

見た目の差は小さく、左から2つ目（粗さ 0.2）・3つ目（0.4）の映り込みが少しやわらかくなった程度です。球の中心あたりの明るさの平均を 0〜255 で測ると、2つ目は r186 が 186.8、r187 が 197.4 でした。いちばん粗い球は 238.6 と 238.2 で、ほぼ同じです。

公式の移行ガイドにも「材質の見え方が少し変わる」と書かれています（Migration Guide 186 → 187）。見た目を細かく調整したサイトは、上げたあとに色を見直してください。

表の「KTX2」は、GPU にそのまま渡せる画像の形式です。KTX2 については「3Dサイトに最適⁉ 「転送は軽いのにGPUでは重い」を解決するKTX2の話」で書いています。

4. WebGPU で速くなったところ

three.js には、新しい描き方の WebGPURenderer があります（WebGPU が使えない環境では WebGL 2 で動きます）。r187 では、この WebGPURenderer の速さに関わる直しが多く入りました。

• 最初の準備が速く：compileAsync() が、描くための準備（パイプライン）を並べて作るようになりました（PR #34816）。読み込み直後に画面が止まる時間が減ります。
• 同じ形をたくさん置く場面：InstancedMesh どうしで組み立て結果を使い回すようになりました（PR #35007）。BatchedMesh では、同じ形の描画が続くとき1回にまとめます（PR #35259）。
• VR・分割画面：ArrayCamera で、カメラごとに見えない物を描かないようになりました（PR #35164）。
• シェーダーを書く TSL：組み立てが速くなり（PR #34815）、three/tsl の使っていない部分が読み込みの束から外れるようになりました（PR #34533）。

5. そのほかの追加

• 光の焼き込みが約4倍速く：部屋の間接光を前もって計算する LightProbeGrid が速くなり（PR #34909）、光が何度も跳ね返る計算も速くなりました（PR #35145）。
• ライトをたくさん置ける ClusteredLighting：スポットライトに対応し、WebGL 2 でも動くようになりました（PR #34978）。
• 読み込める物が増えた：JXLLoader が HDR の画像を読めるようになり、MaterialXLoader も対応する部品が増えました（GitHub のリリース r187）。

上げる前に確かめること

r187 では、r177 で「使わなくなる」と予告されていた書き方が消されました（PR #34517）。移行ガイドに書かれている主な変更は次のとおりです（Migration Guide 186 → 187）。

• PMREM が新しい作りになり、CubeUVReflectionMapping が無くなった。材質の見え方も少し変わる
• MeshPhysicalMaterial.iridescenceThicknessRange は、iridescenceThicknessMinimum と iridescenceThicknessMaximum の2つに分かれた
• WebGLRenderer の setViewport()・setScissor() は、描き出し先（レンダーターゲット）を指定しているとき、画素の倍率を掛けなくなった
• WebGPURenderer で自作のライトを登録する書き方が CustomLight.registerNode( CustomLightNode ) に変わった

古いサンプルをまねて書いたコードは、上げる前に開発用の画面で警告が出ないかを見てください。

1分ほどの動画でも見られます

点光源の影の継ぎ目が光と一緒に動く様子と、r187 で消えた様子を、動く画面で並べました。

まとめ

• three.js r187 は2026年10月30日に公開。変更の多くは不具合の直し。
• 見た目では 粗い面の陰（diffuseRoughness） と 点光源の影の継ぎ目の解消 がはっきり分かる。r186 と並べると違いが一目で分かった（カツプロ調べ）。
• 映り込み（PMREM）は作り直され、公式の測定では誤差とメモリが減った。見た目の差は小さいが、色を細かく合わせたサイトは見直しが要る。
• WebGPURenderer は、準備・同じ形の大量配置・VR の描画が速くなった。

three.js そのものや、ブラウザで3Dが動く仕組みは「そもそもWebGLって何？ブラウザだけで3Dが動く仕組みとthree.js・WebGPUとの違い」で説明しています。

出典

• Release r187｜mrdoob/three.js（GitHub・2026年10月30日）
• Migration Guide 186 → 187｜three.js wiki
• MeshPhysicalMaterial: Add EON rough diffuse BRDF｜PR #34379
• Shadows: Fix point light shadow seams｜PR #35267
• PMREMGenerator: Replace the CubeUV atlas with cube render targets｜PR #34585
• PMREM: Restore minimal roughness, improve roughness ramp｜PR #34645