stylized 1-bit rendering

This commit is contained in:
Jonas H
2026-01-21 11:04:55 +01:00
parent 5d2eca0393
commit 2422106725
40 changed files with 2859 additions and 366 deletions

View File

@@ -1,120 +1,70 @@
struct VertexInput {
@location(0) position: vec3<f32>,
@location(1) normal: vec3<f32>,
@location(2) uv: vec2<f32>,
}
struct VertexOutput {
@builtin(position) clip_position: vec4<f32>,
@location(0) world_position: vec3<f32>,
@location(1) world_normal: vec3<f32>,
@location(2) uv: vec2<f32>,
}
struct Uniforms {
model: mat4x4<f32>,
view: mat4x4<f32>,
projection: mat4x4<f32>,
height_scale: f32,
time: f32,
}
@group(0) @binding(0)
var<uniform> uniforms: Uniforms;
@group(0) @binding(1)
var height_texture: texture_2d<f32>;
@group(0) @binding(2)
var height_sampler: sampler;
@vertex
fn vs_main(input: VertexInput) -> VertexOutput {
var output: VertexOutput;
let height = textureSampleLevel(height_texture, height_sampler, input.uv, 0.0).r;
let instance_model = mat4x4<f32>(
input.instance_model_0,
input.instance_model_1,
input.instance_model_2,
input.instance_model_3
);
var displaced_pos = input.position;
displaced_pos.y += height * uniforms.height_scale;
let texel_size = vec2<f32>(1.0 / 512.0, 1.0 / 512.0);
let height_left = textureSampleLevel(height_texture, height_sampler, input.uv - vec2<f32>(texel_size.x, 0.0), 0.0).r;
let height_right = textureSampleLevel(height_texture, height_sampler, input.uv + vec2<f32>(texel_size.x, 0.0), 0.0).r;
let height_down = textureSampleLevel(height_texture, height_sampler, input.uv - vec2<f32>(0.0, texel_size.y), 0.0).r;
let height_up = textureSampleLevel(height_texture, height_sampler, input.uv + vec2<f32>(0.0, texel_size.y), 0.0).r;
let dh_dx = (height_right - height_left) * uniforms.height_scale;
let dh_dz = (height_up - height_down) * uniforms.height_scale;
let normal = normalize(vec3<f32>(-dh_dx, 1.0, -dh_dz));
let world_pos = uniforms.model * vec4<f32>(displaced_pos, 1.0);
let world_pos = instance_model * vec4<f32>(input.position, 1.0);
output.world_position = world_pos.xyz;
output.world_normal = normalize((uniforms.model * vec4<f32>(normal, 0.0)).xyz);
output.clip_position = uniforms.projection * uniforms.view * world_pos;
output.uv = input.uv;
let normal_matrix = mat3x3<f32>(
instance_model[0].xyz,
instance_model[1].xyz,
instance_model[2].xyz
);
output.world_normal = normalize(normal_matrix * input.normal);
output.light_space_position = uniforms.light_view_projection * world_pos;
return output;
}
fn hash(p: vec2<f32>) -> f32 {
var p3 = fract(vec3<f32>(p.xyx) * 0.1031);
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z);
}
fn should_glitter(screen_pos: vec2<f32>, time: f32) -> bool {
let pixel_pos = floor(screen_pos);
let h = hash(pixel_pos);
let time_offset = h * 6283.18;
let sparkle_rate = 0.2;
let sparkle = sin(time * sparkle_rate + time_offset) * 0.5 + 0.5;
let threshold = 0.95;
return sparkle > threshold && h > 0.95;
}
fn bayer_8x8_dither(value: f32, screen_pos: vec2<f32>) -> f32 {
let pattern = array<f32, 64>(
0.0/64.0, 32.0/64.0, 8.0/64.0, 40.0/64.0, 2.0/64.0, 34.0/64.0, 10.0/64.0, 42.0/64.0,
48.0/64.0, 16.0/64.0, 56.0/64.0, 24.0/64.0, 50.0/64.0, 18.0/64.0, 58.0/64.0, 26.0/64.0,
12.0/64.0, 44.0/64.0, 4.0/64.0, 36.0/64.0, 14.0/64.0, 46.0/64.0, 6.0/64.0, 38.0/64.0,
60.0/64.0, 28.0/64.0, 52.0/64.0, 20.0/64.0, 62.0/64.0, 30.0/64.0, 54.0/64.0, 22.0/64.0,
3.0/64.0, 35.0/64.0, 11.0/64.0, 43.0/64.0, 1.0/64.0, 33.0/64.0, 9.0/64.0, 41.0/64.0,
51.0/64.0, 19.0/64.0, 59.0/64.0, 27.0/64.0, 49.0/64.0, 17.0/64.0, 57.0/64.0, 25.0/64.0,
15.0/64.0, 47.0/64.0, 7.0/64.0, 39.0/64.0, 13.0/64.0, 45.0/64.0, 5.0/64.0, 37.0/64.0,
63.0/64.0, 31.0/64.0, 55.0/64.0, 23.0/64.0, 61.0/64.0, 29.0/64.0, 53.0/64.0, 21.0/64.0
);
let x = i32(screen_pos.x) % 8;
let y = i32(screen_pos.y) % 8;
let index = y * 8 + x;
return select(0.2, 1.0, value > pattern[index]);
}
@fragment
fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
let light_dir = normalize(vec3<f32>(-0.5, -1.0, -0.5));
let light_color = vec3<f32>(1.0, 1.0, 1.0);
let object_color = vec3<f32>(1.0, 1.0, 1.0);
let debug = 0u;
let ambient_strength = 0.2;
let ambient = ambient_strength * light_color;
let norm = normalize(input.world_normal);
let diff = max(dot(norm, -light_dir), 0.0);
let diffuse = diff * light_color;
let result = (ambient + diffuse) * object_color;
var dithered_r = bayer_8x8_dither(result.r, input.clip_position.xy);
var dithered_g = bayer_8x8_dither(result.g, input.clip_position.xy);
var dithered_b = bayer_8x8_dither(result.b, input.clip_position.xy);
let is_grey_or_black = dithered_r == 0.0 || (dithered_r == dithered_g && dithered_g == dithered_b);
if (is_grey_or_black && should_glitter(input.clip_position.xy, uniforms.time)) {
dithered_r = 1.0;
dithered_g = 1.0;
dithered_b = 1.0;
if debug == 1u {
let flowmap_uv = (vec2<f32>(input.world_position.x, input.world_position.z) + TERRAIN_BOUNDS * 0.5) / TERRAIN_BOUNDS;
let flowmap_sample = textureSampleLevel(flowmap_texture, flowmap_sampler, flowmap_uv, 0.0).rgb;
return vec4<f32>(flowmap_sample, 1.0);
}
return vec4<f32>(dithered_r, dithered_g, dithered_b, 1.0);
if debug == 2u {
let world_pos_2d = vec2<f32>(input.world_position.x, input.world_position.z);
let tile_size = 10.0;
let tile_center = floor(world_pos_2d / tile_size) * tile_size + tile_size * 0.5;
let flowmap_uv = (tile_center + TERRAIN_BOUNDS * 0.5) / TERRAIN_BOUNDS;
let flowmap_sample = textureSampleLevel(flowmap_texture, flowmap_sampler, flowmap_uv, 0.0).rgb;
let x = (flowmap_sample.r) * 2.0 - 1.0;
let y = flowmap_sample.g * 2.0 - 1.0;
let direction_to_path = normalize(vec2<f32>(x, y));
let perpendicular_to_path = normalize(vec2<f32>(-direction_to_path.y, direction_to_path.x));
let local_pos = world_pos_2d - tile_center;
let arrow_scale = 0.05;
let parallel_coord = dot(local_pos, direction_to_path) * arrow_scale;
let perpendicular_coord = dot(local_pos, perpendicular_to_path) * arrow_scale;
let to_path = step(0.95, fract(parallel_coord));
let to_perp = step(0.95, fract(perpendicular_coord));
return vec4<f32>(to_perp, to_perp, to_perp, 1.0);
}
let shadow = sample_shadow_map(input.light_space_position);
let tile_scale = 1.0;
let flowmap_strokes = flowmap_path_lighting_with_shadow(input.world_position, input.world_normal, tile_scale, shadow);
let point_strokes = point_lighting_with_shadow(input.world_position, input.world_normal, vec3<f32>(0.0, 100.0, 0.0), tile_scale, shadow);
let brightness = max(flowmap_strokes, point_strokes);
return vec4<f32>(brightness, brightness, brightness, 1.0);
}