kodorvan/perm
1
0
Fork 0
generated from mirzaev/pot-php
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dots replaced with three.js shader

Browse Source
This commit is contained in:
MIRZAEV
2026-01-08 18:04:40 +05:00
parent d26b0ca9ea
commit c631428699
9 changed files with 183 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitmodules vendored
View File

@@ -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

165
kodorvan/perm/system/public/js/pages/main.js
View File

@@ -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();
});

1
kodorvan/perm/system/public/js/three.core.js Symbolic link
View File

@@ -0,0 +1 @@
../../../../../three.js/build/three.core.js

1
kodorvan/perm/system/public/js/three.module.js Symbolic link
View File

@@ -0,0 +1 @@
../../../../../three.js/build/three.module.js

44
kodorvan/perm/system/public/themes/default/css/elements/introdution.css
View File

@@ -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;
}
}
}
}

8
kodorvan/perm/system/views/themes/default/js.html
View File

@@ -1,4 +1,12 @@
{% block js %}
<script type="importmap">
{
"imports": {
"three": "/js/three.module.js"
}
}
</script>
{% for element in js %}
<script
{% if element.src %}src="{{ element.src }}" {% endif %}

13
kodorvan/perm/system/views/themes/default/main/elements/introdution.html
View File

@@ -11,17 +11,6 @@
</div>
<div class="background" style="opacity: 0">
<div class="dots"></div>
<canvas id="introdution_animation"></canvas>
<svg style="position: absolute">
<defs>
<filter id="blob">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="blob"></feColorMatrix>
</filter>
</defs>
</svg>
<div id="ebashilovo"></div>
</div>
</section>

2
kodorvan/perm/system/views/themes/default/main/index.html
View File

@@ -54,7 +54,7 @@
<script src="/js/modules/hotline.mjs" type="module"></script>
<script src="/js/modules/womb3-simplex.mjs" type="module"></script>
<script src="/js/pages/main.js" defer></script>
<script src="/js/pages/main.js" type="module" defer></script>
<script src="/js/modules/service.js" defer></script>
<script src="/js/modules/advantages.js" defer></script>
{% endblock %}

1
three.js Submodule

Submodule three.js added at 3ef3070762