THREE.jsでオリジナルのポストプロセスをやってみる

前回オフスクリーンレンダリングについて書きました。

今回は、オフスクリーンレンダリングを利用して、ポストプロセスをやってみたいと思います。

ポストプロセスを簡単に言うと、作成済みのシーンに対して、あとから何か処理を行うことです。

今回は以下のような２つのシーンを掛け合せてみようと思います。

THREE.jsでオフスクリーンレンダリングを試してみる為のメモ

オフスクリーンレンダリングに挑戦してみたいと思います。 オフスクリーンレンダリングとは、画面には表示せずにメモリ空間上に描画することです。

この一時的に描画されるメモリ空間のことを「フレームバッファ」と言います。

今回は以下の図のように、オフスクリーンレンダリングした情報をテクスチャ画像として、画面上に表示してみたいと思います。

フラグメントシェーダーでグリッチをやりたいけど上手くいかない

グリッチ(glitch)ぽい表現

フラグメントシェーダーを利用して、デジタル表現でよくあるグリッチに挑戦したいと思います。

理想は↓です。ただし私ではこの完成度は無理ですが、まずは挑戦してみます。 https://codepen.io/ykob/pen/GmEzoQ

Variable Font について調べる

Variable Font （バリアブルフォント)とは

アドビとマクロソフト、グーグル、そしてアップルが共同で開発を進めてきたテクノロジー。 1つのフォントで複数の役割を担うフォント。

1つのフォントで複数フォントを表示できるが、ファイルサイズはそれほど大きくはならず、複数フォントを読み込むよりフォントサイズを削減できる。

WEBで利用する際も通信回数が減るためデータの容量も減らせますし、設定できるプロパティの増える。 また、レスポンシブレンダリングという技術が採用されているようで、レスポンシブデザインをフォントまで適応させることができるようになるようです。

Three.jsで画面全体に板ポリゴンを貼る

板ポリゴンを作成して、テクスチャを貼ってみたいと思います。 まずは、画面全体に板ポリゴンを貼ってみたいと思います。

Geometryクラスと、BufferGeometryクラスで少し書き方が異なるみたいだったので、両方書いておきます。

セルフユーザービリティテストのメモ

本日UXDTさん主催の「セルフユーザビリティテスト検定講座」に参加してきました。

参加者は30人ほどいて、職種もデザイナーや、エンジニア、セールス、エディタなど職種も様々でした。

はじめは座学でセルフユーザービリティの概要を聞き、最後に実際にワークショップを行いました。

フラグメントシェーダーでモノクロエフェクトするためのメモ

フラグメントシェーダーでモノクロエフェクトをやってみます。 このエフェクトは比較的分かりやすかったです。

下の画像をモノクロ表示してみたいと思います。