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

グリッチ(glitch)ぽい表現

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

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

Variable Font について調べる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Three.jsを使ってuniformsでテクスチャを渡すメモ

Three.jsを使ってテクスチャを読み込むのはとても簡単です。

THREE.jsのテクスチャについて調べる

let textuerLoader = new THREE.TextureLoader();
let mat = new THREE.MeshPhongMaterial();
let geom = new THREE.BoxGeometry(3, 3, 3);

textuerLoader.load('images/n.jpg', function (textuer) {
    mat.map = textuer;
    let mesh = new THREE.Mesh(geom, mat);
    scene.add(mesh);
});

今回はuniform変数としてデータを渡して、テクスチャを表示してみたいと思います。

GLSLでノイズを使うメモ

フラグメントシェーダをつかってのノイズを作成するためのメモです。