lgimgui 0.1.0

package/src/render/shaders/glass.js

@@ -0,0 +1,241 @@
+import { colorLib } from './color.js'
+
+export const MAX_SHAPES = 8
+
+export const glassVertex = /* glsl */ `#version 300 es
+precision highp float;
+uniform vec2 u_viewport;
+uniform vec4 u_quad;
+void main() {
+  vec2 corner = vec2(float(gl_VertexID & 1), float((gl_VertexID >> 1) & 1));
+  vec2 p = u_quad.xy + corner * u_quad.zw;
+  gl_Position = vec4(p.x / u_viewport.x * 2.0 - 1.0, 1.0 - p.y / u_viewport.y * 2.0, 0.0, 1.0);
+}
+`
+
+export const glassFragment = /* glsl */ `#version 300 es
+precision highp float;
+
+#define PI 3.14159265359
+#define MAX_SHAPES ${MAX_SHAPES}
+
+const float N_R = 1.0 - 0.02;
+const float N_G = 1.0;
+const float N_B = 1.0 + 0.02;
+
+uniform sampler2D u_scene;
+uniform vec2 u_resolution;
+uniform float u_dpr;
+uniform int u_pass;
+uniform int u_shapeCount;
+uniform vec4 u_shapes[MAX_SHAPES];
+uniform vec2 u_corners[MAX_SHAPES];
+uniform float u_shapeFade[MAX_SHAPES];
+uniform float u_mergeRate;
+uniform int u_hardFirst;
+
+uniform vec4 u_tint;
+uniform float u_refThickness;
+uniform float u_refFactor;
+uniform float u_refDispersion;
+uniform float u_refFresnelRange;
+uniform float u_refFresnelFactor;
+uniform float u_refFresnelHardness;
+uniform float u_glareRange;
+uniform float u_glareConvergence;
+uniform float u_glareOppositeFactor;
+uniform float u_glareFactor;
+uniform float u_glareHardness;
+uniform float u_glareAngle;
+uniform int u_blurEdge;
+uniform float u_blurLod;
+
+uniform float u_shadowExpand;
+uniform float u_shadowFactor;
+uniform vec2 u_shadowOffset;
+uniform int u_shadowClipOn;
+uniform vec4 u_shadowClipRect;
+uniform vec2 u_shadowClipCorner;
+
+uniform float u_dimming;
+uniform vec4 u_glow;
+uniform float u_coverageScale;
+uniform float u_border;
+uniform vec4 u_borderColor;
+
+out vec4 fragColor;
+
+${colorLib}
+
+float safeAsin(float x) {
+  return asin(clamp(x, -1.0, 1.0));
+}
+
+float superellipseCornerSDF(vec2 p, float r, float n) {
+  p = abs(p);
+  return pow(pow(p.x, n) + pow(p.y, n), 1.0 / n) - r;
+}
+
+float roundedRectSDF(vec2 p, vec4 shape, vec2 corner) {
+  vec2 half_size = shape.zw * 0.5;
+  vec2 q = p - (shape.xy + half_size);
+  float cr = max(0.5, min(corner.x, min(half_size.x, half_size.y)));
+  float n = cr >= min(half_size.x, half_size.y) - 0.5 ? 2.0 : corner.y;
+  vec2 d = abs(q) - half_size;
+  if (d.x > -cr && d.y > -cr) {
+    vec2 cornerCenter = sign(q) * (half_size - vec2(cr));
+    return superellipseCornerSDF(q - cornerCenter, cr, n);
+  }
+  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+}
+
+float smin(float a, float b, float k) {
+  if (k <= 0.0) return min(a, b);
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+float shapeSDF(vec2 p, int i) {
+  return roundedRectSDF(p, u_shapes[i], u_corners[i]) + u_mergeRate * (1.0 - u_shapeFade[i]);
+}
+
+float mainSDF(vec2 p) {
+  int first = u_hardFirst > 0 ? 1 : 0;
+  float d = first < u_shapeCount ? shapeSDF(p, first) : 1e5;
+  for (int i = 1; i < MAX_SHAPES; i++) {
+    if (i <= first) continue;
+    if (i >= u_shapeCount) break;
+    d = smin(d, shapeSDF(p, i), u_mergeRate);
+  }
+  if (u_hardFirst > 0) d = min(d, shapeSDF(p, 0));
+  return d;
+}
+
+vec2 getNormal(vec2 p) {
+  float h = 1.0 / u_dpr;
+  return vec2(
+    mainSDF(p + vec2(h, 0.0)) - mainSDF(p - vec2(h, 0.0)),
+    mainSDF(p + vec2(0.0, h)) - mainSDF(p - vec2(0.0, h))
+  ) / (2.0 * h);
+}
+
+float vec2ToAngle(vec2 v) {
+  float angle = atan(v.y, v.x);
+  if (angle < 0.0) angle += 2.0 * PI;
+  return angle;
+}
+
+vec2 toUv(vec2 cssOffset) {
+  return vec2(cssOffset.x, -cssOffset.y) * u_dpr / u_resolution;
+}
+
+vec4 getTextureDispersion(vec2 uv, float mixRate, vec2 offset, float factor) {
+  vec2 offR = toUv(offset * (1.0 - (N_R - 1.0) * factor));
+  vec2 offG = toUv(offset * (1.0 - (N_G - 1.0) * factor));
+  vec2 offB = toUv(offset * (1.0 - (N_B - 1.0) * factor));
+  float bgR = textureLod(u_scene, uv + offR, 0.0).r;
+  float bgG = textureLod(u_scene, uv + offG, 0.0).g;
+  float bgB = textureLod(u_scene, uv + offB, 0.0).b;
+  float blurR = textureLod(u_scene, uv + offR, u_blurLod).r;
+  float blurG = textureLod(u_scene, uv + offG, u_blurLod).g;
+  float blurB = textureLod(u_scene, uv + offB, u_blurLod).b;
+  return vec4(mix(bgR, blurR, mixRate), mix(bgG, blurG, mixRate), mix(bgB, blurB, mixRate), 1.0);
+}
+
+float edgeProfile(float sdf, float range, float hardness) {
+  float safeRange = max(range, 0.001);
+  return clamp(pow(max(1.0 + sdf / 1500.0 * pow(500.0 / safeRange, 2.0) + hardness, 0.0), 5.0), 0.0, 1.0);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  vec2 p = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y) / u_dpr;
+
+  if (u_pass == 0) {
+    float sdf = mainSDF(p - u_shadowOffset);
+    float shadow = exp(-1.0 / u_shadowExpand * max(sdf, 0.0)) * 0.6 * u_shadowFactor;
+    if (u_shadowClipOn > 0) {
+      float clipSdf = roundedRectSDF(p, u_shadowClipRect, u_shadowClipCorner);
+      float aa = 0.75 / u_dpr;
+      shadow *= 1.0 - smoothstep(-aa, aa, clipSdf);
+    }
+    fragColor = vec4(vec3(shadow), 0.0);
+    return;
+  }
+
+  float merged = mainSDF(p);
+  float aa = 0.75 / u_dpr;
+  float coverage = (1.0 - smoothstep(-aa, aa, merged)) * u_coverageScale;
+  if (coverage <= 0.0 && u_border <= 0.0) {
+    fragColor = vec4(0.0);
+    return;
+  }
+
+  float nmerged = -merged;
+  float x_R_ratio = 1.0 - nmerged / u_refThickness;
+  float thetaI = safeAsin(pow(x_R_ratio, 2.0));
+  float thetaT = safeAsin(1.0 / u_refFactor * sin(thetaI));
+  float edgeFactor = -1.0 * tan(thetaT - thetaI);
+  if (nmerged >= u_refThickness) edgeFactor = 0.0;
+
+  vec2 normal = vec2(0.0);
+  float normalLength = 0.0;
+  vec3 blurredPixel;
+  if (edgeFactor <= 0.0) {
+    blurredPixel = textureLod(u_scene, uv, u_blurLod).rgb;
+  } else {
+    float edgeH = nmerged / u_refThickness;
+    normal = getNormal(p);
+    normalLength = length(normal);
+    blurredPixel = getTextureDispersion(
+      uv,
+      u_blurEdge > 0 ? 1.0 : edgeH,
+      -normal * edgeFactor * 70.710678,
+      u_refDispersion
+    ).rgb;
+  }
+  blurredPixel *= 1.0 - u_dimming;
+  vec3 outColor = mix(blurredPixel, u_tint.rgb, u_tint.a);
+
+  if (edgeFactor > 0.0) {
+    float rimFade = smoothstep(0.0, -1.5 / u_dpr, merged);
+    float fresnelFactor = edgeProfile(merged, u_refFresnelRange, u_refFresnelHardness) * rimFade;
+    vec3 fresnelTintLCH = SRGB_TO_LCH(mix(vec3(1.0), u_tint.rgb, u_tint.a * 0.5));
+    fresnelTintLCH.x += 20.0 * fresnelFactor * u_refFresnelFactor;
+    fresnelTintLCH.x = clamp(fresnelTintLCH.x, 0.0, 100.0);
+    outColor = mix(outColor, LCH_TO_SRGB(fresnelTintLCH), fresnelFactor * u_refFresnelFactor * 0.7 * normalLength);
+
+    float glareGeoFactor = edgeProfile(merged, u_glareRange, u_glareHardness) * rimFade;
+    float glareAngle = (vec2ToAngle(normalize(normal)) - PI / 4.0 + u_glareAngle) * 2.0;
+    bool glareFarside = (glareAngle > PI * 1.5 && glareAngle < PI * 3.5) || glareAngle < -PI * 0.5;
+    float glareAngleFactor = (0.5 + sin(glareAngle) * 0.5) * (glareFarside ? 1.2 * u_glareOppositeFactor : 1.2) * u_glareFactor;
+    glareAngleFactor = clamp(pow(max(glareAngleFactor, 0.0), 0.1 + u_glareConvergence * 2.0), 0.0, 1.0);
+
+    vec3 glareTintLCH = SRGB_TO_LCH(mix(blurredPixel, u_tint.rgb, u_tint.a * 0.5));
+    glareTintLCH.x += 150.0 * glareAngleFactor * glareGeoFactor;
+    glareTintLCH.y += 30.0 * glareAngleFactor * glareGeoFactor;
+    glareTintLCH.x = clamp(glareTintLCH.x, 0.0, 120.0);
+    outColor = mix(outColor, LCH_TO_SRGB(glareTintLCH), glareAngleFactor * glareGeoFactor * normalLength);
+  }
+
+  if (u_glow.w > 0.0) {
+    float glowDistance = length(p - u_glow.xy);
+    float glow = u_glow.w * (1.0 - smoothstep(0.0, max(u_glow.z, 1.0), glowDistance));
+    if (glow > 0.001) {
+      vec3 glowLCH = SRGB_TO_LCH(outColor);
+      glowLCH.x = clamp(glowLCH.x + 22.0 * glow, 0.0, 100.0);
+      outColor = LCH_TO_SRGB(glowLCH);
+    }
+  }
+
+  vec4 result = vec4(outColor * coverage, coverage);
+
+  if (u_border > 0.0) {
+    float ring = 1.0 - smoothstep(u_border * 0.5 - aa, u_border * 0.5 + aa, abs(merged + u_border * 0.5));
+    vec4 border = vec4(u_borderColor.rgb, 1.0) * u_borderColor.a * ring * coverage;
+    result = border + result * (1.0 - border.a);
+  }
+
+  fragColor = result;
+}
+`

