Update app.py

app.py

@@ -173,59 +173,50 @@ EDITOR_TEMPLATE = '''
         <div id="ui-panel">
              <div class="ui-group">
                 <h3>Режим</h3>
-                <button id="play-mode-toggle" class="play-button">Играть</button>
+                <button id="play-mode-toggle" class="play-button" title="Переключиться в режим игры">Играть</button>
             </div>
             <div class="ui-group">
-                <h3>Проекты</h3>
-                <label for="project-list">Загрузить проект:</label>
+                <h3>Проект</h3>
+                <label for="project-list" title="Выбрать существующий проект для загрузки">Загрузить проект:</label>
                 <select id="project-list">
                     <option value="">Выберите проект...</option>
                     {% for project in projects %}
                     <option value="{{ project }}">{{ project }}</option>
                     {% endfor %}
                 </select>
-                <button id="load-project">Загрузить</button>
-                <label for="project-name">Имя проекта:</label>
+                <button id="load-project" title="Загрузить выбранный проект">Загрузить</button>
+                <hr style="border-color: #333; margin: 15px 0;">
+                <label for="project-name" title="Введите имя для нового или существующего проекта">Имя проекта:</label>
                 <input type="text" id="project-name" placeholder="new-level-01">
-                <button id="save-project">Сохранить</button>
+                <button id="save-project" title="Сохранить текущий проект на сервере">Сохранить</button>
             </div>
             <div class="ui-group">
                 <h3>Ландшафт</h3>
-                <label for="terrain-width">Ширина:</label>
+                <label for="terrain-width" title="Ширина ландшафта по оси X">Ширина:</label>
                 <input type="number" id="terrain-width" value="100">
-                <label for="terrain-height">Длина:</label>
+                <label for="terrain-height" title="Глубина ландшафта по оси Z">Глубина:</label>
                 <input type="number" id="terrain-height" value="100">
-                <button id="create-terrain">Создать новый ландшафт</button>
+                <button id="create-terrain" title="Создать новый ландшафт с указанными размерами">Создать новый ландшафт</button>
             </div>
             <div class="ui-group">
                 <h3>Кисть</h3>
                 <div class="radio-group">
-                    <label><input type="radio" name="brush-mode" value="raise" checked> Поднять</label>
-                    <label><input type="radio" name="brush-mode" value="lower"> Опустить</label>
-                    <label><input type="radio" name="brush-mode" value="roughen"> Шум</label>
-                    <label><input type="radio" name="brush-mode" value="smooth"> Сгладить</label>
-                    <label><input type="radio" name="brush-mode" value="flatten"> Выровнять</label>
-                    <label><input type="radio" name="brush-mode" value="paint"> Текстура</label>
-                    <label><input type="radio" name="brush-mode" value="place"> Объект</label>
+                    <label title="Поднять ландшафт"><input type="radio" name="brush-mode" value="raise" checked> Поднять</label>
+                    <label title="Опустить ландшафт"><input type="radio" name="brush-mode" value="lower"> Опустить</label>
+                    <label title="Добавить шум"><input type="radio" name="brush-mode" value="roughen"> Шум</label>
+                    <label title="Сгладить ландшафт"><input type="radio" name="brush-mode" value="smooth"> Сгладить</label>
+                    <label title="Выровнять до определенной высоты"><input type="radio" name="brush-mode" value="flatten"> Выровнять</label>
+                    <label title="Рисовать текстуру"><input type="radio" name="brush-mode" value="paint"> Текстура</label>
+                    <label title="Разместить объект"><input type="radio" name="brush-mode" value="place"> Объект</label>
                 </div>
                 <div class="slider-container">
-                    <label for="brush-size">Размер: <span id="brush-size-value">10</span></label>
+                    <label for="brush-size" title="Радиус кисти">Размер: <span id="brush-size-value">10</span></label>
                     <input type="range" id="brush-size" min="1" max="50" value="10">
                 </div>
                 <div class="slider-container">
-                    <label for="brush-strength">Сила: <span id="brush-strength-value">0.5</span></label>
+                    <label for="brush-strength" title="Интенсивность кисти">Сила: <span id="brush-strength-value">0.5</span></label>
                     <input type="range" id="brush-strength" min="0.1" max="2" step="0.1" value="0.5">
                 </div>
-            </div>
-            <div class="ui-group">
-                <h3>Текстуры ландшафта</h3>
-                <div class="radio-group" id="texture-selector">
-                    <label><input type="radio" name="texture-type" value="grass" checked> Трава</label>
-                    <label><input type="radio" name="texture-type" value="rock"> Скалы</label>
-                    <label><input type="radio" name="texture-type" value="dirt"> Грунт</label>
-                    <label><input type="radio" name="texture-type" value="snow"> Снег</label>
-                    <label><input type="radio" name="texture-type" value="sand"> Песок</label>
-                </div>
             </div>
              <div class="ui-group" id="texture-management-group">
                 <h3>Управление текстурами</h3>
@@ -237,19 +228,32 @@ EDITOR_TEMPLATE = '''
                     <option value="snow">Снег</option>
                     <option value="sand">Песок</option>
                 </select>
