12月11日（木）、Webブラウザ向け3DCG描画用JavaScriptライブラリ「Three.js r182」がGitHubで公開された。WebGLRendererのシャドウマッピングの刷新や、マテリアルの物理的な正確性の向上、そしてTSL（Three Shading Language）の機能強化などが実装されている。

Three.js r182では、レンダリングエンジンの刷新やWebGPU対応の強化に伴い、その効果を確認できる公式サンプルが多数更新・追加された。

GLTFモデルセレクタ

Three.js r182では、3DモデルのファイルフォーマットglTFの読み込みに関連して、サンプル「GLTF model selector」が更新された。これは様々なglTFモデルをGUI上で切り替えて表示確認できるデモ。今回のアップデートでは、行列計算を担うMatrix4クラスにおいて行列式の計算処理が最適化されたほか、スケールが0の場合に発生していた数値エラーも修正されている。こうした数学的な基礎部分の改善は、モデルの変形や配置といった基本的な描画処理のパフォーマンスと安定性を底上げしている。

■GLTF model selector（公式サンプル）
https://threejs.org/examples/#webgl_loader_gltf

刷新されたシャドウマップ

WebGLRendererにおけるシャドウマッピングの実装が現代的な手法へと刷新され、その成果を示すサンプル「Modernized Shadow Maps」が公開された。本サンプルではポイントライトによる動的な影の生成を確認できるが、内部的には影の計算ロジックがリファクタリングされ、より効率的かつ正確な描画が可能となっている。また、BufferGeometryに間接描画（Indirect Drawing）のためのパラメータが追加され、複雑なシーンの描画負荷軽減と、レンダリングパイプライン全体の最適化を実現している。

■Modernized Shadow Maps（公式サンプル）
https://threejs.org/examples/#webgl_shadowmap_pointlight

イリデセンスにおけるエネルギー保存則の修正

PBRの正確性向上として、特にマテリアルのエネルギー保存則に関する修正が行われ、サンプル「Fixed iridescence energy conservation」でその効果を確認できる。本サンプルでは、シャボン玉や昆虫の羽のような玉虫色の輝き（イリデセンス）を持つマテリアルが表示されている。従来、複数の素材特性が混ざり合う際に物理的に矛盾したエネルギー計算が行われるケースがあったが、今回の修正により、中間のメタルネス値やシーン（Sheen）を含む複雑な表面においても、物理的に正しい光の反射が再現される。あわせてPMREMGeneratorの精度も向上しており、Blenderなどで設定したラフネス値と一致した結果が得られるようになった。

■Fixed iridescence energy conservation（公式サンプル）
https://threejs.org/examples/#webgl_loader_gltf_iridescence

改良されたレクタングルのエリアライトのサンプル

レクタングルのエリアライトのサンプル「Improved RectAreaLight example」も改良。エリアライトの矩形面から発せられる光は、ポイントライトや平行光源よりも柔らかく、リアルな陰影を生み出すことが可能だが、計算コストや実装の複雑さが課題となる。今回のアップデートではLightクラスの内部処理の統一などが図られ、こうした特殊な光源を用いた際の挙動やシリアライズ処理の整合性が高められている。サンプルでは、スタジオでのライティングのような高品質な照明効果を確認できる。

■Improved RectAreaLight example（公式サンプル）
https://threejs.org/examples/#webgl_lights_rectarealight

WebGPUコンピュートシェーダによる水面シミュレーションの修正

次世代の描画API「WebGPU」への対応として、サンプル「Fixed WebGPU compute water」では、GPUの計算能力を汎用計算に利用するコンピュートシェーダを用いた水面シミュレーションを確認できる。

r182ではWebGPU環境におけるバグ修正に加え、シェーダ記述言語であるTSL（Three Shading Language）の機能が大幅に強化された。具体的には3Dテクスチャの読み込み関数やビット演算機能が追加されており、これにより流体シミュレーションのような高度な計算処理を、TSLを用いてより柔軟かつ効率的に記述できるようになっている。