package/src/render/shaders/ui.js

@@ -0,0 +1,194 @@
+export const MODE_FILL = 0
+export const MODE_IMAGE = 1
+export const MODE_GLYPH = 2
+export const MODE_STROKE = 3
+export const MODE_VIBRANT_GLYPH = 6
+export const MODE_GRADIENT = 7
+export const MODE_TINTED_FILL = 8
+
+export const uiVertex = /* glsl */ `#version 300 es
+precision highp float;
+
+layout(location = 0) in vec4 a_rect;
+layout(location = 1) in vec4 a_corner;
+layout(location = 2) in vec4 a_color;
+layout(location = 3) in vec4 a_uv;
+layout(location = 4) in vec4 a_clip;
+layout(location = 5) in vec4 a_extra;
+layout(location = 6) in vec4 a_color2;
+layout(location = 7) in vec4 a_fade;
+
+uniform vec2 u_viewport;
+
+out vec4 v_rect;
+out vec4 v_corner;
+out vec4 v_color;
+out vec4 v_color2;
+out vec2 v_uv;
+out vec4 v_clip;
+out vec4 v_extra;
+out vec2 v_pos;
+out vec4 v_fade;
+
+void main() {
+  vec2 unit = vec2(float(gl_VertexID & 1), float((gl_VertexID >> 1) & 1));
+  float expand = a_extra.w;
+  vec2 origin = a_rect.xy - vec2(expand);
+  vec2 size = a_rect.zw + vec2(expand * 2.0);
+  vec2 p = origin + unit * size;
+  v_pos = p;
+  v_rect = a_rect;
+  v_corner = a_corner;
+  v_color = a_color;
+  v_color2 = a_color2;
+  v_uv = mix(a_uv.xy, a_uv.zw, (p - a_rect.xy) / max(a_rect.zw, vec2(0.0001)));
+  v_clip = a_clip;
+  v_extra = a_extra;
+  v_fade = a_fade;
+  gl_Position = vec4(p.x / u_viewport.x * 2.0 - 1.0, 1.0 - p.y / u_viewport.y * 2.0, 0.0, 1.0);
+}
+`
+
+export const uiFragment = /* glsl */ `#version 300 es
+precision highp float;
+
+in vec4 v_rect;
+in vec4 v_corner;
+in vec4 v_color;
+in vec4 v_color2;
+in vec2 v_uv;
+in vec4 v_clip;
+in vec4 v_extra;
+in vec2 v_pos;
+in vec4 v_fade;
+
+uniform sampler2D u_texture;
+uniform sampler2D u_scene;
+uniform vec2 u_resolution;
+uniform float u_dpr;
+uniform int u_mode;
+
+out vec4 fragColor;
+
+float superellipseCornerSDF(vec2 p, float r, float n) {
+  p = abs(p);
+  return pow(pow(p.x, n) + pow(p.y, n), 1.0 / n) - r;
+}
+
+float roundedRectSDF(vec2 p, vec4 rect, float radius, float roundness) {
+  vec2 half_size = rect.zw * 0.5;
+  vec2 q = p - (rect.xy + half_size);
+  float cr = min(radius, min(half_size.x, half_size.y));
+  float n = cr >= min(half_size.x, half_size.y) - 0.5 ? 2.0 : roundness;
+  vec2 d = abs(q) - half_size;
+  if (cr > 0.0 && d.x > -cr && d.y > -cr) {
+    vec2 cornerCenter = sign(q) * (half_size - vec2(cr));
+    return superellipseCornerSDF(q - cornerCenter, cr, n);
+  }
+  return min(max(d.x, d.y), 0.0) + length(max(d, 0.0));
+}
+
+float clipCoverage(vec2 p) {
+  if (v_clip.z <= 0.0) return 1.0;
+  vec2 d = max(v_clip.xy - p, p - (v_clip.xy + v_clip.zw));
+  float outside = max(d.x, d.y);
+  return 1.0 - smoothstep(-0.5, 0.5, outside);
+}
+
+void main() {
+  float aa = 0.6 / u_dpr;
+  vec2 pos = v_pos;
+  if (v_extra.z != 0.0) {
+    vec2 center = v_rect.xy + v_rect.zw * 0.5;
+    float s = sin(-v_extra.z);
+    float c = cos(-v_extra.z);
+    vec2 d = pos - center;
+    pos = center + vec2(c * d.x - s * d.y, s * d.x + c * d.y);
+  }
+  float sdf = roundedRectSDF(pos, v_rect, v_corner.x, max(v_corner.y, 2.0));
+  float shape = 1.0 - smoothstep(-aa, aa, sdf);
+  float clip = clipCoverage(v_pos);
+  vec4 color = v_color;
+  vec4 result;
+
+  if (u_mode == ${MODE_FILL}) {
+    result = vec4(color.rgb, 1.0) * color.a * shape;
+  } else if (u_mode == ${MODE_IMAGE}) {
+    vec4 texel = texture(u_texture, v_uv);
+    result = vec4(texel.rgb * color.rgb, 1.0) * texel.a * color.a * shape;
+  } else if (u_mode == ${MODE_GLYPH}) {
+    float alpha = texture(u_texture, v_uv).a;
+    result = vec4(color.rgb, 1.0) * color.a * alpha;
+  } else if (u_mode == ${MODE_VIBRANT_GLYPH}) {
+    float alpha = texture(u_texture, v_uv).a;
+    vec2 uv = gl_FragCoord.xy / u_resolution;
+    vec3 behind = textureLod(u_scene, uv, 4.0).rgb;
+    float target = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
+    vec3 vibrant = target > 0.5 ? mix(behind, vec3(1.0), 0.82) : mix(behind, vec3(0.0), 0.78);
+    vec3 rgb = mix(color.rgb, vibrant, v_extra.x);
+    result = vec4(rgb, 1.0) * color.a * alpha;
+  } else if (u_mode == ${MODE_STROKE}) {
+    float width = v_extra.x;
+    float ring = 1.0 - smoothstep(width * 0.5 - aa, width * 0.5 + aa, abs(sdf + width * 0.5));
+    result = vec4(color.rgb, 1.0) * color.a * ring;
+  } else if (u_mode == ${MODE_TINTED_FILL}) {
+    vec2 uv = gl_FragCoord.xy / u_resolution;
+    vec3 behind = textureLod(u_scene, uv, 4.5).rgb;
+    float luma = dot(behind, vec3(0.2126, 0.7152, 0.0722));
+    float lift = (0.52 - luma) * v_extra.x;
+    vec3 rgb = clamp(color.rgb * (1.0 + lift) + lift * 0.25, 0.0, 1.0);
+    result = vec4(rgb, 1.0) * color.a * shape;
+  } else if (u_mode == ${MODE_GRADIENT}) {
+    float t = v_extra.y > 0.5 ? v_uv.x : v_uv.y;
+    vec4 mixed = mix(color, v_color2, clamp(t, 0.0, 1.0));
+    result = vec4(mixed.rgb, 1.0) * mixed.a * shape;
+  } else {
+    result = vec4(1.0, 0.0, 1.0, 1.0);
+  }
+
+  float fade = 1.0;
+  if (v_fade.y > v_fade.x) fade *= smoothstep(v_fade.x, v_fade.y, v_pos.y);
+  if (v_fade.w > v_fade.z) fade *= 1.0 - smoothstep(v_fade.z, v_fade.w, v_pos.y);
+  fragColor = result * clip * fade;
+}
+`
+
+export const blitVertex = /* glsl */ `#version 300 es
+precision highp float;
+out vec2 v_uv;
+void main() {
+  vec2 unit = vec2(float(gl_VertexID & 1), float((gl_VertexID >> 1) & 1));
+  v_uv = unit;
+  gl_Position = vec4(unit * 2.0 - 1.0, 0.0, 1.0);
+}
+`
+
+export const blitFragment = /* glsl */ `#version 300 es
+precision highp float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform float u_lod;
+out vec4 fragColor;
+void main() {
+  fragColor = textureLod(u_texture, v_uv, u_lod);
+}
+`
+
+export const downsampleFragment = /* glsl */ `#version 300 es
+precision highp float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform vec2 u_texel;
+uniform vec2 u_direction;
+uniform float u_lod;
+out vec4 fragColor;
+void main() {
+  vec2 step = u_direction * u_texel;
+  vec4 color = textureLod(u_texture, v_uv, u_lod) * 0.38292;
+  color += textureLod(u_texture, v_uv + step, u_lod) * 0.24173;
+  color += textureLod(u_texture, v_uv - step, u_lod) * 0.24173;
+  color += textureLod(u_texture, v_uv + step * 2.0, u_lod) * 0.06681;
+  color += textureLod(u_texture, v_uv - step * 2.0, u_lod) * 0.06681;
+  fragColor = color;
+}
+`