헤더 상단 검은 띠 제거 · 패럴랙스 · 히어로 3D 유리 씬
헤더가 문서 흐름에 있어서 그 위 공간이 히어로 광원 밖으로 남았다. 화면에서 검은 띠로 보였다. 헤더를 띄우고 히어로가 최상단부터 차오르게 했다. 패럴랙스는 scroll-driven animation 으로만 만든다. scroll 리스너를 쓰지 않고 transform 만 움직이므로 미지원 브라우저에서는 제자리에 그대로 있다. 히어로 3D 는 배경을 렌더 타겟에 굽고 유리 판이 그 텍스처를 왜곡 샘플링한다. transmission 재질이 매 프레임 씬을 재렌더하는 비용을 피한 구조다.
This commit is contained in:
Yun Chan
parent
ed9463c3c2
commit
85be000704
5 changed files with 306 additions and 48 deletions
274
apps/site/src/lib/hero-scene.ts
Normal file
274
apps/site/src/lib/hero-scene.ts
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
/**
|
||||
* 히어로 3D 씬.
|
||||
*
|
||||
* 유리 판 몇 장이 공간에 떠 있고, 그 뒤의 빛을 실제로 굴절시킨다.
|
||||
*
|
||||
* 구현 방식과 그 이유:
|
||||
* 배경 그라디언트를 렌더 타겟에 한 번 그리고, 유리 판이 그 텍스처를
|
||||
* UV 를 밀어서 샘플링한다. MeshPhysicalMaterial 의 transmission 은
|
||||
* 매 프레임 씬을 다시 렌더하므로 판 한 장만 있어도 비싸다.
|
||||
* references/three.md 가 그 비용을 경고한다. 렌더 타겟 한 장이면
|
||||
* 같은 인상을 훨씬 싸게 얻는다.
|
||||
*
|
||||
* 예산 규칙은 그대로 지킨다:
|
||||
* - three 는 초기 번들에 없다. 화면에 가까워질 때만 받는다
|
||||
* - DPR 클램프 1.5
|
||||
* - 화면 밖이거나 탭이 숨으면 그리지 않는다
|
||||
* - 저사양이면 판 수를 줄인다
|
||||
* - WebGL 이 없거나 모션을 줄이는 설정이면 아예 시작하지 않는다.
|
||||
* 그때 보이는 CSS 그라디언트가 폴백이 아니라 결과물이다
|
||||
*/
|
||||
|
||||
export interface HeroSceneOptions {
|
||||
canvas: HTMLCanvasElement;
|
||||
/** CSS 커스텀 프로퍼티 이름 */
|
||||
accentVar: string;
|
||||
glowVar: string;
|
||||
}
|
||||
|
||||
const NOISE = `
|
||||
float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
|
||||
float noise(vec2 p) {
|
||||
vec2 i = floor(p), f = fract(p);
|
||||
vec2 u = f * f * (3.0 - 2.0 * f);
|
||||
return mix(mix(hash(i), hash(i + vec2(1, 0)), u.x),
|
||||
mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x), u.y);
|
||||
}
|
||||
float fbm(vec2 p) {
|
||||
float v = 0.0, a = 0.5;
|
||||
for (int i = 0; i < 4; i++) { v += a * noise(p); p *= 2.03; a *= 0.5; }
|
||||
return v;
|
||||
}
|
||||
`;
|
||||
|
||||
export function mountHeroScene(opts: HeroSceneOptions): void {
|
||||
if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||||
const { canvas } = opts;
|
||||
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (!entries.some((e) => e.isIntersecting)) return;
|
||||
io.disconnect();
|
||||
void boot(opts);
|
||||
},
|
||||
{ rootMargin: "0px" },
|
||||
);
|
||||
io.observe(canvas);
|
||||
}
|
||||
|
||||
async function boot({ canvas, accentVar, glowVar }: HeroSceneOptions): Promise<void> {
|
||||
let THREE: typeof import("three");
|
||||
try {
|
||||
THREE = await import("three");
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
let renderer: import("three").WebGLRenderer;
|
||||
try {
|
||||
renderer = new THREE.WebGLRenderer({ canvas, antialias: false, alpha: true });
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
const css = getComputedStyle(document.documentElement);
|
||||
const color = (v: string, fb: string) =>
|
||||
new THREE.Color((css.getPropertyValue(v).trim() || fb) as string);
|
||||
const accent = color(accentVar, "#4FD6C4");
|
||||
const glow = color(glowVar, "#6E7BFF");
|
||||
|
||||
// 저사양이면 판을 줄인다. 코어 수는 거친 지표지만 라이브러리를 더 받지 않는다
|
||||
const lean = (navigator.hardwareConcurrency ?? 4) <= 4;
|
||||
const PANE_COUNT = lean ? 3 : 6;
|
||||
|
||||
const dpr = Math.min(devicePixelRatio, 1.5);
|
||||
renderer.setPixelRatio(dpr);
|
||||
|
||||
/* ---- 1) 배경을 렌더 타겟에 그린다 ------------------------- */
|
||||
const rtScene = new THREE.Scene();
|
||||
const rtCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
|
||||
const rt = new THREE.WebGLRenderTarget(1, 1, {
|
||||
magFilter: THREE.LinearFilter,
|
||||
minFilter: THREE.LinearFilter,
|
||||
});
|
||||
|
||||
const bgUniforms = {
|
||||
uTime: { value: 0 },
|
||||
uAspect: { value: 1 },
|
||||
uPointer: { value: new THREE.Vector2(0.5, 0.5) },
|
||||
uA: { value: accent },
|
||||
uB: { value: glow },
|
||||
};
|
||||
|
||||
rtScene.add(
|
||||
new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(2, 2),
|
||||
new THREE.ShaderMaterial({
|
||||
uniforms: bgUniforms,
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
void main() { vUv = uv; gl_Position = vec4(position, 1.0); }
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision mediump float;
|
||||
varying vec2 vUv;
|
||||
uniform float uTime; uniform float uAspect;
|
||||
uniform vec2 uPointer; uniform vec3 uA; uniform vec3 uB;
|
||||
${NOISE}
|
||||
void main() {
|
||||
vec2 p = vUv; p.x *= uAspect;
|
||||
float t = uTime * 0.045;
|
||||
vec2 m = uPointer; m.x *= uAspect;
|
||||
|
||||
float f1 = fbm(p * 1.8 + vec2(t, -t * 0.6));
|
||||
float f2 = fbm(p * 2.3 - vec2(t * 0.8, t * 1.1) + f1 * 0.55);
|
||||
|
||||
vec2 c1 = mix(vec2(0.30 * uAspect, 0.44), m, 0.20);
|
||||
vec2 c2 = vec2(0.82 * uAspect, 0.28);
|
||||
|
||||
float a = smoothstep(0.72, 0.08, distance(p, c1) + f1 * 0.36);
|
||||
float b = smoothstep(0.66, 0.06, distance(p, c2) + f2 * 0.32);
|
||||
|
||||
vec3 col = uA * a + uB * b * 0.95;
|
||||
float alpha = clamp(a * 1.2 + b, 0.0, 1.0) * 0.9;
|
||||
gl_FragColor = vec4(col, alpha);
|
||||
}
|
||||
`,
|
||||
transparent: true,
|
||||
}),
|
||||
),
|
||||
);
|
||||
|
||||
/* ---- 2) 유리 판. 뒤 텍스처를 밀어서 샘플링한다 ------------- */
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 60);
|
||||
camera.position.set(0, 0, 9);
|
||||
|
||||
const paneMat = new THREE.ShaderMaterial({
|
||||
transparent: true,
|
||||
depthWrite: false,
|
||||
uniforms: {
|
||||
uScene: { value: rt.texture },
|
||||
uTime: { value: 0 },
|
||||
uEdge: { value: new THREE.Color("#ffffff") },
|
||||
},
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
varying vec3 vNormalW;
|
||||
varying vec3 vViewDir;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
vec4 world = modelMatrix * vec4(position, 1.0);
|
||||
vNormalW = normalize(mat3(modelMatrix) * normal);
|
||||
vViewDir = normalize(cameraPosition - world.xyz);
|
||||
gl_Position = projectionMatrix * viewMatrix * world;
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision mediump float;
|
||||
varying vec2 vUv;
|
||||
varying vec3 vNormalW;
|
||||
varying vec3 vViewDir;
|
||||
uniform sampler2D uScene;
|
||||
uniform float uTime;
|
||||
uniform vec3 uEdge;
|
||||
${NOISE}
|
||||
|
||||
void main() {
|
||||
// 화면 좌표를 굴절시켜 뒤 텍스처를 샘플링한다
|
||||
vec2 screen = gl_FragCoord.xy / vec2(textureSize(uScene, 0));
|
||||
vec2 flow = vec2(
|
||||
fbm(vUv * 2.4 + uTime * 0.05),
|
||||
fbm(vUv * 2.4 - uTime * 0.04 + 3.1)
|
||||
) - 0.5;
|
||||
vec3 back = texture2D(uScene, screen + flow * 0.07 + vNormalW.xy * 0.035).rgb;
|
||||
|
||||
// 가장자리에서 빛이 서는 프레넬
|
||||
float fres = pow(1.0 - abs(dot(normalize(vNormalW), normalize(vViewDir))), 2.6);
|
||||
|
||||
vec3 col = back * 1.06 + uEdge * fres * 0.5;
|
||||
float alpha = 0.20 + fres * 0.55;
|
||||
gl_FragColor = vec4(col, alpha);
|
||||
}
|
||||
`,
|
||||
});
|
||||
|
||||
const panes: import("three").Mesh[] = [];
|
||||
const geo = new THREE.PlaneGeometry(3.1, 4.3, 1, 1);
|
||||
for (let i = 0; i < PANE_COUNT; i++) {
|
||||
const m = new THREE.Mesh(geo, paneMat);
|
||||
const a = (i / PANE_COUNT) * Math.PI * 2;
|
||||
m.position.set(Math.cos(a) * 3.6, Math.sin(a * 1.7) * 1.5, -i * 0.9);
|
||||
m.rotation.set(0.1 + i * 0.05, a * 0.5, a * 0.22);
|
||||
m.userData["seed"] = a;
|
||||
scene.add(m);
|
||||
panes.push(m);
|
||||
}
|
||||
|
||||
/* ---- 3) 크기·포인터·루프 --------------------------------- */
|
||||
const pointer = new THREE.Vector2(0.5, 0.5);
|
||||
const pointerTarget = new THREE.Vector2(0.5, 0.5);
|
||||
|
||||
const fit = () => {
|
||||
const r = canvas.getBoundingClientRect();
|
||||
if (!r.width || !r.height) return;
|
||||
renderer.setSize(r.width, r.height, false);
|
||||
rt.setSize(Math.round(r.width * dpr * 0.6), Math.round(r.height * dpr * 0.6));
|
||||
camera.aspect = r.width / r.height;
|
||||
camera.updateProjectionMatrix();
|
||||
bgUniforms.uAspect.value = r.width / r.height;
|
||||
};
|
||||
fit();
|
||||
addEventListener("resize", fit, { passive: true });
|
||||
|
||||
addEventListener(
|
||||
"pointermove",
|
||||
(e) => {
|
||||
const r = canvas.getBoundingClientRect();
|
||||
pointerTarget.set((e.clientX - r.left) / r.width, 1 - (e.clientY - r.top) / r.height);
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
let tabVisible = true;
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
tabVisible = !document.hidden;
|
||||
});
|
||||
let onScreen = true;
|
||||
new IntersectionObserver((es) => {
|
||||
onScreen = es.some((e) => e.isIntersecting);
|
||||
}).observe(canvas);
|
||||
|
||||
canvas.classList.add("is-live");
|
||||
|
||||
renderer.setAnimationLoop((ms) => {
|
||||
if (!tabVisible || !onScreen) return;
|
||||
const t = ms * 0.001;
|
||||
|
||||
pointer.lerp(pointerTarget, 0.04);
|
||||
bgUniforms.uTime.value = t;
|
||||
bgUniforms.uPointer.value.copy(pointer);
|
||||
paneMat.uniforms["uTime"]!.value = t;
|
||||
|
||||
for (const m of panes) {
|
||||
const seed = m.userData["seed"] as number;
|
||||
m.rotation.y += 0.0016;
|
||||
m.rotation.z = Math.sin(t * 0.18 + seed) * 0.24;
|
||||
m.position.y = Math.sin(t * 0.22 + seed * 1.7) * 1.6;
|
||||
// 포인터가 판을 아주 조금 기울인다
|
||||
m.rotation.x = 0.1 + (pointer.y - 0.5) * 0.24;
|
||||
}
|
||||
camera.position.x = (pointer.x - 0.5) * 1.5;
|
||||
camera.lookAt(0, 0, 0);
|
||||
|
||||
// 배경을 먼저 타겟에 굽고, 그 텍스처를 유리가 읽는다
|
||||
renderer.setRenderTarget(rt);
|
||||
renderer.clear();
|
||||
renderer.render(rtScene, rtCam);
|
||||
renderer.setRenderTarget(null);
|
||||
|
||||
renderer.clear();
|
||||
renderer.render(rtScene, rtCam);
|
||||
renderer.render(scene, camera);
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue