God Rays

Paper Design の God Rays を参考にした可変シェーダーデモ

God Ray Controls
Preset

Shape

Density
0.41
Spotty (Length)
0.25
Intensity
0.79
Mid Size
0.10
Mid Intensity
0.75
Bloom
1.00

Motion & Transform

Speed
0.50x
Scale
1.00
Rotation
0deg
Offset X
0.20
Offset Y
-0.80

Colors

Background
#000000
Bloom Color
#eeeeee
Ray Color Count
3
Ray 1 Color
Ray 1 Alpha
0.12
Ray 2 Color
Ray 2 Alpha
0.24
Ray 3 Color
Ray 3 Alpha
0.16

仕組み

このページは、中心から放射状に伸びる光線をノイズで作り、色を何層か重ねて God Rays らしい見た目を作っています。3D モデルは使わず、1枚のフルスクリーン quad と WebGL シェーダだけで描画しています。

1. 座標を「光線用の座標系」に変換する

画面座標をアスペクト比に合わせて補正し、`offset / scale / rotation` を適用して光の中心と向きを決めます。

shapeUV = rotate((uv + offset) / scale, rotation)

2. ノイズから「1本ぶんの光線形状」を作る

角度と半径を使って value noise をサンプリングし、明るい部分だけを光線として扱います。 `density` が光線の本数感、`spotty` が長さのばらつきに効きます。

ray = raysShape(angle, radius, density, spotty)

3. 中央グローを追加して芯を作る

中心に向かう滑らかなマスクを加えて、放射の根元に光の塊を作ります。 `midSize` が大きさ、`midIntensity` が強さです。

ray += centerGlow(midSize, midIntensity)

4. 複数色レイヤーを合成する

最大 5 色までのレイヤーを少しずつ回転・位相ずらしして重ねます。通常のアルファ合成と加算合成を `bloom` で混ぜることで、にじむ光量感を作っています。

accum = mix(alphaBlend, addBlend, bloom)

5. 背景色とオーバーレイ色で最終色を仕上げる

`colorBloom` を上から薄く重ねて色味を統一し、最後に `colorBack` と合成して完成です。`speed` は時間の進み方を変えるだけなので、見た目の構造はそのまま維持されます。

final = blend(rays, colorBloom, bloom) + background
FPS 0