perf: optimize multipleSplats perfomance

Reduces buffer swaps from O(2N) to O(2), N = number of splats Minimizes expensive WebGL context state changes Processes all velocity updates first to keep similar operations contiguous then handles all dye updates for better texture cache utilization
refactor: restructure
2025-04-05 15:57:08 +03:00 · 2025-01-29 05:54:58 +03:00 · 2025-01-29 04:55:18 +03:00 · 2025-01-28 19:50:28 +03:00
17 changed files with 1394 additions and 1018 deletions
--- a/17
+++ b/17
@ -1,17 +0,0 @@
 FROM node:20-slim as build
 WORKDIR /opt
 COPY ./package.json /opt/package.json
 COPY ./package-lock.json /opt/package-lock.json
 RUN npm ci
 COPY . .
 RUN npm run build
 FROM nginx:1.24-alpine-slim
 COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /opt/dist /usr/share/nginx/html
--- a/config/Dockerfile
+++ b/config/Dockerfile
@ -0,0 +1,14 @@
 FROM node:24-slim as build
 WORKDIR /opt
 COPY package*.json ./
 RUN npm ci
 COPY . .
 RUN npm run build
 FROM nginx:1.24-alpine-slim
 COPY config/nginx.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /opt/dist /usr/share/nginx/html
--- a/config/docker-compose.yml
+++ b/config/docker-compose.yml
@ -6,7 +6,9 @@ services:
    container_name: zeldon-site
    build:
      context: .
-      dockerfile: Dockerfile
+      dockerfile: config/Dockerfile
    ports:
-      - 3123:80
+      - "3123:80"
    restart: unless-stopped
    volumes:
      - ./config/nginx.conf:/etc/nginx/conf.d/default.conf:ro
--- a/config/nginx.conf
+++ b/config/nginx.conf
--- a/index.html
+++ b/index.html
@ -1,81 +1,102 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta http-equiv="Cache-Control" content="no-cache" />
-<head>
+		<meta
-    <meta charset="utf-8">
+			name="viewport"
-    <meta http-equiv="Cache-Control" content="no-cache">
+			content="width=device-width, initial-scale=1.0, user-scalable=no"
 		/>
 		<meta
 			name="apple-mobile-web-app-status-bar-style"
 			content="black-translucent"
 		/>
 		<meta name="apple-mobile-web-app-capable" content="yes" />
 		<meta name="mobile-web-app-capable" content="yes" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link rel="icon" href="favicon/favicon.ico" sizes="any" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+		<link rel="icon" href="favicon/favicon.svg" type="image/svg+xml" />
-    <meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png" />
    <meta name="mobile-web-app-capable" content="yes">
-    <link rel="icon" href="favicon/favicon.ico" sizes="any">
+		<title>zeldØƞ</title>
-    <link rel="icon" href="favicon/favicon.svg" type="image/svg+xml">
+		<meta name="description" content="zeldon's website" />
    <link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
