some speed up from lighthouse

2024-06-19 16:51:42 +03:00 · 2024-06-19 16:51:42 +03:00 · cbf362d0bd
parent ef26bb9845
commit cbf362d0bd
7 changed files with 196 additions and 58 deletions
--- a/app.vue
+++ b/app.vue
@ -1,5 +1,10 @@
 <script setup lang="ts">
 import '@/assets/main.scss'
+useHead({
+  htmlAttrs: {
+    lang: 'ru',
+  }
+})
 </script>
 <template>
  <div>
--- a/assets/fonts.scss
+++ b/assets/fonts.scss
@ -4,6 +4,7 @@
        src: url($file);
        font-weight: $weight;
        font-style: $style;
+        font-display: swap;
    }
 }

--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@ -35,7 +35,7 @@ const loadAll = async () => {
    pointLight.value = light.children[2]
    pointLight.value.color = '#f0dea9'
    pointLight.value.shadow.camera.near = 50
-    pointLight.value.shadow.bias = -0.001
+    pointLight.value.shadow.bias = -0.002

    const pbrTexture = await useTexture({
        map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
@ -70,7 +70,7 @@ onMounted(() => {
    cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
    loadAll()
 })
-watch(section_count, () => {
+watch([section_count, extra_section], () => {
    let v = (section_count.value + ~~(!!extra_section.value)) * 1.5
    if (v < controlsState.minDistance) v = controlsState.minDistance
    if (v > controlsState.maxDistance) v = controlsState.maxDistance
@ -82,7 +82,6 @@ watch(section_count, () => {
        <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
            <Loader />
            <TresCanvas shadows>
-                <StatsGl />
                <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                <OrbitControls v-bind="controlsState" make-default />
                <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
@ -96,8 +95,8 @@ watch(section_count, () => {
                </TresMesh>

                <template v-if="pointLight">
-                    <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
-                        :position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
+                    <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity"
+                        :position="Object.values(pointLight.position).map((el: any) => el * 8)" cast-shadow />
                </template>

                <TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -1,4 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import gltf from "vite-plugin-gltf"; // (b) Vite
+
+import { draco } from "@gltf-transform/functions";
 export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
@ -19,9 +22,14 @@ export default defineNuxtConfig({
  routeRules: {
    '/index.html': { redirect: '/' },
    '/index.php': { redirect: '/' },
-},
+  },
  vite: {
    assetsInclude: ['**/*.glb', '**/*.gltf'],
+    plugins: [
+      gltf({
+        transforms: [draco()],
+      }),
+    ],
  },
  robots: {
    rules: {
--- a/package-lock.json
+++ b/package-lock.json
@ -23,6 +23,7 @@
        "sass": "^1.77.4",
        "tailwindcss": "^3.4.3",
        "three": "^0.165.0",
+        "vite-plugin-gltf": "^4.0.0",
        "vue": "^3.4.27",
        "vue-router": "^4.3.2"
      },
@ -1155,6 +1156,48 @@
      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==",
      "peer": true
    },
+    "node_modules/@gltf-transform/core": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@gltf-transform/core/-/core-3.10.1.tgz",
+      "integrity": "sha512-50OYemknGNxjBmiOM6iJp04JAu0bl9jvXJfN/gFt9QdJO02cPDcoXlTfSPJG6TVWDcfl0xPlsx1vybcbPVGFcQ==",
+      "peer": true,
+      "dependencies": {
+        "property-graph": "^1.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/donmccurdy"
+      }
+    },
+    "node_modules/@gltf-transform/extensions": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@gltf-transform/extensions/-/extensions-3.10.1.tgz",
+      "integrity": "sha512-xUS9K5fMvW2dkYN4VzxHg2aBPG54M2WqgIjQ7RoSyybMoD7DsPUyMyVgRja+aiTVt/Bxza2ve7zJBD3+tN+aTA==",
+      "peer": true,
+      "dependencies": {
+        "@gltf-transform/core": "^3.10.1",
+        "ktx-parse": "^0.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/donmccurdy"
+      }
+    },
+    "node_modules/@gltf-transform/functions": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@gltf-transform/functions/-/functions-3.10.1.tgz",
+      "integrity": "sha512-Zs6+1qvTD9w40R5qv70E4wJXXacNQ46ZxjKKW6dmfGIyjT8bsSJmV3Tdj+WJ8R6lWXXZ8e2p3ZvAUfPDEG73bQ==",
+      "peer": true,
+      "dependencies": {
+        "@gltf-transform/core": "^3.10.1",
+        "@gltf-transform/extensions": "^3.10.1",
+        "ktx-parse": "^0.6.0",
+        "ndarray": "^1.0.19",
+        "ndarray-lanczos": "^0.3.0",
+        "ndarray-pixels": "^3.0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/donmccurdy"
+      }
+    },
    "node_modules/@headlessui/tailwindcss": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.1.tgz",
@ -3975,6 +4018,12 @@
        "marked": "*"
      }
    },
+    "node_modules/@types/ndarray": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/@types/ndarray/-/ndarray-1.0.14.tgz",
+      "integrity": "sha512-oANmFZMnFQvb219SSBIhI1Ih/r4CvHDOzkWyJS/XRqkMrGH5/kaPSA1hQhdIBzouaE+5KpE/f5ylI9cujmckQg==",
+      "peer": true
+    },
    "node_modules/@types/node": {
      "version": "20.14.0",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.0.tgz",
@ -6110,6 +6159,7 @@
      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.1.tgz",
      "integrity": "sha512-W/Hfxc/6VehXlsgFtbB5B4xFcsCl+pAh30cYhoFyXErf6oGrwjh8SwiPAdHgpmWonKuYpZgGywN0SXt7dgsADA==",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "bare-events": "^2.0.0",
        "bare-path": "^2.0.0",
@ -6120,13 +6170,15 @@
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.3.0.tgz",
      "integrity": "sha512-oPb8oMM1xZbhRQBngTgpcQ5gXw6kjOaRsSWsIeNyRxGed2w/ARyP7ScBYpWR1qfX2E5rS3gBw6OWcSQo+s+kUg==",
-      "optional": true
+      "optional": true,
+      "peer": true
    },
    "node_modules/bare-path": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "bare-os": "^2.1.0"
      }
@ -6136,6 +6188,7 @@
      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.0.1.tgz",
      "integrity": "sha512-ubLyoDqPnUf5o0kSFp709HC0WRZuxVuh4pbte5eY95Xvx5bdvz07c2JFmXBfqqe60q+9PJ8S4X5GRvmcNSKMxg==",
      "optional": true,
+      "peer": true,
      "dependencies": {
        "streamx": "^2.18.0"
      }
@ -6190,7 +6243,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "optional": true,
      "dependencies": {
        "buffer": "^5.5.0",
        "inherits": "^2.0.4",
@ -6215,7 +6267,6 @@
          "url": "https://feross.org/support"
        }
      ],
-      "optional": true,
      "dependencies": {
        "base64-js": "^1.3.1",
        "ieee754": "^1.1.13"
@ -6225,7 +6276,6 @@
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "optional": true,
      "dependencies": {
        "inherits": "^2.0.3",
        "string_decoder": "^1.1.1",
@ -6713,7 +6763,6 @@
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "optional": true,
      "dependencies": {
        "color-convert": "^2.0.1",
        "color-string": "^1.9.0"
@ -6739,7 +6788,6 @@
      "version": "1.9.1",
      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "optional": true,
      "dependencies": {
        "color-name": "^1.0.0",
        "simple-swizzle": "^0.2.2"
@ -6757,7 +6805,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "optional": true,
      "dependencies": {
        "color-name": "~1.1.4"
      },
@ -6768,8 +6815,7 @@
    "node_modules/color/node_modules/color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "optional": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "node_modules/colord": {
      "version": "2.9.3",
@ -7147,6 +7193,15 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
+    "node_modules/cwise-compiler": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/cwise-compiler/-/cwise-compiler-1.1.3.tgz",
+      "integrity": "sha512-WXlK/m+Di8DMMcCjcWr4i+XzcQra9eCdXIJrgh4TUgh0pIS/yJduLxS9JgefsHJ/YVLdgPtXm9r62W92MvanEQ==",
+      "peer": true,
+      "dependencies": {
+        "uniq": "^1.0.0"
+      }
+    },
    "node_modules/db0": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/db0/-/db0-0.1.4.tgz",
@ -7188,7 +7243,6 @@
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "optional": true,
      "dependencies": {
        "mimic-response": "^3.1.0"
      },
@ -7208,7 +7262,6 @@
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "optional": true,
      "engines": {
        "node": ">=4.0.0"
      }
@ -7407,6 +7460,11 @@
      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ=="
    },
+    "node_modules/draco3dgltf": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3dgltf/-/draco3dgltf-1.5.7.tgz",
+      "integrity": "sha512-LeqcpmoHIyYUi0z70/H3tMkGj8QhqVxq6FJGPjlzR24BNkQ6jyMheMvFKJBI0dzGZrEOUyQEmZ8axM1xRrbRiw=="
+    },
    "node_modules/duplexer": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@ -7453,7 +7511,6 @@
      "version": "1.4.4",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "optional": true,
      "dependencies": {
        "once": "^1.4.0"
      }
@ -7670,7 +7727,6 @@
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
-      "optional": true,
      "engines": {
        "node": ">=6"
      }
@ -7848,8 +7904,7 @@
    "node_modules/fs-constants": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "optional": true
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
    },
    "node_modules/fs-extra": {
      "version": "11.2.0",
@ -8007,8 +8062,7 @@
    "node_modules/github-from-package": {
      "version": "0.0.0",
      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
-      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
-      "optional": true
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="
    },
    "node_modules/glob": {
      "version": "8.1.0",
@ -8486,6 +8540,12 @@
        "url": "https://opencollective.com/ioredis"
      }
    },
+    "node_modules/iota-array": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
+      "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==",
+      "peer": true
+    },
    "node_modules/ip-address": {
      "version": "9.0.5",
      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
@ -8536,8 +8596,7 @@
    "node_modules/is-arrayish": {
      "version": "0.3.2",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "optional": true
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
@ -8550,6 +8609,12 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "peer": true
+    },
    "node_modules/is-builtin-module": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
@ -9085,6 +9150,12 @@
      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ=="
    },
+    "node_modules/ktx-parse": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.6.0.tgz",
+      "integrity": "sha512-hYOJUI86N9+YPm0M3t8hVzW9t5FnFFibRalZCrqHs/qM2eNziqQzBtAaF0ErgkXm8F+5uE8CjPUYr32vWlXLkQ==",
+      "peer": true
+    },
    "node_modules/launch-editor": {
      "version": "2.6.1",
      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
@ -9451,7 +9522,6 @@
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "optional": true,
      "engines": {
        "node": ">=10"
      },
@ -9674,8 +9744,7 @@
    "node_modules/mkdirp-classic": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
-      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
-      "optional": true
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
    },
    "node_modules/mlly": {
      "version": "1.7.0",
@ -9739,8 +9808,48 @@
    "node_modules/napi-build-utils": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
-      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
-      "optional": true
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
+    },
+    "node_modules/ndarray": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/ndarray/-/ndarray-1.0.19.tgz",
+      "integrity": "sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==",
+      "peer": true,
+      "dependencies": {
+        "iota-array": "^1.0.0",
+        "is-buffer": "^1.0.2"
+      }
+    },
+    "node_modules/ndarray-lanczos": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/ndarray-lanczos/-/ndarray-lanczos-0.3.0.tgz",
+      "integrity": "sha512-5kBmmG3Zvyj77qxIAC4QFLKuYdDIBJwCG+DukT6jQHNa1Ft74/hPH1z5mbQXeHBt8yvGPBGVrr3wEOdJPYYZYg==",
+      "peer": true,
+      "dependencies": {
+        "@types/ndarray": "^1.0.11",
+        "ndarray": "^1.0.19"
+      }
+    },
+    "node_modules/ndarray-ops": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/ndarray-ops/-/ndarray-ops-1.2.2.tgz",
+      "integrity": "sha512-BppWAFRjMYF7N/r6Ie51q6D4fs0iiGmeXIACKY66fLpnwIui3Wc3CXiD/30mgLbDjPpSLrsqcp3Z62+IcHZsDw==",
+      "peer": true,
+      "dependencies": {
+        "cwise-compiler": "^1.0.0"
+      }
+    },
+    "node_modules/ndarray-pixels": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/ndarray-pixels/-/ndarray-pixels-3.1.0.tgz",
+      "integrity": "sha512-icw7L/kbxlHVoBgFWc0fCl1sYcatYSoZrAudD6KiQ1WXy84hRXIfqel5CLkh/SeLhb02Q2NW1ud9lE5G84V0zQ==",
+      "peer": true,
+      "dependencies": {
+        "@types/ndarray": "^1.0.11",
+        "ndarray": "^1.0.19",
+        "ndarray-ops": "^1.2.2",
+        "sharp": "^0.32.6"
+      }
    },
    "node_modules/negotiator": {
      "version": "0.6.3",
@ -9860,7 +9969,6 @@
      "version": "3.63.0",
      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.63.0.tgz",
      "integrity": "sha512-vAszCsOUrUxjGAmdnM/pq7gUgie0IRteCQMX6d4A534fQCR93EJU5qgzBvU6EkFfK27s0T3HEV3BOyJIr7OMYw==",
-      "optional": true,
      "dependencies": {
        "semver": "^7.3.5"
      },
@ -11399,7 +11507,6 @@
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
      "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
-      "optional": true,
      "dependencies": {
        "detect-libc": "^2.0.0",
        "expand-template": "^2.0.3",
@ -11424,14 +11531,12 @@
    "node_modules/prebuild-install/node_modules/chownr": {
      "version": "1.1.4",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "optional": true
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
    },
    "node_modules/prebuild-install/node_modules/readable-stream": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "optional": true,
      "dependencies": {
        "inherits": "^2.0.3",
        "string_decoder": "^1.1.1",
@ -11445,7 +11550,6 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
-      "optional": true,
      "dependencies": {
        "chownr": "^1.1.1",
        "mkdirp-classic": "^0.5.2",
@ -11457,7 +11561,6 @@
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-      "optional": true,
      "dependencies": {
        "bl": "^4.0.3",
        "end-of-stream": "^1.4.1",
@ -11530,6 +11633,12 @@
        "node": ">= 6"
      }
    },
+    "node_modules/property-graph": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/property-graph/-/property-graph-1.3.1.tgz",
+      "integrity": "sha512-gei3N/bHWJdCItJ4blnlGWd9iauEZI+JZYj/A0D177XSI01+QhiJGAVscYBhe3Yywow3A2QJzVtsO2P+UgrRRQ==",
+      "peer": true
+    },
    "node_modules/protocols": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/protocols/-/protocols-2.0.1.tgz",
@ -11539,7 +11648,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "optional": true,
      "dependencies": {
        "end-of-stream": "^1.1.0",
        "once": "^1.3.1"
@ -11608,7 +11716,6 @@
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "optional": true,
      "dependencies": {
        "deep-extend": "^0.6.0",
        "ini": "~1.3.0",
@ -11622,8 +11729,7 @@
    "node_modules/rc/node_modules/ini": {
      "version": "1.3.8",
      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "optional": true
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
    },
    "node_modules/rc9": {
      "version": "2.1.2",
@ -12245,7 +12351,6 @@
      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
      "hasInstallScript": true,
-      "optional": true,
      "dependencies": {
        "color": "^4.2.3",
        "detect-libc": "^2.0.2",
@ -12266,8 +12371,7 @@
    "node_modules/sharp/node_modules/node-addon-api": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
-      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
-      "optional": true
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
@ -12342,8 +12446,7 @@
          "type": "consulting",
          "url": "https://feross.org/support"
        }
-      ],
-      "optional": true
+      ]
    },
    "node_modules/simple-get": {
      "version": "4.0.1",
@ -12363,7 +12466,6 @@
          "url": "https://feross.org/support"
        }
      ],
-      "optional": true,
      "dependencies": {
        "decompress-response": "^6.0.0",
        "once": "^1.3.1",
@ -12388,7 +12490,6 @@
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "optional": true,
      "dependencies": {
        "is-arrayish": "^0.3.1"
      }
@ -12695,7 +12796,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-      "optional": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -13044,7 +13144,6 @@
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
      "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
-      "optional": true,
      "dependencies": {
        "pump": "^3.0.0",
        "tar-stream": "^3.1.5"
@ -13337,7 +13436,6 @@
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
-      "optional": true,
      "dependencies": {
        "safe-buffer": "^5.0.1"
      },
@ -13512,6 +13610,12 @@
        "unplugin": "^1.10.1"
      }
    },
+    "node_modules/uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==",
+      "peer": true
+    },
    "node_modules/unique-filename": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-3.0.0.tgz",