-                <label for="custom-texture-file">Выберите файл текстуры:</label>
-                <input type="file" id="custom-texture-file" accept="image/*">
-                <button id="update-texture-btn">Обновить текстуру</button>
-                <label for="texture-slot-name">Новое имя для слота:</label>
+                 <label for="texture-slot-name">Новое имя для слота:</label>
                 <input type="text" id="texture-slot-name" placeholder="например, Лава">
                 <button id="rename-texture-slot-btn">Переименовать</button>
+                <hr style="border-color: #333; margin: 15px 0;">
+                <label for="custom-texture-file">Текстура (Diffuse):</label>
+                <input type="file" id="custom-texture-file" accept="image/*" title="Выберите изображение для основной текстуры">
+                <label for="custom-normal-file">Карта нормалей (Normal):</label>
+                <input type="file" id="custom-normal-file" accept="image/*" title="Выберите изображение для карты нормалей">
+                <button id="update-texture-btn">Обновить текстуру</button>
+            </div>
+            <div class="ui-group">
+                <h3>Текстуры ландшафта</h3>
+                <div class="radio-group" id="texture-selector">
+                    <label><input type="radio" name="texture-type" value="grass" checked> Трава</label>
+                    <label><input type="radio" name="texture-type" value="rock"> Скалы</label>
+                    <label><input type="radio" name="texture-type" value="dirt"> Грунт</label>
+                    <label><input type="radio" name="texture-type" value="snow"> Снег</label>
+                    <label><input type="radio" name="texture-type" value="sand"> Песок</label>
+                </div>
             </div>
             <div class="ui-group">
                 <h3>Объекты</h3>
                 <div class="radio-group" id="object-selector">
                     <label><input type="radio" name="object-type" value="grass" checked> Трава</label>
                 </div>
-                <button id="clear-objects">Очистить объекты</button>
+                <button id="clear-objects" title="Удалить всю растительность с ландшафта">Очистить объекты</button>
             </div>
         </div>
     </div>
@@ -311,6 +315,7 @@ EDITOR_TEMPLATE = '''
 
         const textureLoader = new THREE.TextureLoader();
         let customTextures = {};
+        let customNormalMaps = {};
         let flattenHeight = null;
 
         const loadTexture = (url) => {
@@ -328,9 +333,20 @@ EDITOR_TEMPLATE = '''
             snow: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/snow.jpg'),
             sand: loadTexture('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/terrain/sand-512.jpg'),
             grassNormal: loadTexture('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/terrain/grasslight-big-nm.jpg'),
-            rockNormal: loadTexture('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/terrain/rock-nm.jpg')
+            rockNormal: loadTexture('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/terrain/rock-nm.jpg'),
+            dirtNormal: new THREE.DataTexture(new Uint8Array([128, 128, 255, 255]), 1, 1),
+            snowNormal: new THREE.DataTexture(new Uint8Array([128, 128, 255, 255]), 1, 1),
+            sandNormal: new THREE.DataTexture(new Uint8Array([128, 128, 255, 255]), 1, 1)
         };
         
+        Object.values(textures).forEach(tex => {
+            if (tex.isDataTexture) {
+                tex.needsUpdate = true;
+            } else {
+                tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+            }
+        });
+
         const terrainMaterial = new THREE.ShaderMaterial({
             uniforms: {
                 grassTexture: { value: textures.grass },
@@ -340,6 +356,9 @@ EDITOR_TEMPLATE = '''
                 sandTexture: { value: textures.sand },
                 grassNormalMap: { value: textures.grassNormal },
                 rockNormalMap: { value: textures.rockNormal },
+                dirtNormalMap: { value: textures.dirtNormal },
+                snowNormalMap: { value: textures.snowNormal },
+                sandNormalMap: { value: textures.sandNormal },
                 lightDirection: { value: new THREE.Vector3(0.5, 0.5, 0.5).normalize() }
             },
             vertexShader: `
@@ -371,6 +390,10 @@ EDITOR_TEMPLATE = '''
                 uniform sampler2D sandTexture;
                 uniform sampler2D grassNormalMap;
                 uniform sampler2D rockNormalMap;
+                uniform sampler2D dirtNormalMap;
+                uniform sampler2D snowNormalMap;
+                uniform sampler2D sandNormalMap;
+
                 uniform vec3 lightDirection;
 
                 varying vec2 vUv;
@@ -399,9 +422,17 @@ EDITOR_TEMPLATE = '''
 
                     vec3 grassNormal = texture2D(grassNormalMap, uv_scaled).xyz * 2.0 - 1.0;
                     vec3 rockNormal = texture2D(rockNormalMap, uv_scaled).xyz * 2.0 - 1.0;
+                    vec3 dirtNormal = texture2D(dirtNormalMap, uv_scaled).xyz * 2.0 - 1.0;
+                    vec3 snowNormal = texture2D(snowNormalMap, uv_scaled).xyz * 2.0 - 1.0;
+                    vec3 sandNormal = texture2D(sandNormalMap, uv_scaled).xyz * 2.0 - 1.0;
+                    
+                    vec3 finalNormal = grassNormal;
+                    finalNormal = mix(finalNormal, rockNormal, vColor.r);
+                    finalNormal = mix(finalNormal, dirtNormal, vColor.g);
+                    finalNormal = mix(finalNormal, snowNormal, vColor.b);
+                    finalNormal = mix(finalNormal, sandNormal, vColor.a);
                     
-                    vec3 blendedNormal = normalize(mix(grassNormal, rockNormal, vColor.r));
-                    vec3 normal = normalize(tbn * blendedNormal);
+                    vec3 normal = normalize(tbn * finalNormal);
 
                     float lighting = dot(normal, lightDirection) * 0.5 + 0.5;
                     gl_FragColor = vec4(finalColor * lighting, 1.0);
@@ -419,7 +450,7 @@ EDITOR_TEMPLATE = '''
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.setPixelRatio(window.devicePixelRatio);
             renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
             renderer.toneMapping = THREE.ACESFilmicToneMapping;
             renderer.outputColorSpace = THREE.SRGBColorSpace;
             document.body.appendChild(renderer.domElement);
@@ -434,13 +465,14 @@ EDITOR_TEMPLATE = '''
             const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
             dirLight.position.set(100, 100, 50);
             dirLight.castShadow = true;
-            dirLight.shadow.mapSize.width = 2048;
-            dirLight.shadow.mapSize.height = 2048;
-            dirLight.shadow.camera.top = 100;
-            dirLight.shadow.camera.bottom = -100;
-            dirLight.shadow.camera.left = -100;
-            dirLight.shadow.camera.right = 100;
+            dirLight.shadow.mapSize.width = 4096;
+            dirLight.shadow.mapSize.height = 4096;
+            dirLight.shadow.camera.top = 150;
+            dirLight.shadow.camera.bottom = -150;
+            dirLight.shadow.camera.left = -150;
+            dirLight.shadow.camera.right = 150;
             dirLight.shadow.bias = -0.001;
+            dirLight.shadow.normalBias = 0.05;
             scene.add(dirLight);
             terrainMaterial.uniforms.lightDirection.value = dirLight.position.clone().normalize();
 
@@ -617,37 +649,50 @@ EDITOR_TEMPLATE = '''
         }
         
         function updateCustomTexture() {
-            const fileInput = document.getElementById('custom-texture-file');
+            const textureFileInput = document.getElementById('custom-texture-file');
+            const normalFileInput = document.getElementById('custom-normal-file');
             const textureSlot = document.getElementById('texture-slot-select').value;
-            
-            if (fileInput.files.length === 0) {
-                alert('Пожалуйста, выберите файл изображения.');
+
+            const textureFile = textureFileInput.files[0];
+            const normalFile = normalFileInput.files[0];
+
+            if (!textureFile && !normalFile) {
+                alert('Пожалуйста, выберите файл текстуры или карты нормалей.');
                 return;
             }
-            
-            const file = fileInput.files[0];
-            const reader = new FileReader();
-            
-            reader.onload = (event) => {
-                const dataUrl = event.target.result;
-                customTextures[textureSlot] = dataUrl;
-                
-                const newTexture = loadTexture(dataUrl);
-                const uniformName = textureSlot + 'Texture';
-                
-                if (terrainMaterial.uniforms[uniformName]) {
-                    if (terrainMaterial.uniforms[uniformName].value) {
-                        terrainMaterial.uniforms[uniformName].value.dispose();
+
+            const updateTexture = (file, isNormalMap) => {
+                if (!file) return;
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    const dataUrl = event.target.result;
+                    
+                    if (isNormalMap) {
+                        customNormalMaps[textureSlot] = dataUrl;
+                    } else {
+                        customTextures[textureSlot] = dataUrl;
                     }
-                    terrainMaterial.uniforms[uniformName].value = newTexture;
-                    terrainMaterial.needsUpdate = true;
-                    alert(`Текстура для слота "${textureSlot}" успешно обновлена.`);
-                }
+
+                    const newTexture = loadTexture(dataUrl);
+                    const uniformName = textureSlot + (isNormalMap ? 'NormalMap' : 'Texture');
+
+                    if (terrainMaterial.uniforms[uniformName]) {
+                        if (terrainMaterial.uniforms[uniformName].value) {
+                            terrainMaterial.uniforms[uniformName].value.dispose();
+                        }
+                        terrainMaterial.uniforms[uniformName].value = newTexture;
+                        terrainMaterial.needsUpdate = true;
+                        alert(`Карта ${isNormalMap ? 'нормалей' : 'текстуры'} для слота "${textureSlot}" успешно обновлена.`);
+                    }
+                };
+                reader.readAsDataURL(file);
             };
-            
-            reader.readAsDataURL(file);
+
+            updateTexture(textureFile, false);
+            updateTexture(normalFile, true);
         }
 
+
         function renameTextureSlot() {
             const slotValue = document.getElementById('texture-slot-select').value;
             const newName = document.getElementById('texture-slot-name').value.trim();
@@ -763,20 +808,33 @@ EDITOR_TEMPLATE = '''
                     }
                     grassInstances.instanceMatrix.needsUpdate = true;
                 }
-                if (terrainData.customTextures) {
+                 if (terrainData.customTextures) {
                     customTextures = terrainData.customTextures;
                     Object.entries(customTextures).forEach(([slot, dataUrl]) => {
                         const newTexture = loadTexture(dataUrl);
                         const uniformName = slot + 'Texture';
                         if (terrainMaterial.uniforms[uniformName]) {
-                             if (terrainMaterial.uniforms[uniformName].value) {
+                            if (terrainMaterial.uniforms[uniformName].value) {
                                 terrainMaterial.uniforms[uniformName].value.dispose();
                             }
                             terrainMaterial.uniforms[uniformName].value = newTexture;
                         }
                     });
-                    terrainMaterial.needsUpdate = true;
                 }
+                if (terrainData.customNormalMaps) {
+                    customNormalMaps = terrainData.customNormalMaps;
+                    Object.entries(customNormalMaps).forEach(([slot, dataUrl]) => {
+                        const newNormalMap = loadTexture(dataUrl);
+                        const uniformName = slot + 'NormalMap';
+                        if (terrainMaterial.uniforms[uniformName]) {
+                            if (terrainMaterial.uniforms[uniformName].value) {
+                                terrainMaterial.uniforms[uniformName].value.dispose();
+                            }
+                            terrainMaterial.uniforms[uniformName].value = newNormalMap;
+                        }
+                    });
+                }
+                terrainMaterial.needsUpdate = true;
                 updateTextureUIAfterLoad(terrainData);
             }
             
@@ -1083,6 +1141,7 @@ EDITOR_TEMPLATE = '''
                     grass: grassMatrices
                 },
                 customTextures: customTextures,
+                customNormalMaps: customNormalMaps,
                 textureNames: textureNames
             };