-    <title>zeldØƞ</title>
+		<meta property="og:type" content="website" />
-    <meta name="description" content="zeldon's website">
+		<meta property="og:title" content="zeldØƞ" />
-
+		<meta property="og:description" content="zeldon's website" />
-    <meta property="og:type" content="website">
+		<meta property="og:url" content="https://zeldon.ru" />
-    <meta property="og:title" content="zeldØƞ">
+		<meta property="og:image" content="ogimage.jpg" />
-    <meta property="og:description" content="zeldon's website">
+	</head>
    <meta property="og:url" content="https://zeldon.ru">
    <meta property="og:image" content="ogimage.jpg">
    <!-- analytics -->
    <script async defer data-website-id="4ce8bee2-4633-4a5a-81e3-83f5cd9b7c8b"
        src="https://analytics.zeldon.ru/umami.js"></script>
 </head>
 <body>
    <div class="container">
        <div class="content">
            <div class="content-info">
                <h1 class="name perspective">TIMOFEY <br>GELAZONIYA</h1>
                <h4 class="greeting perspective"></h4>
                <h4 class="clock perspective"></h4>
            </div>
            <div class="button-container perspective">
                <button class="button button--hyperion" onclick="window.open('https://spotify.zeldon.ru', '_blank')"
                    type="button">
                    <span class="button-inner">
                        <svg class="spotify-icon" height="30" width="30" viewBox="0 0 170 170">
                            <path
                                d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z" />
                        </svg>
                        <span>
                            <span>Sign in with Spotify</span>
                        </span>
                    </span>
                </button>
                <div class="links-container">
                    <a class="link" target="_blank" rel="noopener noreferrer" href="https://vk.com/xzeldon">
                        <span class="link-text">
                            vk
                        </span>
                    </a>
                    <a class="link" target="_blank" rel="noopener noreferrer" href="https://github.com/xzeldon">
                        <span class="link-text">
                            git
                        </span>
                    </a>
                    <a class="link" target="_blank" rel="noopener noreferrer" href="https://t.me/xzeldon">
                        <span class="link-text">
                            telegram
                        </span>
                    </a>
                    <a class="link" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/zeeeldon">
                        <span class="link-text">
                            instagram
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <canvas></canvas>
    <script type="module" src="./src/main.js"></script>
 </body>
 	<body>
 		<div class="container">
 			<div class="content">
 				<div class="content-info">
 					<h1 class="name perspective">TIMOFEY <br />GELAZONIYA</h1>
 					<h4 class="greeting perspective"></h4>
 					<h4 class="clock perspective"></h4>
 				</div>
 				<div class="button-container perspective">
 					<button
 						class="button button--hyperion"
 						onclick="window.open('https://spotify.zeldon.ru', '_blank')"
 						type="button"
 					>
 						<span class="button-inner">
 							<svg
 								class="spotify-icon"
 								height="30"
 								width="30"
 								viewBox="0 0 170 170"
 							>
 								<path
 									d="m83.996 0.277c-46.249 0-83.743 37.493-83.743 83.742 0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l0.001-0.004zm38.404 120.78c-1.5 2.46-4.72 3.24-7.18 1.73-19.662-12.01-44.414-14.73-73.564-8.07-2.809 0.64-5.609-1.12-6.249-3.93-0.643-2.81 1.11-5.61 3.926-6.25 31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-0.903-8.148-4.35-1.04-3.453 0.907-7.093 4.354-8.143 30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976v-0.001zm0.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219-1.254-4.14 1.08-8.513 5.221-9.771 29.581-8.98 78.756-7.245 109.83 11.202 3.73 2.209 4.95 7.016 2.74 10.733-2.2 3.722-7.02 4.949-10.73 2.739z"
 								/>
 							</svg>
 							<span>
 								<span>Sign in with Spotify</span>
 							</span>
 						</span>
 					</button>
 					<div class="links-container">
 						<a
 							class="link"
 							target="_blank"
 							rel="noopener noreferrer"
 							href="https://vk.com/xzeldon"
 						>
 							<span class="link-text"> vk </span>
 						</a>
 						<a
 							class="link"
 							target="_blank"
 							rel="noopener noreferrer"
 							href="https://github.com/xzeldon"
 						>
 							<span class="link-text"> git </span>
 						</a>
 						<a
 							class="link"
 							target="_blank"
 							rel="noopener noreferrer"
 							href="https://git.zeldon.ru"
 						>
 							<span class="link-text"> gitea </span>
 						</a>
 						<a
 							class="link"
 							target="_blank"
 							rel="noopener noreferrer"
 							href="https://t.me/xzeldon"
 						>
 							<span class="link-text"> telegram </span>
 						</a>
 					</div>
 				</div>
 			</div>
 		</div>
 		<canvas></canvas>
 		<script type="module" src="./src/main.js"></script>
 	</body>
 </html>
