エフェクト作成入門講座 Three.js編 - レンズフレア表現

レンズフレアは、カメラのレンズに光源が直接入ったときに発生する光の現象です。映画やゲームでよく見られる演出で、リアルなシーンを演出するために使われます。Three.js でレンズフレアを表現するデモを紹介します。

本記事はThree.js r183（2025年2月）のバージョンで作成しています。

デモとサンプルコード

マウスドラッグすることで、レンズフレアを確認できます。

Three.jsでのレンズフレア

Three.jsの WebGPUレンダラー と LensflareMesh を使って実装します。

// Three.js本体の読み込み
import * as THREE from "three";

// WebGPUレンダラーの読み込み
import { WebGPURenderer } from "three/webgpu";

// レンズフレア用クラスの読み込み
import { LensflareMesh, LensflareElement } from "three/examples/jsm/objects/LensflareMesh.js";

// WebGPU版レンダラーの作成
// antialias: true を指定して輪郭のジャギーを軽減
const renderer = new WebGPURenderer({ antialias: true });

// WebGPUレンダラーの初期化
// この await を挟まないと描画準備が未完了
await renderer.init();

// レンズフレア用画像の読み込み
const texture = textureLoader.load(flare0TextureUrl);

// テクスチャを sRGB として扱う設定
// 色空間を合わせないと発色が意図どおりにならない
texture.colorSpace = THREE.SRGBColorSpace;

// レンズフレア全体を管理するオブジェクトの作成
const lensFlare = new LensflareMesh();

// レンズフレア要素を1つ追加
// 第2引数はサイズ、第3引数は中心からの配置係数
lensFlare.addElement(new LensflareElement(texture, 2000, 0));

// レンズフレアを光源へ追加
// こうしておくと光源の位置に追従
pointLight.add(lensFlare);

レンズフレアは光源に子要素として追加します。視点が光源の裏側へ回り込むと、自動的にレンズフレアの要素が見えなくなります。

1枚だけではなく複数のフレア画像を距離違いで重ねています。LensflareElement の第2引数がサイズ、第3引数が中心からの配置係数です。

// フレア画像ごとの設定を配列で定義
// textureUrl は画像のURL
// size はフレア要素の大きさ
// dist は中心からどれだけ離して配置するかの係数
const flareTextures = [
  { textureUrl: flare0TextureUrl, size: 2000, dist: 0 },
  { textureUrl: flare5TextureUrl, size: 2500, dist: 0.1 },
  { textureUrl: flare2TextureUrl, size: 1250, dist: 0.4 },
  { textureUrl: flare4TextureUrl, size: 3750, dist: 1.8 },
];

// 配列を順番に処理してレンズフレア要素を追加
flareTextures.forEach((item) => {
  // 画像の読み込み
  const texture = textureLoader.load(item.textureUrl);

  // フレア画像も sRGB として扱う設定
  // 見た目の明るさと色味を揃えるための指定
  texture.colorSpace = THREE.SRGBColorSpace;

  // 個別のフレア要素を生成
  // item.size で大きさを指定
  // item.dist で中心からの位置を指定
  const element = new LensflareElement(texture, item.size, item.dist);

  // 作成した要素をレンズフレア全体へ追加
  lensFlare.addElement(element);
});