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

调整270度展开点阵布局

Browse Source
This commit is contained in:
lenn
2026-07-27 01:43:54 +08:00
parent 0d1296c482
commit 9c3b71f628
7 changed files with 270 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
static/wgsl/shader.wgsl
View File

@@ -349,10 +349,8 @@ fn circle_alpha(local: vec2f, radius: f32, softness: f32) -> f32 {
return 1.0 - smoothstep(radius, radius + softness, dist);
}
// Convert a point authored in hand.png UV space into clip space.
// This mirrors fs_hand_image's aspect-fit math, so fingertip dots stay attached
// to the same image pixels when the app window changes shape.
fn hand_image_uv_to_clip(image_uv: vec2f) -> vec2f {
// Convert a point authored in sensor-canvas UV space into aspect-fitted clip space.
fn sensor_canvas_uv_to_clip(image_uv: vec2f) -> vec2f {
let viewport_aspect = u.viewport.x / max(u.viewport.y, 1.0);
let image_aspect = u.image.x / max(u.image.y, 1.0);
@@ -420,7 +418,7 @@ fn vs_hand_membrane(vertex: DotVertexInput, instance: DotInstanceInput) -> HandM
let image_uv = (center_px + rotate_2d(local_px, angle)) / max(u.image.xy, vec2f(1.0, 1.0));
var out: HandMembraneVertexOutput;
out.clip_position = vec4f(hand_image_uv_to_clip(image_uv), 0.0, 1.0);
out.clip_position = vec4f(sensor_canvas_uv_to_clip(image_uv), 0.0, 1.0);
out.local = vertex.local;
return out;
}
@@ -470,7 +468,7 @@ fn vs_hand_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVertexO
let shaped = smoothstep(0.0, 1.0, intensity);
// Hand instances store hand.png UV in world_position.xy instead of 3D world space.
let center = hand_image_uv_to_clip(instance.world_position.xy);
let center = sensor_canvas_uv_to_clip(instance.world_position.xy);
// Hand fingertip matrices are much smaller than the full Finger view.
// Keep each bead below the local cell spacing so the 12x7 matrix remains visibly separated.
let pixel_size = u.glyph.x * mix(0.22, 0.34, shaped);
@@ -500,75 +498,14 @@ fn fs_hand_dot(in: DotVertexOutput) -> @location(0) vec4f {
return output_color(color, max(core, halo));
}
fn chip_pixel_alpha(local: vec2f, half_size: f32, softness: f32) -> f32 {
let q = abs(local) - vec2f(half_size, half_size);
let dist = length(max(q, vec2f(0.0, 0.0))) + min(max(q.x, q.y), 0.0);
return 1.0 - smoothstep(0.0, softness, dist);
}
struct HandPalmChipVertexOutput {
@builtin(position) clip_position: vec4f,
@location(0) local: vec2f,
@location(1) grid: vec2f,
}
@vertex
fn vs_hand_palm_chip(vertex: DotVertexInput, instance: DotInstanceInput) -> HandPalmChipVertexOutput {
let center_px = instance.world_position.xy * u.image.xy;
let size_px = instance.style.yz;
let angle = instance.style.x;
let packed_shape = instance.style.w;
let shape_rows = floor(packed_shape / 100.0);
let shape_cols = max(packed_shape - shape_rows * 100.0, 1.0);
let local_px = vertex.local * size_px * 0.5;
let image_uv = (center_px + rotate_2d(local_px, angle)) / max(u.image.xy, vec2f(1.0, 1.0));
var out: HandPalmChipVertexOutput;
out.clip_position = vec4f(hand_image_uv_to_clip(image_uv), 0.0, 1.0);
out.local = vertex.local;
out.grid = vec2f(shape_cols, max(shape_rows, 1.0));
return out;
}
@fragment
fn fs_hand_palm_chip(in: HandPalmChipVertexOutput) -> @location(0) vec4f {
// Dark rounded tile: this is the inset chip body sitting inside the palm surface.
let panel = rounded_rect_alpha(in.local, 0.10, 0.040);
let inset = rounded_rect_alpha(in.local * vec2f(1.10, 1.08), 0.08, 0.052);
let rim = clamp(panel - inset * 0.72, 0.0, 1.0);
// Inactive chip pixels use the chip's real hand layout:
// horizontal 14 columns x 5 rows, or vertical 4 columns x 11 rows.
let uv = clamp(in.local * 0.5 + vec2f(0.5, 0.5), vec2f(0.0, 0.0), vec2f(1.0, 1.0));
let cell = abs(fract(uv * in.grid) - vec2f(0.5, 0.5));
let micro_pixel = 1.0 - smoothstep(0.105, 0.178, length(cell * vec2f(1.04, 0.94)));
let top_bevel = smoothstep(-0.96, -0.18, -in.local.y) * 0.16;
let lower_shadow = smoothstep(0.20, 0.92, in.local.y) * 0.22;
let side_bevel = smoothstep(0.58, 0.96, abs(in.local.x)) * 0.12;
let scan = (0.5 + 0.5 * sin((uv.y * 36.0 + uv.x * 7.0) * 6.28318)) * 0.026;
let base = vec3f(0.004, 0.012, 0.018);
let glass = vec3f(0.012, 0.048, 0.064);
let pixel_color = vec3f(0.075, 0.300, 0.360);
let rim_color = vec3f(0.060, 0.560, 0.670);
let color = base * (0.92 - lower_shadow)
+ glass * (0.52 + top_bevel + side_bevel + scan)
+ pixel_color * micro_pixel * 0.70
+ rim_color * rim * 0.60;
let alpha = panel * (0.64 + micro_pixel * 0.18 + rim * 0.20);
return output_color(color, alpha);
}
@vertex
fn vs_hand_palm_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVertexOutput {
let intensity = saturate(instance.style.x);
let shaped = smoothstep(0.0, 1.0, intensity);
// Palm chip pixels are deliberately smaller than fingertip beads so they read as a chip matrix.
let center = hand_image_uv_to_clip(instance.world_position.xy);
let pixel_size = u.glyph.x * mix(0.13, 0.25, shaped);
// Use the same on-screen point size as Finger mode.
let center = sensor_canvas_uv_to_clip(instance.world_position.xy);
let pixel_size = u.glyph.x * mix(1.07, 2.23, shaped);
let ndc_offset = vertex.local * vec2f(pixel_size / u.viewport.x, pixel_size / u.viewport.y) * 2.0;
var out: DotVertexOutput;
@@ -581,16 +518,11 @@ fn vs_hand_palm_dot(vertex: DotVertexInput, instance: DotInstanceInput) -> DotVe
@fragment
fn fs_hand_palm_dot(in: DotVertexOutput) -> @location(0) vec4f {
let intensity = saturate(in.intensity);
let pixel = chip_pixel_alpha(in.local, 0.52, 0.070);
let glow = circle_alpha(in.local, 0.95, 0.22) * intensity * 0.36;
let base_color = sample_range_color(intensity);
let cold = vec3f(0.070, 0.340, 0.360);
let gradient = sample_range_color(intensity);
let color = mix(cold, gradient, smoothstep(0.0, 0.20, intensity))
* (0.58 + intensity * 1.04)
+ gradient * glow * 0.72;
let alpha = circle_alpha(in.local, 0.46, 0.045);
let color = base_color * mix(0.86, 1.06, intensity);
let alpha = max(pixel * (0.20 + intensity * 0.76), glow);
return output_color(color, alpha);
}