11章カスタムシェーダーとポストプロセス

本書もあと少しで終わりです。この章ではこれまで触れていなかった重要な機能、レンダリングのポストプロセッシングについて説明します。それに加えて独自シェーダーの作成方法についても説明します。この章で紹介する主な内容は以下のとおりです。

  • ポストプロセッシングに必要なThree.jsの設定
  • Three.jsで利用できるTHREE.BloomPassやTHREE.FilmPassといった基本的なポストプロセッシングパス
  • マスクを利用してシーンの一部にだけエフェクトを適用する方法
  • THREE.TexturePassを利用した描画結果の保存
  • THREE.ShaderPassを利用したセピアフィルタ、鏡面効果、色調整などの基本的なポストプロセッシングエフェクトの追加
  • THREE.ShaderPassを使用したさまざまな種類のブラーエフェクトや高度なフィルタ
  • 単純なシェーダーの作成と独自ポストプロセッシングエフェクトの作成

本書ではこれまで「1.6.1 requestAnimationFrameの導入」で作成した描画ループを利用して、シーンをアニメーションしていました。ポストプロセッシングを使用する場合はこの描画ループ内の処理にいくつか変更を加え、これまでの最終的な描画結果に対してさらにポストプロセスを適用できるようにする必要があります。最初にその方法を説明します。

11.1　ポストプロセッシングに必要な設定

Three.jsでポストプロセッシングを利用するには、現在の設定にいくつか変更を加える必要があります。それには次のような手順を踏みます。

  1. ポストプロセッシングパスを追加するためのTHREE.EffectComposerを作成する。
  2. シーンを描画した後でさらにポストプロセッシングを適用できるよう ...

Get 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial