Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on Dec 13, 2025

Commit

9cef53f

verified ·

1 Parent(s): 5119566

Update index.html

Browse files

Files changed (1) hide show

index.html +1227 -382

index.html CHANGED Viewed

@@ -1,401 +1,1246 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
-<meta charset="UTF-8" />
-<title>Воксельная 4K-сцена</title>
-<style>
-    html, body {
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-        background: #000;
-        height: 100%;
-        font-family: sans-serif;
-    }
-    #info {
-        position: absolute;
-        top: 10px; left: 10px;
-        color: #fff;
-        background: rgba(0,0,0,0.4);
-        padding: 8px 12px;
-        border-radius: 4px;
-        font-size: 12px;
-        z-index: 10;
-    }
-    #info b {
-        color: #ffd66b;
-    }
-</style>
 </head>
 <body>
-<div id="info">
-    Воксельная 3D-сцена (приблизительный стиль Minecraft в 4K)<br>
-    <b>Управление:</b> ЛКМ — вращение, ПКМ/колёсико — панорамирование, колесо — масштаб.<br>
-    Разрешение можно сменить в коде: <b>targetWidth / targetHeight</b>.
-</div>
-<!-- Three.js с CDN -->
-<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/examples/js/controls/OrbitControls.js"></script>
-<script>
-/* === БАЗОВАЯ СЦЕНА === */
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x87ceeb); // небо
-// Камера (ориентир под 4K, позже подгоним размер канваса)
-const targetWidth  = 3840;   // 4K ширина
-const targetHeight = 2160;   // 4K высота
-const aspect = targetWidth / targetHeight;
-const camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 2000);
-camera.position.set(60, 50, 80);
-camera.lookAt(0, 0, 0);
-// Рендерер
-const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.setSize(targetWidth, targetHeight, false);
-renderer.setPixelRatio(window.devicePixelRatio > 2 ? 2 : window.devicePixelRatio);
-renderer.outputEncoding = THREE.sRGBEncoding;
-document.body.appendChild(renderer.domElement);
-// Подгонять канвас под окно, сохраняя соотношение
-function onWindowResize() {
-    const w = window.innerWidth;
-    const h = window.innerHeight;
-    const windowAspect = w / h;
-    if (windowAspect > aspect) {
-        // окно шире — вписываем по высоте
-        const newWidth = h * aspect;
-        renderer.setSize(newWidth, h, false);
-        renderer.domElement.style.width = newWidth + "px";
-        renderer.domElement.style.height = h + "px";
-    } else {
-        // окно уже — вписываем по ширине
-        const newHeight = w / aspect;
-        renderer.setSize(w, newHeight, false);
-        renderer.domElement.style.width = w + "px";
-        renderer.domElement.style.height = newHeight + "px";
-    }
-    camera.aspect = aspect;
-    camera.updateProjectionMatrix();
-}
-window.addEventListener('resize', onWindowResize);
-onWindowResize();
-// Управление камерой
-const controls = new THREE.OrbitControls(camera, renderer.domElement);
-controls.enableDamping = true;
-controls.dampingFactor = 0.08;
-controls.target.set(32, 10, 32);
-/* === ОСВЕЩЕНИЕ === */
-const hemiLight = new THREE.HemisphereLight(0xffffff, 0x404040, 0.7);
-scene.add(hemiLight);
-const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
-dirLight.position.set(100, 120, 80);
-dirLight.castShadow = true;
-dirLight.shadow.mapSize.set(2048, 2048);
-dirLight.shadow.camera.near = 1;
-dirLight.shadow.camera.far = 400;
-dirLight.shadow.camera.left   = -150;
-dirLight.shadow.camera.right  =  150;
-dirLight.shadow.camera.top    =  150;
-dirLight.shadow.camera.bottom = -150;
-scene.add(dirLight);
-/* === МАТЕРИАЛЫ ВОКСЕЛЕЙ === */
-const textureLoader = new THREE.TextureLoader();
-function makeRepeatingTexture(colorHex, repeat) {
-    // генерация простой белой текстуры и окрашивание через color — дешевле
-    const mat = new THREE.MeshStandardMaterial({
-        color: colorHex,
-        roughness: 1.0,
-        metalness: 0.0
-    });
-    return mat;
-}
-// Примитивный "minecraft-подобный" набор
-const matGrassTop   = new THREE.MeshStandardMaterial({ color: 0x76c445, roughness: 0.9 });
-const matDirt       = new THREE.MeshStandardMaterial({ color: 0x8b5a2b, roughness: 1.0 });
-const matStone      = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 1.0 });
-const matWater      = new THREE.MeshStandardMaterial({ color: 0x2f66cc, roughness: 0.3, metalness: 0.1, transparent: true, opacity: 0.7 });
-const matWood       = new THREE.MeshStandardMaterial({ color: 0x8b6b3f, roughness: 1.0 });
-const matLeaves     = new THREE.MeshStandardMaterial({ color: 0x2f8a34, roughness: 0.9 });
-const matCloud      = new THREE.MeshStandardMaterial({ color: 0xf9f9ff, roughness: 0.9, transparent: true, opacity: 0.9 });
-const matSmoke      = new THREE.MeshStandardMaterial({ color: 0x555555, roughness: 0.9, transparent: true, opacity: 0.6 });
-const matSand       = new THREE.MeshStandardMaterial({ color: 0xdacb8a, roughness: 0.9 });
-/* === ВОКСЕЛЬНЫЙ ГЕОМ === */
-const boxGeo = new THREE.BoxGeometry(1, 1, 1);
-// Функция создания блока
-function addBlock(x, y, z, material, parent) {
-    const m = new THREE.Mesh(boxGeo, material);
-    m.position.set(x + 0.5, y + 0.5, z + 0.5);
-    m.castShadow = true;
-    m.receiveShadow = true;
-    parent.add(m);
-}
-/* === ГЕНЕРАЦИЯ ТЕРРАИНА === */
-// Простая "шумоподобная" функция
-function pseudoNoise(x, z) {
-    // детерминированный псевдо-шум (не настоящий перлин, но сгодится)
-    const s = Math.sin(x * 12.9898 + z * 78.233) * 43758.5453;
-    return (s - Math.floor(s));
-}
-// Размер мира
-const worldSizeX = 64;
-const worldSizeZ = 64;
-const worldGroup = new THREE.Group();
-scene.add(worldGroup);
-// Поверхность: трава/земля, с "горами", камнем и небольшим озером
-for (let x = 0; x < worldSizeX; x++) {
-    for (let z = 0; z < worldSizeZ; z++) {
-        const n = pseudoNoise(x * 0.15, z * 0.15);
-        let height = Math.floor(6 + n * 12); // от 6 до ~18
-        // Лёгкое сглаживание по второму шуму
-        const n2 = pseudoNoise(x * 0.05 + 50, z * 0.05 - 20);
-        height += Math.floor(n2 * 4 - 2);
-        if (height < 3) height = 3;
-        // Вода - низкая точка
-        const waterLevel = 7;
-        for (let y = 0; y <= height; y++) {
-            let mat;
-            if (y === height) {
-                // Верхний слой: трава/песок у воды/каменные вершины
-                if (height > 15) {
-                    mat = matStone;
-                } else if (y < waterLevel + 1 && Math.random() < 0.6) {
-                    mat = matSand;
                 } else {
-                    mat = matGrassTop;
                 }
             } else {
-                // Под землёй
-                if (y < height - 3) {
-                    mat = matStone;
-                } else {
-                    mat = matDirt;
                 }
             }
-            addBlock(x, y, z, mat, worldGroup);
         }
-        // Вода заполняет низины
-        if (height < waterLevel) {
-            for (let y = height + 1; y <= waterLevel; y++) {
-                addBlock(x, y, z, matWater, worldGroup);
             }
         }
-    }
-}
-/* === ДЕРЕВЬЯ === */
-function addTree(baseX, baseZ, baseY) {
-    const trunkHeight = 4 + Math.floor(Math.random() * 2);
-    // ствол
-    for (let y = 0; y < trunkHeight; y++) {
-        addBlock(baseX, baseY + y, baseZ, matWood, worldGroup);
-    }
-    const topY = baseY + trunkHeight;
-    // крона (простая сфера из кубиков)
-    const radius = 2 + Math.floor(Math.random() * 1.5);
-    for (let x = -radius; x <= radius; x++) {
-        for (let y = -radius; y <= radius; y++) {
-            for (let z = -radius; z <= radius; z++) {
-                if (x*x + y*y + z*z <= radius * radius + 1) {
-                    if (!(x === 0 && y <= 0 && z === 0)) {
-                        addBlock(baseX + x, topY + y, baseZ + z, matLeaves, worldGroup);
-                    }
                 }
             }
         }
-    }
-}
-// Расставим деревья по миру (на траве и не в воде)
-for (let i = 0; i < 45; i++) {
-    const x = Math.floor(Math.random() * worldSizeX);
-    const z = Math.floor(Math.random() * worldSizeZ);
-    // Найдём наибольшую высоту в этой колонке
-    let topY = -1;
-    worldGroup.children.forEach(c => {
-        const px = Math.floor(c.position.x);
-        const pz = Math.floor(c.position.z);
-        if (px === x && pz === z) {
-            const py = Math.floor(c.position.y);
-            if (py > topY) topY = py;
-        }
-    });
-    if (topY < 2) continue;
-    // Проверка: верхний блок — трава
-    let topMat = null;
-    worldGroup.children.forEach(c => {
-        const px = Math.floor(c.position.x);
-        const py = Math.floor(c.position.y);
-        const pz = Math.floor(c.position.z);
-        if (px === x && pz === z && py === topY) topMat = c.material;
-    });
-    if (topMat === matGrassTop && Math.random() < 0.5) {
-        addTree(x, z, topY + 1);
-    }
-}
-/* === ОБЛАКА === */
-const cloudsGroup = new THREE.Group();
-scene.add(cloudsGroup);
-function makeCloud(cx, cy, cz, size = 6) {
-    const cloudCluster = new THREE.Group();
-    const blocks = 12 + Math.floor(Math.random() * 10);
-    for (let i = 0; i < blocks; i++) {
-        const ox = (Math.random() - 0.5) * size;
-        const oy = (Math.random() - 0.5) * (size * 0.4);
-        const oz = (Math.random() - 0.5) * size;
-        const cube = new THREE.Mesh(boxGeo, matCloud.clone());
-        cube.scale.setScalar(1.6 + Math.random() * 0.7);
-        cube.position.set(cx + ox, cy + oy, cz + oz);
-        cube.castShadow = false;
-        cube.receiveShadow = false;
-        cloudCluster.add(cube);
-    }
-    cloudsGroup.add(cloudCluster);
-}
-// Несколько кучек облаков
-for (let i = 0; i < 12; i++) {
-    const cx = (Math.random() - 0.5) * 200;
-    const cz = (Math.random() - 0.5) * 200;
-    const cy = 60 + Math.random() * 20;
-    makeCloud(cx, cy, cz, 12 + Math.random() * 6);
-}
-/* === ДЫМ ИЗ ТРУБЫ / КОСТРА === */
-const smokeGroup = new THREE.Group();
-scene.add(smokeGroup);
-// "Костёр" в центре
-const fireX = worldSizeX / 2;
-const fireZ = worldSizeZ / 2;
-// найдём высоту в центре
-let centerHeight = 0;
-worldGroup.children.forEach(c => {
-    const px = Math.floor(c.position.x);
-    const pz = Math.floor(c.position.z);
-    const py = Math.floor(c.position.y);
-    if (px === fireX && pz === fireZ && py > centerHeight) {
-        centerHeight = py;
-    }
-});
-// подложим "брёвна"
-for (let ix = -1; ix <= 1; ix++) {
-    for (let iz = -1; iz <= 1; iz++) {
-        if (Math.abs(ix) !== Math.abs(iz)) {
-            addBlock(fireX + ix, centerHeight + 1, fireZ + iz, matWood, worldGroup);
-        }
-    }
-}
-// параметры дыма
-const smokeParticles = [];
-const maxSmoke = 120;
-function spawnSmokeParticle() {
-    if (smokeParticles.length >= maxSmoke) return;
-    const s = new THREE.Mesh(boxGeo, matSmoke.clone());
-    s.scale.set(0.8, 0.8, 0.8);
-    s.position.set(
-        fireX + 0.5 + (Math.random() - 0.5) * 0.4,
-        centerHeight + 2 + Math.random() * 0.4,
-        fireZ + 0.5 + (Math.random() - 0.5) * 0.4
-    );
-    s.material.opacity = 0.0;
-    s.userData = {
-        life: 0,
-        maxLife: 5 + Math.random() * 4,
-        riseSpeed: 1.2 + Math.random() * 0.8,
-        driftX: (Math.random() - 0.5) * 0.25,
-        driftZ: (Math.random() - 0.5) * 0.25
-    };
-    smokeGroup.add(s);
-    smokeParticles.push(s);
-}
-/* === АНИМАЦИЯ === */
-let lastTime = performance.now();
-function animate() {
-    requestAnimationFrame(animate);
-    const now = performance.now();
-    const dt = (now - lastTime) / 1000;
-    lastTime = now;
-    controls.update();
-    // Движение облаков
-    cloudsGroup.children.forEach(cluster => {
-        cluster.position.x += 0.2 * dt * 20; // плавный сдвиг
-        if (cluster.position.x > 150) cluster.position.x = -150;
-    });
-    // Периодический "выброс" дыма
-    if (Math.random() < 0.2) {
-        spawnSmokeParticle();
-    }
-    // Обновление частиц дыма
-    for (let i = smokeParticles.length - 1; i >= 0; i--) {
-        const p = smokeParticles[i];
-        const data = p.userData;
-        data.life += dt;
-        const t = data.life / data.maxLife;
-        p.position.y += data.riseSpeed * dt;
-        p.position.x += data.driftX * dt;
-        p.position.z += data.driftZ * dt;
-        // рост и рассеивание
-        const scale = 0.8 + t * 3;
-        p.scale.set(scale, scale, scale);
-        // появление и исчезновение
-        if (t < 0.2) {
-            p.material.opacity = t * 3;
-        } else if (t > 0.7) {
-            p.material.opacity = Math.max(0, 1 - (t - 0.7) / 0.3);
-        }
-        if (data.life >= data.maxLife || p.material.opacity <= 0) {
-            smokeGroup.remove(p);
-            smokeParticles.splice(i, 1);
-        }
-    }
-    renderer.render(scene, camera);
-}
-animate();
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ru">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Симуляция воды</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            overflow: hidden;
+            background: #000;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            touch-action: none;
+        }
+        #canvas {
+            display: block;
+            width: 100vw;
+            height: 100vh;
+        }
+        #controls {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            background: rgba(0, 0, 0, 0.85);
+            padding: 15px;
+            border-radius: 12px;
+            color: #fff;
+            max-width: 320px;
+            max-height: 90vh;
+            overflow-y: auto;
+            z-index: 100;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: transform 0.3s ease;
+        }
+        #controls.hidden {
+            transform: translateX(-110%);
+        }
+        #toggleBtn {
+            position: fixed;
+            top: 10px;
+            left: 10px;
+            width: 44px;
+            height: 44px;
+            background: rgba(0, 0, 0, 0.85);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            color: #fff;
+            font-size: 24px;
+            cursor: pointer;
+            z-index: 99;
+            display: none;
+            backdrop-filter: blur(10px);
+        }
+        #controls.hidden + #toggleBtn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .section {
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .section:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        h3 {
+            font-size: 14px;
+            margin-bottom: 10px;
+            color: #4fc3f7;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .control-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+            gap: 10px;
+        }
+        label {
+            flex: 1;
+            font-size: 12px;
+            color: #aaa;
+        }
+        input[type="range"] {
+            flex: 1.5;
+            height: 6px;
+            border-radius: 3px;
+            background: #333;
+            outline: none;
+            -webkit-appearance: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 18px;
+            height: 18px;
+            background: #4fc3f7;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        input[type="color"] {
+            width: 40px;
+            height: 30px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .value {
+            min-width: 45px;
+            text-align: right;
+            font-size: 11px;
+            color: #4fc3f7;
+            font-family: monospace;
+        }
+        button {
+            width: 100%;
+            padding: 10px;
+            margin-top: 5px;
+            background: linear-gradient(135deg, #4fc3f7, #0288d1);
+            border: none;
+            border-radius: 8px;
+            color: #fff;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        button:hover {
+            transform: scale(1.02);
+            box-shadow: 0 4px 15px rgba(79, 195, 247, 0.4);
+        }
+        button:active {
+            transform: scale(0.98);
+        }
+        .close-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: none;
+            border: none;
+            color: #888;
+            font-size: 20px;
+            cursor: pointer;
+            width: auto;
+            padding: 5px;
+            margin: 0;
+        }
+        .preset-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+            margin-top: 10px;
+        }
+        .preset-grid button {
+            padding: 8px;
+            font-size: 11px;
+        }
+        #fps {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 8px 12px;
+            border-radius: 8px;
+            color: #4fc3f7;
+            font-size: 12px;
+            font-family: monospace;
+            z-index: 100;
+        }
+        @media (max-width: 768px) {
+            #controls {
+                max-width: 280px;
+                padding: 12px;
+                font-size: 11px;
+            }
+            h3 {
+                font-size: 13px;
+            }
+            input[type="range"] {
+                flex: 1;
+            }
+            .value {
+                min-width: 35px;
+                font-size: 10px;
+            }
+        }
+        @media (max-width: 400px) {
+            #controls {
+                max-width: calc(100vw - 20px);
+                left: 5px;
+                right: 5px;
+            }
+        }
+        .checkbox-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 8px;
+        }
+        .checkbox-row input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #4fc3f7;
+        }
+        .checkbox-row label {
+            flex: none;
+        }
+    </style>
 </head>
 <body>
+    <canvas id="canvas"></canvas>
+    <div id="controls">
+        <button class="close-btn" onclick="toggleControls()">×</button>
+        <div class="section">
+            <h3>🌊 Физика волн</h3>
+            <div class="control-row">
+                <label>Скорость волн</label>
+                <input type="range" id="waveSpeed" min="0.1" max="3" step="0.1" value="1">
+                <span class="value" id="waveSpeedVal">1.0</span>
+            </div>
+            <div class="control-row">
+                <label>Затухание</label>
+                <input type="range" id="damping" min="0.9" max="0.999" step="0.001" value="0.995">
+                <span class="value" id="dampingVal">0.995</span>
+            </div>
+            <div class="control-row">
+                <label>Размер капли</label>
+                <input type="range" id="dropRadius" min="1" max="50" step="1" value="15">
+                <span class="value" id="dropRadiusVal">15</span>
+            </div>
+            <div class="control-row">
+                <label>Сила капли</label>
+                <input type="range" id="dropStrength" min="0.1" max="2" step="0.1" value="0.5">
+                <span class="value" id="dropStrengthVal">0.5</span>
+            </div>
+            <div class="control-row">
+                <label>Поверхн. натяж.</label>
+                <input type="range" id="tension" min="0" max="0.5" step="0.01" value="0.1">
+                <span class="value" id="tensionVal">0.10</span>
+            </div>
+        </div>
+        <div class="section">
+            <h3>🎨 Визуализация</h3>
+            <div class="control-row">
+                <label>Глубина воды</label>
+                <input type="range" id="waterDepth" min="0.1" max="2" step="0.1" value="0.8">
+                <span class="value" id="waterDepthVal">0.8</span>
+            </div>
+            <div class="control-row">
+                <label>Преломление</label>
+                <input type="range" id="refraction" min="0" max="1" step="0.05" value="0.3">
+                <span class="value" id="refractionVal">0.30</span>
+            </div>
+            <div class="control-row">
+                <label>Отражение</label>
+                <input type="range" id="reflection" min="0" max="1" step="0.05" value="0.4">
+                <span class="value" id="reflectionVal">0.40</span>
+            </div>
+            <div class="control-row">
+                <label>Каустика</label>
+                <input type="range" id="caustics" min="0" max="2" step="0.1" value="1">
+                <span class="value" id="causticsVal">1.0</span>
+            </div>
+            <div class="control-row">
+                <label>Яркость</label>
+                <input type="range" id="brightness" min="0.5" max="2" step="0.1" value="1">
+                <span class="value" id="brightnessVal">1.0</span>
+            </div>
+            <div class="control-row">
+                <label>Спекуляр</label>
+                <input type="range" id="specular" min="0" max="3" step="0.1" value="1.5">
+                <span class="value" id="specularVal">1.5</span>
+            </div>
+        </div>
+        <div class="section">
+            <h3>🎭 Цвета</h3>
+            <div class="control-row">
+                <label>Цвет воды</label>
+                <input type="color" id="waterColor" value="#0066aa">
+            </div>
+            <div class="control-row">
+                <label>Цвет глубины</label>
+                <input type="color" id="deepColor" value="#001133">
+            </div>
+            <div class="control-row">
+                <label>Цвет неба</label>
+                <input type="color" id="skyColor" value="#87ceeb">
+            </div>
+            <div class="control-row">
+                <label>Цвет пены</label>
+                <input type="color" id="foamColor" value="#ffffff">
+            </div>
+        </div>
+        <div class="section">
+            <h3>🌤️ Освещение</h3>
+            <div class="control-row">
+                <label>Направление X</label>
+                <input type="range" id="lightX" min="-1" max="1" step="0.1" value="0.5">
+                <span class="value" id="lightXVal">0.5</span>
+            </div>
+            <div class="control-row">
+                <label>Направление Y</label>
+                <input type="range" id="lightY" min="0.1" max="1" step="0.1" value="0.8">
+                <span class="value" id="lightYVal">0.8</span>
+            </div>
+            <div class="control-row">
+                <label>Направление Z</label>
+                <input type="range" id="lightZ" min="-1" max="1" step="0.1" value="0.3">
+                <span class="value" id="lightZVal">0.3</span>
+            </div>
+        </div>
+        <div class="section">
+            <h3>🌀 Автоволны</h3>
+            <div class="checkbox-row">
+                <input type="checkbox" id="autoWaves" checked>
+                <label>Включить дождь</label>
+            </div>
+            <div class="control-row">
+                <label>Частота</label>
+                <input type="range" id="rainFreq" min="0.01" max="0.3" step="0.01" value="0.05">
+                <span class="value" id="rainFreqVal">0.05</span>
+            </div>
+            <div class="checkbox-row">
+                <input type="checkbox" id="windWaves">
+                <label>Ветровые волны</label>
+            </div>
+            <div class="control-row">
+                <label>Сила ветра</label>
+                <input type="range" id="windStrength" min="0" max="0.01" step="0.001" value="0.003">
+                <span class="value" id="windStrengthVal">0.003</span>
+            </div>
+        </div>
+        <div class="section">
+            <h3>⚙️ Качество</h3>
+            <div class="control-row">
+                <label>Разрешение сим.</label>
+                <input type="range" id="simResolution" min="128" max="1024" step="64" value="512">
+                <span class="value" id="simResolutionVal">512</span>
+            </div>
+            <div class="checkbox-row">
+                <input type="checkbox" id="highQuality" checked>
+                <label>Высокое качество</label>
+            </div>
+        </div>
+        <div class="section">
+            <h3>🎮 Пресеты</h3>
+            <div class="preset-grid">
+                <button onclick="applyPreset('calm')">🌅 Спокойно</button>
+                <button onclick="applyPreset('storm')">⛈️ Шторм</button>
+                <button onclick="applyPreset('pool')">🏊 Бассейн</button>
+                <button onclick="applyPreset('ocean')">🌊 Океан</button>
+                <button onclick="applyPreset('toxic')">☢️ Токсично</button>
+                <button onclick="applyPreset('lava')">🌋 Лава</button>
+            </div>
+            <button onclick="resetWater()" style="margin-top:10px">🔄 Сбросить воду</button>
+        </div>
+    </div>
+    <button id="toggleBtn" onclick="toggleControls()">☰</button>
+    <div id="fps">FPS: 60</div>
+    <script>
+        // WebGL контекст и переменные
+        const canvas = document.getElementById('canvas');
+        let gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
+        if (!gl) {
+            alert('WebGL не поддерживается');
+            throw new Error('WebGL not supported');
+        }
+        const isWebGL2 = gl instanceof WebGL2RenderingContext;
+        // Параметры симуляции
+        let params = {
+            waveSpeed: 1.0,
+            damping: 0.995,
+            dropRadius: 15,
+            dropStrength: 0.5,
+            tension: 0.1,
+            waterDepth: 0.8,
+            refraction: 0.3,
+            reflection: 0.4,
+            caustics: 1.0,
+            brightness: 1.0,
+            specular: 1.5,
+            waterColor: [0, 0.4, 0.67],
+            deepColor: [0, 0.07, 0.2],
+            skyColor: [0.53, 0.81, 0.92],
+            foamColor: [1, 1, 1],
+            lightX: 0.5,
+            lightY: 0.8,
+            lightZ: 0.3,
+            autoWaves: true,
+            rainFreq: 0.05,
+            windWaves: false,
+            windStrength: 0.003,
+            simResolution: 512,
+            highQuality: true
+        };
+        let simWidth = params.simResolution;
+        let simHeight = params.simResolution;
+        // Framebuffers для ping-pong симуляции
+        let framebuffers = [];
+        let textures = [];
+        let currentFB = 0;
+        // Шейдеры
+        const quadVS = `
+            attribute vec2 position;
+            varying vec2 vUv;
+            void main() {
+                vUv = position * 0.5 + 0.5;
+                gl_Position = vec4(position, 0.0, 1.0);
+            }
+        `;
+        // Шейдер симуляции волн (высокоточная модель)
+        const waveSimFS = `
+            precision highp float;
+            varying vec2 vUv;
+            uniform sampler2D uPrevState;
+            uniform sampler2D uCurrState;
+            uniform vec2 uResolution;
+            uniform float uDamping;
+            uniform float uSpeed;
+            uniform float uTension;
+            uniform float uDt;
+            void main() {
+                vec2 texel = 1.0 / uResolution;
+                // Текущие значения
+                vec4 curr = texture2D(uCurrState, vUv);
+                vec4 prev = texture2D(uPrevState, vUv);
+                // Соседние ячейки (9-точечный stencil для высокой точности)
+                float h = curr.r;
+                float hL = texture2D(uCurrState, vUv + vec2(-texel.x, 0.0)).r;
+                float hR = texture2D(uCurrState, vUv + vec2(texel.x, 0.0)).r;
+                float hT = texture2D(uCurrState, vUv + vec2(0.0, texel.y)).r;
+                float hB = texture2D(uCurrState, vUv + vec2(0.0, -texel.y)).r;
+                // Диагональные соседи для улучшенной точности
+                float hTL = texture2D(uCurrState, vUv + vec2(-texel.x, texel.y)).r;
+                float hTR = texture2D(uCurrState, vUv + vec2(texel.x, texel.y)).r;
+                float hBL = texture2D(uCurrState, vUv + vec2(-texel.x, -texel.y)).r;
+                float hBR = texture2D(uCurrState, vUv + vec2(texel.x, -texel.y)).r;
+                // 9-точечный Лапласиан для большей точности
+                float laplacian = (hL + hR + hT + hB) * 0.2 +
+                                  (hTL + hTR + hBL + hBR) * 0.05 - h;
+                // Поверхностное натяжение (билапласиан)
+                float tension = 0.0;
+                if (uTension > 0.0) {
+                    float laplacian2 = (
+                        texture2D(uCurrState, vUv + vec2(-2.0*texel.x, 0.0)).r +
+                        texture2D(uCurrState, vUv + vec2(2.0*texel.x, 0.0)).r +
+                        texture2D(uCurrState, vUv + vec2(0.0, 2.0*texel.y)).r +
+                        texture2D(uCurrState, vUv + vec2(0.0, -2.0*texel.y)).r -
+                        4.0 * h
+                    ) * 0.25 - laplacian;
+                    tension = -uTension * laplacian2;
+                }
+                // Волновое уравнение с затуханием
+                float c2 = uSpeed * uSpeed;
+                float newH = 2.0 * h - prev.r + c2 * (laplacian + tension);
+                newH *= uDamping;
+                // Вычисление скорости для рендеринга
+                float velocity = (newH - prev.r) * 0.5;
+                // Вычисление нормали
+                float dx = (hR - hL) * 0.5;
+                float dy = (hT - hB) * 0.5;
+                gl_FragColor = vec4(newH, velocity, dx, dy);
+            }
+        `;
+        // Шейдер добавления капли
+        const dropFS = `
+            precision highp float;
+            varying vec2 vUv;
+            uniform sampler2D uState;
+            uniform vec2 uDropPos;
+            uniform float uDropRadius;
+            uniform float uDropStrength;
+            uniform vec2 uResolution;
+            void main() {
+                vec4 state = texture2D(uState, vUv);
+                vec2 pos = vUv * uResolution;
+                float dist = length(pos - uDropPos);
+                if (dist < uDropRadius) {
+                    float factor = 1.0 - dist / uDropRadius;
+                    factor = factor * factor * (3.0 - 2.0 * factor); // Smoothstep
+                    state.r -= uDropStrength * factor;
+                }
+                gl_FragColor = state;
+            }
+        `;
+        // Шейдер рендеринга воды (высококачественный)
+        const renderFS = `
+            precision highp float;
+            varying vec2 vUv;
+            uniform sampler2D uState;
+            uniform sampler2D uBackground;
+            uniform vec2 uResolution;
+            uniform float uTime;
+            uniform vec3 uWaterColor;
+            uniform vec3 uDeepColor;
+            uniform vec3 uSkyColor;
+            uniform vec3 uFoamColor;
+            uniform vec3 uLightDir;
+            uniform float uRefraction;
+            uniform float uReflection;
+            uniform float uCaustics;
+            uniform float uBrightness;
+            uniform float uSpecular;
+            uniform float uWaterDepth;
+            uniform bool uHighQuality;
+            // Функция шума для деталей
+            float hash(vec2 p) {
+                return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
+            }
+            float noise(vec2 p) {
+                vec2 i = floor(p);
+                vec2 f = fract(p);
+                f = f * f * (3.0 - 2.0 * f);
+                float a = hash(i);
+                float b = hash(i + vec2(1.0, 0.0));
+                float c = hash(i + vec2(0.0, 1.0));
+                float d = hash(i + vec2(1.0, 1.0));
+                return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+            }
+            float fbm(vec2 p) {
+                float value = 0.0;
+                float amplitude = 0.5;
+                for (int i = 0; i < 4; i++) {
+                    value += amplitude * noise(p);
+                    p *= 2.0;
+                    amplitude *= 0.5;
+                }
+                return value;
+            }
+            vec3 getCaustics(vec2 uv, float time) {
+                vec2 p = uv * 8.0;
+                float c = 0.0;
+                for (int i = 0; i < 3; i++) {
+                    float t = time * (0.5 + float(i) * 0.2);
+                    c += abs(sin(p.x * 3.0 + t) * cos(p.y * 2.5 - t * 0.7));
+                    p = p * 1.5 + vec2(0.1, 0.2);
+                }
+                return vec3(c * 0.15);
+            }
+            void main() {
+                vec4 state = texture2D(uState, vUv);
+                float height = state.r;
+                float velocity = state.g;
+                vec2 gradient = state.ba;
+                // Высококачественная нормаль
+                vec2 texel = 1.0 / uResolution;
+                vec3 normal;
+                if (uHighQuality) {
+                    // Собель-оператор для нормалей
+                    float hL = texture2D(uState, vUv + vec2(-texel.x, 0.0)).r;
+                    float hR = texture2D(uState, vUv + vec2(texel.x, 0.0)).r;
+                    float hT = texture2D(uState, vUv + vec2(0.0, texel.y)).r;
+                    float hB = texture2D(uState, vUv + vec2(0.0, -texel.y)).r;
+                    float hTL = texture2D(uState, vUv + vec2(-texel.x, texel.y)).r;
+                    float hTR = texture2D(uState, vUv + vec2(texel.x, texel.y)).r;
+                    float hBL = texture2D(uState, vUv + vec2(-texel.x, -texel.y)).r;
+                    float hBR = texture2D(uState, vUv + vec2(texel.x, -texel.y)).r;
+                    float dx = (hTR + 2.0*hR + hBR - hTL - 2.0*hL - hBL) / 8.0;
+                    float dy = (hTL + 2.0*hT + hTR - hBL - 2.0*hB - hBR) / 8.0;
+                    normal = normalize(vec3(-dx * 30.0, -dy * 30.0, 1.0));
                 } else {
+                    normal = normalize(vec3(-gradient.x * 20.0, -gradient.y * 20.0, 1.0));
+                }
+                // Направление света
+                vec3 lightDir = normalize(uLightDir);
+                vec3 viewDir = vec3(0.0, 0.0, 1.0);
+                vec3 halfVec = normalize(lightDir + viewDir);
+                // Освещение
+                float diffuse = max(dot(normal, lightDir), 0.0);
+                float specularLight = pow(max(dot(normal, halfVec), 0.0), 64.0) * uSpecular;
+                // Френель
+                float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 3.0);
+                fresnel = mix(0.02, 1.0, fresnel);
+                // Преломление
+                vec2 refractedUv = vUv + normal.xy * uRefraction * 0.1;
+                refractedUv = clamp(refractedUv, 0.0, 1.0);
+                // Глубина и затухание
+                float depth = uWaterDepth + height * 0.3;
+                float absorption = exp(-depth * 2.0);
+                // Базовый цвет воды с градиентом глубины
+                vec3 waterCol = mix(uDeepColor, uWaterColor, absorption);
+                // Каустика
+                vec3 caustics = getCaustics(refractedUv, uTime) * uCaustics * absorption;
+                // Отражение неба
+                vec3 reflectedDir = reflect(-viewDir, normal);
+                float skyFactor = max(reflectedDir.z, 0.0);
+                vec3 skyReflection = mix(uSkyColor * 0.7, uSkyColor, skyFactor);
+                // Пена на гребнях волн
+                float foam = smoothstep(0.02, 0.08, height) * smoothstep(0.15, 0.08, height);
+                foam += smoothstep(0.0, 0.02, abs(velocity)) * 0.3;
+                foam = clamp(foam, 0.0, 1.0);
+                // Мелкие детали поверхности
+                if (uHighQuality) {
+                    float detail = fbm(vUv * 50.0 + uTime * 0.5) * 0.02;
+                    waterCol += vec3(detail);
                 }
+                // Финальное смешивание
+                vec3 color = waterCol;
+                color += caustics;
+                color = mix(color, skyReflection, fresnel * uReflection);
+                color += vec3(specularLight);
+                color = mix(color, uFoamColor, foam * 0.5);
+                color *= uBrightness;
+                color *= 0.8 + diffuse * 0.4;
+                // Тонмэппинг
+                color = color / (color + vec3(1.0));
+                color = pow(color, vec3(1.0/2.2));
+                gl_FragColor = vec4(color, 1.0);
+            }
+        `;
+        // Шейдерные программы
+        let waveSimProgram, dropProgram, renderProgram;
+        let quadBuffer;
+        // Компиляция шейдера
+        function compileShader(source, type) {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                console.error('Shader error:', gl.getShaderInfoLog(shader));
+                return null;
+            }
+            return shader;
+        }
+        // Создание программы
+        function createProgram(vsSource, fsSource) {
+            const vs = compileShader(vsSource, gl.VERTEX_SHADER);
+            const fs = compileShader(fsSource, gl.FRAGMENT_SHADER);
+            const program = gl.createProgram();
+            gl.attachShader(program, vs);
+            gl.attachShader(program, fs);
+            gl.linkProgram(program);
+            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+                console.error('Program error:', gl.getProgramInfoLog(program));
+                return null;
+            }
+            return program;
+        }
+        // Создание текстуры
+        function createTexture(width, height) {
+            const texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            const ext = gl.getExtension('OES_texture_float');
+            const extLinear = gl.getExtension('OES_texture_float_linear');
+            if (isWebGL2) {
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null);
+            } else if (ext) {
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);
             } else {
+                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+            }
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, extLinear ? gl.LINEAR : gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, extLinear ? gl.LINEAR : gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+            return texture;
+        }
+        // Создание framebuffer
+        function createFramebuffer(texture) {
+            const fb = gl.createFramebuffer();
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+            return fb;
+        }
+        // Инициализация
+        function init() {
+            // Создание буфера квада
+            quadBuffer = gl.createBuffer();
+            gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                -1, -1, 1, -1, -1, 1,
+                -1, 1, 1, -1, 1, 1
+            ]), gl.STATIC_DRAW);
+            // Создание программ
+            waveSimProgram = createProgram(quadVS, waveSimFS);
+            dropProgram = createProgram(quadVS, dropFS);
+            renderProgram = createProgram(quadVS, renderFS);
+            // Создание текстур и фреймбуферов
+            initFramebuffers();
+            resize();
+            window.addEventListener('resize', resize);
+            // События мыши и тача
+            canvas.addEventListener('mousedown', onPointerDown);
+            canvas.addEventListener('mousemove', onPointerMove);
+            canvas.addEventListener('mouseup', onPointerUp);
+            canvas.addEventListener('touchstart', onTouchStart, { passive: false });
+            canvas.addEventListener('touchmove', onTouchMove, { passive: false });
+            canvas.addEventListener('touchend', onTouchEnd);
+            // Настройка элементов управления
+            setupControls();
+            // Запуск анимации
+            requestAnimationFrame(animate);
+        }
+        function initFramebuffers() {
+            // Удаляем старые
+            framebuffers.forEach(fb => gl.deleteFramebuffer(fb));
+            textures.forEach(tex => gl.deleteTexture(tex));
+            framebuffers = [];
+            textures = [];
+            // Создаем три буфера (prev, curr, next)
+            for (let i = 0; i < 3; i++) {
+                const tex = createTexture(simWidth, simHeight);
+                textures.push(tex);
+                framebuffers.push(createFramebuffer(tex));
+            }
+            currentFB = 0;
+        }
+        function resize() {
+            const dpr = Math.min(window.devicePixelRatio, 2);
+            canvas.width = window.innerWidth * dpr;
+            canvas.height = window.innerHeight * dpr;
+            gl.viewport(0, 0, canvas.width, canvas.height);
+        }
+        // Обработчики событий
+        let isPointerDown = false;
+        let lastPointerPos = null;
+        function getPointerPos(e) {
+            const rect = canvas.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width;
+            const y = 1.0 - (e.clientY - rect.top) / rect.height;
+            return { x, y };
+        }
+        function onPointerDown(e) {
+            isPointerDown = true;
+            const pos = getPointerPos(e);
+            addDrop(pos.x * simWidth, pos.y * simHeight);
+            lastPointerPos = pos;
+        }
+        function onPointerMove(e) {
+            if (!isPointerDown) return;
+            const pos = getPointerPos(e);
+            if (lastPointerPos) {
+                const dist = Math.sqrt(
+                    Math.pow(pos.x - lastPointerPos.x, 2) +
+                    Math.pow(pos.y - lastPointerPos.y, 2)
+                );
+                if (dist > 0.01) {
+                    addDrop(pos.x * simWidth, pos.y * simHeight);
+                    lastPointerPos = pos;
                 }
             }
         }
+        function onPointerUp() {
+            isPointerDown = false;
+            lastPointerPos = null;
+        }
+        function onTouchStart(e) {
+            e.preventDefault();
+            for (let touch of e.touches) {
+                const pos = getPointerPos(touch);
+                addDrop(pos.x * simWidth, pos.y * simHeight);
             }
+            isPointerDown = true;
         }
+        function onTouchMove(e) {
+            e.preventDefault();
+            for (let touch of e.touches) {
+                const pos = getPointerPos(touch);
+                addDrop(pos.x * simWidth, pos.y * simHeight);
+            }
+        }
+        function onTouchEnd(e) {
+            if (e.touches.length === 0) {
+                isPointerDown = false;
+            }
+        }
+        // Добавление капли
+        function addDrop(x, y) {
+            gl.useProgram(dropProgram);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[(currentFB + 1) % 3]);
+            gl.viewport(0, 0, simWidth, simHeight);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
+            gl.uniform1i(gl.getUniformLocation(dropProgram, 'uState'), 0);
+            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uDropPos'), x, y);
+            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropRadius'), params.dropRadius);
+            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropStrength'), params.dropStrength);
+            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uResolution'), simWidth, simHeight);
+            drawQuad(dropProgram);
+        }
+        // Симуляция волн
+        function simulateWaves() {
+            gl.useProgram(waveSimProgram);
+            const nextFB = (currentFB + 2) % 3;
+            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[nextFB]);
+            gl.viewport(0, 0, simWidth, simHeight);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, textures[currentFB]);
+            gl.uniform1i(gl.getUniformLocation(waveSimProgram, 'uPrevState'), 0);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
+            gl.uniform1i(gl.getUniformLocation(waveSimProgram, 'uCurrState'), 1);
+            gl.uniform2f(gl.getUniformLocation(waveSimProgram, 'uResolution'), simWidth, simHeight);
+            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uDamping'), params.damping);
+            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uSpeed'), params.waveSpeed * 0.5);
+            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uTension'), params.tension);
+            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uDt'), 1.0 / 60.0);
+            drawQuad(waveSimProgram);
+            currentFB = (currentFB + 1) % 3;
+        }
+        // Рендеринг
+        let time = 0;
+        function render() {
+            gl.useProgram(renderProgram);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.viewport(0, 0, canvas.width, canvas.height);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
+            gl.uniform1i(gl.getUniformLocation(renderProgram, 'uState'), 0);
+            gl.uniform2f(gl.getUniformLocation(renderProgram, 'uResolution'), simWidth, simHeight);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uTime'), time);
+            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uWaterColor'), params.waterColor);
+            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uDeepColor'), params.deepColor);
+            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uSkyColor'), params.skyColor);
+            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uFoamColor'), params.foamColor);
+            gl.uniform3f(gl.getUniformLocation(renderProgram, 'uLightDir'),
+                params.lightX, params.lightY, params.lightZ);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uRefraction'), params.refraction);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uReflection'), params.reflection);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uCaustics'), params.caustics);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uBrightness'), params.brightness);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uSpecular'), params.specular);
+            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uWaterDepth'), params.waterDepth);
+            gl.uniform1i(gl.getUniformLocation(renderProgram, 'uHighQuality'), params.highQuality ? 1 : 0);
+            drawQuad(renderProgram);
+        }
+        function drawQuad(program) {
+            const posLoc = gl.getAttribLocation(program, 'position');
+            gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+            gl.enableVertexAttribArray(posLoc);
+            gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+        }
+        // FPS счетчик
+        let frameCount = 0;
+        let lastFpsUpdate = performance.now();
+        let fps = 60;
+        function updateFPS() {
+            frameCount++;
+            const now = performance.now();
+            if (now - lastFpsUpdate > 500) {
+                fps = Math.round(frameCount * 1000 / (now - lastFpsUpdate));
+                document.getElementById('fps').textContent = `FPS: ${fps}`;
+                frameCount = 0;
+                lastFpsUpdate = now;
+            }
+        }
+        // Главный цикл
+        function animate() {
+            time += 0.016;
+            // Автоматические волны (дождь)
+            if (params.autoWaves && Math.random() < params.rainFreq) {
+                addDrop(
+                    Math.random() * simWidth,
+                    Math.random() * simHeight
+                );
+            }
+            // Ветровые волны
+            if (params.windWaves) {
+                if (Math.random() < 0.3) {
+                    const x = Math.random() * simWidth;
+                    addDropWeak(x, simHeight * 0.9, params.windStrength);
                 }
             }
+            // Симуляция (несколько итераций для стабильности)
+            for (let i = 0; i < 2; i++) {
+                simulateWaves();
+            }
+            render();
+            updateFPS();
+            requestAnimationFrame(animate);
+        }
+        function addDropWeak(x, y, strength) {
+            gl.useProgram(dropProgram);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[(currentFB + 1) % 3]);
+            gl.viewport(0, 0, simWidth, simHeight);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
+            gl.uniform1i(gl.getUniformLocation(dropProgram, 'uState'), 0);
+            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uDropPos'), x, y);
+            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropRadius'), 5);
+            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropStrength'), strength);
+            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uResolution'), simWidth, simHeight);
+            drawQuad(dropProgram);
+        }
+        // Настройка элементов управления
+        function setupControls() {
+            const controls = [
+                { id: 'waveSpeed', param: 'waveSpeed', decimals: 1 },
+                { id: 'damping', param: 'damping', decimals: 3 },
+                { id: 'dropRadius', param: 'dropRadius', decimals: 0 },
+                { id: 'dropStrength', param: 'dropStrength', decimals: 1 },
+                { id: 'tension', param: 'tension', decimals: 2 },
+                { id: 'waterDepth', param: 'waterDepth', decimals: 1 },
+                { id: 'refraction', param: 'refraction', decimals: 2 },
+                { id: 'reflection', param: 'reflection', decimals: 2 },
+                { id: 'caustics', param: 'caustics', decimals: 1 },
+                { id: 'brightness', param: 'brightness', decimals: 1 },
+                { id: 'specular', param: 'specular', decimals: 1 },
+                { id: 'lightX', param: 'lightX', decimals: 1 },
+                { id: 'lightY', param: 'lightY', decimals: 1 },
+                { id: 'lightZ', param: 'lightZ', decimals: 1 },
+                { id: 'rainFreq', param: 'rainFreq', decimals: 2 },
+                { id: 'windStrength', param: 'windStrength', decimals: 3 },
+                { id: 'simResolution', param: 'simResolution', decimals: 0 }
+            ];
+            controls.forEach(ctrl => {
+                const input = document.getElementById(ctrl.id);
+                const valueSpan = document.getElementById(ctrl.id + 'Val');
+                if (input) {
+                    input.value = params[ctrl.param];
+                    if (valueSpan) {
+                        valueSpan.textContent = params[ctrl.param].toFixed(ctrl.decimals);
+                    }
+                    input.addEventListener('input', () => {
+                        params[ctrl.param] = parseFloat(input.value);
+                        if (valueSpan) {
+                            valueSpan.textContent = params[ctrl.param].toFixed(ctrl.decimals);
+                        }
+                        // Изменение разрешения требует перезапуска
+                        if (ctrl.id === 'simResolution') {
+                            simWidth = params.simResolution;
+                            simHeight = params.simResolution;
+                            initFramebuffers();
+                        }
+                    });
+                }
+            });
+            // Цвета
+            const colorInputs = [
+                { id: 'waterColor', param: 'waterColor' },
+                { id: 'deepColor', param: 'deepColor' },
+                { id: 'skyColor', param: 'skyColor' },
+                { id: 'foamColor', param: 'foamColor' }
+            ];
+            colorInputs.forEach(ctrl => {
+                const input = document.getElementById(ctrl.id);
+                if (input) {
+                    input.addEventListener('input', () => {
+                        params[ctrl.param] = hexToRgb(input.value);
+                    });
+                }
+            });
+            // Чекбоксы
+            document.getElementById('autoWaves').addEventListener('change', (e) => {
+                params.autoWaves = e.target.checked;
+            });
+            document.getElementById('windWaves').addEventListener('change', (e) => {
+                params.windWaves = e.target.checked;
+            });
+            document.getElementById('highQuality').addEventListener('change', (e) => {
+                params.highQuality = e.target.checked;
+            });
+        }
+        function hexToRgb(hex) {
+            const r = parseInt(hex.slice(1, 3), 16) / 255;
+            const g = parseInt(hex.slice(3, 5), 16) / 255;
+            const b = parseInt(hex.slice(5, 7), 16) / 255;
+            return [r, g, b];
+        }
+        function rgbToHex(rgb) {
+            const r = Math.round(rgb[0] * 255).toString(16).padStart(2, '0');
+            const g = Math.round(rgb[1] * 255).toString(16).padStart(2, '0');
+            const b = Math.round(rgb[2] * 255).toString(16).padStart(2, '0');
+            return `#${r}${g}${b}`;
+        }
+        // Пресеты
+        function applyPreset(preset) {
+            const presets = {
+                calm: {
+                    waveSpeed: 0.5, damping: 0.998, dropRadius: 20, dropStrength: 0.3,
+                    tension: 0.15, waterDepth: 0.6, refraction: 0.2, reflection: 0.5,
+                    caustics: 0.5, brightness: 1.0, specular: 1.0,
+                    waterColor: [0.1, 0.4, 0.6], deepColor: [0.02, 0.1, 0.15],
+                    skyColor: [0.9, 0.7, 0.5], autoWaves: false, rainFreq: 0.01
+                },
+                storm: {
+                    waveSpeed: 2.0, damping: 0.99, dropRadius: 10, dropStrength: 0.8,
+                    tension: 0.05, waterDepth: 1.2, refraction: 0.4, reflection: 0.3,
+                    caustics: 1.5, brightness: 0.8, specular: 2.0,
+                    waterColor: [0.05, 0.15, 0.25], deepColor: [0.01, 0.03, 0.08],
+                    skyColor: [0.3, 0.35, 0.4], autoWaves: true, rainFreq: 0.2
+                },
+                pool: {
+                    waveSpeed: 1.2, damping: 0.997, dropRadius: 15, dropStrength: 0.4,
+                    tension: 0.2, waterDepth: 0.5, refraction: 0.35, reflection: 0.6,
+                    caustics: 2.0, brightness: 1.2, specular: 1.5,
+                    waterColor: [0.2, 0.6, 0.8], deepColor: [0.1, 0.3, 0.5],
+                    skyColor: [0.5, 0.8, 1.0], autoWaves: false, rainFreq: 0.02
+                },
+                ocean: {
+                    waveSpeed: 1.5, damping: 0.994, dropRadius: 25, dropStrength: 0.6,
+                    tension: 0.08, waterDepth: 1.5, refraction: 0.25, reflection: 0.45,
+                    caustics: 1.0, brightness: 1.0, specular: 1.2,
+                    waterColor: [0.0, 0.3, 0.5], deepColor: [0.0, 0.05, 0.15],
+                    skyColor: [0.6, 0.8, 0.95], autoWaves: true, rainFreq: 0.05,
+                    windWaves: true, windStrength: 0.005
+                },
+                toxic: {
+                    waveSpeed: 0.8, damping: 0.996, dropRadius: 18, dropStrength: 0.5,
+                    tension: 0.12, waterDepth: 0.7, refraction: 0.3, reflection: 0.4,
+                    caustics: 1.5, brightness: 1.3, specular: 1.0,
+                    waterColor: [0.2, 0.8, 0.1], deepColor: [0.05, 0.2, 0.0],
+                    skyColor: [0.4, 0.5, 0.2], autoWaves: true, rainFreq: 0.03
+                },
+                lava: {
+                    waveSpeed: 0.4, damping: 0.992, dropRadius: 30, dropStrength: 0.7,
+                    tension: 0.02, waterDepth: 1.0, refraction: 0.15, reflection: 0.2,
+                    caustics: 0.3, brightness: 1.5, specular: 0.5,
+                    waterColor: [1.0, 0.3, 0.0], deepColor: [0.3, 0.0, 0.0],
+                    skyColor: [0.2, 0.1, 0.05], autoWaves: true, rainFreq: 0.08
+                }
+            };
+            const p = presets[preset];
+            if (!p) return;
+            Object.assign(params, p);
+            // Обновляем UI
+            updateControlsUI();
+        }
+        function updateControlsUI() {
+            document.getElementById('waveSpeed').value = params.waveSpeed;
+            document.getElementById('waveSpeedVal').textContent = params.waveSpeed.toFixed(1);
+            document.getElementById('damping').value = params.damping;
+            document.getElementById('dampingVal').textContent = params.damping.toFixed(3);
+            document.getElementById('dropRadius').value = params.dropRadius;
+            document.getElementById('dropRadiusVal').textContent = params.dropRadius.toFixed(0);
+            document.getElementById('dropStrength').value = params.dropStrength;
+            document.getElementById('dropStrengthVal').textContent = params.dropStrength.toFixed(1);
+            document.getElementById('tension').value = params.tension;
+            document.getElementById('tensionVal').textContent = params.tension.toFixed(2);
+            document.getElementById('waterDepth').value = params.waterDepth;
+            document.getElementById('waterDepthVal').textContent = params.waterDepth.toFixed(1);
+            document.getElementById('refraction').value = params.refraction;
+            document.getElementById('refractionVal').textContent = params.refraction.toFixed(2);
+            document.getElementById('reflection').value = params.reflection;
+            document.getElementById('reflectionVal').textContent = params.reflection.toFixed(2);
+            document.getElementById('caustics').value = params.caustics;
+            document.getElementById('causticsVal').textContent = params.caustics.toFixed(1);
+            document.getElementById('brightness').value = params.brightness;
+            document.getElementById('brightnessVal').textContent = params.brightness.toFixed(1);
+            document.getElementById('specular').value = params.specular;
+            document.getElementById('specularVal').textContent = params.specular.toFixed(1);
+            document.getElementById('rainFreq').value = params.rainFreq;
+            document.getElementById('rainFreqVal').textContent = params.rainFreq.toFixed(2);
+            document.getElementById('autoWaves').checked = params.autoWaves;
+            document.getElementById('windWaves').checked = params.windWaves || false;
+            document.getElementById('waterColor').value = rgbToHex(params.waterColor);
+            document.getElementById('deepColor').value = rgbToHex(params.deepColor);
+            document.getElementById('skyColor').value = rgbToHex(params.skyColor);
         }
+        function resetWater() {
+            initFramebuffers();
+        }
+        function toggleControls() {
+            document.getElementById('controls').classList.toggle('hidden');
+        }
+        // Запуск
+        init();
+    </script>
 </body>
 </html>