Zenn
🍁

【Three.js】一部のオブジェクトのみにPost Processingをかける

2022/07/23に公開
Three.js
tech

概要

Three.jsのPost Processing（ポストプロセス）を一部のオブジェクトのみにかける方法の備忘録メモです

▼中央の葉っぱを除いてグリッチエフェクトをかけてる例

TL;DR

Three.jsのLayersを使って、何の効果も付けずレンダリングするオブジェクトはLayer0、Post ProcessingをかけるオブジェクトはLayer1、とレイヤーを分けることで別々に描画することができます。

▼大参考
https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/4

// 描画を分けたいオブジェクトごとにlayerを分ける
// Object3D.layers.set(layer)
obj00.layers.set(0);
obj01.layers.set(1);

renderer.autoClear = false;

tick() {
   renderer.clear();

   // post processing をかけるlayer（ここでは0）のレンダリング
   camera.layers.set(0);
   composer.render();

   //post processing をかけないlayer（ここでは1）のレンダリング
   renderer.clearDepth();
   camera.layers.set(1);
   renderer.render(scene, camera);
}

Layersについて

概要

Layersを使用するとObject3Dを0~31の計32レイヤーに割り当てられ、用途としてはカメラで一部のレイヤーを描画しないなどの切り分けができたり、今回のように効果を加える対象を限定することができます。

Object3Dを割り当てる

Group単位でLayerに割り当てることはできません。
※gltf, objなどの3Dモデルは、ロードしたモデル1つではなく、きちんと各Object3D/Meshに適用させる必要あり

デフォルトは Layer0

Layerは特に指定しなければデフォルトでは全てLayer0に割り当てられます。

使用例

一部のレイヤーのみにLightを当てる

const ambLight = new THREE.AmbientLight(0xffffff, 1.0);
// Ambient LightをLayer1のみに適用する
// ※デフォルトでLayer0に適用されてしまってるので、Layer0は明示的に不適用（disable）とする
ambLight.layers.disable(0);
ambLight.layers.enable(1);
scene.add(ambLight);

参考

▼Three.js Document - Layers
https://threejs.org/docs/#api/en/core/Layers
▼Three.js 公式のLayersの使用デモ
https://threejs.org/examples/#webgl_layers

Discussion