--- a/public/fluid.js
+++ b/public/fluid.js
--- a/src/app.js
+++ b/src/app.js
@ -1,98 +0,0 @@
 import { event_listener_array, calc_delta_time } from './utils';
 export function perspective_3d(class_name) {
    const elements = document.body.getElementsByClassName(class_name);
    let velocity_x = 0;
    let velocity_y = 0;
    let rotation_x = 0;
    let rotation_y = 0;
    let target_rotation_x = 0;
    let target_rotation_y = 0;
    (function update() {
        let dt = calc_delta_time();
        const ss = .08;
        velocity_x = spring(rotation_x, target_rotation_x, velocity_x, 10, dt);
        velocity_y = spring(rotation_y, target_rotation_y, velocity_y, 10, dt);
        rotation_x += velocity_x * dt * ss;
        rotation_y += velocity_y * dt * ss;
        const style = `perspective(700px) rotateX(${rotation_y}rad) rotateY(${rotation_x}rad)`;
        for (const el of elements) {
            el.style.transform = style;
        }
        requestAnimationFrame(update);
    })();
    event_listener_array(window, ["mousemove", "touchmove"], (e) => {
        if (e.changedTouches && e.changedTouches[0]) {
            e = e.changedTouches[0];
        }
        target_rotation_x = (e.clientX / window.innerWidth) * 2 - 1;
        target_rotation_y = -(e.clientY / window.innerHeight) * 2 + 1;
        target_rotation_x = clamp(target_rotation_x, -0.5, 0.5);
        target_rotation_y = clamp(target_rotation_y, -0.5, 0.5);
    }, false);
    function spring(position, target, velocity, omega, dt) {
        let n1 = velocity - (position - target) * (Math.pow(omega, 2) * dt);
        let n2 = 1 + omega * dt;
        return n1 / Math.pow(n2, 2);
    }
    function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }
 }
 (function pick_greeting() {
    const hours = new Date().getHours();
    const greeing_el = document.querySelector(".greeting");
    if (hours < 6) {
        const data = "Good night";
        greeing_el.textContent = data;
        greeing_el.innerText = data;
    } else if (hours >= 6 && hours < 12) {
        const data = "Good morning";
        greeing_el.textContent = data;
        greeing_el.innerText = data;
    } else if (hours >= 12 && hours < 16) {
        const data = "Good afternoon";
        greeing_el.textContent = data;
        greeing_el.innerText = data;
    } else if (hours >= 16 && hours <= 23) {
        const data = "Good evening";
        greeing_el.textContent = data;
        greeing_el.innerText = data;
    } else {
        const data = "Hello";
        greeing_el.textContent = data;
        greeing_el.innerText = data;
    }
    setTimeout(pick_greeting, 6e4);
 })();
 (function render_time() {
    const time = new Date();
    let h = time.getHours();
    h = h.toString().padStart(2, 0);
    let m = time.getMinutes().toString().padStart(2, 0);
    let s = time.getSeconds().toString().padStart(2, 0);
    const clock_el = document.querySelector('.clock');
    if (!clock_el) return;
    const formatted_date = `${h}:${m}:${s}`;
    clock_el.textContent = formatted_date;
    clock_el.innerText = formatted_date;
    setTimeout(render_time, 1e3);
 })();
--- a/src/assets/Inter.woff2
+++ b/src/assets/Inter.woff2
--- a/src/css/animation.css
+++ b/src/css/animation.css
@ -1,9 +0,0 @@
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1.0;
    }
 }
--- a/src/css/font.css
+++ b/src/css/font.css
@ -1,19 +0,0 @@
@font-face {
    font-family: "Inter Var";
    font-weight: 400 900;
    font-display: swap;
    font-style: normal;
    src: url("/src/font/Inter.woff2") format("woff2");
 }
 html {
    font-family: "Inter Var", sans-serif;
    font-size: 17px;
    box-sizing: border-box;
 }
 .greeting {
    font-variation-settings: "wght" 400;
    letter-spacing: 0rem;
    line-height: 1.7rem;
 }