■Fixed WebGPU compute water（公式サンプル）
https://threejs.org/examples/#webgpu_compute_water

SVGRendererにおける遠近クリッピング

サンプル「SVGRenderer near/far plane clipping」は、SVG形式でベクター描画を行うレンダラの修正を示すサンプル。カメラの視界範囲を定義するnear（近）とfar（遠）のクリッピング処理が正しく適用されるようになり、意図しないオブジェクトの描画が防がれるようになった。これにより、2Dグラフィックスとして出力する際の信頼性が向上している。

■SVGRenderer near/far plane clipping（公式サンプル）
https://threejs.org/examples/#svg_sandbox

WebGPU放射状ブラー

WebGPUを用いたポストプロセス処理のサンプル「WebGPU Radial Blur」では、画面の中心から放射状に像をぼかすエフェクトの効果を確認できる。ここでもシェーダ記述言語TSLの進化が寄与しており、ノードベースで構築されたシェーダシステムによって、複雑な画像処理エフェクトを直感的かつ高性能に実装できることが示されている。

■WebGPU Radial Blur（公式サンプル）
https://threejs.org/examples/#webgpu_postprocessing_radial_blur

Three.jsとは

Three.jsは、Webブラウザ上で3DCGを効率的に描画するためのJavaScriptライブラリ。オープンソース（MITライセンス）で公開されている。通常、Webページ上で高度な3D表現を行うにはWebGLというAPIを直接制御する必要があるが、その仕様は極めて低レイヤーで複雑であり、高度な専門知識を要する。Three.jsはこうした複雑な処理を抽象化し、カメラ、ライト、マテリアル、ジオメトリといった直感的な概念を用いて3Dシーンを構築できるように設計。これにより、Web開発者は比較的容易にリッチな3Dコンテンツやインタラクティブな表現を実装できるため、世界中でデファクトスタンダードとして広く利用されている。

■Three.js公式サイト
https://threejs.org/

■公式オンラインエディタ
https://threejs.org/editor/

CGWORLD関連情報

●Blenderユーザーを標的としたマルウェアが拡散、外部サイトからの.blendファイルダウンロードに注意しPythonスクリプトの自動実行設定の再確認を

Morphisecが、Blenderユーザーを標的とした、新たなサイバー攻撃キャンペーンに関する調査結果を同社ブログで発表。この攻撃はロシアに関連する脅威アクターによるものと見られ、悪意のあるBlenderファイル（.blend）を通じて、情報窃取型マルウェア「Stealc v2」を拡散させているという。
https://cgworld.jp/flashnews/01-202512-Blender-Malware.html

●VRChatワールド向け雪シェーダ「GPU Snow - GPU Particle Volumes」リリース！ ローエンドGPUでも数十万のパーティクルをレンダリング可能、基盤技術はオープンソースで公開

RED_SIMがオープンソースのUnityエディタ拡張「GPU Particle Volumes」をGitHubで公開し、その技術を用いた有料の雪シェーダ「GPU Snow - GPU Particle Volumes」をBOOTHで公開。価格は1,000円。
https://cgworld.jp/flashnews/01-202512-GPUSnow.html

●Googleら、空間をメッシュを用いたラディアンスフィールドとして再定義する3D描画技術「Radiance Meshes」公開！ 3DGSより高速描画、オープンソース

Google、カリフォルニア大学、Runwayからなる研究チームが、空間を不定形な霧や点群ではなく四面体（三角錐）メッシュを用いたラディアンスフィールドとして定義し直すことにより、NeRFや3DGS（3D Gaussian Splatting）など既存技術の壁を突破する新しい3D空間の描画手法「Radiance Meshes for Volumetric Reconstruction」をオープンソース（MITライセンス）で公開。
https://cgworld.jp/flashnews/01-202512-RadianceMeshes.html