mirror of
https://gitea.toothfairyai.com/ToothFairyAI/tf_code.git
synced 2026-04-01 23:02:26 +00:00
925 lines
27 KiB
TypeScript
925 lines
27 KiB
TypeScript
import { createSignal, createEffect, onMount, onCleanup, Show, For, Accessor, Setter } from "solid-js"
|
|
import "./light-rays.css"
|
|
|
|
export type RaysOrigin =
|
|
| "top-center"
|
|
| "top-left"
|
|
| "top-right"
|
|
| "right"
|
|
| "left"
|
|
| "bottom-center"
|
|
| "bottom-right"
|
|
| "bottom-left"
|
|
|
|
export interface LightRaysConfig {
|
|
raysOrigin: RaysOrigin
|
|
raysColor: string
|
|
raysSpeed: number
|
|
lightSpread: number
|
|
rayLength: number
|
|
sourceWidth: number
|
|
pulsating: boolean
|
|
pulsatingMin: number
|
|
pulsatingMax: number
|
|
fadeDistance: number
|
|
saturation: number
|
|
followMouse: boolean
|
|
mouseInfluence: number
|
|
noiseAmount: number
|
|
distortion: number
|
|
opacity: number
|
|
}
|
|
|
|
export const defaultConfig: LightRaysConfig = {
|
|
raysOrigin: "top-center",
|
|
raysColor: "#ffffff",
|
|
raysSpeed: 1.0,
|
|
lightSpread: 1.2,
|
|
rayLength: 4.5,
|
|
sourceWidth: 0.1,
|
|
pulsating: true,
|
|
pulsatingMin: 0.9,
|
|
pulsatingMax: 1.05,
|
|
fadeDistance: 1.25,
|
|
saturation: 0.35,
|
|
followMouse: false,
|
|
mouseInfluence: 0.05,
|
|
noiseAmount: 0.5,
|
|
distortion: 0.0,
|
|
opacity: 0.35,
|
|
}
|
|
|
|
export interface LightRaysAnimationState {
|
|
time: number
|
|
intensity: number
|
|
pulseValue: number
|
|
}
|
|
|
|
interface LightRaysProps {
|
|
config: Accessor<LightRaysConfig>
|
|
class?: string
|
|
onAnimationFrame?: (state: LightRaysAnimationState) => void
|
|
}
|
|
|
|
const hexToRgb = (hex: string): [number, number, number] => {
|
|
const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
|
return m ? [parseInt(m[1], 16) / 255, parseInt(m[2], 16) / 255, parseInt(m[3], 16) / 255] : [1, 1, 1]
|
|
}
|
|
|
|
const getAnchorAndDir = (
|
|
origin: RaysOrigin,
|
|
w: number,
|
|
h: number,
|
|
): { anchor: [number, number]; dir: [number, number] } => {
|
|
const outside = 0.2
|
|
switch (origin) {
|
|
case "top-left":
|
|
return { anchor: [0, -outside * h], dir: [0, 1] }
|
|
case "top-right":
|
|
return { anchor: [w, -outside * h], dir: [0, 1] }
|
|
case "left":
|
|
return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] }
|
|
case "right":
|
|
return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] }
|
|
case "bottom-left":
|
|
return { anchor: [0, (1 + outside) * h], dir: [0, -1] }
|
|
case "bottom-center":
|
|
return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] }
|
|
case "bottom-right":
|
|
return { anchor: [w, (1 + outside) * h], dir: [0, -1] }
|
|
default: // "top-center"
|
|
return { anchor: [0.5 * w, -outside * h], dir: [0, 1] }
|
|
}
|
|
}
|
|
|
|
interface UniformData {
|
|
iTime: number
|
|
iResolution: [number, number]
|
|
rayPos: [number, number]
|
|
rayDir: [number, number]
|
|
raysColor: [number, number, number]
|
|
raysSpeed: number
|
|
lightSpread: number
|
|
rayLength: number
|
|
sourceWidth: number
|
|
pulsating: number
|
|
pulsatingMin: number
|
|
pulsatingMax: number
|
|
fadeDistance: number
|
|
saturation: number
|
|
mousePos: [number, number]
|
|
mouseInfluence: number
|
|
noiseAmount: number
|
|
distortion: number
|
|
}
|
|
|
|
const WGSL_SHADER = `
|
|
struct Uniforms {
|
|
iTime: f32,
|
|
_pad0: f32,
|
|
iResolution: vec2<f32>,
|
|
rayPos: vec2<f32>,
|
|
rayDir: vec2<f32>,
|
|
raysColor: vec3<f32>,
|
|
raysSpeed: f32,
|
|
lightSpread: f32,
|
|
rayLength: f32,
|
|
sourceWidth: f32,
|
|
pulsating: f32,
|
|
pulsatingMin: f32,
|
|
pulsatingMax: f32,
|
|
fadeDistance: f32,
|
|
saturation: f32,
|
|
mousePos: vec2<f32>,
|
|
mouseInfluence: f32,
|
|
noiseAmount: f32,
|
|
distortion: f32,
|
|
_pad1: f32,
|
|
_pad2: f32,
|
|
_pad3: f32,
|
|
};
|
|
|
|
@group(0) @binding(0) var<uniform> uniforms: Uniforms;
|
|
|
|
struct VertexOutput {
|
|
@builtin(position) position: vec4<f32>,
|
|
@location(0) vUv: vec2<f32>,
|
|
};
|
|
|
|
@vertex
|
|
fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
|
|
var positions = array<vec2<f32>, 3>(
|
|
vec2<f32>(-1.0, -1.0),
|
|
vec2<f32>(3.0, -1.0),
|
|
vec2<f32>(-1.0, 3.0)
|
|
);
|
|
|
|
var output: VertexOutput;
|
|
let pos = positions[vertexIndex];
|
|
output.position = vec4<f32>(pos, 0.0, 1.0);
|
|
output.vUv = pos * 0.5 + 0.5;
|
|
return output;
|
|
}
|
|
|
|
fn noise(st: vec2<f32>) -> f32 {
|
|
return fract(sin(dot(st, vec2<f32>(12.9898, 78.233))) * 43758.5453123);
|
|
}
|
|
|
|
fn rayStrength(raySource: vec2<f32>, rayRefDirection: vec2<f32>, coord: vec2<f32>,
|
|
seedA: f32, seedB: f32, speed: f32) -> f32 {
|
|
let sourceToCoord = coord - raySource;
|
|
let dirNorm = normalize(sourceToCoord);
|
|
let cosAngle = dot(dirNorm, rayRefDirection);
|
|
|
|
let distortedAngle = cosAngle + uniforms.distortion * sin(uniforms.iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
|
|
|
|
let spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(uniforms.lightSpread, 0.001));
|
|
|
|
let distance = length(sourceToCoord);
|
|
let maxDistance = uniforms.iResolution.x * uniforms.rayLength;
|
|
let lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
|
|
|
|
let fadeFalloff = clamp((uniforms.iResolution.x * uniforms.fadeDistance - distance) / (uniforms.iResolution.x * uniforms.fadeDistance), 0.5, 1.0);
|
|
let pulseCenter = (uniforms.pulsatingMin + uniforms.pulsatingMax) * 0.5;
|
|
let pulseAmplitude = (uniforms.pulsatingMax - uniforms.pulsatingMin) * 0.5;
|
|
var pulse: f32;
|
|
if (uniforms.pulsating > 0.5) {
|
|
pulse = pulseCenter + pulseAmplitude * sin(uniforms.iTime * speed * 3.0);
|
|
} else {
|
|
pulse = 1.0;
|
|
}
|
|
|
|
let baseStrength = clamp(
|
|
(0.45 + 0.15 * sin(distortedAngle * seedA + uniforms.iTime * speed)) +
|
|
(0.3 + 0.2 * cos(-distortedAngle * seedB + uniforms.iTime * speed)),
|
|
0.0, 1.0
|
|
);
|
|
|
|
return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
|
|
}
|
|
|
|
@fragment
|
|
fn fragmentMain(@builtin(position) fragCoord: vec4<f32>, @location(0) vUv: vec2<f32>) -> @location(0) vec4<f32> {
|
|
let coord = vec2<f32>(fragCoord.x, fragCoord.y);
|
|
|
|
let normalizedX = (coord.x / uniforms.iResolution.x) - 0.5;
|
|
let widthOffset = -normalizedX * uniforms.sourceWidth * uniforms.iResolution.x;
|
|
|
|
let perpDir = vec2<f32>(-uniforms.rayDir.y, uniforms.rayDir.x);
|
|
let adjustedRayPos = uniforms.rayPos + perpDir * widthOffset;
|
|
|
|
var finalRayDir = uniforms.rayDir;
|
|
if (uniforms.mouseInfluence > 0.0) {
|
|
let mouseScreenPos = uniforms.mousePos * uniforms.iResolution;
|
|
let mouseDirection = normalize(mouseScreenPos - adjustedRayPos);
|
|
finalRayDir = normalize(mix(uniforms.rayDir, mouseDirection, uniforms.mouseInfluence));
|
|
}
|
|
|
|
let rays1 = vec4<f32>(1.0) *
|
|
rayStrength(adjustedRayPos, finalRayDir, coord, 36.2214, 21.11349,
|
|
1.5 * uniforms.raysSpeed);
|
|
let rays2 = vec4<f32>(1.0) *
|
|
rayStrength(adjustedRayPos, finalRayDir, coord, 22.3991, 18.0234,
|
|
1.1 * uniforms.raysSpeed);
|
|
|
|
var fragColor = rays1 * 0.5 + rays2 * 0.4;
|
|
|
|
if (uniforms.noiseAmount > 0.0) {
|
|
let n = noise(coord * 0.01 + uniforms.iTime * 0.1);
|
|
fragColor = vec4<f32>(fragColor.rgb * (1.0 - uniforms.noiseAmount + uniforms.noiseAmount * n), fragColor.a);
|
|
}
|
|
|
|
let brightness = 1.0 - (coord.y / uniforms.iResolution.y);
|
|
fragColor.x = fragColor.x * (0.1 + brightness * 0.8);
|
|
fragColor.y = fragColor.y * (0.3 + brightness * 0.6);
|
|
fragColor.z = fragColor.z * (0.5 + brightness * 0.5);
|
|
|
|
if (uniforms.saturation != 1.0) {
|
|
let gray = dot(fragColor.rgb, vec3<f32>(0.299, 0.587, 0.114));
|
|
fragColor = vec4<f32>(mix(vec3<f32>(gray), fragColor.rgb, uniforms.saturation), fragColor.a);
|
|
}
|
|
|
|
fragColor = vec4<f32>(fragColor.rgb * uniforms.raysColor, fragColor.a);
|
|
|
|
return fragColor;
|
|
}
|
|
`
|
|
|
|
const UNIFORM_BUFFER_SIZE = 96
|
|
|
|
function createUniformBuffer(data: UniformData): Float32Array {
|
|
const buffer = new Float32Array(24)
|
|
buffer[0] = data.iTime
|
|
buffer[1] = 0
|
|
buffer[2] = data.iResolution[0]
|
|
buffer[3] = data.iResolution[1]
|
|
buffer[4] = data.rayPos[0]
|
|
buffer[5] = data.rayPos[1]
|
|
buffer[6] = data.rayDir[0]
|
|
buffer[7] = data.rayDir[1]
|
|
buffer[8] = data.raysColor[0]
|
|
buffer[9] = data.raysColor[1]
|
|
buffer[10] = data.raysColor[2]
|
|
buffer[11] = data.raysSpeed
|
|
buffer[12] = data.lightSpread
|
|
buffer[13] = data.rayLength
|
|
buffer[14] = data.sourceWidth
|
|
buffer[15] = data.pulsating
|
|
buffer[16] = data.pulsatingMin
|
|
buffer[17] = data.pulsatingMax
|
|
buffer[18] = data.fadeDistance
|
|
buffer[19] = data.saturation
|
|
buffer[20] = data.mousePos[0]
|
|
buffer[21] = data.mousePos[1]
|
|
buffer[22] = data.mouseInfluence
|
|
buffer[23] = data.noiseAmount
|
|
return buffer
|
|
}
|
|
|
|
const UNIFORM_BUFFER_SIZE_CORRECTED = 112
|
|
|
|
function createUniformBufferCorrected(data: UniformData): Float32Array {
|
|
const buffer = new Float32Array(28)
|
|
buffer[0] = data.iTime
|
|
buffer[1] = 0
|
|
buffer[2] = data.iResolution[0]
|
|
buffer[3] = data.iResolution[1]
|
|
buffer[4] = data.rayPos[0]
|
|
buffer[5] = data.rayPos[1]
|
|
buffer[6] = data.rayDir[0]
|
|
buffer[7] = data.rayDir[1]
|
|
buffer[8] = data.raysColor[0]
|
|
buffer[9] = data.raysColor[1]
|
|
buffer[10] = data.raysColor[2]
|
|
buffer[11] = data.raysSpeed
|
|
buffer[12] = data.lightSpread
|
|
buffer[13] = data.rayLength
|
|
buffer[14] = data.sourceWidth
|
|
buffer[15] = data.pulsating
|
|
buffer[16] = data.pulsatingMin
|
|
buffer[17] = data.pulsatingMax
|
|
buffer[18] = data.fadeDistance
|
|
buffer[19] = data.saturation
|
|
buffer[20] = data.mousePos[0]
|
|
buffer[21] = data.mousePos[1]
|
|
buffer[22] = data.mouseInfluence
|
|
buffer[23] = data.noiseAmount
|
|
buffer[24] = data.distortion
|
|
buffer[25] = 0
|
|
buffer[26] = 0
|
|
buffer[27] = 0
|
|
return buffer
|
|
}
|
|
|
|
export default function LightRays(props: LightRaysProps) {
|
|
let containerRef: HTMLDivElement | undefined
|
|
let canvasRef: HTMLCanvasElement | null = null
|
|
let deviceRef: GPUDevice | null = null
|
|
let contextRef: GPUCanvasContext | null = null
|
|
let pipelineRef: GPURenderPipeline | null = null
|
|
let uniformBufferRef: GPUBuffer | null = null
|
|
let bindGroupRef: GPUBindGroup | null = null
|
|
let animationIdRef: number | null = null
|
|
let cleanupFunctionRef: (() => void) | null = null
|
|
let uniformDataRef: UniformData | null = null
|
|
|
|
const mouseRef = { x: 0.5, y: 0.5 }
|
|
const smoothMouseRef = { x: 0.5, y: 0.5 }
|
|
|
|
const [isVisible, setIsVisible] = createSignal(false)
|
|
|
|
onMount(() => {
|
|
if (!containerRef) return
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const entry = entries[0]
|
|
setIsVisible(entry.isIntersecting)
|
|
},
|
|
{ threshold: 0.1 },
|
|
)
|
|
|
|
observer.observe(containerRef)
|
|
|
|
onCleanup(() => {
|
|
observer.disconnect()
|
|
})
|
|
})
|
|
|
|
createEffect(() => {
|
|
const visible = isVisible()
|
|
const config = props.config()
|
|
if (!visible || !containerRef) {
|
|
return
|
|
}
|
|
|
|
if (cleanupFunctionRef) {
|
|
cleanupFunctionRef()
|
|
cleanupFunctionRef = null
|
|
}
|
|
|
|
const initializeWebGPU = async () => {
|
|
if (!containerRef) {
|
|
return
|
|
}
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 10))
|
|
|
|
if (!containerRef) {
|
|
return
|
|
}
|
|
|
|
if (!navigator.gpu) {
|
|
console.warn("WebGPU is not supported in this browser")
|
|
return
|
|
}
|
|
|
|
const adapter = await navigator.gpu.requestAdapter()
|
|
if (!adapter) {
|
|
console.warn("Failed to get WebGPU adapter")
|
|
return
|
|
}
|
|
|
|
const device = await adapter.requestDevice()
|
|
deviceRef = device
|
|
|
|
const canvas = document.createElement("canvas")
|
|
canvas.style.width = "100%"
|
|
canvas.style.height = "100%"
|
|
canvasRef = canvas
|
|
|
|
while (containerRef.firstChild) {
|
|
containerRef.removeChild(containerRef.firstChild)
|
|
}
|
|
containerRef.appendChild(canvas)
|
|
|
|
const context = canvas.getContext("webgpu")
|
|
if (!context) {
|
|
console.warn("Failed to get WebGPU context")
|
|
return
|
|
}
|
|
contextRef = context
|
|
|
|
const presentationFormat = navigator.gpu.getPreferredCanvasFormat()
|
|
context.configure({
|
|
device,
|
|
format: presentationFormat,
|
|
alphaMode: "premultiplied",
|
|
})
|
|
|
|
const shaderModule = device.createShaderModule({
|
|
code: WGSL_SHADER,
|
|
})
|
|
|
|
const uniformBuffer = device.createBuffer({
|
|
size: UNIFORM_BUFFER_SIZE_CORRECTED,
|
|
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
|
|
})
|
|
uniformBufferRef = uniformBuffer
|
|
|
|
const bindGroupLayout = device.createBindGroupLayout({
|
|
entries: [
|
|
{
|
|
binding: 0,
|
|
visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
|
|
buffer: { type: "uniform" },
|
|
},
|
|
],
|
|
})
|
|
|
|
const bindGroup = device.createBindGroup({
|
|
layout: bindGroupLayout,
|
|
entries: [
|
|
{
|
|
binding: 0,
|
|
resource: { buffer: uniformBuffer },
|
|
},
|
|
],
|
|
})
|
|
bindGroupRef = bindGroup
|
|
|
|
const pipelineLayout = device.createPipelineLayout({
|
|
bindGroupLayouts: [bindGroupLayout],
|
|
})
|
|
|
|
const pipeline = device.createRenderPipeline({
|
|
layout: pipelineLayout,
|
|
vertex: {
|
|
module: shaderModule,
|
|
entryPoint: "vertexMain",
|
|
},
|
|
fragment: {
|
|
module: shaderModule,
|
|
entryPoint: "fragmentMain",
|
|
targets: [
|
|
{
|
|
format: presentationFormat,
|
|
blend: {
|
|
color: {
|
|
srcFactor: "src-alpha",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add",
|
|
},
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
primitive: {
|
|
topology: "triangle-list",
|
|
},
|
|
})
|
|
pipelineRef = pipeline
|
|
|
|
const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
|
|
const dpr = Math.min(window.devicePixelRatio, 2)
|
|
const w = wCSS * dpr
|
|
const h = hCSS * dpr
|
|
const { anchor, dir } = getAnchorAndDir(config.raysOrigin, w, h)
|
|
|
|
uniformDataRef = {
|
|
iTime: 0,
|
|
iResolution: [w, h],
|
|
rayPos: anchor,
|
|
rayDir: dir,
|
|
raysColor: hexToRgb(config.raysColor),
|
|
raysSpeed: config.raysSpeed,
|
|
lightSpread: config.lightSpread,
|
|
rayLength: config.rayLength,
|
|
sourceWidth: config.sourceWidth,
|
|
pulsating: config.pulsating ? 1.0 : 0.0,
|
|
pulsatingMin: config.pulsatingMin,
|
|
pulsatingMax: config.pulsatingMax,
|
|
fadeDistance: config.fadeDistance,
|
|
saturation: config.saturation,
|
|
mousePos: [0.5, 0.5],
|
|
mouseInfluence: config.mouseInfluence,
|
|
noiseAmount: config.noiseAmount,
|
|
distortion: config.distortion,
|
|
}
|
|
|
|
const updatePlacement = () => {
|
|
if (!containerRef || !canvasRef || !uniformDataRef) {
|
|
return
|
|
}
|
|
|
|
const dpr = Math.min(window.devicePixelRatio, 2)
|
|
const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
|
|
const w = Math.floor(wCSS * dpr)
|
|
const h = Math.floor(hCSS * dpr)
|
|
|
|
canvasRef.width = w
|
|
canvasRef.height = h
|
|
|
|
uniformDataRef.iResolution = [w, h]
|
|
|
|
const currentConfig = props.config()
|
|
const { anchor, dir } = getAnchorAndDir(currentConfig.raysOrigin, w, h)
|
|
uniformDataRef.rayPos = anchor
|
|
uniformDataRef.rayDir = dir
|
|
}
|
|
|
|
const loop = (t: number) => {
|
|
if (!deviceRef || !contextRef || !pipelineRef || !uniformBufferRef || !bindGroupRef || !uniformDataRef) {
|
|
return
|
|
}
|
|
|
|
const currentConfig = props.config()
|
|
const timeSeconds = t * 0.001
|
|
uniformDataRef.iTime = timeSeconds
|
|
|
|
if (currentConfig.followMouse && currentConfig.mouseInfluence > 0.0) {
|
|
const smoothing = 0.92
|
|
|
|
smoothMouseRef.x = smoothMouseRef.x * smoothing + mouseRef.x * (1 - smoothing)
|
|
smoothMouseRef.y = smoothMouseRef.y * smoothing + mouseRef.y * (1 - smoothing)
|
|
|
|
uniformDataRef.mousePos = [smoothMouseRef.x, smoothMouseRef.y]
|
|
}
|
|
|
|
if (props.onAnimationFrame) {
|
|
const pulseCenter = (currentConfig.pulsatingMin + currentConfig.pulsatingMax) * 0.5
|
|
const pulseAmplitude = (currentConfig.pulsatingMax - currentConfig.pulsatingMin) * 0.5
|
|
const pulseValue = currentConfig.pulsating
|
|
? pulseCenter + pulseAmplitude * Math.sin(timeSeconds * currentConfig.raysSpeed * 3.0)
|
|
: 1.0
|
|
|
|
const baseIntensity1 = 0.45 + 0.15 * Math.sin(timeSeconds * currentConfig.raysSpeed * 1.5)
|
|
const baseIntensity2 = 0.3 + 0.2 * Math.cos(timeSeconds * currentConfig.raysSpeed * 1.1)
|
|
const intensity = (baseIntensity1 + baseIntensity2) * pulseValue
|
|
|
|
props.onAnimationFrame({
|
|
time: timeSeconds,
|
|
intensity,
|
|
pulseValue,
|
|
})
|
|
}
|
|
|
|
try {
|
|
const uniformData = createUniformBufferCorrected(uniformDataRef)
|
|
deviceRef.queue.writeBuffer(uniformBufferRef, 0, uniformData.buffer)
|
|
|
|
const commandEncoder = deviceRef.createCommandEncoder()
|
|
|
|
const textureView = contextRef.getCurrentTexture().createView()
|
|
|
|
const renderPass = commandEncoder.beginRenderPass({
|
|
colorAttachments: [
|
|
{
|
|
view: textureView,
|
|
clearValue: { r: 0, g: 0, b: 0, a: 0 },
|
|
loadOp: "clear",
|
|
storeOp: "store",
|
|
},
|
|
],
|
|
})
|
|
|
|
renderPass.setPipeline(pipelineRef)
|
|
renderPass.setBindGroup(0, bindGroupRef)
|
|
renderPass.draw(3)
|
|
renderPass.end()
|
|
|
|
deviceRef.queue.submit([commandEncoder.finish()])
|
|
|
|
animationIdRef = requestAnimationFrame(loop)
|
|
} catch (error) {
|
|
console.warn("WebGPU rendering error:", error)
|
|
return
|
|
}
|
|
}
|
|
|
|
window.addEventListener("resize", updatePlacement)
|
|
updatePlacement()
|
|
animationIdRef = requestAnimationFrame(loop)
|
|
|
|
cleanupFunctionRef = () => {
|
|
if (animationIdRef) {
|
|
cancelAnimationFrame(animationIdRef)
|
|
animationIdRef = null
|
|
}
|
|
|
|
window.removeEventListener("resize", updatePlacement)
|
|
|
|
if (uniformBufferRef) {
|
|
uniformBufferRef.destroy()
|
|
uniformBufferRef = null
|
|
}
|
|
|
|
if (deviceRef) {
|
|
deviceRef.destroy()
|
|
deviceRef = null
|
|
}
|
|
|
|
if (canvasRef && canvasRef.parentNode) {
|
|
canvasRef.parentNode.removeChild(canvasRef)
|
|
}
|
|
|
|
canvasRef = null
|
|
contextRef = null
|
|
pipelineRef = null
|
|
bindGroupRef = null
|
|
uniformDataRef = null
|
|
}
|
|
}
|
|
|
|
initializeWebGPU()
|
|
|
|
onCleanup(() => {
|
|
if (cleanupFunctionRef) {
|
|
cleanupFunctionRef()
|
|
cleanupFunctionRef = null
|
|
}
|
|
})
|
|
})
|
|
|
|
createEffect(() => {
|
|
if (!uniformDataRef || !containerRef) {
|
|
return
|
|
}
|
|
|
|
const config = props.config()
|
|
|
|
uniformDataRef.raysColor = hexToRgb(config.raysColor)
|
|
uniformDataRef.raysSpeed = config.raysSpeed
|
|
uniformDataRef.lightSpread = config.lightSpread
|
|
uniformDataRef.rayLength = config.rayLength
|
|
uniformDataRef.sourceWidth = config.sourceWidth
|
|
uniformDataRef.pulsating = config.pulsating ? 1.0 : 0.0
|
|
uniformDataRef.pulsatingMin = config.pulsatingMin
|
|
uniformDataRef.pulsatingMax = config.pulsatingMax
|
|
uniformDataRef.fadeDistance = config.fadeDistance
|
|
uniformDataRef.saturation = config.saturation
|
|
uniformDataRef.mouseInfluence = config.mouseInfluence
|
|
uniformDataRef.noiseAmount = config.noiseAmount
|
|
uniformDataRef.distortion = config.distortion
|
|
|
|
const dpr = Math.min(window.devicePixelRatio, 2)
|
|
const { clientWidth: wCSS, clientHeight: hCSS } = containerRef
|
|
const { anchor, dir } = getAnchorAndDir(config.raysOrigin, wCSS * dpr, hCSS * dpr)
|
|
uniformDataRef.rayPos = anchor
|
|
uniformDataRef.rayDir = dir
|
|
})
|
|
|
|
createEffect(() => {
|
|
const config = props.config()
|
|
if (!config.followMouse) {
|
|
return
|
|
}
|
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!containerRef) {
|
|
return
|
|
}
|
|
const rect = containerRef.getBoundingClientRect()
|
|
const x = (e.clientX - rect.left) / rect.width
|
|
const y = (e.clientY - rect.top) / rect.height
|
|
mouseRef.x = x
|
|
mouseRef.y = y
|
|
}
|
|
|
|
window.addEventListener("mousemove", handleMouseMove)
|
|
|
|
onCleanup(() => {
|
|
window.removeEventListener("mousemove", handleMouseMove)
|
|
})
|
|
})
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
class={`light-rays-container ${props.class ?? ""}`.trim()}
|
|
style={{ opacity: props.config().opacity }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
interface LightRaysControlsProps {
|
|
config: Accessor<LightRaysConfig>
|
|
setConfig: Setter<LightRaysConfig>
|
|
}
|
|
|
|
export function LightRaysControls(props: LightRaysControlsProps) {
|
|
const [isOpen, setIsOpen] = createSignal(true)
|
|
|
|
const updateConfig = <K extends keyof LightRaysConfig>(key: K, value: LightRaysConfig[K]) => {
|
|
props.setConfig((prev) => ({ ...prev, [key]: value }))
|
|
}
|
|
|
|
const origins: RaysOrigin[] = [
|
|
"top-center",
|
|
"top-left",
|
|
"top-right",
|
|
"left",
|
|
"right",
|
|
"bottom-center",
|
|
"bottom-left",
|
|
"bottom-right",
|
|
]
|
|
|
|
return (
|
|
<div class="light-rays-controls">
|
|
<button class="light-rays-controls-toggle" onClick={() => setIsOpen(!isOpen())}>
|
|
{isOpen() ? "▼" : "▶"} Light Rays
|
|
</button>
|
|
<Show when={isOpen()}>
|
|
<div class="light-rays-controls-panel">
|
|
<div class="control-group">
|
|
<label>Origin</label>
|
|
<select
|
|
value={props.config().raysOrigin}
|
|
onChange={(e) => updateConfig("raysOrigin", e.currentTarget.value as RaysOrigin)}
|
|
>
|
|
<For each={origins}>{(origin) => <option value={origin}>{origin}</option>}</For>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Color</label>
|
|
<input
|
|
type="color"
|
|
value={props.config().raysColor}
|
|
onInput={(e) => updateConfig("raysColor", e.currentTarget.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Speed: {props.config().raysSpeed.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="3"
|
|
step="0.01"
|
|
value={props.config().raysSpeed}
|
|
onInput={(e) => updateConfig("raysSpeed", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Light Spread: {props.config().lightSpread.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0.1"
|
|
max="5"
|
|
step="0.01"
|
|
value={props.config().lightSpread}
|
|
onInput={(e) => updateConfig("lightSpread", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Ray Length: {props.config().rayLength.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0.1"
|
|
max="5"
|
|
step="0.01"
|
|
value={props.config().rayLength}
|
|
onInput={(e) => updateConfig("rayLength", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Source Width: {props.config().sourceWidth.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.01"
|
|
value={props.config().sourceWidth}
|
|
onInput={(e) => updateConfig("sourceWidth", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Fade Distance: {props.config().fadeDistance.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0.1"
|
|
max="3"
|
|
step="0.01"
|
|
value={props.config().fadeDistance}
|
|
onInput={(e) => updateConfig("fadeDistance", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Saturation: {props.config().saturation.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.01"
|
|
value={props.config().saturation}
|
|
onInput={(e) => updateConfig("saturation", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Mouse Influence: {props.config().mouseInfluence.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={props.config().mouseInfluence}
|
|
onInput={(e) => updateConfig("mouseInfluence", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Noise: {props.config().noiseAmount.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={props.config().noiseAmount}
|
|
onInput={(e) => updateConfig("noiseAmount", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Distortion: {props.config().distortion.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.01"
|
|
value={props.config().distortion}
|
|
onInput={(e) => updateConfig("distortion", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Opacity: {props.config().opacity.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={props.config().opacity}
|
|
onInput={(e) => updateConfig("opacity", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group checkbox">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={props.config().pulsating}
|
|
onChange={(e) => updateConfig("pulsating", e.currentTarget.checked)}
|
|
/>
|
|
Pulsating
|
|
</label>
|
|
</div>
|
|
|
|
<Show when={props.config().pulsating}>
|
|
<div class="control-group">
|
|
<label>Pulse Min: {props.config().pulsatingMin.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={props.config().pulsatingMin}
|
|
onInput={(e) => updateConfig("pulsatingMin", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Pulse Max: {props.config().pulsatingMax.toFixed(2)}</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="2"
|
|
step="0.01"
|
|
value={props.config().pulsatingMax}
|
|
onInput={(e) => updateConfig("pulsatingMax", parseFloat(e.currentTarget.value))}
|
|
/>
|
|
</div>
|
|
</Show>
|
|
|
|
<div class="control-group checkbox">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={props.config().followMouse}
|
|
onChange={(e) => updateConfig("followMouse", e.currentTarget.checked)}
|
|
/>
|
|
Follow Mouse
|
|
</label>
|
|
</div>
|
|
|
|
<button class="reset-button" onClick={() => props.setConfig(defaultConfig)}>
|
|
Reset to Defaults
|
|
</button>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|