Babylon.jsの英語ドキュメント「Post Process Library」を読み、かっこいい表現を1,2行で実現する

この記事は[Babylon.js Advent Calendar 2022](https://qiita.com/advent-calendar/2022/babylonjs)の18日目の記事です。

# はじめに

こんにちは、XRエンジニアの[イワケン](https://twitter.com/iwaken71)です。
私はメインはUnityエンジニアなのですが、2022年1月からブラウザの3D表現に興味があり、Babylon.jsの勉強を始め、[コミュニティの立ち上げ](https://note.com/iwaken71/n/n0fd66c814fd2)を行いました。

その中で行ってきた勉強法が「英語のドキュメントを読んで和訳する」でした。Babylon.jsにはほとんど日本語ドキュメントがなく、英語のドキュメントを読んでいくしかないです。

今回の記事でも[Babylon.jsのドキュメント](https://doc.babylonjs.com/)について、DeepLで和訳しつつ、気になったところや、手を動かしてみたところを解説していきます。

本記事では「[Post Process Library](https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary)」の章を読んでいきます。


# 章立て

https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary

Post Process Libraryの章はBabylon.jsで使用するための、あらかじめ構成されたポストプロセスのライブラリが紹介されており

- [Ascii Art](https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary/asciiArtPP)
- [Digital Rain](https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary/digitalRainPP)

の2つについて紹介されています。

ちなみにPost Processとは「後処理」と訳せるように、レンダリング処理の後に対して行うフィルターエフェクトのような処理のことです。気軽に見た目をよくできることから、覚えておいて損がない知識だと思います。

> Post Processing (ポストプロセス) は、画像を画面に表示する前に、カメラの画像バッファにフルスクリーンのフィルターとエフェクトを適用する処理です。これによって、設定に時間をほとんどかけずに、アプリケーションの外観を顕著に向上させることができます。ポストプロセスエフェクトを使用して、物理カメラやフィルムのプロパティをシミュレートできます。
https://docs.unity3d.com/ja/2018.4/Manual/PostProcessingOverview.html

# [Ascii Art](https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary/asciiArtPP)を読む

Ascii Artとは、Textによる視覚的表現方法のことです。


![pp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/b2633262-47f9-04b5-a8a3-bdf20b5de3fa.gif)

https://playground.babylonjs.com/#2I28SC#24

↑こちらから確認できます。

## 使い方

アスキーアート・ポストプロセススクリプトはこちらで見ることができます。

- Normal:
    - https://cdn.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.js
- Minified:
    - https://cdn.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js

もし使用する場合は最初のページに

```html
<script src="babylon.asciiArtPostProcess.js"></script>
```
と追加し、Babylon.jsを書くscriptで、ポストプロセスのアタッチメントをメインカメラにインスタンス化するだけで、本番さながらの映像が得られます。

```js
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
```

また、scriptタグ以外にも[npm](https://www.npmjs.com/package/@babylonjs/post-processes)でもinstallできます。

```
npm install --save  @babylonjs/post-processes
```

```js
import { AsciiArtPostProcess } from '@babylonjs/post-processes/asciiArt';
```

```js
// Some awesome code
// Creates the post process
let postProcess = new AsciiArtPostProcess("AsciiArt", camera);
// Some more awesome code
```



## さらにカスタマイズ

まずできることは、ポストプロセスで使用するフォントを変更することです。

```js
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera, "10px Monospace");
```

![pp2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/71ef50ec-a6fe-0f88-2c67-aaf5b5446461.gif)

https://playground.babylonjs.com/#2I28SC#25

フォントが小さくなりましたね！

さらにパラメータを増やして遊ぶことができます。

```js
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera, 
    {
        font: "20px Monospace",
        characterSet: " -+@",
        mixToNormal: 0.5,
        mixToTile: 0.5        
    });
```
https://playground.babylonjs.com/#2I28SC#26

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/8304366f-4991-39ec-20e3-6fc3218cc543.png)


使用可能なパラメータは以下の通りです。

|パラメータ名|説明|
|---|---|
|font|"30px Monospace"のようにW3C cssの方法で定義されたフォントを使用します。注：等幅フォントを使用すると、より良い結果が得られます。|
|caracterSet|光の強さの順に使用する文字のセット。|
|mixToNormal|アスキーアートで着色された「タイル」または文字空間を混合する量を定義します（0から1の間）|
|mixToTile|アスキーアートで通常のレンダリングパスを混合する量を定義します（0と1の間）。|

mixToNormalとmixToTileの2つは、マトリックスから通常のシーンにスムーズにフェードできるように、ランタイムにも利用可能です。

```js
// Creates the post process
var postProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
// Displays the scene.
var alpha = 0;
scene.registerBeforeRender(function() {
    alpha += 0.01;
    postProcess.mixToNormal = Math.cos(alpha) * 0.5 + 0.5; // between 0 and 1.
});
```

![pp3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/accedc67-8b13-100d-50dd-4b3cf6b66955.gif)

# [Digital Rain](https://doc.babylonjs.com/toolsAndResources/assetLibraries/postProcessLibrary/digitalRainPP)を読んでいきます。

![pp4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/e776291b-1318-b31e-2c30-a23faa000b34.gif)

https://playground.babylonjs.com/#2I28SC#6

かっこいい！

## 使い方

先ほどと同様にこちらに詳細がかかれています

- Normal:
    - https://cdn.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.js
- Minified:
    - https://cdn.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js

導入するためには最初のhtmlページに

```html
<script src="babylon.digitalRainPostProcess.js"></script>
```
を追加。

JavaScriptの書くところに
```js
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera);
```

と追加します。

## さらにカスタマイズ

まずできることは、ポストプロセスで使用するフォントを変更することです。

```js
// ポストプロセスを作成する
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera, "3px Monospace").BABYLON.DigitalRainPostProcess("DigitalRain", camera, "3px Monospace");
```

もっとパラメータを増やします。

```js
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera, 
    {
        font: "30px Monospace",
        mixToNormal: 0.5,
        mixToTile: 0.5        
    });
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/3f30f563-b21c-ed04-7b93-73de06192190.png)
https://playground.babylonjs.com/#2I28SC#8


|パラメータ名|説明|
|---|---|
|font|"30px Monospace"のようにW3C cssの方法で定義されたフォントを使用します。注：等幅フォントを使用すると、より良い結果が得られます。|
|mixToNormal|デジタルレインで着色された「タイル」または文字空間を混合する量を定義します（0から1の間）。|
|mixToTile|デジタルレインで通常のレンダリングパスを混合する量を定義します（0〜1の間）。|

mixToNormalとmixToTileの2つは、マトリックスから通常のシーンにスムーズにフェードできるように、ランタイムにも利用可能です。
```js
// Creates the post process
var postProcess = new BABYLON.DigitalRainPostProcess("DigitalRain", camera);
// Displays the scene.
var alpha = 0;
scene.registerBeforeRender(function() {
    alpha += 0.01;
    postProcess.mixToNormal = Math.cos(alpha) * 0.5 + 0.5; // between 0 and 1.
});
```
![pp5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/1c7583ac-1c21-b50a-d115-1a6924a9d2ef.gif)
https://playground.babylonjs.com/#2I28SC#9


# 最後に

Babylon.jsのドキュメントからPost Process Libraryの章を読み解いていきました。1,2行で簡単にかっこいいPost Processが実装できるようになりました！

このようにBabylon.jsではLibraryとして、すぐに色んな表現ができるようになっています。それらはここから見れるのでぜひ試してみてください！

https://doc.babylonjs.com/toolsAndResources/assetLibraries

Babylon.jsを学びたい方は「Babylon.js勉強会」という、ブラウザの3D表現を学びたい人が集まっているDiscordがありますので、気軽にJoinしてみてください！お待ちしていますー

https://discord.gg/uWaWQYgxCE