|
|
@@ -1,924 +0,0 @@
|
|
|
-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>
|
|
|
- )
|
|
|
-}
|
Aaron Iker