--- a/src/effects.js
+++ b/src/effects.js
@ -0,0 +1,135 @@
 import { addEventListeners, calcDeltaTime } from "./utils";
 /**
 * Adds 3D perspective rotation effect to elements with the specified class name.
 * The rotation is controlled by mouse/touch movement and uses spring physics for smooth animation.
 * @param {string} className - The class name of elements to apply the 3D effect to
 */
 export const add3DRotationEffect = (className) => {
 	const elements = document.body.getElementsByClassName(className);
 	const state = {
 		velocity: { x: 0, y: 0 },
 		rotation: { x: 0, y: 0 },
 		targetRotation: { x: 0, y: 0 },
 	};
 	/**
 	 * Calculates spring physics for smooth animation
 	 * @param {number} position - Current position
 	 * @param {number} target - Target position
 	 * @param {number} velocity - Current velocity
 	 * @param {number} omega - Angular frequency
 	 * @param {number} dt - Delta time
 	 * @returns {number} New velocity
 	 */
 	const spring = (position, target, velocity, omega, dt) => {
 		const n1 = velocity - (position - target) * (omega ** 2 * dt);
 		const n2 = 1 + omega * dt;
 		return n1 / n2 ** 2;
 	};
 	/**
 	 * Clamps a value between min and max
 	 * @param {number} value - Value to clamp
 	 * @param {number} min - Minimum value
 	 * @param {number} max - Maximum value
 	 * @returns {number} Clamped value
 	 */
 	const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 	/**
 	 * Updates rotation values and applies transform styles in animation frame
 	 */
 	const updateRotation = () => {
 		const dt = calcDeltaTime();
 		const springConstant = 0.08;
 		state.velocity.x = spring(
 			state.rotation.x,
 			state.targetRotation.x,
 			state.velocity.x,
 			10,
 			dt
 		);
 		state.velocity.y = spring(
 			state.rotation.y,
 			state.targetRotation.y,
 			state.velocity.y,
 			10,
 			dt
 		);
 		state.rotation.x += state.velocity.x * dt * springConstant;
 		state.rotation.y += state.velocity.y * dt * springConstant;
 		const style = `perspective(700px) rotateX(${state.rotation.y}rad) rotateY(${state.rotation.x}rad)`;
 		Array.from(elements).forEach((el) => (el.style.transform = style));
 		requestAnimationFrame(updateRotation);
 	};
 	/**
 	 * Handles mouse/touch movement to update target rotation
 	 * @param {(MouseEvent|TouchEvent)} e - Mouse or touch event
 	 */
 	const handleMovement = (e) => {
 		const event = e.changedTouches?.[0] || e;
 		state.targetRotation.x = (event.clientX / window.innerWidth) * 2 - 1;
 		state.targetRotation.y = -(event.clientY / window.innerHeight) * 2 + 1;
 		state.targetRotation.x = clamp(state.targetRotation.x, -0.5, 0.5);
 		state.targetRotation.y = clamp(state.targetRotation.y, -0.5, 0.5);
 	};
 	addEventListeners(window, ["mousemove", "touchmove"], handleMovement, false);
 	updateRotation();
 };
 /**
 * Updates greeting text based on time of day.
 * Updates every minute.
 */
 export const updateGreeting = () => {
 	const hours = new Date().getHours();
 	const greetingEl = document.querySelector(".greeting");
 	if (!greetingEl) return;
 	/**
 	 * Gets appropriate greeting based on hour of day
 	 * @param {number} hours - Hour in 24-hour format
 	 * @returns {string} Greeting text
 	 */
 	const getGreeting = (hours) => {
 		if (hours < 6) return "Good night";
 		if (hours < 12) return "Good morning";
 		if (hours < 16) return "Good afternoon";
 		if (hours <= 23) return "Good evening";
 		return "Hello";
 	};
 	const greeting = getGreeting(hours);
 	greetingEl.textContent = greeting;
 	setTimeout(updateGreeting, 60_000); // 60 seconds
 };
 /**
 * Updates clock display with current time in HH:MM:SS format.
 * Updates every second.
 */
 export const updateTime = () => {
 	const clockEl = document.querySelector(".clock");
 	if (!clockEl) return;
 	const time = new Date();
 	const formatted_date = [time.getHours(), time.getMinutes(), time.getSeconds()]
 		.map((num) => num.toString().padStart(2, "0"))
 		.join(":");
 	clockEl.textContent = formatted_date;
 	setTimeout(updateTime, 1000);
 };
--- a/src/main.js
+++ b/src/main.js
@ -1,18 +1,17 @@
-// CSS Import
+import "./styles/base.css";
-import './css/style.css';
+import "./styles/typography.css";
-import './css/font.css';
+import "./styles/animations.css";
-import './css/animation.css';
+import "./styles/components.css";
 import './css/button.css';
-// JS Import
+import "./effects";
-import './app';
+import { add3DRotationEffect, updateGreeting, updateTime } from "./effects";
 import { importJsAsModule } from "./utils";
-import { perspective_3d } from './app';
+const initialize = async () => {
-import { import_js_as_module } from './utils';
+	await importJsAsModule("/fluid.js");
 	add3DRotationEffect("perspective");
 	updateGreeting();
 	updateTime();
 };
