From fa6124dcd3744d9fa5f91ad6024b96ccaad5b3dd Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 15:50:10 +0300
Subject: [PATCH] pixel ratio

---
 front/src/components/Promo/env.vue            |  9 +++-
 front/src/components/Promo/load_models.vue    |  4 ++
 front/src/components/Promo/main.vue           |  2 +-
 front/src/components/Promo/post_pocessing.vue | 45 ++++++++++---------
 4 files changed, 35 insertions(+), 25 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index 90d9ebf..20548a9 100644
--- a/front/src/components/Promo/env.vue
+++ b/front/src/components/Promo/env.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 
-import { EquirectangularReflectionMapping, ReinhardToneMapping } from 'three';
+import { ACESFilmicToneMapping, EquirectangularReflectionMapping, ReinhardToneMapping, SRGBColorSpace } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
 import { useTresContext } from '@tresjs/core';
 
@@ -26,7 +26,12 @@ const loadEnv = async () => {
     // scene.value.backgroundBlurriness = 0.15
     result.renderTarget.texture.dispose();
 }
-renderer.value.toneMapping = ReinhardToneMapping
+// renderer.value.toneMapping = ReinhardToneMapping
+renderer.value.outputColorSpace = SRGBColorSpace;
+renderer.value.toneMapping = ACESFilmicToneMapping;
+renderer.value.toneMappingExposure = 1;
+
+renderer.value.setPixelRatio(1.5)
 onMounted(async () => {
     loadEnv()
 })
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index c5ee34c..afd82de 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -72,6 +72,10 @@ const loadModels = async () => {
         item.modelFile = loaded_scene
         item.name = element.name
 
+        if(!element.is_enabled) {
+            item.modelFile.visible = false
+        }
+
         models.value.push(item)
 
         const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 563dfec..d065f37 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -59,7 +59,7 @@ const clearColor = 'steelBlue'
 <template>
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
-            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="clearColor">
+            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="clearColor" :logarithmicDepthBuffer="true">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
diff --git a/front/src/components/Promo/post_pocessing.vue b/front/src/components/Promo/post_pocessing.vue
index 6b8ef1c..876aa78 100644
--- a/front/src/components/Promo/post_pocessing.vue
+++ b/front/src/components/Promo/post_pocessing.vue
@@ -9,6 +9,7 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 import { useTresContext, useLoop } from '@tresjs/core';
 import { watch } from 'vue';
 import { Color, Fog, FogExp2 } from 'three';
+import { GammaCorrectionShader, TAARenderPass } from 'three/examples/jsm/Addons.js';
 
 const { renderer, camera, scene } = useTresContext()
 
@@ -20,37 +21,37 @@ const k = { start: 0.5, end: 3 }
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
 
-    const bokehPass = new BokehPass(scene.value, camera.value, {
-        focus: props.tiltShift.focus,
-        aperture: (props.tiltShift.aperture) * 0.00001,
-        maxblur: (props.tiltShift.maxblur) * 0.01
-    });
-
+    // const bokehPass = new BokehPass(scene.value, camera.value, {
+    //     focus: props.tiltShift.focus,
+    //     aperture: (props.tiltShift.aperture) * 0.00001,
+    //     maxblur: (props.tiltShift.maxblur) * 0.01
+    // });
     const outputPass = new OutputPass();
     composer.addPass(renderPass);
-    composer.addPass(bokehPass);
-    composer.addPass(outputPass);
+    // composer.addPass(outputPass);
+
     scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
 }
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    composer.render()
+    // composer.render()
 })
 watch(props.tiltShift, () => {
     if (camera.value) {
-        const args = {
-            focus: props.tiltShift.focus,
-            aperture: props.tiltShift.aperture * 0.00001,
-            maxblur: props.tiltShift.maxblur * 0.01
-        }
-        const bokehPass = new BokehPass(scene.value, camera.value, args);
-        composer.passes = []
-        const renderPass = new RenderPass(scene.value, camera.value);
-        const outputPass = new OutputPass();
-        composer.addPass(renderPass);
-        composer.addPass(bokehPass);
-        composer.addPass(outputPass);
-
+        // const args = {
+        //     focus: props.tiltShift.focus,
+        //     aperture: props.tiltShift.aperture * 0.00001,
+        //     maxblur: props.tiltShift.maxblur * 0.01
+        // }
+        // const bokehPass = new BokehPass(scene.value, camera.value, args);
+        // composer.passes = []
+        // const renderPass = new RenderPass(scene.value, camera.value);
+        // const outputPass = new OutputPass();
+        // composer.addPass(renderPass);
+        // composer.addPass(bokehPass);
+        // composer.addPass(outputPass);
+        const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
+        composer.addPass(gammaCorrectionPass);
         scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
     }
 }, { deep: true })