forked from BRETT/BRETT
241 lines
6.9 KiB
Vue
241 lines
6.9 KiB
Vue
<script setup lang="ts">
|
|
import { hexToRgbTuple } from '@/lib/color'
|
|
|
|
// Portiert aus Vue Bits (DavidHDev/vue-bits), vereinfacht auf color-Prop
|
|
const props = withDefaults(defineProps<{ color?: string }>(), {
|
|
color: '#6366f1',
|
|
})
|
|
|
|
const VERT = `
|
|
attribute vec2 uv;
|
|
attribute vec2 position;
|
|
varying vec2 vUv;
|
|
void main() {
|
|
vUv = uv;
|
|
gl_Position = vec4(position, 0.0, 1.0);
|
|
}
|
|
`
|
|
|
|
const FRAG = `
|
|
precision highp float;
|
|
|
|
uniform float time;
|
|
uniform float waveSpeed;
|
|
uniform float waveFrequency;
|
|
uniform float waveAmplitude;
|
|
uniform vec3 waveColor;
|
|
uniform vec2 mousePos;
|
|
uniform float mouseActive;
|
|
uniform float mouseRadius;
|
|
uniform float colorNum;
|
|
uniform float pixelSize;
|
|
uniform vec2 uCardRes;
|
|
uniform float uRadius;
|
|
|
|
varying vec2 vUv;
|
|
|
|
vec4 mod289(vec4 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
|
|
vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
|
|
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
|
|
vec2 fade(vec2 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }
|
|
|
|
float cnoise(vec2 P) {
|
|
vec4 Pi = floor(P.xyxy) + vec4(0.0,0.0,1.0,1.0);
|
|
vec4 Pf = fract(P.xyxy) - vec4(0.0,0.0,1.0,1.0);
|
|
Pi = mod289(Pi);
|
|
vec4 ix = Pi.xzxz;
|
|
vec4 iy = Pi.yyww;
|
|
vec4 fx = Pf.xzxz;
|
|
vec4 fy = Pf.yyww;
|
|
vec4 i = permute(permute(ix) + iy);
|
|
vec4 gx = fract(i * (1.0/41.0)) * 2.0 - 1.0;
|
|
vec4 gy = abs(gx) - 0.5;
|
|
vec4 tx = floor(gx + 0.5);
|
|
gx = gx - tx;
|
|
vec2 g00 = vec2(gx.x, gy.x);
|
|
vec2 g10 = vec2(gx.y, gy.y);
|
|
vec2 g01 = vec2(gx.z, gy.z);
|
|
vec2 g11 = vec2(gx.w, gy.w);
|
|
vec4 norm = taylorInvSqrt(vec4(dot(g00,g00), dot(g01,g01), dot(g10,g10), dot(g11,g11)));
|
|
g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w;
|
|
float n00 = dot(g00, vec2(fx.x, fy.x));
|
|
float n10 = dot(g10, vec2(fx.y, fy.y));
|
|
float n01 = dot(g01, vec2(fx.z, fy.z));
|
|
float n11 = dot(g11, vec2(fx.w, fy.w));
|
|
vec2 fade_xy = fade(Pf.xy);
|
|
float n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
|
|
return 2.3 * mix(n_x.x, n_x.y, fade_xy.y);
|
|
}
|
|
|
|
const int OCTAVES = 8;
|
|
float fbm(vec2 p) {
|
|
float value = 0.0;
|
|
float amp = 1.0;
|
|
float freq = waveFrequency;
|
|
for (int i = 0; i < OCTAVES; i++) {
|
|
value += amp * abs(cnoise(p));
|
|
p *= freq;
|
|
amp *= waveAmplitude;
|
|
}
|
|
return value;
|
|
}
|
|
|
|
float pattern(vec2 p) {
|
|
vec2 p2 = p - time * waveSpeed;
|
|
return fbm(p - fbm(p + fbm(p2)));
|
|
}
|
|
|
|
float getBayerValue(int x, int y) {
|
|
if (y == 0) {
|
|
if (x == 0) return 0.0/64.0;
|
|
if (x == 1) return 48.0/64.0;
|
|
if (x == 2) return 12.0/64.0;
|
|
if (x == 3) return 60.0/64.0;
|
|
if (x == 4) return 3.0/64.0;
|
|
if (x == 5) return 51.0/64.0;
|
|
if (x == 6) return 15.0/64.0;
|
|
if (x == 7) return 63.0/64.0;
|
|
} else if (y == 1) {
|
|
if (x == 0) return 32.0/64.0;
|
|
if (x == 1) return 16.0/64.0;
|
|
if (x == 2) return 44.0/64.0;
|
|
if (x == 3) return 28.0/64.0;
|
|
if (x == 4) return 35.0/64.0;
|
|
if (x == 5) return 19.0/64.0;
|
|
if (x == 6) return 47.0/64.0;
|
|
if (x == 7) return 31.0/64.0;
|
|
} else if (y == 2) {
|
|
if (x == 0) return 8.0/64.0;
|
|
if (x == 1) return 56.0/64.0;
|
|
if (x == 2) return 4.0/64.0;
|
|
if (x == 3) return 52.0/64.0;
|
|
if (x == 4) return 11.0/64.0;
|
|
if (x == 5) return 59.0/64.0;
|
|
if (x == 6) return 7.0/64.0;
|
|
if (x == 7) return 55.0/64.0;
|
|
} else if (y == 3) {
|
|
if (x == 0) return 40.0/64.0;
|
|
if (x == 1) return 24.0/64.0;
|
|
if (x == 2) return 36.0/64.0;
|
|
if (x == 3) return 20.0/64.0;
|
|
if (x == 4) return 43.0/64.0;
|
|
if (x == 5) return 27.0/64.0;
|
|
if (x == 6) return 39.0/64.0;
|
|
if (x == 7) return 23.0/64.0;
|
|
} else if (y == 4) {
|
|
if (x == 0) return 2.0/64.0;
|
|
if (x == 1) return 50.0/64.0;
|
|
if (x == 2) return 14.0/64.0;
|
|
if (x == 3) return 62.0/64.0;
|
|
if (x == 4) return 1.0/64.0;
|
|
if (x == 5) return 49.0/64.0;
|
|
if (x == 6) return 13.0/64.0;
|
|
if (x == 7) return 61.0/64.0;
|
|
} else if (y == 5) {
|
|
if (x == 0) return 34.0/64.0;
|
|
if (x == 1) return 18.0/64.0;
|
|
if (x == 2) return 46.0/64.0;
|
|
if (x == 3) return 30.0/64.0;
|
|
if (x == 4) return 33.0/64.0;
|
|
if (x == 5) return 17.0/64.0;
|
|
if (x == 6) return 45.0/64.0;
|
|
if (x == 7) return 29.0/64.0;
|
|
} else if (y == 6) {
|
|
if (x == 0) return 10.0/64.0;
|
|
if (x == 1) return 58.0/64.0;
|
|
if (x == 2) return 6.0/64.0;
|
|
if (x == 3) return 54.0/64.0;
|
|
if (x == 4) return 9.0/64.0;
|
|
if (x == 5) return 57.0/64.0;
|
|
if (x == 6) return 5.0/64.0;
|
|
if (x == 7) return 53.0/64.0;
|
|
} else if (y == 7) {
|
|
if (x == 0) return 42.0/64.0;
|
|
if (x == 1) return 26.0/64.0;
|
|
if (x == 2) return 38.0/64.0;
|
|
if (x == 3) return 22.0/64.0;
|
|
if (x == 4) return 41.0/64.0;
|
|
if (x == 5) return 25.0/64.0;
|
|
if (x == 6) return 37.0/64.0;
|
|
if (x == 7) return 21.0/64.0;
|
|
}
|
|
return 0.0;
|
|
}
|
|
|
|
vec3 dither(vec2 uv, vec3 color) {
|
|
vec2 scaledCoord = floor(uv * uCardRes / pixelSize);
|
|
int x = int(mod(scaledCoord.x, 8.0));
|
|
int y = int(mod(scaledCoord.y, 8.0));
|
|
float threshold = getBayerValue(x, y) - 0.25;
|
|
float step = 1.0 / (colorNum - 1.0);
|
|
color += threshold * step;
|
|
float bias = 0.2;
|
|
color = clamp(color - bias, 0.0, 1.0);
|
|
return floor(color * (colorNum - 1.0) + 0.5) / (colorNum - 1.0);
|
|
}
|
|
|
|
float cardMask(vec2 fc) {
|
|
vec2 p = fc - uCardRes * 0.5;
|
|
vec2 hb = uCardRes * 0.5 - vec2(uRadius);
|
|
float rd = length(max(abs(p) - hb, 0.0)) - uRadius;
|
|
return 1.0 - smoothstep(-0.75, 0.75, rd);
|
|
}
|
|
|
|
void main() {
|
|
vec2 uv = gl_FragCoord.xy / uCardRes.xy;
|
|
// Pixelkonsistent: auf Referenzhöhe 180px normieren,
|
|
// damit das Dither-Muster in flachen Containern nicht staucht
|
|
vec2 centeredUv = (uv - 0.5) * (uCardRes / 180.0);
|
|
|
|
float f = pattern(centeredUv);
|
|
|
|
vec2 mouseNDC = ((mousePos / uCardRes - 0.5) * vec2(1.0, -1.0)) * (uCardRes / 180.0);
|
|
float dist = length(centeredUv - mouseNDC);
|
|
float effect = (1.0 - smoothstep(0.0, mouseRadius, dist)) * mouseActive;
|
|
f -= 0.5 * effect;
|
|
|
|
vec3 col = mix(vec3(0.0), waveColor, f);
|
|
col = dither(uv, col);
|
|
|
|
float m = cardMask(gl_FragCoord.xy);
|
|
float a = clamp(max(col.r, max(col.g, col.b)), 0.0, 1.0) * m;
|
|
gl_FragColor = vec4(col * a, a);
|
|
}
|
|
`
|
|
|
|
const ctnDom = ref<HTMLDivElement | null>(null)
|
|
|
|
useCardShader(ctnDom, {
|
|
vertex: VERT,
|
|
fragment: FRAG,
|
|
mouse: true,
|
|
uniforms: {
|
|
time: { value: 0 },
|
|
waveSpeed: { value: 0.05 },
|
|
waveFrequency: { value: 3 },
|
|
waveAmplitude: { value: 0.3 },
|
|
waveColor: { value: hexToRgbTuple(props.color) },
|
|
mousePos: { value: new Float32Array([0, 0]) },
|
|
mouseActive: { value: 0 },
|
|
mouseRadius: { value: 1 },
|
|
colorNum: { value: 4 },
|
|
pixelSize: { value: 2 },
|
|
},
|
|
color: () => props.color,
|
|
colorUniforms: { waveColor: 0 },
|
|
frame: ({ t, program, mouse }) => {
|
|
const u = program.uniforms
|
|
u.time.value = t * 0.001
|
|
const res = u.uCardRes.value as Float32Array
|
|
const m = u.mousePos.value as Float32Array
|
|
m[0] = mouse.x * res[0]
|
|
m[1] = (1 - mouse.y) * res[1]
|
|
u.mouseActive.value = mouse.active
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="ctnDom" class="relative size-full overflow-hidden rounded-[inherit]" />
|
|
</template>
|