409 lines
14 KiB
TypeScript
409 lines
14 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useRef } from 'react'
|
||
|
||
// 偏粉的参考稿版本：粉雾、玫瑰与奶白，避免再回到偏橙的材质感。
|
||
const BRAND_COLORS = ['#ffc7de', '#ff8fc7', '#fff1f7'] as const
|
||
const FLOW_TEXTURE_WIDTH = 512
|
||
const FLOW_TEXTURE_HEIGHT = 160
|
||
|
||
const VERTEX_SHADER = `
|
||
attribute vec2 a_position;
|
||
varying vec2 v_uv;
|
||
|
||
void main() {
|
||
v_uv = a_position * 0.5 + 0.5;
|
||
gl_Position = vec4(a_position, 0.0, 1.0);
|
||
}
|
||
`
|
||
|
||
const SIMULATION_SHADER = `
|
||
precision highp float;
|
||
|
||
varying vec2 v_uv;
|
||
uniform float u_time;
|
||
uniform float u_seed;
|
||
|
||
float hash31(vec3 value) {
|
||
value = fract(value * vec3(0.1031, 0.1030, 0.0973));
|
||
value += dot(value, value.yzx + 33.33 + u_seed);
|
||
return fract((value.x + value.y) * value.z);
|
||
}
|
||
|
||
float valueNoise3(vec3 point) {
|
||
vec3 cell = floor(point);
|
||
vec3 local = fract(point);
|
||
local = local * local * (3.0 - 2.0 * local);
|
||
float x00 = mix(hash31(cell), hash31(cell + vec3(1.0, 0.0, 0.0)), local.x);
|
||
float x10 = mix(hash31(cell + vec3(0.0, 1.0, 0.0)), hash31(cell + vec3(1.0, 1.0, 0.0)), local.x);
|
||
float x01 = mix(hash31(cell + vec3(0.0, 0.0, 1.0)), hash31(cell + vec3(1.0, 0.0, 1.0)), local.x);
|
||
float x11 = mix(hash31(cell + vec3(0.0, 1.0, 1.0)), hash31(cell + vec3(1.0, 1.0, 1.0)), local.x);
|
||
float lower = mix(x00, x10, local.y);
|
||
float upper = mix(x01, x11, local.y);
|
||
return mix(lower, upper, local.z);
|
||
}
|
||
|
||
float fbm3(vec3 point) {
|
||
float value = 0.0;
|
||
float amplitude = 0.55;
|
||
for (int octave = 0; octave < 3; octave++) {
|
||
value += valueNoise3(point) * amplitude;
|
||
point = vec3(point.y + point.z, point.z + point.x, point.x + point.y) * 1.07
|
||
+ vec3(13.7, 9.2, 5.4);
|
||
amplitude *= 0.50;
|
||
}
|
||
return value;
|
||
}
|
||
|
||
float rollingDensity(vec2 point, vec2 warp, float channel, float time) {
|
||
float phase = channel * 7.91 + u_seed * 2.37;
|
||
vec2 channelOffset = vec2(
|
||
cos(phase) * 2.2 + channel * 1.1,
|
||
sin(phase) * 2.0 - channel * 0.8
|
||
);
|
||
float broadMass = fbm3(vec3(
|
||
point + warp * 1.24 + channelOffset,
|
||
time * 0.34 + phase
|
||
));
|
||
float foldingMass = valueNoise3(vec3(
|
||
point * 1.82 - warp * 0.52 + channelOffset * 1.53,
|
||
-time * 0.43 + phase * 1.71
|
||
));
|
||
float densityField = broadMass * 0.70 + foldingMass * 0.30;
|
||
float body = smoothstep(0.30, 0.76, densityField);
|
||
float volume = smoothstep(0.22, 0.82, broadMass * 0.60 + foldingMass * 0.40);
|
||
return body * mix(0.38, 0.98, volume);
|
||
}
|
||
|
||
void main() {
|
||
float time = u_time * 0.62;
|
||
vec2 point = vec2((v_uv.x - 0.24) * 3.30, v_uv.y * 1.35);
|
||
vec2 primaryWarp = vec2(
|
||
fbm3(vec3(point * 0.72 + u_seed, time * 0.29 + u_seed)),
|
||
fbm3(vec3(point * 0.76 + vec2(6.3, -4.7) - u_seed * 0.71, -time * 0.31 + u_seed))
|
||
) - 0.5;
|
||
|
||
vec3 dye = vec3(
|
||
rollingDensity(point, primaryWarp, 0.0, time),
|
||
rollingDensity(point, primaryWarp, 1.0, time),
|
||
rollingDensity(point, primaryWarp, 2.0, time)
|
||
);
|
||
// 色彩只聚集在右侧，并用倾斜的软边界进入白纸区域，避免一条直上直下的分界线。
|
||
float diagonalField = v_uv.x + (v_uv.y - 0.5) * 0.20;
|
||
float materialField = smoothstep(0.58, 0.93, diagonalField);
|
||
dye *= materialField;
|
||
|
||
gl_FragColor = vec4(clamp(dye, 0.0, 1.0), 1.0);
|
||
}
|
||
`
|
||
|
||
const DISPLAY_SHADER = `
|
||
precision highp float;
|
||
|
||
varying vec2 v_uv;
|
||
uniform sampler2D u_dye;
|
||
uniform vec2 u_texel;
|
||
uniform vec3 u_color_a;
|
||
uniform vec3 u_color_b;
|
||
uniform vec3 u_color_c;
|
||
|
||
void main() {
|
||
vec3 center = texture2D(u_dye, v_uv).rgb;
|
||
vec3 cardinal = (
|
||
texture2D(u_dye, v_uv + vec2(u_texel.x, 0.0)).rgb +
|
||
texture2D(u_dye, v_uv - vec2(u_texel.x, 0.0)).rgb +
|
||
texture2D(u_dye, v_uv + vec2(0.0, u_texel.y)).rgb +
|
||
texture2D(u_dye, v_uv - vec2(0.0, u_texel.y)).rgb
|
||
) * 0.25;
|
||
vec3 diagonal = (
|
||
texture2D(u_dye, v_uv + u_texel).rgb +
|
||
texture2D(u_dye, v_uv - u_texel).rgb +
|
||
texture2D(u_dye, v_uv + vec2(u_texel.x, -u_texel.y)).rgb +
|
||
texture2D(u_dye, v_uv + vec2(-u_texel.x, u_texel.y)).rgb
|
||
) * 0.25;
|
||
vec3 nearby = mix(cardinal, diagonal, 0.42);
|
||
vec3 dye = mix(center, nearby, 0.24);
|
||
float baseWash = smoothstep(0.30, 0.64, v_uv.x);
|
||
dye += vec3(0.007, 0.006, 0.006) * baseWash;
|
||
float total = dye.r + dye.g + dye.b + 0.0001;
|
||
vec3 pigment = (u_color_a * dye.r + u_color_b * dye.g + u_color_c * dye.b) / total;
|
||
float opacity = 1.0 - exp(-total * 1.04);
|
||
vec3 paper = vec3(0.978);
|
||
vec3 color = mix(paper, pigment, clamp(opacity * 0.42, 0.0, 0.46));
|
||
|
||
float diagonalClearance = v_uv.x + (v_uv.y - 0.5) * 0.18;
|
||
float copyClearance = 1.0 - smoothstep(0.28, 0.88, diagonalClearance);
|
||
color = mix(color, paper, copyClearance * 0.99);
|
||
gl_FragColor = vec4(color, 1.0);
|
||
}
|
||
`
|
||
|
||
type ShaderProgram = {
|
||
program: WebGLProgram
|
||
fragmentShader: WebGLShader
|
||
}
|
||
|
||
type RenderTarget = {
|
||
texture: WebGLTexture
|
||
framebuffer: WebGLFramebuffer
|
||
}
|
||
|
||
function createShader(gl: WebGLRenderingContext, type: number, source: string) {
|
||
const shader = gl.createShader(type)
|
||
if (!shader) throw new Error('无法创建品牌动态色彩着色器')
|
||
|
||
gl.shaderSource(shader, source)
|
||
gl.compileShader(shader)
|
||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
||
const message = gl.getShaderInfoLog(shader) || '品牌动态色彩着色器编译失败'
|
||
gl.deleteShader(shader)
|
||
throw new Error(message)
|
||
}
|
||
return shader
|
||
}
|
||
|
||
function createProgram(
|
||
gl: WebGLRenderingContext,
|
||
vertexShader: WebGLShader,
|
||
fragmentSource: string,
|
||
): ShaderProgram {
|
||
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource)
|
||
const program = gl.createProgram()
|
||
if (!program) {
|
||
gl.deleteShader(fragmentShader)
|
||
throw new Error('无法创建品牌动态色彩程序')
|
||
}
|
||
|
||
gl.attachShader(program, vertexShader)
|
||
gl.attachShader(program, fragmentShader)
|
||
gl.linkProgram(program)
|
||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||
const message = gl.getProgramInfoLog(program) || '品牌动态色彩程序链接失败'
|
||
gl.deleteProgram(program)
|
||
gl.deleteShader(fragmentShader)
|
||
throw new Error(message)
|
||
}
|
||
|
||
return { program, fragmentShader }
|
||
}
|
||
|
||
function createRenderTarget(gl: WebGLRenderingContext, width: number, height: number): RenderTarget {
|
||
const texture = gl.createTexture()
|
||
const framebuffer = gl.createFramebuffer()
|
||
if (!texture || !framebuffer) throw new Error('无法创建品牌动态色彩画布')
|
||
|
||
gl.bindTexture(gl.TEXTURE_2D, texture)
|
||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
|
||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
|
||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
|
||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
|
||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
|
||
|
||
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer)
|
||
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
|
||
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
|
||
gl.deleteFramebuffer(framebuffer)
|
||
gl.deleteTexture(texture)
|
||
throw new Error('品牌动态色彩画布初始化失败')
|
||
}
|
||
|
||
return { texture, framebuffer }
|
||
}
|
||
|
||
function hexToRgb(hex: string) {
|
||
const value = Number.parseInt(hex.replace('#', ''), 16)
|
||
return [((value >> 16) & 255) / 255, ((value >> 8) & 255) / 255, (value & 255) / 255]
|
||
}
|
||
|
||
export default function BrandFluidField() {
|
||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||
|
||
useEffect(() => {
|
||
const canvas = canvasRef.current
|
||
if (!canvas) return
|
||
|
||
const gl = canvas.getContext('webgl', {
|
||
alpha: false,
|
||
antialias: false,
|
||
powerPreference: 'high-performance',
|
||
preserveDrawingBuffer: false,
|
||
})
|
||
|
||
if (!gl) {
|
||
canvas.dataset.webgl = 'unavailable'
|
||
return
|
||
}
|
||
|
||
let vertexShader: WebGLShader | null = null
|
||
let simulation: ShaderProgram | null = null
|
||
let display: ShaderProgram | null = null
|
||
let positionBuffer: WebGLBuffer | null = null
|
||
let target: RenderTarget | null = null
|
||
let frame = 0
|
||
let lastFrameTime = 0
|
||
let isInViewport = true
|
||
let isDocumentVisible = !document.hidden
|
||
|
||
try {
|
||
vertexShader = createShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER)
|
||
simulation = createProgram(gl, vertexShader, SIMULATION_SHADER)
|
||
display = createProgram(gl, vertexShader, DISPLAY_SHADER)
|
||
positionBuffer = gl.createBuffer()
|
||
if (!positionBuffer) throw new Error('无法创建品牌动态色彩顶点缓冲')
|
||
|
||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
|
||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW)
|
||
target = createRenderTarget(gl, FLOW_TEXTURE_WIDTH, FLOW_TEXTURE_HEIGHT)
|
||
} catch {
|
||
canvas.dataset.webgl = 'unavailable'
|
||
return
|
||
}
|
||
|
||
const vertex = vertexShader
|
||
const simulationProgram = simulation
|
||
const displayProgram = display
|
||
const buffer = positionBuffer
|
||
const renderTarget = target
|
||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
||
const startedAt = performance.now()
|
||
|
||
const simulationUniforms = {
|
||
time: gl.getUniformLocation(simulationProgram.program, 'u_time'),
|
||
seed: gl.getUniformLocation(simulationProgram.program, 'u_seed'),
|
||
}
|
||
const displayUniforms = {
|
||
dye: gl.getUniformLocation(displayProgram.program, 'u_dye'),
|
||
texel: gl.getUniformLocation(displayProgram.program, 'u_texel'),
|
||
colorA: gl.getUniformLocation(displayProgram.program, 'u_color_a'),
|
||
colorB: gl.getUniformLocation(displayProgram.program, 'u_color_b'),
|
||
colorC: gl.getUniformLocation(displayProgram.program, 'u_color_c'),
|
||
}
|
||
|
||
const bindPlane = (program: WebGLProgram) => {
|
||
const position = gl.getAttribLocation(program, 'a_position')
|
||
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
|
||
gl.enableVertexAttribArray(position)
|
||
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0)
|
||
}
|
||
|
||
const resize = () => {
|
||
const mobileRatio = window.matchMedia('(max-width: 767px)').matches ? 1.2 : 1.5
|
||
const ratio = Math.min(window.devicePixelRatio || 1, mobileRatio)
|
||
const width = Math.max(1, Math.round(canvas.clientWidth * ratio))
|
||
const height = Math.max(1, Math.round(canvas.clientHeight * ratio))
|
||
if (canvas.width !== width || canvas.height !== height) {
|
||
canvas.width = width
|
||
canvas.height = height
|
||
}
|
||
}
|
||
|
||
const renderFrame = (elapsed: number) => {
|
||
gl.bindFramebuffer(gl.FRAMEBUFFER, renderTarget.framebuffer)
|
||
gl.viewport(0, 0, FLOW_TEXTURE_WIDTH, FLOW_TEXTURE_HEIGHT)
|
||
gl.useProgram(simulationProgram.program)
|
||
bindPlane(simulationProgram.program)
|
||
gl.uniform1f(simulationUniforms.time, elapsed)
|
||
// 与参考稿 ORIGINAL specimen 使用同一个确定性 seed，保证首帧纹理而非随机近似。
|
||
gl.uniform1f(simulationUniforms.seed, 597 / 97)
|
||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
|
||
|
||
resize()
|
||
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
|
||
gl.viewport(0, 0, canvas.width, canvas.height)
|
||
gl.clearColor(0.9804, 0.9804, 0.9804, 1)
|
||
gl.clear(gl.COLOR_BUFFER_BIT)
|
||
gl.useProgram(displayProgram.program)
|
||
bindPlane(displayProgram.program)
|
||
gl.activeTexture(gl.TEXTURE0)
|
||
gl.bindTexture(gl.TEXTURE_2D, renderTarget.texture)
|
||
gl.uniform1i(displayUniforms.dye, 0)
|
||
gl.uniform2f(displayUniforms.texel, 1 / FLOW_TEXTURE_WIDTH, 1 / FLOW_TEXTURE_HEIGHT)
|
||
gl.uniform3fv(displayUniforms.colorA, hexToRgb(BRAND_COLORS[0]))
|
||
gl.uniform3fv(displayUniforms.colorB, hexToRgb(BRAND_COLORS[1]))
|
||
gl.uniform3fv(displayUniforms.colorC, hexToRgb(BRAND_COLORS[2]))
|
||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
|
||
canvas.dataset.webgl = 'ready'
|
||
}
|
||
|
||
const draw = (now: number) => {
|
||
frame = 0
|
||
if (!isInViewport || !isDocumentVisible) return
|
||
|
||
if (now - lastFrameTime >= 1000 / 30) {
|
||
lastFrameTime = now
|
||
renderFrame(7.2 + (now - startedAt) / 1000)
|
||
}
|
||
frame = window.requestAnimationFrame(draw)
|
||
}
|
||
|
||
const start = () => {
|
||
if (reduceMotion || frame || !isInViewport || !isDocumentVisible) return
|
||
frame = window.requestAnimationFrame(draw)
|
||
}
|
||
|
||
const stop = () => {
|
||
if (!frame) return
|
||
window.cancelAnimationFrame(frame)
|
||
frame = 0
|
||
}
|
||
|
||
const intersectionObserver = new IntersectionObserver(([entry]) => {
|
||
isInViewport = entry?.isIntersecting ?? true
|
||
if (isInViewport) start()
|
||
else stop()
|
||
}, { rootMargin: '80px' })
|
||
|
||
const resizeObserver = new ResizeObserver(() => {
|
||
if (reduceMotion) renderFrame(12)
|
||
})
|
||
|
||
const handleVisibilityChange = () => {
|
||
isDocumentVisible = !document.hidden
|
||
if (isDocumentVisible) start()
|
||
else stop()
|
||
}
|
||
|
||
intersectionObserver.observe(canvas)
|
||
resizeObserver.observe(canvas)
|
||
document.addEventListener('visibilitychange', handleVisibilityChange)
|
||
|
||
if (reduceMotion) renderFrame(12)
|
||
else start()
|
||
|
||
return () => {
|
||
stop()
|
||
intersectionObserver.disconnect()
|
||
resizeObserver.disconnect()
|
||
document.removeEventListener('visibilitychange', handleVisibilityChange)
|
||
gl.deleteFramebuffer(renderTarget.framebuffer)
|
||
gl.deleteTexture(renderTarget.texture)
|
||
gl.deleteBuffer(buffer)
|
||
gl.deleteProgram(simulationProgram.program)
|
||
gl.deleteProgram(displayProgram.program)
|
||
gl.deleteShader(simulationProgram.fragmentShader)
|
||
gl.deleteShader(displayProgram.fragmentShader)
|
||
gl.deleteShader(vertex)
|
||
}
|
||
}, [])
|
||
|
||
return (
|
||
<div
|
||
data-testid="brand-fluid-field"
|
||
aria-hidden="true"
|
||
className="pointer-events-none absolute inset-x-0 top-0 z-0 h-[72px] overflow-hidden bg-[#f4f4f2] md:inset-0 md:h-auto"
|
||
style={{
|
||
background: 'linear-gradient(90deg, #fafafa 0%, #fafafa 56%, #fff7fb 70%, #ffdceb 86%, #ffedf5 100%)',
|
||
}}
|
||
>
|
||
<canvas
|
||
ref={canvasRef}
|
||
className="block h-full w-full [filter:saturate(0.82)]"
|
||
/>
|
||
<span
|
||
aria-hidden="true"
|
||
className="absolute inset-x-0 bottom-0 h-7 bg-gradient-to-b from-transparent to-[#fafafa] md:hidden"
|
||
/>
|
||
</div>
|
||
)
|
||
}
|