From c631428699b3033db457a5cdec0da5054ef1e18e Mon Sep 17 00:00:00 2001 From: Arsen Mirzaev Tatyano-Muradovich Date: Thu, 8 Jan 2026 18:04:40 +0500 Subject: [PATCH] dots replaced with three.js shader --- .gitmodules | 3 + kodorvan/perm/system/public/js/pages/main.js | 165 ++++++++++++++++-- kodorvan/perm/system/public/js/three.core.js | 1 + .../perm/system/public/js/three.module.js | 1 + .../default/css/elements/introdution.css | 44 ++--- .../perm/system/views/themes/default/js.html | 8 + .../default/main/elements/introdution.html | 13 +- .../views/themes/default/main/index.html | 2 +- three.js | 1 + 9 files changed, 183 insertions(+), 55 deletions(-) create mode 120000 kodorvan/perm/system/public/js/three.core.js create mode 120000 kodorvan/perm/system/public/js/three.module.js create mode 160000 three.js diff --git a/.gitmodules b/.gitmodules index de14707..a7777c8 100755 --- a/.gitmodules +++ b/.gitmodules @@ -10,3 +10,6 @@ path = icons url = https://git.svoboda.works/mirzaev/icons branch = stable +[submodule "three.js"] + path = three.js + url = https://github.com/mrdoob/three.js.git diff --git a/kodorvan/perm/system/public/js/pages/main.js b/kodorvan/perm/system/public/js/pages/main.js index 262b4b4..911f88b 100755 --- a/kodorvan/perm/system/public/js/pages/main.js +++ b/kodorvan/perm/system/public/js/pages/main.js @@ -1,22 +1,145 @@ "use strict"; -import("../modules/hotline.mjs").then((module) => { - // Imported the hotline.mjs module +import * as THREE from 'three'; - // Initializing an instance of the hotline.mjs - const instance = new module.hotline(document.getElementById("wrap")); - // Initializing settings of the hotline instance - instance.alive = true; - instance.wheel = false; - instance.delta = 3; - instance.step = -0.5; +const fragmentShaderCode = ` + precision highp float; + uniform vec2 u_resolution; + uniform float u_time; + varying vec2 vUv; - // Starting the hotline instance - instance.start(); -}); + #define EPSILON 1e-6 + #define PI 3.14159265359 + #define ITERATIONS 18.0 -import("../modules/womb3-simplex.mjs").then((module) => { + mat2 rotate2d(float angle){ + return mat2(cos(angle), -sin(angle), + sin(angle), cos(angle)); + } + + void main() { + vec2 uv = (vUv * 2.0 - 1.0) * (u_resolution / max(u_resolution.x, u_resolution.y)); + vec2 u = uv * 0.25; + vec4 o = vec4(0.5, 1.0, 1.5, 0.0); + vec4 z = o; + vec2 v_internal = vec2(0.0); + float a = 0.6; + float t = u_time * 0.8; + + for (float i = 0.0; i < ITERATIONS; i++) + { + float u_dot = dot(u, u); + float denom_u = 0.6 - u_dot; + denom_u += sign(denom_u) * EPSILON; + + vec2 sin_arg = (1.4 * u / denom_u) - (7.0 * u.yx * cos(t*0.2)) + t * 1.1 + v_internal * 0.3; + vec2 length_arg = (1.0 + i * 0.1 + a * 0.2) * sin(sin_arg); + float len = length(length_arg); + float safe_len_divisor = max(len, EPSILON); + // float safe_len_divisor = 1.0; + + o += (1.0 + sin(z * 0.9 + t * 1.2 + i * 0.1)) / safe_len_divisor * (1.0 + i*0.02); + + v_internal = 0.9 * v_internal + 0.15 * sin(t * 1.5 + u * 4.0 - o.xy * 0.2); + v_internal = clamp(v_internal, -1.0, 1.0); + + a += 0.035; + float angle = i * 0.1 + t * 0.05 + a * 0.2; + mat2 rot_mat = rotate2d(angle); + u *= rot_mat; + + float o_dot = dot(o.xyz, o.xyz); + float feedback_scale = 0.5 + 0.5 * sin(o_dot * 0.02 + t * 0.3); + + u += sin(60.0 * dot(u,u) * cos(80.0 * u.yx + t * 1.2)) / 2.5e2 + + 0.15 * a * u * feedback_scale + + cos(o.xy * 0.5 + t * 1.1 + v_internal * 0.8) / 3.5e2; + + u += rotate2d(v_internal.x * 0.01) * vec2(0.0001, 0.0); + } + + vec3 base_color = 0.5 + 0.5 * cos(o.xyz * 0.8 + t * 0.15 + vec3(0.0, PI * 0.66, PI * 1.33)); + vec2 detail_coord = u * 5.0 + v_internal * 1.0; + float detail_pattern = smoothstep(0.3, 0.7, fract(detail_coord.x * cos(t*0.1) + detail_coord.y * sin(t*0.1))); + vec3 detail_color = vec3(detail_pattern * 0.8 + 0.2); + float mix_factor = clamp(length(o.xyz) * 0.1 - 0.1, 0.0, 1.0); + vec3 final_color = mix(base_color, detail_color * base_color, mix_factor); + final_color.rg += u.xy * 0.05; + // float dist_from_center = length(vUv - 0.5); + float dist_from_center = 0.0; + final_color *= pow(1.0 - dist_from_center * 1.2, 2.0); + gl_FragColor = vec4(clamp(final_color, 0.0, 1.0), 1.0); + } +`; + +const vertexShaderCode = ` + varying vec2 vUv; + void main() { + vUv = uv; + gl_Position = vec4( position, 1.0 ); + } +`; + +let scene, camera, renderer, mesh, material, clock; +let container; + +const uniforms = { + u_time: { value: 0.0 }, + u_resolution: { value: new THREE.Vector2() }, +}; + +function init() { + container = document.getElementById("ebashilovo"); + clock = new THREE.Clock(); + + renderer = new THREE.WebGLRenderer(); + renderer.setSize(container.offsetWidth, container.offsetHeight); + renderer.setPixelRatio(window.devicePixelRatio); + container.appendChild(renderer.domElement); + + scene = new THREE.Scene(); + + camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); + + const geometry = new THREE.PlaneGeometry(2, 2); + + material = new THREE.ShaderMaterial({ + uniforms: uniforms, + vertexShader: vertexShaderCode, + fragmentShader: fragmentShaderCode, + }); + + mesh = new THREE.Mesh(geometry, material); + scene.add(mesh); + + uniforms.u_resolution.value.x = container.offsetWidth; + uniforms.u_resolution.value.y = container.offsetHeight; + + window.addEventListener("resize", onWindowResize); + + renderer.setAnimationLoop(animate); +} + +function onWindowResize() { + renderer.setSize(container.offsetWidth, container.offsetHeight); + uniforms.u_resolution.value.x = container.offsetWidth; + uniforms.u_resolution.value.y = container.offsetHeight; + material.uniforms.u_resolution.value.set( + container.offsetWidth, + container.offsetHeight + ); +} + +function animate() { + uniforms.u_time.value = clock.getElapsedTime(); + renderer.render(scene, camera); +} + +init(); + + +/* import("../modules/womb3-simplex.mjs").then((module) => { // Initializing the instance const womb = new module.womb(document.getElementById("introdution_animation")); womb.block = { @@ -46,4 +169,20 @@ import("../modules/womb3-simplex.mjs").then((module) => { }, true ); +}); */ + +import("../modules/hotline.mjs").then((module) => { + // Imported the hotline.mjs module + + // Initializing an instance of the hotline.mjs + const instance = new module.hotline(document.getElementById("wrap")); + + // Initializing settings of the hotline instance + instance.alive = true; + instance.wheel = false; + instance.delta = 3; + instance.step = -0.5; + + // Starting the hotline instance + instance.start(); }); diff --git a/kodorvan/perm/system/public/js/three.core.js b/kodorvan/perm/system/public/js/three.core.js new file mode 120000 index 0000000..544bf9a --- /dev/null +++ b/kodorvan/perm/system/public/js/three.core.js @@ -0,0 +1 @@ +../../../../../three.js/build/three.core.js \ No newline at end of file diff --git a/kodorvan/perm/system/public/js/three.module.js b/kodorvan/perm/system/public/js/three.module.js new file mode 120000 index 0000000..45304b5 --- /dev/null +++ b/kodorvan/perm/system/public/js/three.module.js @@ -0,0 +1 @@ +../../../../../three.js/build/three.module.js \ No newline at end of file diff --git a/kodorvan/perm/system/public/themes/default/css/elements/introdution.css b/kodorvan/perm/system/public/themes/default/css/elements/introdution.css index 0956d5d..84dc654 100755 --- a/kodorvan/perm/system/public/themes/default/css/elements/introdution.css +++ b/kodorvan/perm/system/public/themes/default/css/elements/introdution.css @@ -108,37 +108,17 @@ section#introdution { >div.background { z-index: 100; - top: -5%; - left: -5%; position: absolute; - width: 110%; - height: 110%; + top: 0%; + left: 0%; + width: 100%; + height: 100%; + filter: brightness(0.4); animation-name: appearance; animation-fill-mode: forwards; animation-duration: 0.2s; animation-delay: 1s; animation-timing-function: ease-in; - filter: blur(1.8px) contrast(50); - - >div.dots { - --dot-bg: black; - --dot-color: #00ff00; - --dot-size: 4px; - --dot-space: 7px; - z-index: -50; - position: absolute; - width: 100%; - height: 100%; - background: - linear-gradient(90deg, - var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), - transparent 1%) center / var(--dot-space) var(--dot-space), - linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), - transparent 1%) center / var(--dot-space) var(--dot-space), - var(--dot-color); - mix-blend-mode: color-burn; - filter: contrast(5); - } >video:only-of-type { z-index: -100; @@ -151,12 +131,18 @@ section#introdution { filter: blur(5px); } - >canvas#introdution_animation { - z-index: -100; + >div#ebashilovo { + z-index: 1000; position: absolute; width: 100%; - scale: 1.2; - filter: url(#blob) contrast(var(--contrast, 30)); + height: 100%; + + >canvas { + width: 200%; + height: 100%; + display: block; + } + } } } diff --git a/kodorvan/perm/system/views/themes/default/js.html b/kodorvan/perm/system/views/themes/default/js.html index 0dfd14f..5b67187 100755 --- a/kodorvan/perm/system/views/themes/default/js.html +++ b/kodorvan/perm/system/views/themes/default/js.html @@ -1,4 +1,12 @@ {% block js %} + + {% for element in js %} - + {% endblock %} diff --git a/three.js b/three.js new file mode 160000 index 0000000..3ef3070 --- /dev/null +++ b/three.js @@ -0,0 +1 @@ +Subproject commit 3ef307076213aa05265d522dbc05c56e2a870a41