new exr loader

app.vue

@@ -1,10 +1,5 @@
 <script setup lang="ts">
 import '@/assets/main.scss'
-useHead({
-  htmlAttrs: {
-    lang: 'ru',
-  }
-})
 </script>
 <template>
   <div>

assets/main.scss

@@ -11,7 +11,7 @@ html {
 }
 
 body {
-    @apply bg-primary-500 select-none min-w-80;
+    @apply select-none min-w-80;
 }
 
 .container {

components/calcModels.vue

@@ -40,7 +40,7 @@ const loadAll = async () => {
     const pbrTexture = await useTexture({
         map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
         displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
-        roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
+        // roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
         normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
         aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
     })
@@ -62,6 +62,7 @@ const loadAll = async () => {
         map: pbrTexture.map,
         displacementMap: pbrTexture.displacementMap,
         normalMap: pbrTexture.normalMap,
+        aoMap: pbrTexture.aoMap,
     })
 }
 const camera = ref("camera")

components/model/parametric.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import {
+    EquirectangularReflectionMapping,
     ReinhardToneMapping, PCFSoftShadowMap,
     PMREMGenerator, Euler,
     MeshStandardMaterial,
     Color,
 } from 'three';
+import { GainMapLoader, } from '@monogrid/gainmap-js'
 import { EXRLoader } from 'three/examples/jsm/Addons.js';
 import { useGLTF, } from '@tresjs/cientos'
 import { getColorHexFromRal, type ralTypes } from '../ral';
@@ -65,18 +67,23 @@ watch([section_count, extra_section], () => {
 
 const pmremGenerator = new PMREMGenerator(renderer.value);
 pmremGenerator.compileEquirectangularShader();
-onMounted(() => {
+onMounted(async () => {
-    new EXRLoader()
+    const loader = new GainMapLoader(renderer.value)
-        .load('/hdrmaps/kloppenheim_06_4k.exr', function (texture) {
+    const result = await loader.loadAsync([
-            const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
+        '/hdrmaps/kloppenheim_06_4k.webp',
-            const exrBackground = exrCubeRenderTarget.texture;
+        '/hdrmaps/kloppenheim_06_4k-gainmap.webp', 
-            const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+        '/hdrmaps/kloppenheim_06_4k.json', 
+    ])
+    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    const exrBackground = exrCubeRenderTarget.texture;
+    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
-            scene.value.environment = newEnvMap
+    scene.value.environment = newEnvMap
-            scene.value.background = exrBackground
+    scene.value.background = exrBackground
-            scene.value.backgroundRotation = new Euler(0, 5, 0)
+    scene.value.backgroundRotation = new Euler(0, 5, 0)
-            texture.dispose();
+    scene.value.backgroundMapping = EquirectangularReflectionMapping
-        });
+
+    result.renderTarget.texture.dispose();
 })
 
 </script>
@@ -84,8 +91,7 @@ onMounted(() => {
     <TresGroup name="base">
         <template v-for="i in (section_count + ~~(!!extra_section))">
             <template v-if="i <= max_size">
-                <ModelFence :index="i"
+                <ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
-                    :models="{ top, fence, fastening, lamelle }" />
             </template>
         </template>
     </TresGroup>

nuxt.config.ts

@@ -1,8 +1,48 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import gltf from "vite-plugin-gltf"; // (b) Vite
+import fs from 'fs/promises'
+import chalk from 'chalk';
+import imagemin from 'imagemin';
+import imageminPngquant from 'imagemin-pngquant';
 
-import { draco } from "@gltf-transform/functions";
 export default defineNuxtConfig({
+  hooks: {
+    'nitro:build:public-assets': async (nitro) => {
+      console.log(`😈 custom hook imagemin in ${nitro.options.output.publicDir}`)
+      const output_path = nitro.options.output.publicDir
+      const filelist = await fs.readdir(output_path, { recursive: true });
+      for (let index = 0; index < filelist.length; index++) {
+        const element = filelist[index];
+        const elementFile = await fs.lstat(`${output_path}/${element}`)
+        if (element.startsWith('_nuxt')) continue
+        if (elementFile.isFile()) {
+          if (element.endsWith('.png')) {
+            const dest = `${output_path}/${element.split('/').slice(0, -1).join('/')}`
+            const res = await imagemin([`${output_path}/${element}`], {
+              destination: dest,
+              plugins: [
+                imageminPngquant({
+                  quality: [0.6, 0.8]
+                })
+              ]
+            })
+            if (res.length) {
+              console.log(chalk.gray(`  compress PNG ${output_path}/${element}`))
+            }
+          }
+        }
+      }
+    }
+  },
+  app: {
+    pageTransition: { name: 'page', mode: 'out-in' },
+    head: {
+      viewport: 'width=device-width, initial-scale=1',
+      htmlAttrs: {
+        lang: 'ru',
+      },
+    },
+  },
+  ssr: true,
   devtools: { enabled: true },
   modules: [
     '@nuxtjs/tailwindcss',
@@ -23,13 +63,20 @@ export default defineNuxtConfig({
     '/index.html': { redirect: '/' },
     '/index.php': { redirect: '/' },
   },
+  nitro: {
+    compressPublicAssets: {
+      brotli: true,
+      gzip: true
+    },
+    prerender: {
+      crawlLinks: true
+    },
+  },
   vite: {
     assetsInclude: ['**/*.glb', '**/*.gltf'],
-    plugins: [
+    build: {
-      gltf({
+      minify: 'esbuild'
-        transforms: [draco()],
+    },
-      }),
-    ],
   },
   robots: {
     rules: {

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@monogrid/gainmap-js": "^3.0.5",
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
@@ -18,6 +19,9 @@
     "@tresjs/core": "^4.0.2",
     "@tresjs/nuxt": "^2.1.2",
     "@types/marked": "^6.0.0",
+    "draco3d": "^1.5.7",
+    "imagemin": "^9.0.0",
+    "imagemin-pngquant": "^10.0.0",
     "marked": "^12.0.2",
     "nuxt": "^3.11.2",
     "nuxt-anchorscroll": "^1.0.3",
@@ -26,7 +30,6 @@
     "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"
   },

public/hdrmaps/kloppenheim_06_4k.json

@@ -0,0 +1,29 @@
+{
+  "gainMapMax": [
+    6.139551352398794,
+    6.139551352398794,
+    6.139551352398794
+  ],
+  "gainMapMin": [
+    0,
+    0,
+    0
+  ],
+  "gamma": [
+    1,
+    1,
+    1
+  ],
+  "hdrCapacityMax": 6.139551352398794,
+  "hdrCapacityMin": 0,
+  "offsetHdr": [
+    0.015625,
+    0.015625,
+    0.015625
+  ],
+  "offsetSdr": [
+    0.015625,
+    0.015625,
+    0.015625
+  ]
+}