precision highp float; // 定数の定義 #define PI 3.14159265359 #define TAU 6.28318530718 // ------------------- // Uniform変数 // ------------------- uniform float time; // アニメーション用の時間変数 uniform vec2 resolution; // 画面解像度（幅、高さ） // 入力テクスチャ（5枚） uniform sampler2D channel0; uniform sampler2D channel1; uniform sampler2D channel2; uniform sampler2D channel3; uniform sampler2D channel4; // リング回転アニメーション用パラメータ const int ringCount = 300; // リングの数 const float rotationRingWidth = 0.002; // 各リングの幅 // アニメーションタイミング用定数 const float totalDelay = 1.; // 各リングに適用する遅延時間（秒） const float totalDuration = 12.0; // 回転アニメーションの全体の持続時間（秒） const float pauseStart = 0.2; // アニメーション開始前の静止期間（割合） const float pauseEnd = 0.8; // アニメーション終了後の静止期間（割合） // ------------------- // 乱数生成関数 // ------------------- float random(vec2 st) { return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123); } // ------------------- // イージング関数 // ------------------- float backEaseInOut(float t) { float c1 = 1.70158; float c2 = c1 * 1.525; return t < 0.5 ? (pow(2.0*t, 2.0) * ((c2 + 1.0) * 2.0*t - c2)) / 2.0 : (pow(2.0*t - 2.0, 2.0) * ((c2 + 1.0) * (2.0*t - 2.0) + c2) + 2.0) / 2.0; } // ------------------- // applyRingRotation関数 // 入力された中心化済みのテクスチャ座標に対して、リングの遅延・イージング回転を適用する // ------------------- vec2 applyRingRotation(vec2 centeredCoord, float finalAngle, float t) { float d = length(centeredCoord); // 中心からの距離 vec2 result = centeredCoord; // デフォルトでは回転なし for (int j = 0; j < ringCount; j++) { float ringBoundary = rotationRingWidth * float(j + 1); if (d < ringBoundary) { float ringProgress = (ringCount > 1) ? float(j) / float(ringCount - 1) : 0.0; float tRaw = fract((t - ringProgress * totalDelay) / totalDuration); float tAnim = (tRaw < pauseStart) ? 0.0 : (tRaw > pauseEnd ? 1.0 : (tRaw - pauseStart) / (pauseEnd - pauseStart)); float easeVal = backEaseInOut(tAnim); float ringAngleOffsetAnim = easeVal * TAU; float ringAngle = finalAngle + ringAngleOffsetAnim; mat2 ringRot = mat2(cos(ringAngle), -sin(ringAngle), sin(ringAngle), cos(ringAngle)); result = ringRot * centeredCoord; break; } } return result; } // ------------------- // main関数 // ------------------- // out vec4 fragColor; void main(void) { vec2 pos = gl_FragCoord.xy; // 画面上の現在のピクセル位置を取得 float texSizeMin = min(resolution.y / 2.25, resolution.x / 8.); vec2 texSize = vec2(texSizeMin); // 各テクスチャのサイズ（幅、高さ） float texSpacing = texSize.x / 5.; // テクスチャ間の横方向スペース float slotWidth = texSize.x + texSpacing; // 1スロットあたりの幅（テクスチャ幅 + スペース） float totalWidth = 5.0 * texSize.x + 4.0 * texSpacing; // 全体の幅（5枚のテクスチャと4個のスペース） // テクスチャ群を画面中央に配置するための左下の座標を計算 vec2 startPos = vec2((resolution.x - totalWidth) * 0.5, (resolution.y - texSize.y) * 0.5); if (pos.x < startPos.x || pos.x >= startPos.x + totalWidth || pos.y < startPos.y || pos.y >= startPos.y + texSize.y) { // ===== 移動する四角形の計算 ===== float rectSpeed = 600.0; float rectInterval = 20.0; vec2 rectSizeMin = vec2(resolution.x/30., resolution.y / 200.); vec2 rectSizeMax = vec2(resolution.x/10., resolution.y / 50.); // --- 移動する四角形（矩形）の設定 --- // 出現周期は、矩形の最大幅と間隔の合計 float cycle = rectSizeMax.x + rectInterval; // 画面上のX座標を、時間により左方向にシフト float shiftedX = pos.x - time * rectSpeed; // サイクル内での相対位置を求める float relX = mod(shiftedX, cycle); // 現在の矩形のインデックス（周期ごとに変わる） float rectIndex = floor(shiftedX / cycle); // インデックスに基づく乱数を使い、矩形のサイズ（幅, 高さ）をランダムに決定 float rndWidth = random(vec2(rectIndex, 1.0)); float rndHeight = random(vec2(rectIndex, 2.0)); vec2 thisRectSize; thisRectSize.x = mix(rectSizeMin.x, rectSizeMax.x, rndWidth); thisRectSize.y = mix(rectSizeMin.y, rectSizeMax.y, rndHeight); // 矩形の垂直位置も矩形ごとに乱数で決定（画面内に収まるように） float rndCenter = random(vec2(rectIndex, 3.0)); float rectCenter = mix(thisRectSize.y * 0.5, resolution.y - thisRectSize.y * 0.5, rndCenter); // --- 矩形内にピクセルが入っているか判定 --- bool inRect = (relX < thisRectSize.x) && (pos.y > rectCenter - thisRectSize.y * 0.5) && (pos.y < rectCenter + thisRectSize.y * 0.5); if(inRect) { gl_FragColor = vec4(1.0); return; } // ===== 従来の斜めストライプパターン ===== float redDelay = 0.04; float greenDelay = 0.0; float blueDelay = -0.06; float borderAngle = 2.0 * sin(time * 0.01); // ボーダーの斜め方向の角度 float stripeWidth = resolution.x / 150.0; // 1本分のストライプ幅（ピクセル） float speed = 20.0; // ストライプの移動速度（ピクセル/秒） // 画面全体の座標 pos を、指定した角度 borderAngle で回転 vec2 posRot = mat2(cos(borderAngle), -sin(borderAngle), sin(borderAngle), cos(borderAngle)) * pos; // 各チャネルのストライプパターンを計算 float offsetR = mod((time - redDelay) * speed, stripeWidth * 2.0); float offsetG = mod((time - greenDelay) * speed, stripeWidth * 2.0); float offsetB = mod((time - blueDelay) * speed, stripeWidth * 2.0); float patternR = mod(posRot.x + offsetR, stripeWidth * 2.0) < stripeWidth ? 1.0 : 0.0; float patternG = mod(posRot.x + offsetG, stripeWidth * 2.0) < stripeWidth ? 1.0 : 0.0; float patternB = mod(posRot.x + offsetB, stripeWidth * 2.0) < stripeWidth ? 1.0 : 0.0; gl_FragColor = vec4(patternR, patternG, patternB, 1.0); return; } vec2 relPos = pos - startPos; // テクスチャ領域内での相対位置 int slot = int(floor(relPos.x / slotWidth)); // どのテクスチャスロットに属するか計算（0～4） float localX = mod(relPos.x, slotWidth); // スロット内でのローカルなX座標を求める if (localX >= texSize.x) { // スペース部分（テクスチャ外）なら黒を出力 gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); return; } vec2 texCoord = vec2((localX / texSize.x), (pos.y - startPos.y) / texSize.y); float baseAngle = 0.0; float finalAngle = 0.; vec2 centeredCoord = texCoord - vec2(0.5); // 回転の中心座標の調整 float redDelay = -0.0085; float greenDelay = 0.01; float blueDelay = 0.0125; vec2 rotatedCenteredCoordR = applyRingRotation(centeredCoord, finalAngle, time - redDelay); vec2 rotatedCenteredCoordG = applyRingRotation(centeredCoord, finalAngle, time - greenDelay); vec2 rotatedCenteredCoordB = applyRingRotation(centeredCoord, finalAngle, time - blueDelay); vec2 finalTexCoordR = rotatedCenteredCoordR + vec2(0.5); vec2 finalTexCoordG = rotatedCenteredCoordG + vec2(0.5); vec2 finalTexCoordB = rotatedCenteredCoordB + vec2(0.5); // 該当するテクスチャから色をサンプリング vec4 col; if (slot == 0) { col.r = texture2D(channel0, finalTexCoordR).r; col.g = texture2D(channel0, finalTexCoordG).g; col.b = texture2D(channel0, finalTexCoordB).b; col.a = texture2D(channel0, finalTexCoordR).a; } else if (slot == 1) { col.r = texture2D(channel1, finalTexCoordR).r; col.g = texture2D(channel1, finalTexCoordG).g; col.b = texture2D(channel1, finalTexCoordB).b; col.a = texture2D(channel1, finalTexCoordR).a; } else if (slot == 2) { col.r = texture2D(channel2, finalTexCoordR).r; col.g = texture2D(channel2, finalTexCoordG).g; col.b = texture2D(channel2, finalTexCoordB).b; col.a = texture2D(channel2, finalTexCoordR).a; } else if (slot == 3) { col.r = texture2D(channel3, finalTexCoordR).r; col.g = texture2D(channel3, finalTexCoordG).g; col.b = texture2D(channel3, finalTexCoordB).b; col.a = texture2D(channel3, finalTexCoordR).a; } else if (slot == 4) { col.r = texture2D(channel4, finalTexCoordR).r; col.g = texture2D(channel4, finalTexCoordG).g; col.b = texture2D(channel4, finalTexCoordB).b; col.a = texture2D(channel4, finalTexCoordR).a; } else { col = vec4(0.0); } // サンプルした色のα値が0ならただの黒 if (col.a == 0.0) { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } else { gl_FragColor = col; } }