のぐそんブログ

暗いおじさんがシコシコ書くブログです。

GLSLでゆらゆらテクスチャ

ゆらゆらテクスチャをやってみたいと思います。 最終目標はこちらですが、まずは簡単なのからやっていきたいと思います。

2018年の目標

新年を迎えて、遅くなりましたが2017年の振り返りと、2018年の目標を立てたいと思います。 あまり目標を文字に起こしたことがなかったので、今年はブログに書いておくことにします。

メタボールっぽい演出

メタボールっぽい演出。 【サンプル】 こんな感じになります。

Three.jsでグリッチの練習メモ

グリッチの練習メモです。

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

前回「THREE.jsでオリジナルのポストプロセスをやってみる」と題しましてポストプロセスについての記事を書きました。 よくよく調べると、THREE.jsにはポストプロセスを行う仕組み自体が用意されており、それを利用すればオリジナルのポストプロセスも簡単に…

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

前回オフスクリーンレンダリングについて書きました。 今回は、オフスクリーンレンダリングを利用して、ポストプロセスをやってみたいと思います。 ポストプロセスを簡単に言うと、作成済みのシーンに対して、あとから何か処理を行うことです。 今回は以下の…

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

オフスクリーンレンダリングに挑戦してみたいと思います。 オフスクリーンレンダリングとは、画面には表示せずにメモリ空間上に描画することです。 この一時的に描画されるメモリ空間のことを「フレームバッファ」と言います。 今回は以下の図のように、オフ…

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

グリッチ(glitch)ぽい表現 フラグメントシェーダーを利用して、デジタル表現でよくあるグリッチに挑戦したいと思います。 理想は↓です。ただし私ではこの完成度は無理ですが、まずは挑戦してみます。 https://codepen.io/ykob/pen/GmEzoQ

Variable Font について調べる

Variable Font (バリアブルフォント)とは アドビとマクロソフト、グーグル、そしてアップルが共同で開発を進めてきたテクノロジー。 1つのフォントで複数の役割を担うフォント。 1つのフォントで複数フォントを表示できるが、ファイルサイズはそれほど大き…

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.lo…

GLSLでノイズを使うメモ

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

fract関数でタイルレイアウトに挑戦メモ

以前mod関数やfor文でタイルレイアウト挑戦しました。 for文でタイルレイアウトをやってみる 今回はfract関数を使ってタイルレイアウトに挑戦してみたいと思います。 fract関数は引数の値の少数点以下の値を返却してくれます。 mod関数で代替するとしたらmod…

GLSLで行列で回転・縮小をする為のメモ

行列を使った回転と、拡大縮小をやってみます。 sin,cosで円を回転 sin、cosを使って回転してみます。 const float PI = 3.14159265359; void main( void ) { vec2 st = (gl_FragCoord.xy * 2.0 - resolution) /min(resolution.x,resolution.y); float p = 0…

フラグメントシェーダーを使って円を描く

フラグメントシェーダーを使って円を描いてみます。 三平方の定理で円を描く void main( void ) { vec2 st = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); vec4 c = vec4(1.0); if(pow(st.x,2.0) + pow(st.y,2.0) <= 0.5){ c =…

GLSLのstep()を使っての矩形の描き方

閾値を超えたら1.0を返し、超えなかったら0.0を返すstep関数を使って矩形を描画してみたいと思います。

GLSLでフラグメントシェーダーを書く場合のメモ3

GLSLを学習中の自分用のメモです。

GLSLでフラグメントシェーダーを書く場合のメモ3

GLSLを学習中の自分用のメモです。 step関数 step(a,b) a・・・閾値 b・・・チェックされる値 bがa(閾値)より小さい値には全て0.0 を返し、a(閾値)以上の値には 1.0 を返します。 void main() { //0.0 ~ 1.0に正規化する vec2 uv = gl_FragCoord.xy/resoluti…

GLSLでフラグメントシェーダーを書く場合のメモ2

GLSLを使っての簡単な描画表現に挑戦してみます。

HSVを使って色をぬる

フラグメントシェーダーで描画した↓の丸に色を塗りたいと思います。

for文でタイルレイアウトをやってみる

以前の記事でmod関数をつかってもタイルレイアウトを試したのですが、for文のほうが馴染みがあるのでfor文を使ってやってみます。 最終的な完成イメージは↓のような感じです。

フラグメントシェーダーでタイル風レイアウトをやってみる

以前の記事のGLSLでフラグメントシェーダーを書く場合のメモで、下記のような描画を試してみました。

GLSLでフラグメントシェーダーを書く場合のメモ

フラグメントシェーダーを使った描画についてのメモです。 ちなみに頂点シェーダーを考慮すると難易度が高くなって私には理解できなくなるので、一旦下記のツールを使う前提で書いていきます。 http://glslsandbox.com/

TouchDesignerで条件式を扱う為オペレーターを調べる

TouchDesignerで条件式を扱う為オペレーターを調べてみようと思います。

blenderのパーティクル機能のメモ

blenderのパーティクル機能を使ってみたいと思います。

jsでの音データの使い方メモ

音データを使って、ビジュアル表現をしたかったので音データのとり方を調べました。

TouchDesignerのFeedback TOPを使う

Feedback TOPの使い方がイマイチわからなかったのでメモがわりにまとめます。 Feedback TOPは、フレームの映像を薄く残していくために使います。 基本的な使い方は以下のようにオペレーターをループさせて合成していきます。 Feedback TOPは現在のフレームよ…

アルファブレンディングやってみる

アルファブレンディングとはその名の通り、不透明表示のことです。 ポイントはmaterialのtransparentをtrueにすることです。 GLSLでテクスチャを貼っているので、フラグメントシェーダー側で透明度を設定します。 ※GLSLでテクスチャを貼っている意味はあまり…