Add raymarched fog

res/shaders/constants.wgsl

@@ -5,3 +5,7 @@ const INV_SQRT_3 = 0.57735026918962576451; // 1 / sqrt(3)
 // total = (2n + 1)^2
 const SHADOW_SAMPLES = 2;
 const INV_SHADOW_SAMPLES = 1.0 / 25.0;
+const FOG_MAX_STEPS = 20;
+const FOG_MAX_DIST = 300.0;
+const FOG_SCALE = 0.01;
+const FOG_DENSITY = 1.0;

res/shaders/fog.wgsl

@@ -1,46 +1,72 @@
 #include globals.wgsl
+#include constants.wgsl
+#include noise.wgsl
+
+struct FogVertexOutput {
+    @builtin(position) clip_position: vec4<f32>,
+    @location(0) world_position: vec3<f32>,
+    @location(1) light_world_position: vec3<f32>,
+}
 
 @vertex
 fn vs_main(
     model: VertexInput,
     instance: InstanceInput,
-) -> VertexOutput {
+) -> FogVertexOutput {
     let model_matrix = mat4x4<f32>(
         instance.model_matrix_0,
         instance.model_matrix_1,
         instance.model_matrix_2,
         instance.model_matrix_3,
     );
-    let normal_matrix = mat3x3<f32>(
-        instance.normal_matrix_0,
-        instance.normal_matrix_1,
-        instance.normal_matrix_2,
-    );
-
-    let world_normal = normalize(normal_matrix * model.normal);
-    let world_tangent = normalize(normal_matrix * model.tangent);
-    let world_bitangent = normalize(normal_matrix * model.bitangent);
-    let tangent_matrix = transpose(mat3x3<f32>(
-        world_tangent,
-        world_bitangent,
-        world_normal,
-    ));
 
     let world_position = model_matrix * vec4<f32>(model.position, 1.0);
 
-    var out: VertexOutput;
+    var out: FogVertexOutput;
     out.clip_position = camera.proj * camera.view * world_position;
-    out.tex_coords = model.tex_coords;
-    out.tangent_position = tangent_matrix * world_position.xyz;
-    out.tangent_light_position = tangent_matrix * light.position;
-    out.tangent_view_position = tangent_matrix * camera.position.xyz;
-
-    out.world_position = world_position;
+    out.world_position = world_position.xyz / world_position.w;
+    out.light_world_position = light.position;
 
     return out;
 }
 
-@fragment
-fn fs_main(vert: VertexOutput) -> @location(0) vec4<f32> {
-    return vec4<f32>(0.5, 0.5, 0.5, 0.1);
+fn fog_noise(pos: vec3<f32>) -> f32 {
+    var p = pos * FOG_SCALE;
+    p.x += global_uniforms.time * 0.01;
+    p.y += global_uniforms.time * 0.1;
+    p.z += sin(global_uniforms.time * 0.1) * 0.1;
+    return fbm(p);
+}
+
+fn ray_march(origin: vec3<f32>, direction: vec3<f32>, scene_depth: f32) -> f32 {
+    var density = 0.0;
+    var depth = 0.0;
+    for (var i = 0; i < FOG_MAX_STEPS; i++)
+    {
+        depth += FOG_MAX_DIST / f32(FOG_MAX_STEPS);
+        let p = origin + direction * depth;
+        density += fog_noise(p) * FOG_DENSITY / f32(FOG_MAX_STEPS);
+        if (density >= 1.0)
+        {
+            density = 1.0;
+            break;
+        }
+        if (depth >= scene_depth)
+        {
+            break;
+        }
+    }
+    return density;
+}
+
+@fragment
+fn fs_main(vert: FogVertexOutput) -> @location(0) vec4<f32> {
+    var color = vec4<f32>(0.5, 0.5, 0.5, 1.0);
+
+    let direction = normalize(vert.world_position.xyz - camera.position.xyz);
+    let scene_depth = FOG_MAX_DIST; // TODO: sample geometry pass depth buffer
+    let density = ray_march(vert.world_position.xyz, direction, scene_depth);
+    color.a *= density;
+
+    return color;
 }

res/shaders/globals.wgsl

@@ -3,6 +3,7 @@
 struct CameraUniform {
     view: mat4x4<f32>,
     proj: mat4x4<f32>,
+    inv_view_proj: mat4x4<f32>,
     position: vec4<f32>,
 }
 @group(0) @binding(0)
@@ -16,12 +17,11 @@ struct Light {
 @group(1) @binding(0)
 var<uniform> light: Light;
 
-// Needs to be 16 bytes in WebGL
 struct GlobalUniforms {
+    time: f32,
     light_matrix_index: u32,
     use_shadowmaps: u32,
-    _padding1: u32,
-    _padding2: u32,
+    _padding: u32,
 }
 @group(1) @binding(1)
 var<uniform> global_uniforms: GlobalUniforms;

res/shaders/noise.wgsl

@@ -0,0 +1,40 @@
+// Noise functions from 42yeah:
+// https://blog.42yeah.is/rendering/2023/02/11/clouds.html
+fn rand(p: vec3<f32>) -> f32 {
+    return fract(sin(dot(p, vec3<f32>(12.345, 67.89, 412.12))) * 42123.45) * 2.0 - 1.0;
+}
+
+fn value_noise(p: vec3<f32>) -> f32 {
+    let u = floor(p);
+    let v = fract(p);
+    let s = smoothstep(vec3<f32>(0.0), vec3<f32>(1.0), v);
+
+    let a = rand(u);
+    let b = rand(u + vec3<f32>(1.0, 0.0, 0.0));
+    let c = rand(u + vec3<f32>(0.0, 1.0, 0.0));
+    let d = rand(u + vec3<f32>(1.0, 1.0, 0.0));
+    let e = rand(u + vec3<f32>(0.0, 0.0, 1.0));
+    let f = rand(u + vec3<f32>(1.0, 0.0, 1.0));
+    let g = rand(u + vec3<f32>(0.0, 1.0, 1.0));
+    let h = rand(u + vec3<f32>(1.0, 1.0, 1.0));
+
+    return mix(mix(mix(a, b, s.x), mix(c, d, s.x), s.y),
+               mix(mix(e, f, s.x), mix(g, h, s.x), s.y),
+               s.z);
+}
+
+fn fbm(p: vec3<f32>) -> f32 {
+    let num_octaves = 8;
+    var weight = 0.5;
+    var q = p;
+    var ret = 0.0;
+
+    for (var i = 0; i < num_octaves; i++)
+    {
+        ret += weight * value_noise(q);
+        q *= 2.0;
+        weight *= 0.5;
+    }
+
+    return saturate(ret);
+}