Shader School
0%

Uniform変数

title: "Uniform変数" description: "JavaScriptからシェーダーにデータを渡すUniform変数の仕組みを学びます。解像度や時間などの情報をシェーダーで活用します。" chapter: "01-introduction" order: 3 challenge: description: "u_time を使って色が時間とともに変化するシェーダーを作りましょう。RGBの各チャンネルをそれぞれ異なる速度でサイクルさせてください。" hints:

  • "sin関数は -1.0 ~ 1.0 の範囲を返します。0.0 ~ 1.0 に変換するには sin(x) * 0.5 + 0.5 とします。"
  • "各チャンネルに異なる周波数を使いましょう。例：sin(u_time), sin(u_time * 0.7), sin(u_time * 1.3)"
  • "完成例：fragColor = vec4(sin(u_time) * 0.5 + 0.5, sin(u_time * 0.7) * 0.5 + 0.5, sin(u_time * 1.3) * 0.5 + 0.5, 1.0);"

Uniform変数

Uniformとは

シェーダーは GPU 上で動作するため、JavaScript のデータに直接アクセスできません。しかし、画面のサイズや経過時間、マウスの位置など外部の情報が必要になることがあります。

Uniform変数は、JavaScriptからシェーダーにデータを渡すための仕組みです。「Uniform（一様な）」という名前の通り、すべてのピクセルで同じ値を持ちます。

主要なUniform変数

このプラットフォームでは、以下のUniform変数が自動的に渡されます：

u_resolution

uniform vec2 u_resolution;

キャンバスの幅と高さ（ピクセル単位）です。座標の正規化に使います。

vec2 uv = gl_FragCoord.xy / u_resolution;
// uv は (0.0, 0.0) 〜 (1.0, 1.0) の範囲

u_time

uniform float u_time;

シェーダーが開始してからの経過時間（秒）です。アニメーションの基本となります。

float pulse = sin(u_time) * 0.5 + 0.5;
// 0.0 〜 1.0 の範囲で周期的に変化

u_mouse

uniform vec2 u_mouse;

マウスカーソルの位置（ピクセル座標）です。インタラクティブなエフェクトに使います。

Uniformの宣言

Uniform変数はシェーダーの main 関数の外側で宣言します：

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;

out vec4 fragColor;

void main() {
    // ここで uniform 変数を使う
}

時間を使ったアニメーション

右のエディタのシェーダーでは、u_time を使って色がゆっくり変化するアニメーションを作っています。

sin 関数は -1.0 から 1.0 の間を周期的に変化するため、色のアニメーションに最適です。* 0.5 + 0.5 で 0.0 〜 1.0 の範囲に変換しています。

マウスインタラクション

u_mouse を使うと、マウスに反応するシェーダーが作れます：

vec2 mouse = u_mouse / u_resolution;
float dist = distance(uv, mouse);

これでマウスからの距離に応じたエフェクトが作れます。

まとめ

  • Uniform変数はJavaScriptからシェーダーにデータを渡す仕組み
  • u_resolution — キャンバスのサイズ
  • u_time — 経過時間（アニメーション用）
  • u_mouse — マウス座標（インタラクション用）
  • すべてのピクセルで同じ値を持つ