@ -14089,6 +14193,26 @@
        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
      }
    },
+    "node_modules/vite-plugin-gltf": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-gltf/-/vite-plugin-gltf-4.0.0.tgz",
+      "integrity": "sha512-8herpc1ybREBGrgatD30t3xzc5ue2+dJYwmvdHBeBU0R/N03ke65UGzBUyyXGgQ8wWfkQXfwE27y8uzf0/rqpg==",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.4",
+        "draco3dgltf": "^1.5.6",
+        "meshoptimizer": "^0.19.0"
+      },
+      "peerDependencies": {
+        "@gltf-transform/core": "3.x",
+        "@gltf-transform/extensions": "3.x",
+        "@gltf-transform/functions": "3.x"
+      }
+    },
+    "node_modules/vite-plugin-gltf/node_modules/meshoptimizer": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.19.0.tgz",
+      "integrity": "sha512-58qz5Qc/6Geu8Ib3bBWERE5R7pM5ErrJVo16fAtu6ryxVaE3VAtM/u2vurDxaq8AGZ3yWxuM/DnylTga5a4XCQ=="
+    },
    "node_modules/vite-plugin-inspect": {
      "version": "0.8.4",
      "resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.4.tgz",
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "sass": "^1.77.4",
    "tailwindcss": "^3.4.3",
    "three": "^0.165.0",
+    "vite-plugin-gltf": "^4.0.0",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
--- a/pages/index.vue
+++ b/pages/index.vue
@ -54,7 +54,8 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
                    </div>
                </div>
                <div class="siteblock-image">
-                    <NuxtImg :src="[apiBase, about?.image].join('/')" alt="разные цвета забора" title="" />
+                    <NuxtImg :src="[apiBase, about?.image].join('/')" alt="разные цвета забора" title=""
+                        format="webp" />
                </div>
                <div class="feature">
                    <template v-for="item in advData">
@ -67,15 +68,14 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
        </div>
        <div class="siteblock siteblock_imgbg bg-slate-500"
            :style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" v-if="reviews">
-            <NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" />
+            <NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" format="webp" loading="lazy" />
        </div>
        <div class="siteblock bg-white" :id="reviews?.slug" v-if="reviews">
            <div class="container">
                <template v-for="item in reviewsData?.slice(0, 3)">
                    <div class="review">
                        <div class="review-image">
-                            <NuxtImg :src="[apiBase, item.image].join('/')" :alt="item.text" title="" />
-
+                            <NuxtImg :src="[apiBase, item.image].join('/')" :alt="item.text" title="" format="webp" loading="lazy" />
                        </div>
                        <div class="review-content">
                            {{ item.comment }}
@ -100,12 +100,12 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
        <div class="siteblock siteblock_imgbg bg-slate-500"
            :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
            <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" v-if="delivery"
-                alt="коричневый забор" title="" />
+                alt="коричневый забор" title="" format="webp" loading="lazy" />
        </div>
        <div class="siteblock siteblock_calc bg-white">
-            <CalcValues />
+            <LazyCalcValues />
            <Suspense>
-                <CalcModels />
+                <LazyCalcModels />
            </Suspense>
        </div>
        <div class="siteblock bg-white" :id="delivery?.slug" v-if="deliveryText">