本文へ移動
NEVERTRUSTROBOTS

プレイグラウンド

左に GLSL を書くと右に結果が出ます。入力しながら再コンパイルされ、エラーは目の前の行を指します。インストールも登録も不要 — アドレスバーのリンクには常にエディタの内容が入っています。

初めてですか？ レッスン 1 から順に進んでください。どれも短く、一つの考えだけを変え、最後に試せる箇所があります。数字を一つ変えるのに、ファイル全体を理解する必要はありません。

常に使える
  • vec2 u_res — キャンバスの幅と高さ（ピクセル）
  • float u_time — 開始からの秒数
  • vec2 u_mouse — キャンバス上の 0..1、スムージング済み
  • vec4 color — 出力する色
1 · Space
  • vec2 uvCentered()
  • vec2 uv01()
  • vec2 mouseCentered()
2 · Soft edges
  • float pixel(float d)
  • float softEdge(float d, float radius)
  • float circle(vec2 p, float radius)
  • float band(float d, float halfWidth)
  • float smin(float a, float b, float k)
3 · Colour
  • vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d)
  • vec3 palette(float t)
  • vec3 paletteNTR(float t)
4 · Frequency
  • float harmonic(float x, int octaves)
5 · Noise
  • float hash21(vec2 p)
  • float noise(vec2 p)
  • float fbm(vec2 p, int octaves)
  • float fbm(vec2 p)
  • vec2 warp(vec2 p, float amount, float scale)
6 · Symmetry
  • vec2 rot(vec2 p, float angle)
  • vec2 tile(vec2 p, float count)
  • vec2 mirror(vec2 p)
  • vec2 polar(vec2 p)
  • vec2 kaleido(vec2 p, float n)
7 · Light
  • float vignette(vec2 p, float radius, float softness)
  • float vignetteFrame(float strength)
  • float occlusion(float density, float strength)
  • vec3 fog(vec3 c, vec3 far, float distance, float density)

すべて shader/lib.glsl にあり、このサイトの全シェーダーの先頭に付加されます。