-window.onload = start;
+window.addEventListener("load", initialize);
 async function start() {
    await import_js_as_module('/fluid.js');
    perspective_3d('perspective');
 }
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@ -0,0 +1,9 @@
@keyframes fadein {
 	from {
 		opacity: 0;
 	}
 	to {
 		opacity: 1;
 	}
 }
--- a/src/styles/base.css
+++ b/src/styles/base.css
--- a/src/styles/components.css
+++ b/src/styles/components.css
--- a/src/styles/typography.css
+++ b/src/styles/typography.css
@ -0,0 +1,19 @@
@font-face {
 	font-family: "Inter Var";
 	font-weight: 400 900;
 	font-display: swap;
 	font-style: normal;
 	src: url("/src/assets/Inter.woff2") format("woff2");
 }
 html {
 	font-family: "Inter Var", sans-serif;
 	font-size: 17px;
 	box-sizing: border-box;
 }
 .greeting {
 	font-variation-settings: "wght" 400;
 	letter-spacing: 0rem;
 	line-height: 1.7rem;
 }
--- a/src/utils.js
+++ b/src/utils.js
@ -1,31 +1,57 @@
 /** Timestamp of the last update used for delta time calculation */
 export let last_update = Date.now();
-export function calc_delta_time() {
+/**
-    let now = Date.now();
+ * Calculates the time elapsed since the last update, capped at 60fps
-    let dt = (now - last_update) / 1e3;
+ * @returns {number} Delta time in seconds
-    dt = Math.min(dt, 0.016);
+ */
-    last_update = now;
+export function calcDeltaTime() {
-    return dt;
+	const now = Date.now();
 	const MAX_DELTA = 0.016; // 60fps cap
 	let dt = (now - last_update) / 1000;
 	dt = Math.min(dt, MAX_DELTA);
 	last_update = now;
 	return dt;
 }
-export function event_listener_array(whos, event_names, callback, options = null) {
+/**
-    if (!Array.isArray(whos)) {
+ * Adds event listeners to one or more elements for multiple event types
-        whos = [whos];
+ * @param {HTMLElement|HTMLElement[]} elements - Single element or array of elements
-    }
+ * @param {string[]} eventNames - Array of event names to listen for
-    for (const name of event_names) {
+ * @param {Function} callback - Event handler function
-        for (const who of whos) {
+ * @param {(boolean|AddEventListenerOptions|null)} [options=null] - Event listener options
-            who.addEventListener(name, callback, options);
+ */
-        }
+export function addEventListeners(
-    }
+	elements,
 	eventNames,
 	callback,
 	options = null
 ) {
 	// Convert single element to array if needed
 	const elementArray = Array.isArray(elements) ? elements : [elements];
 	// Add event listeners to each element for each event name
 	eventNames.forEach((eventName) => {
 		elementArray.forEach((element) => {
 			element.addEventListener(eventName, callback, options);
 		});
 	});
 }
-export async function import_js_as_module(url) {
+/**
-    return new Promise((resole, reject) => {
+ * Imports a JavaScript file as an ES module by injecting a script tag
-        const body = document.getElementsByTagName('body')[0];
+ * @param {string} url - URL of the JavaScript file to import
-        const script = document.createElement('script');
+ * @returns {Promise<void>} Resolves when the script has loaded
-        script.type = 'module';
+ */
-        script.src = url;
+export const importJsAsModule = async (url) => {
-        script.onload = resole;
+	return new Promise((resolve, reject) => {
-        body.appendChild(script);
+		const body = document.querySelector("body");
-    });
+		const script = document.createElement("script");
-}
+
 		script.type = "module";
 		script.src = url;
 		script.onload = resolve;
 		body.appendChild(script);
 	});
 };
Author	SHA1	Message	Date
xzeldon	57e731a7b9	perf: optimize multipleSplats perfomance Reduces buffer swaps from O(2N) to O(2), N = number of splats Minimizes expensive WebGL context state changes Processes all velocity updates first to keep similar operations contiguous then handles all dye updates for better texture cache utilization	2025-01-29 05:54:58 +03:00
xzeldon	dc3462a864	refactor: restructure	2025-01-29 04:55:18 +03:00
xzeldon	4a6aa94e39	refactor: add jsdoc, improve code redability	2025-01-28 19:50:28 +03:00