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 charset="utf-8">
-    <meta http-equiv="Cache-Control" content="no-cache">
+		<meta
+			name="viewport"
+			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">
-    <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">
+		<link rel="icon" href="favicon/favicon.ico" sizes="any" />
+		<link rel="icon" href="favicon/favicon.svg" type="image/svg+xml" />
+		<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png" />

-    <link rel="icon" href="favicon/favicon.ico" sizes="any">
-    <link rel="icon" href="favicon/favicon.svg" type="image/svg+xml">
-    <link rel="apple-touch-icon" href="favicon/apple-touch-icon.png">
+		<title>zeldØƞ</title>
+		<meta name="description" content="zeldon's website" />

-    <title>zeldØƞ</title>
-    <meta name="description" content="zeldon's website">
-
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="zeldØƞ">
-    <meta property="og:description" content="zeldon's website">
-    <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>
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content="zeldØƞ" />
+		<meta property="og:description" content="zeldon's website" />
+		<meta property="og:url" content="https://zeldon.ru" />
+		<meta property="og:image" content="ogimage.jpg" />
+	</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://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 './css/style.css';
-import './css/font.css';
-import './css/animation.css';
-import './css/button.css';
+import "./styles/base.css";
+import "./styles/typography.css";
+import "./styles/animations.css";
+import "./styles/components.css";

-// JS Import
-import './app';
+import "./effects";
+import { add3DRotationEffect, updateGreeting, updateTime } from "./effects";
+import { importJsAsModule } from "./utils";

-import { perspective_3d } from './app';
-import { import_js_as_module } from './utils';
+const initialize = async () => {
+	await importJsAsModule("/fluid.js");
+	add3DRotationEffect("perspective");
+	updateGreeting();
+	updateTime();
+};

-window.onload = start;
-
-async function start() {
-    await import_js_as_module('/fluid.js');
-    perspective_3d('perspective');
-}
+window.addEventListener("load", initialize);
--- 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();
-    let dt = (now - last_update) / 1e3;
-    dt = Math.min(dt, 0.016);
-    last_update = now;
-    return dt;
+/**
+ * Calculates the time elapsed since the last update, capped at 60fps
+ * @returns {number} Delta time in seconds
+ */
+export function calcDeltaTime() {
+	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)) {
-        whos = [whos];
-    }
-    for (const name of event_names) {
-        for (const who of whos) {
-            who.addEventListener(name, callback, options);
-        }
-    }
+/**
+ * Adds event listeners to one or more elements for multiple event types
+ * @param {HTMLElement|HTMLElement[]} elements - Single element or array of elements
+ * @param {string[]} eventNames - Array of event names to listen for
+ * @param {Function} callback - Event handler function
+ * @param {(boolean|AddEventListenerOptions|null)} [options=null] - Event listener 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) => {
-        const body = document.getElementsByTagName('body')[0];
-        const script = document.createElement('script');
-        script.type = 'module';
-        script.src = url;
-        script.onload = resole;
-        body.appendChild(script);
-    });
-}
+/**
+ * Imports a JavaScript file as an ES module by injecting a script tag
+ * @param {string} url - URL of the JavaScript file to import
+ * @returns {Promise<void>} Resolves when the script has loaded
+ */
+export const importJsAsModule = async (url) => {
+	return new Promise((resolve, reject) => {
+		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