のぐそんブログ

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

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でテクスチャを貼っている意味はあまり…

glslでテクスチャをはる

glsl側でテクスチャを貼ってみたいと思います。 画像はTHREE.ImageUtils.loadTextureで読み込んでuniform変数として渡します。 渡した画像は、glslのビルドイン関数であるtexture2Dを利用します。 テクスチャの型はsampler2Dを利用します。 precision medium…

法線でライトを表現する

WebGLでライトを実装する為に最低限理解しておく必要基礎知識でライトと法線の関係について記載しましたが、実際に法線をつかってライトを表現してみようと思います。 ライトベクトル ライトの向きのことをライトベクトルと言います。 ライトと記載していま…

TouchDesugberで階層の違うオペレータをつなぐ

Geometry COMP内のTransform SOPなどに違う階層から、値を送るのはどうしたらいいのかなと思っていたら、こちらの記事に書いてありました。 画面左上の「Pane Layout」で画面を分割することができます。 画面を分割することで、階層ごとにオペレータをつなぐ…

THREE.jsでフラグメントシェーダを使ってみるの基礎基礎メモ1

フラグメントシェーダを使って色を変更してみたいと思います。 基礎の復習 ベースとなるコードです。 js window.onload = () => { let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // rendererの作成 let renderer = new THRE…

TouchDesigner基礎基礎メモ3

CHOPを使ってみる CHOPは動きを付けるためのオペレータです。 Channelという値を持つ枠を、生成したり加工したりします。 1つのCHOPで複数のChannelを通す事ができます。

THREE.GPUParticleSystemを使ってみる

パーティクルを作成する際に、new THREE.ParticleSystemクラスを使おうとすると、下記の警告がでました。 THREE.ParticleSystem has been renamed to THREE.Points. パーティクルを作成する場合はTHREE.Pointsクラスを使う必要があるみたいです。 しかし、最…

TouchDesigner基礎基礎メモ2

SOPで作成したネットワークをレンダリングしてみる SOPで作成した3Dオブジェクト群(ネットワーク)をレンダリングしてみます。

TouchDesigner基礎基礎メモ1

TouchDesignerとは TouchDesignerは、オペレーターと呼ばれるプログラムのモジュールをつなげることで、コードを書かなくてもビジュアルプログラミングができる開発環境です。 表現自体は色々できるみたいなのですが、リアルタイムで操作する映像表現などに…

タイポグラフィのメモ

タイポグラフィのメモ 文字はなんとなく感覚で調整していることが多いので、 参考に少し調べてみました。

THREE.BufferGeometryの使い方を調べる

THREE.BufferGeometryの使い方の基礎的な部分をまとめたいと思います。 THREE.BufferGeometryとは var geometry = new THREE.BufferGeometry(); BufferGeometryはピュアなWebGLのAPIを扱うようにGeometryを作成できます。 BufferGeometryは作成時は何も情報…

Three.jsでポストプロセスを試してみる

THREE.jsにはポストプロセス用のフィルターが用意されている。 使い方を調べてみる。 ポストプロセスはオブジェクトに対して適応するのではなくシーン全体に対して適応する。

Three.jsのGeometryのattributesをいじってみる

Three.jsでは、ビルドインクラスに沢山のGeometry用のクラスが用意されています。 ただ、そのままの形状を使わず、少し頂点座標を動かしてみようと思います。

UVマッピングについて

UVとはポリゴンにテクスチャを貼るためのテクスチャの座標のことです。 UV座標はX、YのVector2(2次元)の情報となります。 主にテクスチャの特定の位置を表示したい場合などに使用します。