revert splash title
This commit is contained in:
nicwands
parent
71a0a97f4c
commit
3b9a4ff883
3 changed files with 31 additions and 119 deletions
|
|
@ -11,50 +11,12 @@ uniform float u_text_scale;
|
|||
uniform float u_distance_range;
|
||||
uniform float u_is_text;
|
||||
uniform float u_blob_strength;
|
||||
uniform float u_time;
|
||||
|
||||
// MSDF median function - extracts signed distance from multi-channel texture
|
||||
float median(float r, float g, float b) {
|
||||
return max(min(r, g), min(max(r, g), b));
|
||||
}
|
||||
|
||||
// Hash for noise
|
||||
float hash(vec2 p) {
|
||||
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
|
||||
}
|
||||
|
||||
// Smooth value noise
|
||||
float noise(vec2 p) {
|
||||
vec2 i = floor(p);
|
||||
vec2 f = fract(p);
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(
|
||||
mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), u.x),
|
||||
mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), u.x),
|
||||
u.y
|
||||
);
|
||||
}
|
||||
|
||||
float sdUnevenCapsule( vec2 p, float r1, float r2, float h )
|
||||
{
|
||||
p.x = abs(p.x);
|
||||
float b = (r1-r2)/h;
|
||||
float a = sqrt(1.0-b*b);
|
||||
float k = dot(p,vec2(-b,a));
|
||||
if( k < 0.0 ) return length(p) - r1;
|
||||
if( k > a*h ) return length(p-vec2(0.0,h)) - r2;
|
||||
return dot(p, vec2(a,b) ) - r1;
|
||||
}
|
||||
|
||||
// Layered noise for more organic blob edge
|
||||
float fbm(vec2 p) {
|
||||
float v = 0.0;
|
||||
v += 0.500 * noise(p * 1.0);
|
||||
v += 0.250 * noise(p * 2.0);
|
||||
v += 0.125 * noise(p * 4.0);
|
||||
return v;
|
||||
}
|
||||
|
||||
void main() {
|
||||
float aspect = u_resolution.x / u_resolution.y;
|
||||
|
||||
|
|
@ -66,74 +28,30 @@ void main() {
|
|||
float msdf = median(msdfSample.r, msdfSample.g, msdfSample.b);
|
||||
|
||||
// Proper MSDF distance field scaling for high quality rendering
|
||||
// Calculate screen-space derivatives to determine proper threshold
|
||||
vec2 unitRange = u_distance_range / u_atlas_size;
|
||||
vec2 screenTexSize = vec2(1.0) / fwidth(v_uv);
|
||||
float screenPxRange = max(0.5 * dot(unitRange, screenTexSize), 1.0);
|
||||
float screenPxDistance = screenPxRange * (msdf - 0.5);
|
||||
|
||||
// Convert MSDF distance to a field value centered at 0.5
|
||||
// This creates a smooth falloff around the glyph edge
|
||||
tf = screenPxDistance / screenPxRange + 0.5;
|
||||
}
|
||||
|
||||
// Blob: uneven capsule SDF centered on the mouse, oriented vertically
|
||||
// r1 = bottom radius (larger), r2 = top radius (smaller), h = height
|
||||
float r1 = 0.02;
|
||||
float r2 = 0.01;
|
||||
float h = 0.03;
|
||||
|
||||
// Aspect-corrected offset from mouse; shift p so capsule is centred on mouse
|
||||
// Mouse blob: smooth circular falloff in screen space, aspect-corrected
|
||||
float blobRadius = 0.05;
|
||||
vec2 d = (v_screen_uv - u_mouse) * vec2(aspect, 1.0);
|
||||
vec2 capsuleP = d + vec2(0.0, h * 0.5); // sdUnevenCapsule base sits at origin
|
||||
float bf = 1.0 - smoothstep(0.0, blobRadius, length(d));
|
||||
|
||||
float sdf = sdUnevenCapsule(capsuleP, r1, r2, h);
|
||||
|
||||
// Add FBM noise directly to the SDF value to organically warp the boundary
|
||||
vec2 noiseCoord = v_screen_uv * 5.0 + u_time * 0.25;
|
||||
float edgeNoise = (fbm(noiseCoord) - 0.5) * 0.03; // centred, ±1.5% of screen
|
||||
float noisySdf = sdf + edgeNoise;
|
||||
|
||||
// Convert SDF (neg=inside) to a 0→1 field matching the metaball convention
|
||||
float softness = 0.008;
|
||||
float bf = smoothstep(softness, -softness, noisySdf);
|
||||
|
||||
// Metaball field sum
|
||||
// Metaball field sum: scale blob contribution to control merge distance
|
||||
// Higher u_blob_strength = blob merges from farther away
|
||||
// Lower u_blob_strength = blob must get closer to merge
|
||||
float field = tf + (bf * u_blob_strength);
|
||||
|
||||
// ── 3-D depth via screen-space normals ──────────────────────────────────
|
||||
// The field gradient points toward the interior of each shape element.
|
||||
// Treating the field as a height map gives a convex-bulge normal.
|
||||
float fx = dFdx(field);
|
||||
float fy = dFdy(field);
|
||||
|
||||
// z controls how "round" the surface appears; larger = flatter, smaller = steeper sides
|
||||
vec3 normal = normalize(vec3(-fx, -fy, 0.1));
|
||||
|
||||
// Key light: upper-left, slightly toward viewer
|
||||
vec3 lightDir = normalize(vec3(-0.4, 0.7, 1.0));
|
||||
float diffuse = max(dot(normal, lightDir), 0.0);
|
||||
|
||||
// Rim / fill light from lower-right for depth separation
|
||||
vec3 rimDir = normalize(vec3(0.6, -0.4, 0.5));
|
||||
float rim = pow(max(dot(normal, rimDir), 0.0), 3.0) * 0.25;
|
||||
|
||||
// Specular (Blinn-Phong)
|
||||
vec3 viewDir = vec3(0.0, 0.0, 1.0);
|
||||
vec3 halfDir = normalize(lightDir + viewDir);
|
||||
float specular = pow(max(dot(normal, halfDir), 0.0), 48.0);
|
||||
|
||||
// Base color derived from the surface normal's xy — shifts hue across the surface
|
||||
// as the shape curves, giving an iridescent/sculpted feel
|
||||
vec3 baseColor = vec3(
|
||||
0.3 + normal.x * 0.6, // red channel: shifts with left/right curvature
|
||||
0.2 + normal.y * 0.5, // green channel: shifts with up/down curvature
|
||||
0.7 - normal.x * 0.3 // blue channel: inversely tracks red for contrast
|
||||
);
|
||||
|
||||
// Apply lighting on top: darken with diffuse/rim, blow out to white with specular
|
||||
vec3 color = baseColor * (0.1 + 0.7 * diffuse + rim) + vec3(0.7 * specular);
|
||||
|
||||
// Anti-aliased coverage mask at the 0.5 isosurface
|
||||
// Anti-aliased edge at the 0.5 isosurface
|
||||
float fw = fwidth(field);
|
||||
float alpha = smoothstep(0.5 - fw, 0.5 + fw, field);
|
||||
|
||||
gl_FragColor = vec4(color, alpha);
|
||||
gl_FragColor = vec4(0.0, 0.0, 0.0, alpha);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<splash-title
|
||||
v-if="ready"
|
||||
text="Braindrops"
|
||||
fontFamily="iosevka-charon"
|
||||
fontFamily="instrument-serif"
|
||||
:letterSpacing="-0.1"
|
||||
:blobStrength="1"
|
||||
/>
|
||||
|
|
@ -20,9 +20,9 @@
|
|||
<script setup>
|
||||
import SplashTitle from '@/components/SplashTitle.vue'
|
||||
import WebglCanvas from '@/components/WebglCanvas.vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRouter } from 'vue-router'
|
||||
import Btn from '@shared/Btn.vue'
|
||||
import { ref } from 'vue';
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
manifest: Array,
|
||||
|
|
@ -49,7 +49,6 @@ const onClick = () => {
|
|||
padding-top: rs(20px);
|
||||
padding-bottom: rs(20px);
|
||||
|
||||
|
||||
.content {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
<div class="cursor" />
|
||||
|
||||
<div class="fill-line one">
|
||||
<h6>Intuition</h6>
|
||||
<h6 class="label">Intuition</h6>
|
||||
<div class="line" />
|
||||
</div>
|
||||
<div class="fill-line two">
|
||||
<h6>Chaos</h6>
|
||||
<h6 class="label">Chaos</h6>
|
||||
<div class="line" />
|
||||
</div>
|
||||
<div class="fill-line three">
|
||||
<h6>Concept</h6>
|
||||
<h6 class="label">Concept</h6>
|
||||
<div class="line" />
|
||||
</div>
|
||||
|
||||
|
|
@ -77,11 +77,6 @@ const onBlur = async () => {
|
|||
padding: 0 var(--layout-margin);
|
||||
z-index: 2;
|
||||
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
color: var(--theme-grey);
|
||||
font-weight: 400;
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: -1em;
|
||||
|
|
|
|||
Loading…
Reference in a new issue