yanjie/eskin-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tune hand pressure visualization

Browse Source
This commit is contained in:
lenn
2026-07-14 11:08:00 +08:00
parent 5af3c2862b
commit 466bb5dec7
5 changed files with 273 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
static/wgsl/shader.wgsl
View File

@@ -101,7 +101,7 @@ fn sample_range_color(value: f32) -> vec3f {
return mix(range_stop_color(1u), range_stop_color(2u), local);
}
let local = smoothstep(0.66, 1.0, t);
let local = smoothstep(0.66, 0.92, t);
return mix(range_stop_color(2u), range_stop_color(3u), local);
}
@@ -368,6 +368,7 @@ fn hand_image_uv_to_clip(image_uv: vec2f) -> vec2f {
struct HandMembraneVertexOutput {
@builtin(position) clip_position: vec4f,
@location(0) local: vec2f,
@location(1) intensity: f32,
}
fn rotate_2d(point: vec2f, angle: f32) -> vec2f {
@@ -417,12 +418,17 @@ fn vs_hand_membrane(vertex: DotVertexInput, instance: DotInstanceInput) -> HandM
var out: HandMembraneVertexOutput;
out.clip_position = vec4f(hand_image_uv_to_clip(image_uv), 0.0, 1.0);
out.local = vertex.local;
out.intensity = saturate(instance.style.w);
return out;
}
@fragment
fn fs_hand_membrane(in: HandMembraneVertexOutput) -> @location(0) vec4f {
let p = in.local;
let live = saturate(in.intensity);
let response = smoothstep(0.03, 0.96, live);
let hot = smoothstep(0.72, 0.96, live);
let live_color = sample_range_color(live);
let halo_shape = fingertip_film_alpha(p, 0.72, -0.20, 0.055);
let panel = fingertip_film_alpha(p, 0.66, -0.22, 0.035);
@@ -472,20 +478,21 @@ fn fs_hand_membrane(in: HandMembraneVertexOutput) -> @location(0) vec4f {
let glass_base = vec3f(0.006, 0.055, 0.105);
let glass_cyan = vec3f(0.025, 0.42, 0.58);
let rim_color = vec3f(0.10, 0.88, 1.00);
let glass_live = mix(glass_cyan, live_color * 0.58, response);
let rim_color = mix(vec3f(0.10, 0.88, 1.00), live_color, response);
let extrusion_color = vec3f(0.004, 0.080, 0.110);
let extrusion_edge_color = vec3f(0.015, 0.30, 0.38);
let bevel_highlight = vec3f(0.48, 1.00, 1.00);
let extrusion_edge_color = mix(vec3f(0.015, 0.30, 0.38), live_color * 0.72, response);
let bevel_highlight = mix(vec3f(0.48, 1.00, 1.00), live_color, response * 0.82);
let bevel_dark_color = vec3f(0.004, 0.035, 0.060);
let dot_color = vec3f(0.08, 0.48, 0.58);
let pressure_color = dot_color;
let pressure_hot_color = dot_color;
let dot_color = mix(vec3f(0.08, 0.48, 0.58), live_color, response);
let pressure_color = mix(dot_color, live_color, response);
let pressure_hot_color = live_color;
let color = extrusion_color * extrusion * 0.90
let membrane_color = extrusion_color * extrusion * 0.90
+ extrusion_edge_color * extrusion * halo_shape * 0.32
+ glass_base * panel * 0.26
+ glass_cyan * edge_fade * 0.46
+ glass_cyan * broad_bevel * 0.24
+ glass_live * edge_fade * 0.46
+ glass_live * broad_bevel * 0.24
+ rim_color * rim * 0.88
+ bevel_highlight * bevel_light * 1.35
+ bevel_dark_color * bevel_dark * 0.95
@@ -495,6 +502,10 @@ fn fs_hand_membrane(in: HandMembraneVertexOutput) -> @location(0) vec4f {
+ pressure_color * dots * pressure * 0.82
+ pressure_hot_color * dots * pressure_hot * 0.90;
let live_wash = live_color * response * (inner * 0.12 + dots * 0.72 + rim * 0.30)
+ live_color * hot * (inner * 0.08 + dots * 0.22);
let color = membrane_color + live_wash;
let alpha = clamp(
extrusion * 0.44
+ panel * 0.055
@@ -508,9 +519,9 @@ fn fs_hand_membrane(in: HandMembraneVertexOutput) -> @location(0) vec4f {
+ dots * pressure * 0.10,
0.0,
0.90,
);
) + response * (dots * 0.07 + rim * 0.035) + hot * dots * 0.04;
return output_color(color, alpha);
return output_color(color, clamp(alpha, 0.0, 0.96));
}
@vertex
@@ -593,7 +604,9 @@ fn vs_hand_palm_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVe
let shaped = smoothstep(0.0, 1.0, intensity);
let center = hand_image_uv_to_clip(instance.world_position.xy);
let pixel_size = u.glyph.x * mix(0.22, 0.34, shaped);
// Palm boards have more tightly packed cells than the fingertips, so use
// a larger circular mask to keep each sensor visibly readable.
let pixel_size = u.glyph.x * mix(0.40, 0.54, shaped);
let ndc_offset = vertex.local * vec2f(pixel_size / u.viewport.x, pixel_size / u.viewport.y) * 2.0;
var out: DotVertexOutput;