-
-
Save hanachiru/425248741dedea668a06dd91de2f0d50 to your computer and use it in GitHub Desktop.
創造工学でやるシェーダーコード
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// <summary> | |
/// 1. はじめてのフラグメントシェーダー | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// (R, G, B, A) = (1, 0, 0, 1)を各ピクセルに対して代入する | |
// 例えば描画領域が 1280x720 個ある場合、1フレームで1280 x 720回この処理が呼ばれる | |
fragColor = vec4(1.0, 0.0, 0.0, 1.0); | |
} | |
/// <summary> | |
/// 2. 画面の正規化をする | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// fragColorは出力する色(R, G, B, A)、fragCoordは座標(x, y) | |
// iResolution.xyは画面の幅を表す2次元ベクトル | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
// vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y); | |
vec2 uv = fragCoord / iResolution.xy; | |
// fragColor = vec4(uv.x, uv.y, 0.0, 1.0) | |
// (R, G, B ,A) = (uv.x, uv.y, 0.0, 1.0) | |
fragColor = vec4(uv, 0.0, 1.0); | |
} | |
/// <summary> | |
/// 3. 時間経過を取得する | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// fragColorは出力する色(RGBA)、fragCoordは座標 | |
// 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
// vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y); | |
vec2 uv = fragCoord/iResolution.xy; | |
// abs(sin(iTime)) => |sin(t)| | |
// iTimeは経過秒数, absは絶対値, sinはサイン関数 | |
// (R, G, B, A) = (uv.x, uv.y, abs(sin(iTime)), 1.0) | |
fragColor = vec4(uv.x, uv.y , abs(sin(iTime)), 1.0); | |
} | |
/// <summary> | |
/// 4. 経過時間を使った作品の練習 | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// fragColorは出力する色(RGBA)、fragCoordは座標 | |
// 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
// vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y); | |
vec2 uv = fragCoord/iResolution.xy; | |
// (R, G, B, A) = (?, 0, 0, 1) | |
// Rが0~1を周期的に繰り返している | |
// abs(x)は絶対値、sin(x)はサイン関数、uv.xはx座標、iTimeは経過秒数 | |
// 足し算は「1.0 + 2.0」のように「+」を使う | |
// 「3. 時間経過を取得する」のコードの「abs(sin(iTime))」を参考にすると良い |sin(t)| | |
fragColor = vec4(??????????, 0 , 0, 1.0); | |
} | |
/// <summary> | |
/// 5. 経過時間を使った作品の練習 その2 | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// fragColorは出力する色(RGBA)、fragCoordは座標 | |
// 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
// vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y); | |
vec2 uv = fragCoord/iResolution.xy; | |
// 「4. 経過時間を使った作品の練習」を参考にすると良い |sin(x+t)| | |
// 4の時よりも波の周期が短い | |
// 掛け算は「10.0 * 2.0」のように「*」を使う | |
float col = ??????????????; | |
// (R, G, B, A) = (col, col, col, 1) | |
fragColor = vec4(col, col, col, 1); | |
} | |
/// <summary> | |
/// 6. Step関数を使った作品 | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// fragColorは出力する色(RGBA)、fragCoordは座標 | |
// 画面の正規化をする, 画面左下が(0,0)で右上が(1,1)となるようにする | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
// vec2 uv = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y); | |
vec2 uv = fragCoord/iResolution.xy; | |
// 「5. 経過時間を使った作品の練習 その2」のcolに対してstep関数を適応する |sin(40(x - t))| | |
// step(x, y)はxがyより大きい時は0, yがx以上の時は1を返す関数 | |
// 例. step(1, 0.5) = 0 | |
float col = ???????????????; | |
fragColor = vec4(col, col, col, 1); | |
} | |
/// <summary> | |
/// 7. 距離関数を使った作品 | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
vec2 uv = fragCoord/iResolution.xy; | |
// 画面中央からの距離を求める | |
// dは 0 ~ 1/√2の値 | |
float d = distance(vec2(0.5, 0.5), uv); | |
// 距離を色として出力 | |
// (R, G, B, A) = (d, d, d, 1) | |
fragColor = vec4(d, d, d, 1); | |
} | |
/// <summary> | |
/// 8. 今までの知識と距離関数を使った作品 | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
// 左下(0,0) ~ 右上(1,1) になるように正規化 | |
vec2 uv = fragCoord/iResolution.xy; | |
// 画面中央からの距離を求める | |
// dは 0 ~ 1/√2の値 | |
float d = distance(vec2(0.5, 0.5), uv); | |
// 「6. Step関数を使った作品」と「7. 距離関数を使った作品」の知識を利用する | |
// 6ではux.x(x座標)を利用していたものを、dを利用したものに置き換える | |
float color = ???????????; | |
// 距離を色として出力 | |
// (R, G, B, A) = (color, color, color, 1) | |
fragColor = vec4(color, color, color, 1); | |
} | |
/// <summary> | |
/// 9.ボロノイ図 | |
/// </summary> | |
void mainImage( out vec4 fragColor, in vec2 fragCoord ) | |
{ | |
vec2 uv = fragCoord/iResolution.xy; | |
// 適当にランダムな母点を用意 | |
vec2[5] points = vec2[]( | |
vec2(0.14, 0.17), | |
vec2(0.83, abs(cos(iTime))), | |
vec2(abs(sin(iTime)), 0.23), | |
vec2(0.5 * cos(-iTime) + 0.5, 0.5 * sin(-iTime) + 0.5), | |
vec2(0.5 * cos(iTime) + 0.5, 0.5 * sin(iTime) + 0.5) | |
); | |
// 1. 各母点から距離を全て求める | |
// 2. 一番距離が近い母点を見つける | |
??????? | |
??????? | |
??????? | |
??????? | |
??????? | |
// 3. 色に反映 | |
fragColor = vec4(???, ???, ???, 1); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ShaderToyで使うコード達です