365 lines
19 KiB
Plaintext
365 lines
19 KiB
Plaintext
shader_type spatial;
|
||
|
||
/* ===========================================================================
|
||
卡通海面 · 纯程序化，零贴图
|
||
---------------------------------------------------------------------------
|
||
渲染顺序： 水体底色 → 菲涅尔天空反射 → 太阳波光 → 泡沫 → 地平线雾霭
|
||
|
||
四层各管一件事，缺一层就露馅：
|
||
1 底色 水越深越暗越蓝（靠 DEPTH_TEXTURE 拿到真实水深）
|
||
2 菲涅尔 掠射角反射天空色、垂直看透出底色 —— 水面的「亮边」全靠它，最容易漏
|
||
3 波光 太阳的镜面反射，压成硬边色块
|
||
4 泡沫 岸线（水浅）+ 浪尖（波峰）两处，硬边
|
||
|
||
波形分工（这是本着色器最重要的一个决定）：
|
||
· 位移只用 3 组低频正弦 —— 决定轮廓。幅度刻意压得很小，
|
||
大浪交给「明暗」而不是「几何」，否则顶点一密就是碾衣板
|
||
· 细纹 + 噪点只扰动法线、不给位移 —— 决定波光，且按距离淡出
|
||
|
||
**波形时间来自哪里（world_time 与 TIME 的关系）：**
|
||
world_time >= 0 用传入值。运行时由 ocean_demo.gd 每帧推进（联机要同步的时钟）
|
||
world_time < 0 用引擎内置 TIME。**编辑器预览就是这种情况** ——
|
||
脚本在编辑器里不跑，所以没人推 world_time；
|
||
没这个兼底的话，编辑器里看到的海是**完全冻结**的，
|
||
只有按 F6 跑起来才动。
|
||
两者默认值就是 -1，所以场景一打开（未运行）海就在动，不用做任何配置。
|
||
|
||
**五个坑，都是实测踩出来的：**
|
||
① 纯正弦场只要两个方向接近平行，叠加后就会退化成一道规则条纹。
|
||
方向必须显式排开（夹角 90° 以上），别拿「看起来不一样」的坐标去拼。
|
||
② 只有正弦、没有噪声的法线，会让**太阳波光变成一张规则网格** ——
|
||
高光落在「法线刚好平分视线与阳光」的位置，周期性法线场的高光自然周期性。
|
||
③ 打散它的噪声**必须是梯度噪声，不能用值噪声**。值噪声的方形格子在
|
||
当『高度』用的时候看不出来，但拿来求导当法线，就是一块块方格。
|
||
④ TAU / PI / E 是着色器语言的内置常量，自己再 const 一遍会直接编译失败。
|
||
而**编译失败的外观是「没着色器的一团白」**，很容易当成「参数没调好」去瞎调。
|
||
⑤ 片元阶段的 VERTEX 是**视图空间**，不是世界空间（小岛着色器在那里把
|
||
MODEL_MATRIX 乘上去当海拔用，结果整座岛被染成一大块沙滩）。
|
||
|
||
两处刻意与 cartoon_sky.gdshader 对齐：
|
||
· 反射色 / 雾霭色直接取那条天空的色板，海天交界才能连成一条线
|
||
· 时间不用内置 TIME（运行时）—— 联机两端启动时刻差几秒，看到的就不是同一片海
|
||
|
||
关于「近处细平面 + 远处大平面」两层水面：
|
||
均匀网格做不了「近处要密、远处要远」这两件事。天空在地平线以下
|
||
是一片深色半球，有限大的水面边缘与真地平线之间会露出那一条深色带
|
||
（相机高 h、平面半宽 d 时，带宽 ≈ atan(h/d)）。所以：
|
||
· 近平面小而密（2.5 m/格），跟随相机走 —— 波形是世界坐标锚定的，不会滑
|
||
· 远平面大而疏（约 500 m/格），把边缘推到 0.25° 以内，带宽只剩两三个像素
|
||
两者用同一个着色器，靠 swell_amount 区分（远平面 = 0，纯平）。
|
||
|
||
前提：本节点不能旋转（平移、缩放都可以）。波形与法线都在模型空间算。
|
||
调好的美术取值直接写在下面的 uniform 默认值里 —— 即使 .tres 里的
|
||
shader_parameter 被清掉，画面也不会跑偏。
|
||
=========================================================================== */
|
||
|
||
render_mode blend_mix, cull_disabled, unshaded, fog_disabled;
|
||
|
||
// --------------------------------------------------------------- 时间 -----
|
||
group_uniforms Time;
|
||
// -1 = 没人接管，用引擎 TIME（编辑器预览）；>= 0 = 用传入值（运行时的同步时钟）
|
||
uniform float world_time : hint_range(-1.0, 3600.0) = -1.0;
|
||
// 风向。大浪与细纹都沿着它及其旋转方向铺开
|
||
uniform vec2 wind_direction = vec2(1.0, 0.25);
|
||
|
||
// ------------------------------------------------------- 大浪（真实位移） ---
|
||
group_uniforms Swell;
|
||
// 1 = 正常水面；0 = 纯平（远平面用，不参与几何）
|
||
uniform float swell_amount : hint_range(0.0, 1.0) = 1.0;
|
||
uniform float wave_height : hint_range(0.0, 3.0) = 0.38; // 米：最低频那组的振幅
|
||
uniform float wave_length : hint_range(2.0, 120.0) = 42.0; // 米：最低频那组的波长
|
||
uniform float wave_speed : hint_range(0.0, 4.0) = 1.00; // 传播速度倍率
|
||
uniform float choppiness : hint_range(0.0, 1.0) = 0.25; // 波峰尖锐度
|
||
|
||
// ------------------------------------------------- 细纹（只动法线，不动位移）---
|
||
group_uniforms Ripple;
|
||
uniform float ripple_scale : hint_range(0.05, 6.0) = 1.40; // 1/米：细纹密度
|
||
uniform float ripple_strength : hint_range(0.0, 1.5) = 0.16; // 坡度大小（不是高度）
|
||
uniform float ripple_speed : hint_range(0.0, 4.0) = 0.70;
|
||
// 米：细纹与噪点在这么远以后淡出。**不做这个远处会满屏闪烁** ——
|
||
// 空间频率一旦落到像素频率以下就是噪点，掠射角还会把它放大
|
||
uniform float ripple_fade_distance : hint_range(10.0, 600.0) = 110.0;
|
||
|
||
// --------------------------------- 噪点（打散正弦场的规则性，见文件头坑②③）---
|
||
group_uniforms Grain;
|
||
uniform float grain_scale : hint_range(0.02, 3.0) = 0.45; // 1/米：噪点密度
|
||
uniform float grain_strength : hint_range(0.0, 2.0) = 0.32; // 坡度大小
|
||
uniform float grain_speed : hint_range(0.0, 4.0) = 0.22;
|
||
|
||
// ----------------------------------------------------------------- 水体 -----
|
||
group_uniforms Water;
|
||
uniform vec3 shallow_color : source_color = vec3(0.240, 0.800, 0.760); // 浅滩
|
||
uniform vec3 deep_color : source_color = vec3(0.030, 0.200, 0.450); // 深海
|
||
uniform float depth_fade : hint_range(0.5, 40.0) = 7.0; // 米：多深算「全深色」
|
||
uniform float opacity_shallow : hint_range(0.0, 1.0) = 0.62;
|
||
uniform float opacity_deep : hint_range(0.0, 1.0) = 0.97;
|
||
|
||
// ------------------------------------------------------------- 天空反射 -----
|
||
group_uniforms Reflection;
|
||
uniform vec3 sky_color : source_color = vec3(0.380, 0.660, 0.980); // 抬头看到的天顶
|
||
uniform vec3 horizon_color : source_color = vec3(0.780, 0.880, 1.000); // 掠射看到的地平线
|
||
uniform float fresnel_power : hint_range(0.5, 12.0) = 3.2;
|
||
uniform float fresnel_amount : hint_range(0.0, 1.0) = 0.82;
|
||
// 0=完全平滑。段数越多越「卡通」，但也越容易把法线场切成条纹 ——
|
||
// 3 是实测下来既有色块感、又不会变成斑马线的值
|
||
uniform float band_count : hint_range(0.0, 12.0) = 3.0;
|
||
uniform float band_sharpness : hint_range(0.0, 1.0) = 0.70;
|
||
|
||
// --------------------------------------------------------------- 太阳 -----
|
||
group_uniforms Sun;
|
||
// 方向由脚本从 Sun 节点推过来，保证与场景光照一致；未接管时用默认值
|
||
uniform vec3 sun_direction = vec3(0.35, 0.55, 0.35);
|
||
uniform vec3 sun_color : source_color = vec3(1.000, 0.960, 0.850);
|
||
uniform float glitter_power : hint_range(10.0, 800.0) = 320.0; // 越大越碎
|
||
uniform float glitter_strength : hint_range(0.0, 4.0) = 0.85;
|
||
uniform float glitter_bands : hint_range(0.0, 8.0) = 3.0; // 波光分段
|
||
|
||
// --------------------------------------------------------------- 泡沫 -----
|
||
group_uniforms Foam;
|
||
uniform vec3 foam_color : source_color = vec3(0.960, 0.990, 1.000);
|
||
uniform float shore_depth : hint_range(0.0, 8.0) = 1.05; // 米：多浅开始出岸线泡沫
|
||
// 岸线泡沫很容易做过头 —— 调太满就是一圈白色描边，像贴纸不像浪。0.6 左右刚好
|
||
uniform float shore_amount : hint_range(0.0, 2.0) = 0.60;
|
||
uniform float crest_amount : hint_range(0.0, 2.0) = 0.18; // 浪尖泡沫
|
||
uniform float crest_start : hint_range(0.0, 1.5) = 0.92; // 浪尖阈值（越高越稀）
|
||
// 米：浪尖泡沫的可见距离。浪花是近景细节，让它铺到地平线只会糊成一片白网
|
||
uniform float crest_fade_distance : hint_range(20.0, 800.0) = 200.0;
|
||
uniform float foam_bands : hint_range(1.0, 5.0) = 3.0; // 硬边分段
|
||
|
||
// --------------------------------------------------------- 地平线雾霭 -----
|
||
group_uniforms Haze;
|
||
// 与 cartoon_sky.gdshader 的 Haze 组保持一致，海面才能在远处融进天空
|
||
uniform vec3 haze_color : source_color = vec3(0.800, 0.890, 1.000);
|
||
uniform float haze_strength : hint_range(0.0, 1.0) = 0.95;
|
||
uniform float haze_power : hint_range(1.0, 20.0) = 5.0; // 越大，雾霭只集中在最贴地平线的一条
|
||
uniform float haze_distance : hint_range(5.0, 400.0) = 90.0;
|
||
|
||
// ------------------------------------------- 场景深度（量「水有多深」）---
|
||
// 在 Forward+ 下可用
|
||
uniform sampler2D depth_texture : hint_depth_texture, repeat_disable, filter_nearest;
|
||
|
||
// ===========================================================================
|
||
// 工具
|
||
// ===========================================================================
|
||
|
||
// 波形时间：有人接管就用传入值，没人接管就用引擎 TIME。
|
||
// 这是为了让场景「一打开就在动」—— 否则编辑器里看到的是冻结的海。
|
||
float wave_time() {
|
||
return world_time >= 0.0 ? world_time : TIME;
|
||
}
|
||
|
||
// 二维旋转。写成显式形式而不是 mat2，避免行列顺序搞混
|
||
vec2 rot2(vec2 v, float a) {
|
||
float s = sin(a);
|
||
float c = cos(a);
|
||
return vec2(v.x * c - v.y * s, v.x * s + v.y * c);
|
||
}
|
||
|
||
// 卡通色阶：把 0..1 压成 n 段硬边色块（n<0.5 时原样返回 = 平滑）
|
||
float posterize(float t, float n, float sharp) {
|
||
if (n < 0.5) {
|
||
return t;
|
||
}
|
||
float s = t * n;
|
||
float base = floor(s);
|
||
float fr = s - base;
|
||
float e = mix(0.5, 0.015, clamp(sharp, 0.0, 1.0));
|
||
return (base + smoothstep(0.5 - e, 0.5 + e, fr)) / n;
|
||
}
|
||
|
||
// 伪随机梯度方向（每个分量 -1..1）。用 fract 混合而不是 sin，大坐标下也不掉精度。
|
||
vec2 hash22(vec2 p) {
|
||
vec3 p3 = fract(vec3(p.x, p.y, p.x) * vec3(0.1031, 0.1030, 0.0973));
|
||
p3 += dot(p3, vec3(p3.y, p3.z, p3.x) + 33.33);
|
||
return fract(vec2((p3.x + p3.y) * p3.z, (p3.x + p3.z) * p3.y)) * 2.0 - 1.0;
|
||
}
|
||
|
||
// 梯度噪声（Perlin）。比值噪声多几次乘法，但这个场合不能省：
|
||
// 值噪声的格点是「梯度为零」的平台，求导当法线时就是一块块方格。
|
||
float gradient_noise(vec2 p) {
|
||
vec2 i = floor(p);
|
||
vec2 f = fract(p);
|
||
// 五次插值：二阶导连续
|
||
vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
|
||
float a = dot(hash22(i), f);
|
||
float b = dot(hash22(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0));
|
||
float c = dot(hash22(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0));
|
||
float d = dot(hash22(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0));
|
||
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
|
||
}
|
||
|
||
// 两层。第二层旋转约 37° 并换频率 —— 两层同向的话网格会重新变得可辨。
|
||
// 再多一层在掠射角下只会变成噪点，没有收益。
|
||
float grain(vec2 p) {
|
||
return gradient_noise(p) * 0.65 + gradient_noise(rot2(p, 0.65) * 2.07 + 17.3) * 0.35;
|
||
}
|
||
|
||
// ===========================================================================
|
||
// 高度场 —— 顶点位移和法线用的是同一个函数
|
||
// ===========================================================================
|
||
|
||
// 三组正弦的振幅和。浪尖泡沫要拿它当分母，
|
||
// 拿 wave_height 当分母会永远溢出到 1（泡沫铺满整个海面）
|
||
float swell_amplitude_sum() {
|
||
return wave_height * 1.79; // 1 + 0.52 + 0.27
|
||
}
|
||
|
||
// 返回 (高度, dh/dx, dh/dz)
|
||
//
|
||
// 三组正弦的频率比取 1 : 1.73 : 2.61（≈ √3、√7），互不成整数倍，
|
||
// 叠加后不会每过一段就重复出同样的花样。方向两两相差至少 60°。
|
||
vec3 swell_field(vec2 p, float t) {
|
||
vec2 d0 = normalize(wind_direction); // 随风向
|
||
vec2 d1 = rot2(d0, 2.30); // +131.8°
|
||
vec2 d2 = rot2(d0, -1.15); // -65.9°
|
||
|
||
float k = TAU / max(wave_length, 0.001);
|
||
float k0 = k;
|
||
float k1 = k * 1.73;
|
||
float k2 = k * 2.61;
|
||
|
||
float a0 = wave_height;
|
||
float a1 = wave_height * 0.52;
|
||
float a2 = wave_height * 0.27;
|
||
|
||
float sp = t * wave_speed;
|
||
float p0 = dot(d0, p) * k0 + sp;
|
||
float p1 = dot(d1, p) * k1 + sp * 1.35;
|
||
float p2 = dot(d2, p) * k2 + sp * 1.80;
|
||
|
||
float h = a0 * sin(p0) + a1 * sin(p1) + a2 * sin(p2);
|
||
vec2 g = a0 * k0 * cos(p0) * d0
|
||
+ a1 * k1 * cos(p1) * d1
|
||
+ a2 * k2 * cos(p2) * d2;
|
||
return vec3(h, g.x, g.y);
|
||
}
|
||
|
||
// 细纹的坡度（只有坡度，没有高度）。直接返回「坡多陡」而不是「水多高」。
|
||
//
|
||
// 方向是**写死的固定角度**，只让第一组跟着风向走。
|
||
// 教训：曾经写成 normalize(vec2(1.0, wind_direction.y)) 与 normalize(vec2(-2.0, 9.0))，
|
||
// 而 wind_direction 是 (1, 0.25) —— normalize(0.25, -1) 与 normalize(-2, 9) 恰好反向平行，
|
||
// 两组余弦相消，整层退化成一道 1D 驻波。三组夹角依次约 96° / 90°，不会再退化。
|
||
vec2 ripple_grad(vec2 p, float t) {
|
||
vec2 d0 = normalize(vec2(wind_direction.y, -wind_direction.x)); // 与风向垂直
|
||
vec2 d1 = normalize(vec2(7.0, 3.0)); // 23.2°
|
||
vec2 d2 = normalize(vec2(-3.0, 7.0)); // 113.2°
|
||
float k = ripple_scale;
|
||
float sp = t * ripple_speed;
|
||
float p0 = dot(d0, p) * k + sp;
|
||
float p1 = dot(d1, p) * k * 1.73 + sp * 1.6;
|
||
float p2 = dot(d2, p) * k * 2.41 + sp * 0.9;
|
||
return ripple_strength * (cos(p0) * d0 + 0.7 * cos(p1) * d1 + 0.5 * cos(p2) * d2);
|
||
}
|
||
|
||
// 噪点的坡度：有限差分。
|
||
// **它就是「波光不规则」的全部来源**（见文件头坑②）—— 只有正弦的话高光会连成网格。
|
||
// 噪点本来就没有解析导数，而三次采样只贵一点点。
|
||
vec2 grain_grad(vec2 p, float t) {
|
||
float s = grain_scale;
|
||
vec2 q = p * s + vec2(t * grain_speed, -t * grain_speed * 0.7);
|
||
float e = 0.30;
|
||
float g0 = grain(q);
|
||
float gx = grain(q + vec2(e, 0.0));
|
||
float gz = grain(q + vec2(0.0, e));
|
||
return grain_strength * vec2(gx - g0, gz - g0) / e;
|
||
}
|
||
|
||
// ===========================================================================
|
||
// 顶点
|
||
// ===========================================================================
|
||
|
||
varying vec3 v_world_pos;
|
||
|
||
void vertex() {
|
||
// 波形用**世界坐标**锚定，不是模型坐标 —— 否则近平面跟着相机走的时候，
|
||
// 海浪会跟着一起滑，看上去像船在推着水跑
|
||
vec3 world = (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz;
|
||
vec3 w = swell_field(world.xz, wave_time());
|
||
|
||
// 向波峰挤压：把波谷压平、波峰收尖，剪影才像「浪」而不是「正弦」
|
||
float h = w.x * (1.0 + choppiness * 0.35 * sign(w.x));
|
||
VERTEX.y += h * swell_amount;
|
||
|
||
NORMAL = normalize(vec3(-w.y * swell_amount, 1.0, -w.z * swell_amount));
|
||
|
||
v_world_pos = (MODEL_MATRIX * vec4(VERTEX, 1.0)).xyz;
|
||
}
|
||
|
||
// ===========================================================================
|
||
// 片元
|
||
// ===========================================================================
|
||
|
||
void fragment() {
|
||
vec2 p = v_world_pos.xz;
|
||
float t = wave_time();
|
||
|
||
vec3 to_cam = CAMERA_POSITION_WORLD - v_world_pos;
|
||
float view_dist = length(to_cam);
|
||
vec3 view_dir = to_cam / max(view_dist, 0.001);
|
||
vec3 sun_dir = normalize(sun_direction);
|
||
|
||
// ------------------------------------------------------------ 法线 ----
|
||
vec3 swell = swell_field(p, t);
|
||
// 细纹与噪点按距离淡出
|
||
float ripple_fade = exp(-view_dist / max(ripple_fade_distance, 0.001));
|
||
vec2 grad = swell.yz * swell_amount
|
||
+ (ripple_grad(p, t) + grain_grad(p, t)) * ripple_fade;
|
||
vec3 n = normalize(vec3(-grad.x, 1.0, -grad.y));
|
||
|
||
// 反射方向：既决定反射到天空的哪一段，也决定地平线雾霭的强弱
|
||
vec3 refl = reflect(-view_dir, n);
|
||
|
||
// ------------------------------------------------ 场景深度 → 水深 ----
|
||
// 水面是半透明的（下面会写 ALPHA），所以走透明队列、在不透明物之后绘制，
|
||
// 此刻深度图里已经有岛和地形。没有这一步就没有浅滩渐变，也没有岸线泡沫。
|
||
float raw_depth = texture(depth_texture, SCREEN_UV).r;
|
||
vec3 ndc = vec3(SCREEN_UV * 2.0 - 1.0, raw_depth);
|
||
vec4 scene_view = INV_PROJECTION_MATRIX * vec4(ndc, 1.0);
|
||
scene_view.xyz /= scene_view.w;
|
||
float scene_dist = -scene_view.z;
|
||
float water_dist = -VERTEX.z; // 片元里的 VERTEX 是视图空间，-z 就是沿视线的距离
|
||
float depth = max(scene_dist - water_dist, 0.0);
|
||
|
||
// ------------------------------------------------------------ 1 底色 ---
|
||
float d = clamp(depth / max(depth_fade, 0.001), 0.0, 1.0);
|
||
vec3 body = mix(shallow_color, deep_color, d);
|
||
|
||
// -------------------------------------------------------- 2 菲涅尔 ---
|
||
float fres = pow(1.0 - clamp(dot(n, view_dir), 0.0, 1.0), fresnel_power);
|
||
fres = clamp(fres * fresnel_amount, 0.0, 1.0);
|
||
// 压成硬边色阶 —— 水体到天空反射之间是几段色块，不是一条渐变
|
||
fres = posterize(fres, band_count, band_sharpness);
|
||
|
||
vec3 sky = mix(horizon_color, sky_color, clamp(refl.y * 1.6, 0.0, 1.0));
|
||
vec3 col = mix(body, sky, fres);
|
||
|
||
// ---------------------------------------------------------- 3 波光 ---
|
||
vec3 half_v = normalize(view_dir + sun_dir);
|
||
float glitter = pow(max(dot(n, half_v), 0.0), glitter_power) * glitter_strength;
|
||
// 再压一次色阶：把连续的高光切成几块碎点，才是卡通水面的「闪光」
|
||
glitter = posterize(clamp(glitter, 0.0, 1.0), glitter_bands, 0.9);
|
||
col += sun_color * glitter;
|
||
|
||
// ---------------------------------------------------------- 4 泡沫 ---
|
||
// 岸线：水浅的地方
|
||
float shore = 1.0 - smoothstep(0.0, max(shore_depth, 0.001), depth);
|
||
// 浪尖：拿振幅之和当分母（见 swell_amplitude_sum 的注释），并按距离淡出
|
||
float crest = smoothstep(crest_start, 1.0, swell.x / max(swell_amplitude_sum(), 0.001));
|
||
crest *= exp(-view_dist / max(crest_fade_distance, 0.001));
|
||
float foam = clamp(shore * shore_amount + crest * crest_amount * swell_amount, 0.0, 1.0);
|
||
foam = posterize(foam, foam_bands, 0.95);
|
||
col = mix(col, foam_color, foam);
|
||
|
||
// ------------------------------------------------------ 地平线雾霭 ---
|
||
// 视线越平，反射到的天空越靠近地平线 —— 而那里本就是雾霭色。
|
||
// 于是海天交界不用画线就自然连上了（与 cartoon_sky 的 Haze 组同色）
|
||
float far = 1.0 - exp(-view_dist / max(haze_distance, 0.001));
|
||
float glare = pow(1.0 - clamp(refl.y, 0.0, 1.0), haze_power);
|
||
col = mix(col, haze_color, clamp(glare * haze_strength * (0.25 + 0.75 * far), 0.0, 1.0));
|
||
|
||
ALBEDO = col;
|
||
// 泡沫处不透明，否则浪花会透出底下的水，看着像一层贴纸
|
||
ALPHA = max(mix(opacity_shallow, opacity_deep, d), foam);
|
||
}
|