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