ピ・プ

ピアノとプログラムが好きです。Houdiniの勉強内容をまとめたブログです

3.GLSL 2D螺旋構造虹の解析

f:id:karisuton:20170912030537p:plain

 http://glslsandbox.com/e#41999.0

2つの円が色を変えながらくるくる回っています。

 

どうやって作ってるんだろう...

ということで解析してみました。(最後の一行は理解出来なかった)

 


void main()
{
vec2 r = resolution;
// 現在のピクセル位置(0~横解像度,0~縦解像度)

vec2 o = gl_FragCoord.xy - r/2.;
// (-横解像度*0.5 ~ +横解像度*0.5,-縦解像度*0.5 ~ +縦解像度*0.5)

o = vec2(length(o) / r.y - .3, atan(o.y,o.x));
// 極座標系に変換 ".3"=円の半径 o.xは外にかけて増えるmaxで0.62ぐらい o.yはぐるっと回っている-3.14 ~ 0 ~ +3.14

// oを表示するとこうなる

f:id:karisuton:20170913033123p:plain

vec4 s = .07*cos(1.5*vec4(0,1,2,3) + time + o.y + cos(o.y) * cos(time));
// sがなにやってるかひと目では分かりません。こういうときはsを表示してみます。
// gl_FragColor=s*(1./0.07).;return;
// sの画像です。画像なので動いていないが、極座標系がくるくる回っています。

f:id:karisuton:20170913031100p:plain


// cosの中にcosがある..ややこしいです。括弧内の2つのcosを消してみると...
// .07*cos(1.5*vec4(0,1,2,3) + time + o.y);
// すると2つの円が同じ速度で回転しています

//vec4(0,1,2,3)にtimeを足すことで各要素のxyzwが増えていきます。

// そこに、o.yを足すことで極座標系なので回ります。

 // 最後にcosと*0.07をすることで-0.07~+0.07になります。

vec4 e = s.yzwx;

//eはsの要素を並び替えたものです。


vec4 f = max(o.x-s,e-o.x);

//o.x-s はo.xで作られる円を-sして円の中心の場所を±0.07ずらしています。中心が黒で外が白。

// e-o.xも同じで円の中心をずらしていますが、e-o.xで中心が白く外が黒。

//vec4 f = max(o.x-s.x,e.x-o.x);  x成分だけ表示した時のfは以下の画像になります。

f:id:karisuton:20171028144544p:plain

// もとのvec4 f = max(o.x-s,e-o.x);に大きい値(10)をかけて表示すると以下のようになります。

f:id:karisuton:20171028145120p:plain


gl_FragColor = dot( clamp(f*r.y,0.,1.) , 72.*(s-e)) * (s-.1) + f;

// fをコメントアウトすると背景が真っ黒になります。

// 最後が分からない...............参考になる情報などあれば欲しいです

}

2GLSL レイマーチで山を描く

最近はShadertoyで遊んでいます。

とてもわかりやすい山のシェーダがありましたので、自分用のメモのためにすべての行の意味を日本語でコメントを追記しました。

山を描く学習をするときに誰かの助けになればと思って公開していますので、よかったら見てみてください

https://www.shadertoy.com/view/4tscR4

f:id:karisuton:20170826140512p:plain

1GLSL 初めてのWebGL

以前より、shaderを手軽に書きたいと思っていた。

そこで、ShaderToyを利用した。

ShaderToyはwebglを投稿するサイトです。pixivのglslバージョンです。

投稿されているものは、煙の表現、水の流れる表現、水の屈折、月日に照らされた水面などコードだけでこんなにきれいな表現が出来ているのかと驚かされます。

 

コードだけでモデルを表示されている方もいます。

 

私もshadertoy始めました。

ドラッグすると青い●がくっついてきます。

https://www.shadertoy.com/view/lsjyDz

f:id:karisuton:20170409213622p:plain

続きを読む

28Houdini RippleSolver1

簡単なRippleSolverのサンプルを作りました。

i create easy ripplesolver sample.

 

sample:

ripplesolver.hipnc - Google ドライブ

movie:

ripplesolver.mp4 - Google ドライブ