From 34029ba1b4ea88d6d00be35d9d2ee132dc23dda6 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 13:43:34 +0300
Subject: [PATCH 01/18] remove post processing

---
 front/public/download.png                     | Bin 0 -> 4554 bytes
 front/public/ground_displacement.jpg          | Bin 0 -> 8703 bytes
 front/public/picture_02.jpg                   | Bin 0 -> 7120 bytes
 front/src/components/Promo/load_models.vue    |  17 +++++++++++++++--
 front/src/components/Promo/main.vue           |  11 ++++-------
 front/src/components/Promo/post_pocessing.vue |   8 +++-----
 6 files changed, 22 insertions(+), 14 deletions(-)
 create mode 100644 front/public/download.png
 create mode 100644 front/public/ground_displacement.jpg
 create mode 100644 front/public/picture_02.jpg

diff --git a/front/public/download.png b/front/public/download.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f806d85613d23a89d36b51911432aa9f8fd9647
GIT binary patch
literal 4554
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

literal 0
HcmV?d00001

diff --git a/front/public/ground_displacement.jpg b/front/public/ground_displacement.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a99db5fa38723f906d2b469b329f92a78ccef397
GIT binary patch
literal 8703
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
T4m(iz`;oPpI$<ZY*&h5qk&i=^

literal 0
HcmV?d00001

diff --git a/front/public/picture_02.jpg b/front/public/picture_02.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..af42be28ec912f6b2f5dbb1324062ded7851031a
GIT binary patch
literal 7120
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

literal 0
HcmV?d00001

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 8c2ea1f..c1849af 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -5,7 +5,7 @@ import {
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
-import { useTresContext, useSeek, useRenderLoop } from '@tresjs/core';
+import { useTresContext, useSeek, useRenderLoop, useTexture } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -40,7 +40,7 @@ const loadModels = async () => {
     envVars.hdr_json = raw_data.hdr_json ? `${IMAGE_URL}/${raw_data.hdr_json}` : undefined
     envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
 
-    tiltShift.focus = raw_data.max_distance * 0.33
+    tiltShift.focus = raw_data.min_distance * 0.75
     tiltShift.aperture = 10
     tiltShift.maxblur = 1
 
@@ -183,6 +183,15 @@ const clickEvent = (event: MouseEvent) => {
     }
 }
 
+const groundTexture = await useTexture({
+    displacementMap: '/ground_displacement.jpg',
+})
+const ground = reactive({
+    color: props.clearColor,
+    displacementMap: groundTexture.displacementMap,
+    displacementScale: 50,
+    roughness: 100
+})
 watch(() => sidebar_scene.list, () => {
     sidebar_scene.list.forEach(element => {
         const el = seekByName(scene.value, element.name)
@@ -205,5 +214,9 @@ watch(() => sidebar_scene.list, () => {
         <template v-for="(item, i) in clickable_items">
             <TresMesh v-bind="item" :ref="clickable_refs[i]" />
         </template>
+        <TresMesh :position-y="-0.25 * ground.displacementScale" :rotate-x="-Math.PI / 2" receive-shadow>
+            <TresCircleGeometry :args="[tiltShift.focus * 100, tiltShift.focus * 100]" />
+            <TresMeshStandardMaterial v-bind="ground" />
+        </TresMesh>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 40dc55f..65c8f65 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
 import { Vector3 } from 'three';
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useTexture } from '@tresjs/core';
 import { OrbitControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
@@ -63,13 +63,10 @@ const clearColor = 'steelBlue'
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" :clear-color="clearColor" />
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
+                        :clear-color="clearColor" />
                 </Suspense>
-                <TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow>
-                    <TresPlaneGeometry :args="[2000, 2000]" />
-                    <!-- <TresShadowMaterial :opacity="0.2" /> -->
-                    <TresMeshStandardMaterial :color="clearColor" />
-                </TresMesh>
+
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">
diff --git a/front/src/components/Promo/post_pocessing.vue b/front/src/components/Promo/post_pocessing.vue
index a5d5c45..3427db7 100644
--- a/front/src/components/Promo/post_pocessing.vue
+++ b/front/src/components/Promo/post_pocessing.vue
@@ -8,14 +8,14 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 import { useTresContext, useLoop } from '@tresjs/core';
 import { watch } from 'vue';
-import { Fog, FogExp2 } from 'three';
+import { Color, Fog, FogExp2 } from 'three';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
 const props = defineProps(['tiltShift', 'clearColor'])
-const k = { start: 0.25, end: 3 }
+const k = { start: 0.75, end: 3 }
 
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
@@ -30,13 +30,11 @@ if (camera.value) {
     composer.addPass(renderPass);
     composer.addPass(bokehPass);
     composer.addPass(outputPass);
-
-    // scene.value.fog = new FogExp2(0xff0000, 0.005)
     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) {
-- 
2.40.1


From 8f92163cf08b7a6b52d4c3ca32520612b3f96938 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 13:47:44 +0300
Subject: [PATCH 02/18] polar angle

---
 front/src/components/Promo/load_models.vue | 5 +++--
 front/src/components/Promo/main.vue        | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index c1849af..28222f8 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -190,7 +190,8 @@ const ground = reactive({
     color: props.clearColor,
     displacementMap: groundTexture.displacementMap,
     displacementScale: 50,
-    roughness: 100
+    roughness: 100,
+    side: DoubleSide
 })
 watch(() => sidebar_scene.list, () => {
     sidebar_scene.list.forEach(element => {
@@ -214,7 +215,7 @@ watch(() => sidebar_scene.list, () => {
         <template v-for="(item, i) in clickable_items">
             <TresMesh v-bind="item" :ref="clickable_refs[i]" />
         </template>
-        <TresMesh :position-y="-0.25 * ground.displacementScale" :rotate-x="-Math.PI / 2" receive-shadow>
+        <TresMesh :position-y="-0.33 * ground.displacementScale" :rotate-x="-Math.PI / 2" receive-shadow>
             <TresCircleGeometry :args="[tiltShift.focus * 100, tiltShift.focus * 100]" />
             <TresMeshStandardMaterial v-bind="ground" />
         </TresMesh>
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 65c8f65..563dfec 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -35,7 +35,7 @@ const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
 const controlsState = reactive({
     enableDamping: false,
     maxPolarAngle: (Math.PI / 2) - 0.07,
-    minAzimuthAngle: (Math.PI / 2) - 0.07,
+    minAzimuthAngle: (Math.PI / 2) - 0.20,
 })
 const models_loading = ref(true)
 const set_model_load_status = (status: boolean) => {
-- 
2.40.1


From 2406425c0215dda7d71f2aa2e656e4e86711ae67 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 14:34:44 +0300
Subject: [PATCH 03/18] ground size

---
 front/src/components/Promo/load_models.vue    | 46 ++++++++++++-------
 front/src/components/Promo/post_pocessing.vue |  2 +-
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 28222f8..c7a8b7b 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import {
-    Box3, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
+    Box3, CircleGeometry, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
+    MeshStandardMaterial,
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
@@ -28,6 +29,18 @@ const { seekByName, seekAllByName } = useSeek()
 const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string }
 const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: number }
 
+
+const groundTexture = await useTexture({
+    displacementMap: '/ground_displacement.jpg',
+})
+const ground = reactive({
+    color: props.clearColor,
+    displacementMap: groundTexture.displacementMap,
+    displacementScale: 50,
+    roughness: 100,
+    side: DoubleSide
+})
+
 // renderer.value.capabilities.maxTextures = 4
 // renderer.value.capabilities.maxTextureSize = 512
 // renderer.value.capabilities.precision = 'lowp'
@@ -41,7 +54,7 @@ const loadModels = async () => {
     envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
 
     tiltShift.focus = raw_data.min_distance * 0.75
-    tiltShift.aperture = 10
+    tiltShift.aperture = 3
     tiltShift.maxblur = 1
 
     const data = raw_data.elements
@@ -72,6 +85,21 @@ const loadModels = async () => {
         const clickable_areas = await res.json()
         clickable.value.push(...clickable_areas)
     }
+    const ground = new Mesh(
+        new CircleGeometry(tiltShift.focus * 10, tiltShift.focus * 10),
+        new MeshStandardMaterial({
+            color: props.clearColor,
+            displacementMap: groundTexture.displacementMap,
+            displacementScale: tiltShift.focus,
+            roughness: 100,
+            side: DoubleSide
+        })
+    )
+    ground.position.y = -0.33 * tiltShift.focus
+    ground.rotateX(-Math.PI / 2)
+    ground.name = "ground"
+    models.value.push({ name: 'ground', modelFile: ground })
+
     sidebar_scene.setData(sidebar_items)
 
     for (let index = 0; index < clickable.value.length; index++) {
@@ -183,16 +211,6 @@ const clickEvent = (event: MouseEvent) => {
     }
 }
 
-const groundTexture = await useTexture({
-    displacementMap: '/ground_displacement.jpg',
-})
-const ground = reactive({
-    color: props.clearColor,
-    displacementMap: groundTexture.displacementMap,
-    displacementScale: 50,
-    roughness: 100,
-    side: DoubleSide
-})
 watch(() => sidebar_scene.list, () => {
     sidebar_scene.list.forEach(element => {
         const el = seekByName(scene.value, element.name)
@@ -215,9 +233,5 @@ watch(() => sidebar_scene.list, () => {
         <template v-for="(item, i) in clickable_items">
             <TresMesh v-bind="item" :ref="clickable_refs[i]" />
         </template>
-        <TresMesh :position-y="-0.33 * ground.displacementScale" :rotate-x="-Math.PI / 2" receive-shadow>
-            <TresCircleGeometry :args="[tiltShift.focus * 100, tiltShift.focus * 100]" />
-            <TresMeshStandardMaterial v-bind="ground" />
-        </TresMesh>
     </TresGroup>
 </template>
\ No newline at end of file
diff --git a/front/src/components/Promo/post_pocessing.vue b/front/src/components/Promo/post_pocessing.vue
index 3427db7..5d07ddd 100644
--- a/front/src/components/Promo/post_pocessing.vue
+++ b/front/src/components/Promo/post_pocessing.vue
@@ -34,7 +34,7 @@ if (camera.value) {
 }
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    // composer.render()
+    composer.render()
 })
 watch(props.tiltShift, () => {
     if (camera.value) {
-- 
2.40.1


From 4f6531a7afc08e992991d9d7ef2b95f2d4200b22 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 15:08:26 +0300
Subject: [PATCH 04/18] fog

---
 front/src/components/Promo/load_models.vue    | 15 ++++-----------
 front/src/components/Promo/post_pocessing.vue |  2 +-
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index c7a8b7b..c5ee34c 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -33,13 +33,6 @@ const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: nu
 const groundTexture = await useTexture({
     displacementMap: '/ground_displacement.jpg',
 })
-const ground = reactive({
-    color: props.clearColor,
-    displacementMap: groundTexture.displacementMap,
-    displacementScale: 50,
-    roughness: 100,
-    side: DoubleSide
-})
 
 // renderer.value.capabilities.maxTextures = 4
 // renderer.value.capabilities.maxTextureSize = 512
@@ -53,9 +46,9 @@ const loadModels = async () => {
     envVars.hdr_json = raw_data.hdr_json ? `${IMAGE_URL}/${raw_data.hdr_json}` : undefined
     envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
 
-    tiltShift.focus = raw_data.min_distance * 0.75
-    tiltShift.aperture = 3
-    tiltShift.maxblur = 1
+    tiltShift.focus = raw_data.min_distance * 1
+    tiltShift.aperture = 0.1
+    tiltShift.maxblur = 5
 
     const data = raw_data.elements
     if (!controls.value) return;
@@ -144,7 +137,7 @@ const loadModels = async () => {
         box.getSize(box_size)
         props.loaded_pan(
             new Vector3(box_size.x * 0.5, box_size.y * 0.5, box_size.z * 0.5),
-            new Vector3(box_size.x * -0.5, box_size.y * -0.5, box_size.z * -0.5),
+            new Vector3(box_size.x * -0.5, box_size.y * -0.25, box_size.z * -0.5),
         )
     }
 
diff --git a/front/src/components/Promo/post_pocessing.vue b/front/src/components/Promo/post_pocessing.vue
index 5d07ddd..6b8ef1c 100644
--- a/front/src/components/Promo/post_pocessing.vue
+++ b/front/src/components/Promo/post_pocessing.vue
@@ -15,7 +15,7 @@ const { renderer, camera, scene } = useTresContext()
 const composer = new EffectComposer(renderer.value);
 
 const props = defineProps(['tiltShift', 'clearColor'])
-const k = { start: 0.75, end: 3 }
+const k = { start: 0.5, end: 3 }
 
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
-- 
2.40.1


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 05/18] 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 })
-- 
2.40.1


From 1d8739d7d4ac2b012193c1c362570476ef88ecd1 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 16:53:17 +0300
Subject: [PATCH 06/18] clear color

---
 front/src/components/Promo/env.vue            | 15 +++--
 front/src/components/Promo/load_models.vue    | 15 +++--
 front/src/components/Promo/main.vue           | 11 ++--
 front/src/components/Promo/post_pocessing.vue | 55 +++++++------------
 4 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index 20548a9..16e3c6f 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 { ACESFilmicToneMapping, EquirectangularReflectionMapping, ReinhardToneMapping, SRGBColorSpace } from 'three';
+import { ACESFilmicToneMapping, Color, EquirectangularReflectionMapping, ReinhardToneMapping, SRGBColorSpace } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
 import { useTresContext } from '@tresjs/core';
 
@@ -12,6 +12,12 @@ import hdr_webp from '../../assets/promo/hdr/hdr.webp'
 const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
 
 const { renderer, scene } = useTresContext()
+// renderer.value.toneMapping = ReinhardToneMapping
+renderer.value.outputColorSpace = SRGBColorSpace;
+renderer.value.toneMapping = ACESFilmicToneMapping;
+renderer.value.toneMappingExposure = 1.25;
+renderer.value.setPixelRatio(1.5)
+
 const loadEnv = async () => {
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([
@@ -21,17 +27,14 @@ const loadEnv = async () => {
     ])
 
     scene.value.environment = result.renderTarget.texture
+    scene.value.environmentIntensity = 2.5
+
     // scene.value.background = result.renderTarget.texture
     // scene.value.background.mapping = EquirectangularReflectionMapping
     // scene.value.backgroundBlurriness = 0.15
     result.renderTarget.texture.dispose();
 }
-// 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 afd82de..32f04a2 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -16,7 +16,7 @@ import { IMAGE_URL, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
 
-const props = defineProps(['source', 'loaded', 'loaded_pan', 'clearColor'])
+const props = defineProps(['source', 'loaded', 'loaded_pan'])
 
 const models = ref<model3DType[]>([])
 const clickable = ref<clickableAreaType[]>([])
@@ -24,7 +24,7 @@ const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
-const { controls, camera, scene, raycaster } = useTresContext()
+const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
 const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string }
 const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: number }
@@ -50,6 +50,11 @@ const loadModels = async () => {
     tiltShift.aperture = 0.1
     tiltShift.maxblur = 5
 
+    const c = new Color()
+    renderer.value.getClearColor(c)
+    // console.log(c, c.offsetHSL(0, 0, 10))
+    // renderer.value.setClearColor(c.offsetHSL(10, 10, 10))
+
     const data = raw_data.elements
     if (!controls.value) return;
 
@@ -72,7 +77,7 @@ const loadModels = async () => {
         item.modelFile = loaded_scene
         item.name = element.name
 
-        if(!element.is_enabled) {
+        if (!element.is_enabled) {
             item.modelFile.visible = false
         }
 
@@ -85,7 +90,7 @@ const loadModels = async () => {
     const ground = new Mesh(
         new CircleGeometry(tiltShift.focus * 10, tiltShift.focus * 10),
         new MeshStandardMaterial({
-            color: props.clearColor,
+            color: c.offsetHSL(0, 0, -0.5),
             displacementMap: groundTexture.displacementMap,
             displacementScale: tiltShift.focus,
             roughness: 100,
@@ -221,7 +226,7 @@ watch(() => sidebar_scene.list, () => {
 <template>
     <TresGroup name="loaded">
         <Env v-bind="envVars" />
-        <PostProcess :tiltShift="tiltShift" :clearColor="props.clearColor" />
+        <PostProcess :tiltShift="tiltShift" />
         <template v-for="item in models">
             <TresGroup :name="item.name">
                 <TresObject3D v-bind="item.modelFile.clone()" />
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index d065f37..4c48ed4 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -3,7 +3,7 @@ import { reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
-import { Vector3 } from 'three';
+import { Color, Vector3 } from 'three';
 import { TresCanvas, useTexture } from '@tresjs/core';
 import { OrbitControls } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
@@ -54,19 +54,18 @@ watch(() => route.params.target, () => {
     }
 }, { deep: true })
 
-const clearColor = 'steelBlue'
 </script>
 <template>
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
-            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="clearColor" :logarithmicDepthBuffer="true">
+            <TresCanvas window-size :alpha="false" power-preference="high-performance" clear-color="MediumSlateBlue"
+                :logarithmicDepthBuffer="true">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
-                        :clear-color="clearColor" />
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
                 </Suspense>
-
+                <TresAmbientLight />
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">
diff --git a/front/src/components/Promo/post_pocessing.vue b/front/src/components/Promo/post_pocessing.vue
index 876aa78..1314378 100644
--- a/front/src/components/Promo/post_pocessing.vue
+++ b/front/src/components/Promo/post_pocessing.vue
@@ -8,52 +8,39 @@ 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';
+import { Color, Fog } from 'three';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
-const props = defineProps(['tiltShift', 'clearColor'])
-const k = { start: 0.5, end: 3 }
+const props = defineProps(['tiltShift'])
+const k = { start: 0.5, end: 2.5 }
 
-if (camera.value) {
-    const renderPass = new RenderPass(scene.value, camera.value);
+const makePostProcess = () => {
+    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 outputPass = new OutputPass();
-    composer.addPass(renderPass);
-    // composer.addPass(outputPass);
+        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);
 
-    scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
+        const c = new Color()
+        renderer.value.getClearColor(c)
+        scene.value.fog = new Fog(c, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
+    }
 }
+makePostProcess()
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
     // 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 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 })
+watch(props.tiltShift, makePostProcess, { deep: true })
 </script>
 <template></template>
\ No newline at end of file
-- 
2.40.1


From 28a2a3ebff74ba59ea3c6022dd5ba27102dfe84b Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 26 Jul 2024 17:00:39 +0300
Subject: [PATCH 07/18] add env map correct

---
 front/src/components/Promo/env.vue  | 10 ++++++++--
 front/src/components/Promo/main.vue |  1 -
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index 16e3c6f..137a0b4 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 { ACESFilmicToneMapping, Color, EquirectangularReflectionMapping, ReinhardToneMapping, SRGBColorSpace } from 'three';
+import { ACESFilmicToneMapping, Color, EquirectangularReflectionMapping, PMREMGenerator, ReinhardToneMapping, SRGBColorSpace } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
 import { useTresContext } from '@tresjs/core';
 
@@ -25,8 +25,14 @@ const loadEnv = async () => {
         props.hdr_gainmap || hdr_gainmap,
         props.hdr_json || hdr_json,
     ])
+    const pmremGenerator = new PMREMGenerator(renderer.value);
+    pmremGenerator.compileEquirectangularShader();
 
-    scene.value.environment = result.renderTarget.texture
+    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    // const exrBackground = exrCubeRenderTarget.texture;
+    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+
+    scene.value.environment = newEnvMap
     scene.value.environmentIntensity = 2.5
 
     // scene.value.background = result.renderTarget.texture
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 4c48ed4..91662e0 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -65,7 +65,6 @@ watch(() => route.params.target, () => {
                 <Suspense>
                     <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
                 </Suspense>
-                <TresAmbientLight />
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">
-- 
2.40.1


From 5aeee4f291be1fbffe5857d67639a6faffe345c7 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 09:14:35 +0300
Subject: [PATCH 08/18] backend part environment

---
 .vscode/PythonImportHelper-v2-Completion.json | 89 +++++++++++++++++--
 back/back/settings.py                         |  1 +
 back/object/admin.py                          |  9 +-
 back/object/models.py                         | 34 ++++---
 back/object/serializers.py                    | 18 +++-
 poetry.lock                                   | 16 +++-
 pyproject.toml                                |  1 +
 7 files changed, 141 insertions(+), 27 deletions(-)

diff --git a/.vscode/PythonImportHelper-v2-Completion.json b/.vscode/PythonImportHelper-v2-Completion.json
index 5f77b9d..5980d5a 100644
--- a/.vscode/PythonImportHelper-v2-Completion.json
+++ b/.vscode/PythonImportHelper-v2-Completion.json
@@ -168,6 +168,30 @@
         "detail": "django.db",
         "documentation": {}
     },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "models",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
+    {
+        "label": "migrations",
+        "importPath": "django.db",
+        "description": "django.db",
+        "isExtraImport": true,
+        "detail": "django.db",
+        "documentation": {}
+    },
     {
         "label": "models",
         "importPath": "django.db",
@@ -594,6 +618,23 @@
         "detail": "object.models",
         "documentation": {}
     },
+    {
+        "label": "colorfield.fields",
+        "kind": 6,
+        "isExtraImport": true,
+        "importPath": "colorfield.fields",
+        "description": "colorfield.fields",
+        "detail": "colorfield.fields",
+        "documentation": {}
+    },
+    {
+        "label": "ColorField",
+        "importPath": "colorfield.fields",
+        "description": "colorfield.fields",
+        "isExtraImport": true,
+        "detail": "colorfield.fields",
+        "documentation": {}
+    },
     {
         "label": "Image",
         "importPath": "PIL",
@@ -1177,12 +1218,30 @@
         "detail": "back.object.migrations.0008_rename_can_disabled_element3d_can_not_disable",
         "documentation": {}
     },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0009_environment_remove_scene3d_hdr_gainmap_and_more",
+        "description": "back.object.migrations.0009_environment_remove_scene3d_hdr_gainmap_and_more",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0008_rename_can_disabled_element3d_can_not_disable'),\n    ]\n    operations = [\n        migrations.CreateModel(\n            name='Environment',\n            fields=[\n                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),\n                ('env_displacementmap', models.FileField(blank=True, null=True, upload_to=object.models.group_based_upload_to)),",
+        "detail": "back.object.migrations.0009_environment_remove_scene3d_hdr_gainmap_and_more",
+        "documentation": {}
+    },
+    {
+        "label": "Migration",
+        "kind": 6,
+        "importPath": "back.object.migrations.0010_environment_clear_color",
+        "description": "back.object.migrations.0010_environment_clear_color",
+        "peekOfCode": "class Migration(migrations.Migration):\n    dependencies = [\n        ('object', '0009_environment_remove_scene3d_hdr_gainmap_and_more'),\n    ]\n    operations = [\n        migrations.AddField(\n            model_name='environment',\n            name='clear_color',\n            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=None),\n        ),",
+        "detail": "back.object.migrations.0010_environment_clear_color",
+        "documentation": {}
+    },
     {
         "label": "Scene3DAdmin",
         "kind": 6,
         "importPath": "back.object.admin",
         "description": "back.object.admin",
-        "peekOfCode": "class Scene3DAdmin(admin.ModelAdmin):\n    filter_horizontal = ('elements',)\nadmin.site.register(Scene3D, Scene3DAdmin)\nadmin.site.register(Element3D)\nadmin.site.register(ClickableArea)",
+        "peekOfCode": "class Scene3DAdmin(admin.ModelAdmin):\n    filter_horizontal = (\"elements\",)\nadmin.site.register(Environment)\nadmin.site.register(Scene3D, Scene3DAdmin)\nadmin.site.register(Element3D)\nadmin.site.register(ClickableArea)",
         "detail": "back.object.admin",
         "documentation": {}
     },
@@ -1195,6 +1254,15 @@
         "detail": "back.object.apps",
         "documentation": {}
     },
+    {
+        "label": "Environment",
+        "kind": 6,
+        "importPath": "back.object.models",
+        "description": "back.object.models",
+        "peekOfCode": "class Environment(models.Model):\n    env_displacementmap = models.FileField(\n        upload_to=group_based_upload_to, blank=True, null=True\n    )\n    env_normalmap = models.FileField(\n        upload_to=group_based_upload_to, blank=True, null=True\n    )\n    clear_color = ColorField(blank=True, null=True)\n    hdr_gainmap = models.FileField(\n        upload_to=group_based_upload_to, blank=True, null=True",
+        "detail": "back.object.models",
+        "documentation": {}
+    },
     {
         "label": "Element3D",
         "kind": 6,
@@ -1209,7 +1277,7 @@
         "kind": 6,
         "importPath": "back.object.models",
         "description": "back.object.models",
-        "peekOfCode": "class Scene3D(models.Model):\n    filter_horizontal = (\"elements\",)\n    name = models.CharField(\n        max_length=120,\n    )\n    elements = models.ManyToManyField(Element3D)\n    min_distance = models.IntegerField(\n        validators=[MinValueValidator(1), MaxValueValidator(600)], blank=True, null=True\n    )\n    max_distance = models.IntegerField(",
+        "peekOfCode": "class Scene3D(models.Model):\n    name = models.CharField(max_length=120)\n    elements = models.ManyToManyField(Element3D)\n    env = models.ForeignKey(Environment, models.RESTRICT, blank=True, null=True)\n    min_distance = models.IntegerField(\n        default=10,\n        validators=[MinValueValidator(1), MaxValueValidator(600)],\n    )\n    max_distance = models.IntegerField(\n        default=20,",
         "detail": "back.object.models",
         "documentation": {}
     },
@@ -1227,7 +1295,7 @@
         "kind": 2,
         "importPath": "back.object.models",
         "description": "back.object.models",
-        "peekOfCode": "def group_based_upload_to(instance, filename):\n    logger.info(instance)\n    return \"files/image/{}/{}/{}\".format(\n        type(instance).__name__.lower(), instance.id, filename\n    )\nclass Element3D(models.Model):\n    parent = models.ForeignKey(\"self\", on_delete=models.PROTECT, blank=True, null=True)\n    model_file = models.FileField(upload_to=group_based_upload_to)\n    name = models.CharField(max_length=255)\n    description = models.TextField(blank=True, null=True)",
+        "peekOfCode": "def group_based_upload_to(instance, filename):\n    logger.info(instance)\n    return \"files/image/{}/{}/{}\".format(\n        type(instance).__name__.lower(), instance.id, filename\n    )\nclass Environment(models.Model):\n    env_displacementmap = models.FileField(\n        upload_to=group_based_upload_to, blank=True, null=True\n    )\n    env_normalmap = models.FileField(",
         "detail": "back.object.models",
         "documentation": {}
     },
@@ -1245,16 +1313,25 @@
         "kind": 5,
         "importPath": "back.object.models",
         "description": "back.object.models",
-        "peekOfCode": "logger = logging.getLogger(\"root\")\ndef group_based_upload_to(instance, filename):\n    logger.info(instance)\n    return \"files/image/{}/{}/{}\".format(\n        type(instance).__name__.lower(), instance.id, filename\n    )\nclass Element3D(models.Model):\n    parent = models.ForeignKey(\"self\", on_delete=models.PROTECT, blank=True, null=True)\n    model_file = models.FileField(upload_to=group_based_upload_to)\n    name = models.CharField(max_length=255)",
+        "peekOfCode": "logger = logging.getLogger(\"root\")\ndef group_based_upload_to(instance, filename):\n    logger.info(instance)\n    return \"files/image/{}/{}/{}\".format(\n        type(instance).__name__.lower(), instance.id, filename\n    )\nclass Environment(models.Model):\n    env_displacementmap = models.FileField(\n        upload_to=group_based_upload_to, blank=True, null=True\n    )",
         "detail": "back.object.models",
         "documentation": {}
     },
+    {
+        "label": "EnvironmentSerializer",
+        "kind": 6,
+        "importPath": "back.object.serializers",
+        "description": "back.object.serializers",
+        "peekOfCode": "class EnvironmentSerializer(serializers.ModelSerializer):\n    hdr_gainmap = serializers.FileField(use_url=False)\n    hdr_json = serializers.FileField(use_url=False)\n    hdr_webp = serializers.FileField(use_url=False)\n    env_displacementmap = serializers.FileField(use_url=False)\n    env_normalmap = serializers.FileField(use_url=False)\n    class Meta:\n        model = Environment\n        fields = \"__all__\"\nclass Element3DSerializer(serializers.ModelSerializer):",
+        "detail": "back.object.serializers",
+        "documentation": {}
+    },
     {
         "label": "Element3DSerializer",
         "kind": 6,
         "importPath": "back.object.serializers",
         "description": "back.object.serializers",
-        "peekOfCode": "class Element3DSerializer(serializers.ModelSerializer):\n    model_file = serializers.ImageField(use_url=False)\n    class Meta:\n        model = Element3D\n        fields = \"__all__\"\nclass Scene3DSerializer(serializers.ModelSerializer):\n    elements = Element3DSerializer(many=True)\n    hdr_gainmap = serializers.FileField(use_url=False)\n    hdr_json = serializers.FileField(use_url=False)\n    hdr_webp = serializers.FileField(use_url=False)",
+        "peekOfCode": "class Element3DSerializer(serializers.ModelSerializer):\n    model_file = serializers.ImageField(use_url=False)\n    class Meta:\n        model = Element3D\n        fields = \"__all__\"\nclass Scene3DSerializer(serializers.ModelSerializer):\n    elements = Element3DSerializer(many=True)\n    env = EnvironmentSerializer()\n    class Meta:\n        model = Scene3D",
         "detail": "back.object.serializers",
         "documentation": {}
     },
@@ -1263,7 +1340,7 @@
         "kind": 6,
         "importPath": "back.object.serializers",
         "description": "back.object.serializers",
-        "peekOfCode": "class Scene3DSerializer(serializers.ModelSerializer):\n    elements = Element3DSerializer(many=True)\n    hdr_gainmap = serializers.FileField(use_url=False)\n    hdr_json = serializers.FileField(use_url=False)\n    hdr_webp = serializers.FileField(use_url=False)\n    class Meta:\n        model = Scene3D\n        fields = \"__all__\"\n        depth = 2\nclass ClickableAreaSerializer(serializers.ModelSerializer):",
+        "peekOfCode": "class Scene3DSerializer(serializers.ModelSerializer):\n    elements = Element3DSerializer(many=True)\n    env = EnvironmentSerializer()\n    class Meta:\n        model = Scene3D\n        fields = \"__all__\"\n        depth = 2\nclass ClickableAreaSerializer(serializers.ModelSerializer):\n    image = serializers.ImageField(use_url=False)\n    class Meta:",
         "detail": "back.object.serializers",
         "documentation": {}
     },
diff --git a/back/back/settings.py b/back/back/settings.py
index 302a8ee..5e0483b 100644
--- a/back/back/settings.py
+++ b/back/back/settings.py
@@ -83,6 +83,7 @@ INSTALLED_APPS = [
     "rest_framework",
     "crispy_forms",
     "crispy_bootstrap4",
+    "colorfield",
     "api",
     "frontImages",
     "object",
diff --git a/back/object/admin.py b/back/object/admin.py
index 1147257..1bad528 100644
--- a/back/object/admin.py
+++ b/back/object/admin.py
@@ -1,9 +1,12 @@
 from django.contrib import admin
-from .models import ClickableArea, Element3D, Scene3D
+from .models import ClickableArea, Element3D, Environment, Scene3D
+
 
 class Scene3DAdmin(admin.ModelAdmin):
-    filter_horizontal = ('elements',)
+    filter_horizontal = ("elements",)
 
+
+admin.site.register(Environment)
 admin.site.register(Scene3D, Scene3DAdmin)
 admin.site.register(Element3D)
-admin.site.register(ClickableArea)
\ No newline at end of file
+admin.site.register(ClickableArea)
diff --git a/back/object/models.py b/back/object/models.py
index b49e3d5..1eadce1 100644
--- a/back/object/models.py
+++ b/back/object/models.py
@@ -2,6 +2,7 @@ from PIL import Image
 from django.db import models
 from django.core.validators import MinValueValidator, MaxValueValidator
 from django.core.exceptions import ValidationError
+from colorfield.fields import ColorField
 import logging
 
 logger = logging.getLogger("root")
@@ -14,6 +15,21 @@ def group_based_upload_to(instance, filename):
     )
 
 
+class Environment(models.Model):
+    env_displacementmap = models.FileField(
+        upload_to=group_based_upload_to, blank=True, null=True
+    )
+    env_normalmap = models.FileField(
+        upload_to=group_based_upload_to, blank=True, null=True
+    )
+    clear_color = ColorField(blank=True, null=True)
+    hdr_gainmap = models.FileField(
+        upload_to=group_based_upload_to, blank=True, null=True
+    )
+    hdr_json = models.FileField(upload_to=group_based_upload_to, blank=True, null=True)
+    hdr_webp = models.FileField(upload_to=group_based_upload_to, blank=True, null=True)
+
+
 class Element3D(models.Model):
     parent = models.ForeignKey("self", on_delete=models.PROTECT, blank=True, null=True)
     model_file = models.FileField(upload_to=group_based_upload_to)
@@ -27,27 +43,19 @@ class Element3D(models.Model):
 
 
 class Scene3D(models.Model):
-    filter_horizontal = ("elements",)
-    name = models.CharField(
-        max_length=120,
-    )
+    name = models.CharField(max_length=120)
     elements = models.ManyToManyField(Element3D)
+    env = models.ForeignKey(Environment, models.RESTRICT, blank=True, null=True)
 
     min_distance = models.IntegerField(
-        validators=[MinValueValidator(1), MaxValueValidator(600)], blank=True, null=True
+        default=10,
+        validators=[MinValueValidator(1), MaxValueValidator(600)],
     )
     max_distance = models.IntegerField(
+        default=20,
         validators=[MinValueValidator(2), MaxValueValidator(1000)],
-        blank=True,
-        null=True,
     )
 
-    hdr_gainmap = models.FileField(
-        upload_to=group_based_upload_to, blank=True, null=True
-    )
-    hdr_json = models.FileField(upload_to=group_based_upload_to, blank=True, null=True)
-    hdr_webp = models.FileField(upload_to=group_based_upload_to, blank=True, null=True)
-
     def __str__(self):
         return self.name
 
diff --git a/back/object/serializers.py b/back/object/serializers.py
index c9e2e1f..ec50e36 100644
--- a/back/object/serializers.py
+++ b/back/object/serializers.py
@@ -1,5 +1,17 @@
 from rest_framework import serializers
-from .models import Scene3D, Element3D, ClickableArea
+from .models import Scene3D, Element3D, ClickableArea, Environment
+
+
+class EnvironmentSerializer(serializers.ModelSerializer):
+    hdr_gainmap = serializers.FileField(use_url=False)
+    hdr_json = serializers.FileField(use_url=False)
+    hdr_webp = serializers.FileField(use_url=False)
+    env_displacementmap = serializers.FileField(use_url=False)
+    env_normalmap = serializers.FileField(use_url=False)
+
+    class Meta:
+        model = Environment
+        fields = "__all__"
 
 
 class Element3DSerializer(serializers.ModelSerializer):
@@ -12,9 +24,7 @@ class Element3DSerializer(serializers.ModelSerializer):
 
 class Scene3DSerializer(serializers.ModelSerializer):
     elements = Element3DSerializer(many=True)
-    hdr_gainmap = serializers.FileField(use_url=False)
-    hdr_json = serializers.FileField(use_url=False)
-    hdr_webp = serializers.FileField(use_url=False)
+    env = EnvironmentSerializer()
 
     class Meta:
         model = Scene3D
diff --git a/poetry.lock b/poetry.lock
index 17abaf2..d609394 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -63,6 +63,20 @@ tzdata = {version = "*", markers = "sys_platform == \"win32\""}
 argon2 = ["argon2-cffi (>=19.1.0)"]
 bcrypt = ["bcrypt"]
 
+[[package]]
+name = "django-colorfield"
+version = "0.11.0"
+description = "color field for django models with a nice color-picker in the admin."
+optional = false
+python-versions = "*"
+files = [
+    {file = "django-colorfield-0.11.0.tar.gz", hash = "sha256:05c38c8eb2a94938b810a19b2011846391a4ce71d1c92e88a35974fbcc8fc62e"},
+    {file = "django_colorfield-0.11.0-py3-none-any.whl", hash = "sha256:460f40e6123b6ae0fb51a4eb86fc258fcdc0ea28f75102b685e8209b1eae9ec3"},
+]
+
+[package.dependencies]
+Pillow = ">=9.0.0"
+
 [[package]]
 name = "django-cors-headers"
 version = "4.3.1"
@@ -449,4 +463,4 @@ files = [
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.10"
-content-hash = "be85620e01baf8ceb925bd6fe9283c50da4fc1a97d9f572b92266adb0f44c124"
+content-hash = "6b760d833dfd807526e05ba86e0e6cddb82ee47ec315f4a51d469aecfd1534e4"
diff --git a/pyproject.toml b/pyproject.toml
index 6e5be20..80cdd9d 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -21,6 +21,7 @@ django-filter = "^24.2"
 django-crispy-forms = "^2.2"
 crispy-bootstrap4 = "^2024.1"
 django-extensions = "^3.2.3"
+django-colorfield = "^0.11.0"
 
 
 [build-system]
-- 
2.40.1


From d779b5fc6696a8115d8e5bfd45c1a8ec37e43be6 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 09:17:39 +0300
Subject: [PATCH 09/18] add requirements

---
 back/requirements.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/back/requirements.txt b/back/requirements.txt
index 719a572..7cbd2ab 100644
--- a/back/requirements.txt
+++ b/back/requirements.txt
@@ -1,6 +1,7 @@
 asgiref==3.8.1 ; python_version >= "3.10" and python_version < "4.0"
 colorama==0.4.6 ; python_version >= "3.10" and python_version < "4.0"
 crispy-bootstrap4==2024.1 ; python_version >= "3.10" and python_version < "4.0"
+django-colorfield==0.11.0 ; python_version >= "3.10" and python_version < "4.0"
 django-cors-headers==4.3.1 ; python_version >= "3.10" and python_version < "4.0"
 django-crispy-forms==2.2 ; python_version >= "3.10" and python_version < "4.0"
 django-extensions==3.2.3 ; python_version >= "3.10" and python_version < "4.0"
-- 
2.40.1


From 6dbe323018a43289230d2f36f4a112be88d85105 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 09:53:44 +0300
Subject: [PATCH 10/18] add cler color admin

---
 front/src/components/Promo/env.vue         | 51 +++++++++-------
 front/src/components/Promo/load_models.vue | 70 +++++++++++++++-------
 front/src/index.d.ts                       | 11 +++-
 3 files changed, 84 insertions(+), 48 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index 137a0b4..b5dcf1b 100644
--- a/front/src/components/Promo/env.vue
+++ b/front/src/components/Promo/env.vue
@@ -1,49 +1,56 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 
-import { ACESFilmicToneMapping, Color, EquirectangularReflectionMapping, PMREMGenerator, ReinhardToneMapping, SRGBColorSpace } from 'three';
+import { ACESFilmicToneMapping, Color, Fog, PMREMGenerator, SRGBColorSpace } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
 import { useTresContext } from '@tresjs/core';
 
 import hdr_gainmap from '../../assets/promo/hdr/hdr-gainmap.webp'
 import hdr_json from '../../assets/promo/hdr/hdr.json?url'
 import hdr_webp from '../../assets/promo/hdr/hdr.webp'
+import { IMAGE_URL } from '../../constants';
 
-const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
-
+const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json', 'env_displacementmap', 'env_normalmap', 'clear_color', 'focus'])
 const { renderer, scene } = useTresContext()
-// renderer.value.toneMapping = ReinhardToneMapping
+
+const k = { start: 0.5, end: 2.5 }
+
 renderer.value.outputColorSpace = SRGBColorSpace;
 renderer.value.toneMapping = ACESFilmicToneMapping;
 renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio(1.5)
 
 const loadEnv = async () => {
-    const loader = new GainMapLoader(renderer.value)
-    const result = await loader.loadAsync([
-        props.hdr_webp || hdr_webp,
-        props.hdr_gainmap || hdr_gainmap,
-        props.hdr_json || hdr_json,
-    ])
-    const pmremGenerator = new PMREMGenerator(renderer.value);
-    pmremGenerator.compileEquirectangularShader();
+    if (props.hdr_webp || props.hdr_gainmap || props.hdr_json) {
+        const loader = new GainMapLoader(renderer.value)
+        const result = await loader.loadAsync([
+            props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
+            props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
+            props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
+        ])
+        const pmremGenerator = new PMREMGenerator(renderer.value);
+        pmremGenerator.compileEquirectangularShader();
 
-    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
-    // const exrBackground = exrCubeRenderTarget.texture;
-    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+        const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+        const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
-    scene.value.environment = newEnvMap
-    scene.value.environmentIntensity = 2.5
+        scene.value.environment = newEnvMap
+        scene.value.environmentIntensity = 2.5
 
-    // scene.value.background = result.renderTarget.texture
-    // scene.value.background.mapping = EquirectangularReflectionMapping
-    // scene.value.backgroundBlurriness = 0.15
-    result.renderTarget.texture.dispose();
+        result.renderTarget.texture.dispose();
+    }
+
+    if (props.clear_color) {
+        renderer.value.setClearColor(props.clear_color)
+    }
+    const c = new Color()
+    renderer.value.getClearColor(c)
+    scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
 }
 
 onMounted(async () => {
     loadEnv()
 })
-watch(() => props.hdr_webp, loadEnv)
+watch(() => props, loadEnv, { deep: true })
 </script>
 <template></template>
\ No newline at end of file
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 32f04a2..a6a0b75 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import {
     Box3, CircleGeometry, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
     MeshStandardMaterial,
+    MeshStandardMaterialParameters,
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
@@ -10,7 +11,6 @@ import { useTresContext, useSeek, useRenderLoop, useTexture } from '@tresjs/core
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
-import PostProcess from './post_pocessing.vue'
 
 import { IMAGE_URL, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
@@ -26,7 +26,15 @@ const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
-const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string }
+const envVars = reactive({}) as {
+    focus: number,
+    hdr_gainmap?: string,
+    hdr_json?: string,
+    hdr_webp?: string,
+    clear_color?: string,
+    env_displacementmap?: string,
+    env_normalmap?: string
+}
 const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: number }
 
 
@@ -42,18 +50,11 @@ const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
 
-    envVars.hdr_gainmap = raw_data.hdr_gainmap ? `${IMAGE_URL}/${raw_data.hdr_gainmap}` : undefined
-    envVars.hdr_json = raw_data.hdr_json ? `${IMAGE_URL}/${raw_data.hdr_json}` : undefined
-    envVars.hdr_webp = raw_data.hdr_webp ? `${IMAGE_URL}/${raw_data.hdr_webp}` : undefined
+    envVars.focus = raw_data.min_distance * 1
+    if (raw_data.env) {
+        Object.assign(envVars, raw_data.env)
+    }
 
-    tiltShift.focus = raw_data.min_distance * 1
-    tiltShift.aperture = 0.1
-    tiltShift.maxblur = 5
-
-    const c = new Color()
-    renderer.value.getClearColor(c)
-    // console.log(c, c.offsetHSL(0, 0, 10))
-    // renderer.value.setClearColor(c.offsetHSL(10, 10, 10))
 
     const data = raw_data.elements
     if (!controls.value) return;
@@ -87,17 +88,41 @@ const loadModels = async () => {
         const clickable_areas = await res.json()
         clickable.value.push(...clickable_areas)
     }
+
+
+    let c = new Color()
+    if (envVars.clear_color) {
+        c = new Color(envVars.clear_color)
+    } else {
+        renderer.value.getClearColor(c)
+    }
+    const tex = {} as any
+    if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
+    if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
+    let addTexture: any
+    if (Object.keys(tex).length) {
+        addTexture = await useTexture(tex)
+    }
+
+    const mesh = {
+        color: c.offsetHSL(0, 0, -0.5),
+        displacementScale: envVars.focus,
+        roughness: 100,
+        side: DoubleSide
+    } as MeshStandardMaterialParameters
+    if (addTexture.displacementMap) {
+        mesh.displacementMap = addTexture.displacementMap
+    } else {
+        mesh.displacementMap = groundTexture.displacementMap
+    }
+    if (addTexture.normalMap) {
+        mesh.normalMap = addTexture.normalMap
+    }
     const ground = new Mesh(
-        new CircleGeometry(tiltShift.focus * 10, tiltShift.focus * 10),
-        new MeshStandardMaterial({
-            color: c.offsetHSL(0, 0, -0.5),
-            displacementMap: groundTexture.displacementMap,
-            displacementScale: tiltShift.focus,
-            roughness: 100,
-            side: DoubleSide
-        })
+        new CircleGeometry(envVars.focus * 10, envVars.focus * 10),
+        new MeshStandardMaterial(mesh)
     )
-    ground.position.y = -0.33 * tiltShift.focus
+    ground.position.y = -0.33 * envVars.focus
     ground.rotateX(-Math.PI / 2)
     ground.name = "ground"
     models.value.push({ name: 'ground', modelFile: ground })
@@ -226,7 +251,6 @@ watch(() => sidebar_scene.list, () => {
 <template>
     <TresGroup name="loaded">
         <Env v-bind="envVars" />
-        <PostProcess :tiltShift="tiltShift" />
         <template v-for="item in models">
             <TresGroup :name="item.name">
                 <TresObject3D v-bind="item.modelFile.clone()" />
diff --git a/front/src/index.d.ts b/front/src/index.d.ts
index 54b8533..3630fd5 100644
--- a/front/src/index.d.ts
+++ b/front/src/index.d.ts
@@ -14,10 +14,15 @@ interface scene3D {
     name: string
     min_distance: number
     max_distance: number
-    hdr_gainmap?: string
-    hdr_json?: string
-    hdr_webp?: string
     elements: element3DType[]
+    env: {
+        hdr_gainmap?: string
+        hdr_json?: string
+        hdr_webp?: string
+        env_displacementmap?: string
+        env_normalmap?: string
+        clear_color?: string
+    }
 }
 interface element3DType {
     id: number
-- 
2.40.1


From ccba126dd76f244a10710f3c7184c593ec61eba6 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 10:27:39 +0300
Subject: [PATCH 11/18] clear bg

---
 front/src/components/Promo/env.vue         | 36 ++++++++++------------
 front/src/components/Promo/load_models.vue | 18 ++++++-----
 front/src/components/Promo/main.vue        |  3 +-
 front/src/constants.ts                     |  4 ++-
 4 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index b5dcf1b..c9dd31a 100644
--- a/front/src/components/Promo/env.vue
+++ b/front/src/components/Promo/env.vue
@@ -8,7 +8,7 @@ import { useTresContext } from '@tresjs/core';
 import hdr_gainmap from '../../assets/promo/hdr/hdr-gainmap.webp'
 import hdr_json from '../../assets/promo/hdr/hdr.json?url'
 import hdr_webp from '../../assets/promo/hdr/hdr.webp'
-import { IMAGE_URL } from '../../constants';
+import { IMAGE_URL, PROMOBG } from '../../constants';
 
 const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json', 'env_displacementmap', 'env_normalmap', 'clear_color', 'focus'])
 const { renderer, scene } = useTresContext()
@@ -21,30 +21,26 @@ renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio(1.5)
 
 const loadEnv = async () => {
-    if (props.hdr_webp || props.hdr_gainmap || props.hdr_json) {
-        const loader = new GainMapLoader(renderer.value)
-        const result = await loader.loadAsync([
-            props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
-            props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
-            props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
-        ])
-        const pmremGenerator = new PMREMGenerator(renderer.value);
-        pmremGenerator.compileEquirectangularShader();
+    const loader = new GainMapLoader(renderer.value)
+    const result = await loader.loadAsync([
+        props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
+        props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
+        props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
+    ])
+    const pmremGenerator = new PMREMGenerator(renderer.value);
+    pmremGenerator.compileEquirectangularShader();
 
-        const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
-        const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
-        scene.value.environment = newEnvMap
-        scene.value.environmentIntensity = 2.5
+    scene.value.environment = newEnvMap
+    scene.value.environmentIntensity = 2.5
 
-        result.renderTarget.texture.dispose();
-    }
+    result.renderTarget.texture.dispose();
 
-    if (props.clear_color) {
-        renderer.value.setClearColor(props.clear_color)
-    }
     const c = new Color()
-    renderer.value.getClearColor(c)
+    c.set(props.clear_color || PROMOBG)
+    renderer.value.setClearColor(c)
     scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
 }
 
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index a6a0b75..5c84143 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -12,7 +12,7 @@ import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
 
-import { IMAGE_URL, SERVER_URL, } from '../../constants'
+import { IMAGE_URL, PROMOBG, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
 
@@ -35,7 +35,6 @@ const envVars = reactive({}) as {
     env_displacementmap?: string,
     env_normalmap?: string
 }
-const tiltShift = reactive({}) as { focus: number, aperture: number, maxblur: number }
 
 
 const groundTexture = await useTexture({
@@ -53,6 +52,11 @@ const loadModels = async () => {
     envVars.focus = raw_data.min_distance * 1
     if (raw_data.env) {
         Object.assign(envVars, raw_data.env)
+    } else {
+        delete envVars.hdr_gainmap
+        delete envVars.hdr_json
+        delete envVars.hdr_webp
+        envVars.clear_color = PROMOBG
     }
 
 
@@ -92,7 +96,7 @@ const loadModels = async () => {
 
     let c = new Color()
     if (envVars.clear_color) {
-        c = new Color(envVars.clear_color)
+        c.set(envVars.clear_color)
     } else {
         renderer.value.getClearColor(c)
     }
@@ -100,22 +104,22 @@ const loadModels = async () => {
     if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
     if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
     let addTexture: any
-    if (Object.keys(tex).length) {
+    if (Object.keys(tex).length > 0) {
         addTexture = await useTexture(tex)
     }
 
     const mesh = {
-        color: c.offsetHSL(0, 0, -0.5),
+        color: c.offsetHSL(0, 0, -0.33),
         displacementScale: envVars.focus,
         roughness: 100,
         side: DoubleSide
     } as MeshStandardMaterialParameters
-    if (addTexture.displacementMap) {
+    if (envVars.env_displacementmap) {
         mesh.displacementMap = addTexture.displacementMap
     } else {
         mesh.displacementMap = groundTexture.displacementMap
     }
-    if (addTexture.normalMap) {
+    if (envVars.env_normalmap) {
         mesh.normalMap = addTexture.normalMap
     }
     const ground = new Mesh(
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index 91662e0..d54cf6e 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -11,6 +11,7 @@ import '@tresjs/leches/styles'
 import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
+import { PROMOBG } from '../../constants';
 
 const minPan = ref(new Vector3(-2, -2, -2))
 const maxPan = ref(new Vector3(2, 2, 2))
@@ -58,7 +59,7 @@ watch(() => route.params.target, () => {
 <template>
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
-            <TresCanvas window-size :alpha="false" power-preference="high-performance" clear-color="MediumSlateBlue"
+            <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
                 :logarithmicDepthBuffer="true">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
diff --git a/front/src/constants.ts b/front/src/constants.ts
index 66ca418..1cacaf8 100644
--- a/front/src/constants.ts
+++ b/front/src/constants.ts
@@ -1,2 +1,4 @@
 export const SERVER_URL = import.meta.env.VITE_SERVER_URL ?? window.location.origin
-export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
\ No newline at end of file
+export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
+
+export const PROMOBG='red'
\ No newline at end of file
-- 
2.40.1


From 7ed648af62c2da7912f13fb8b25ca51e8b9375e4 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 10:46:56 +0300
Subject: [PATCH 12/18] remove depth buffer

---
 front/src/components/Promo/env.vue  | 5 +++--
 front/src/components/Promo/main.vue | 9 +++++----
 front/src/constants.ts              | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index c9dd31a..a73b1e2 100644
--- a/front/src/components/Promo/env.vue
+++ b/front/src/components/Promo/env.vue
@@ -21,6 +21,7 @@ renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio(1.5)
 
 const loadEnv = async () => {
+    console.log('update env')
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([
         props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
@@ -34,7 +35,7 @@ const loadEnv = async () => {
     const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
     scene.value.environment = newEnvMap
-    scene.value.environmentIntensity = 2.5
+    scene.value.environmentIntensity = 1
 
     result.renderTarget.texture.dispose();
 
@@ -45,7 +46,7 @@ const loadEnv = async () => {
 }
 
 onMounted(async () => {
-    loadEnv()
+    // loadEnv()
 })
 watch(() => props, loadEnv, { deep: true })
 </script>
diff --git a/front/src/components/Promo/main.vue b/front/src/components/Promo/main.vue
index d54cf6e..c9d9580 100644
--- a/front/src/components/Promo/main.vue
+++ b/front/src/components/Promo/main.vue
@@ -3,9 +3,9 @@ import { reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
-import { Color, Vector3 } from 'three';
-import { TresCanvas, useTexture } from '@tresjs/core';
-import { OrbitControls } from '@tresjs/cientos'
+import { Vector3 } from 'three';
+import { TresCanvas } from '@tresjs/core';
+import { OrbitControls, Stats } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
 import LoadModels from './load_models.vue'
@@ -60,7 +60,8 @@ watch(() => route.params.target, () => {
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
             <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
-                :logarithmicDepthBuffer="true">
+                :shadows="false">
+                <Stats />
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
diff --git a/front/src/constants.ts b/front/src/constants.ts
index 1cacaf8..8ab2172 100644
--- a/front/src/constants.ts
+++ b/front/src/constants.ts
@@ -1,4 +1,4 @@
 export const SERVER_URL = import.meta.env.VITE_SERVER_URL ?? window.location.origin
 export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
 
-export const PROMOBG='red'
\ No newline at end of file
+export const PROMOBG='#ccc'
\ No newline at end of file
-- 
2.40.1


From e91bfa14f9c1120726e689b24c6bfcc2c56c0a13 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 11:15:15 +0300
Subject: [PATCH 13/18] narmal and displacement map

---
 front/src/components/Promo/env.vue         | 4 ++--
 front/src/components/Promo/load_models.vue | 7 +++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/front/src/components/Promo/env.vue b/front/src/components/Promo/env.vue
index a73b1e2..df3e8d8 100644
--- a/front/src/components/Promo/env.vue
+++ b/front/src/components/Promo/env.vue
@@ -13,7 +13,7 @@ import { IMAGE_URL, PROMOBG } from '../../constants';
 const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json', 'env_displacementmap', 'env_normalmap', 'clear_color', 'focus'])
 const { renderer, scene } = useTresContext()
 
-const k = { start: 0.5, end: 2.5 }
+const k = { start: 0.5, end: 3.5 }
 
 renderer.value.outputColorSpace = SRGBColorSpace;
 renderer.value.toneMapping = ACESFilmicToneMapping;
@@ -21,7 +21,7 @@ renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio(1.5)
 
 const loadEnv = async () => {
-    console.log('update env')
+    // console.log('update env')
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([
         props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 5c84143..ad1feb8 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -93,7 +93,6 @@ const loadModels = async () => {
         clickable.value.push(...clickable_areas)
     }
 
-
     let c = new Color()
     if (envVars.clear_color) {
         c.set(envVars.clear_color)
@@ -109,8 +108,8 @@ const loadModels = async () => {
     }
 
     const mesh = {
-        color: c.offsetHSL(0, 0, -0.33),
-        displacementScale: envVars.focus,
+        color: c.offsetHSL(0, 0.5, -0.33),
+        displacementScale: envVars.focus * 0.33,
         roughness: 100,
         side: DoubleSide
     } as MeshStandardMaterialParameters
@@ -123,7 +122,7 @@ const loadModels = async () => {
         mesh.normalMap = addTexture.normalMap
     }
     const ground = new Mesh(
-        new CircleGeometry(envVars.focus * 10, envVars.focus * 10),
+        new PlaneGeometry(envVars.focus * 7, envVars.focus * 7, 1024, 1024),
         new MeshStandardMaterial(mesh)
     )
     ground.position.y = -0.33 * envVars.focus
-- 
2.40.1


From 1a8f9a543bde942a6a76b572dd3890520a8feb8e Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 11:21:42 +0300
Subject: [PATCH 14/18] narmal and displacement map

---
 front/src/components/Promo/load_models.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index ad1feb8..0816881 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -53,6 +53,8 @@ const loadModels = async () => {
     if (raw_data.env) {
         Object.assign(envVars, raw_data.env)
     } else {
+        delete envVars.env_displacementmap
+        delete envVars.env_normalmap
         delete envVars.hdr_gainmap
         delete envVars.hdr_json
         delete envVars.hdr_webp
-- 
2.40.1


From ee7909fa2e9d877b44796afe87d22cc7aa88275a Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 12:39:49 +0300
Subject: [PATCH 15/18] rotate

---
 front/src/components/Promo/load_models.vue | 48 +++++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 0816881..466b6d4 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -7,7 +7,7 @@ import {
     PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
 } from 'three';
 
-import { useTresContext, useSeek, useRenderLoop, useTexture } from '@tresjs/core';
+import { useTresContext, useSeek, useRenderLoop, useTexture, useLoop } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -36,14 +36,15 @@ const envVars = reactive({}) as {
     env_normalmap?: string
 }
 
-
 const groundTexture = await useTexture({
     displacementMap: '/ground_displacement.jpg',
 })
 
-// renderer.value.capabilities.maxTextures = 4
-// renderer.value.capabilities.maxTextureSize = 512
-// renderer.value.capabilities.precision = 'lowp'
+const timer = ref(10)
+
+renderer.value.capabilities.maxTextures = 4
+renderer.value.capabilities.maxTextureSize = 512
+renderer.value.capabilities.precision = 'lowp'
 
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
@@ -182,16 +183,50 @@ const loadModels = async () => {
 
     controls.value.enabled = true;
     props.loaded(false)
+
+    timer.value = 10
+    setInterval(() => {
+        if (timer.value > 0) {
+            timer.value -= 1
+        }
+    }, 1000)
 }
 
 const { onLoop } = useRenderLoop()
 onLoop(() => {
     clickable_refs.value.map(el => {
         if (el.value[0] && typeof el.value[0].lookAt == 'function') {
-            el.value[0].lookAt(camera.value?.position)
+            el.value[0].lookAt(camera.value?.position);
         }
     })
 })
+const { onBeforeRender, pause, resume } = useLoop()
+let direction = 'plus'
+onBeforeRender(() => {
+    if (camera.value?.rotation) {
+        if (timer.value == 0) {
+            pause()
+            const v = Math.PI * 0.001
+            if (camera.value.rotation.x > Math.PI * 0.5 && direction == 'plus') {
+                direction = 'minus'
+            } else if (camera.value.rotation.x < Math.PI * -0.5 && direction == 'minus') {
+                direction = 'plus'
+            }
+            if (direction == 'plus') {
+                camera.value.rotation.x += v
+                camera.value.rotation.y += v
+                camera.value.rotation.z += v
+            } else {
+                camera.value.rotation.x -= v
+                camera.value.rotation.y -= v
+                camera.value.rotation.z -= v
+            }
+            setTimeout(() => {
+                resume()
+            }, 5)
+        }
+    }
+})
 
 const openSidebar = (id: number) => {
     const target = clickable.value.find(el => el.id == id)
@@ -227,6 +262,7 @@ onMounted(() => {
 onUnmounted(() => { document.removeEventListener('click', clickEvent) })
 const pointer = reactive({ x: 0, y: 0 })
 const clickEvent = (event: MouseEvent) => {
+    timer.value = 10
     const x = (event.clientX / window.innerWidth) * 2 - 1
     const y = - (event.clientY / window.innerHeight) * 2 + 1
     if (x == pointer.x && y == pointer.y) return
-- 
2.40.1


From 6cece6d1c37a5d57a715c7eb9f10aad42c4df0db Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 12:40:43 +0300
Subject: [PATCH 16/18] rotate

---
 front/src/components/Promo/load_models.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 466b6d4..882318e 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -224,6 +224,8 @@ onBeforeRender(() => {
             setTimeout(() => {
                 resume()
             }, 5)
+        } else {
+            resume()
         }
     }
 })
-- 
2.40.1


From 5d79c35439fd4df499a1b768be25f9ab194fdc52 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 29 Jul 2024 17:12:14 +0300
Subject: [PATCH 17/18] camera

---
 front/src/components/Promo/load_models.vue | 57 ++++++++++------------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 882318e..45c7084 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -42,7 +42,7 @@ const groundTexture = await useTexture({
 
 const timer = ref(10)
 
-renderer.value.capabilities.maxTextures = 4
+// renderer.value.capabilities.maxTextures = 4
 renderer.value.capabilities.maxTextureSize = 512
 renderer.value.capabilities.precision = 'lowp'
 
@@ -188,44 +188,28 @@ const loadModels = async () => {
     setInterval(() => {
         if (timer.value > 0) {
             timer.value -= 1
+        } else if (timer.value == 0 && !controls.value.autoRotate) {
+            camera.value?.position.set(
+                controls.value.minDistance * 0.5,
+                controls.value.minDistance * 0.5,
+                controls.value.minDistance
+            );
+            (controls.value as any).autoRotate = true;
+            (controls.value as any).autoRotateSpeed = 1;
         }
     }, 1000)
 }
 
-const { onLoop } = useRenderLoop()
-onLoop(() => {
+const { onAfterRender } = useLoop()
+onAfterRender(() => {
     clickable_refs.value.map(el => {
         if (el.value[0] && typeof el.value[0].lookAt == 'function') {
             el.value[0].lookAt(camera.value?.position);
         }
     })
-})
-const { onBeforeRender, pause, resume } = useLoop()
-let direction = 'plus'
-onBeforeRender(() => {
-    if (camera.value?.rotation) {
+    if (controls.value) {
         if (timer.value == 0) {
-            pause()
-            const v = Math.PI * 0.001
-            if (camera.value.rotation.x > Math.PI * 0.5 && direction == 'plus') {
-                direction = 'minus'
-            } else if (camera.value.rotation.x < Math.PI * -0.5 && direction == 'minus') {
-                direction = 'plus'
-            }
-            if (direction == 'plus') {
-                camera.value.rotation.x += v
-                camera.value.rotation.y += v
-                camera.value.rotation.z += v
-            } else {
-                camera.value.rotation.x -= v
-                camera.value.rotation.y -= v
-                camera.value.rotation.z -= v
-            }
-            setTimeout(() => {
-                resume()
-            }, 5)
-        } else {
-            resume()
+            (controls.value as any).update();
         }
     }
 })
@@ -257,14 +241,25 @@ watch(() => props.source, () => {
 
 onMounted(() => {
     document.addEventListener('click', clickEvent)
+    document.addEventListener('click', stopTimer)
+    document.addEventListener('touchstart', stopTimer)
     if (sidebar.is_open) {
         sidebar.close()
     }
 })
-onUnmounted(() => { document.removeEventListener('click', clickEvent) })
+onUnmounted(() => {
+    document.removeEventListener('click', clickEvent)
+    document.removeEventListener('click', stopTimer)
+    document.removeEventListener('touchstart', stopTimer)
+})
 const pointer = reactive({ x: 0, y: 0 })
+const stopTimer = () => {
+    timer.value = 10;
+    if (controls.value.autoRotate) {
+        controls.value.autoRotate = false;
+    }
+}
 const clickEvent = (event: MouseEvent) => {
-    timer.value = 10
     const x = (event.clientX / window.innerWidth) * 2 - 1
     const y = - (event.clientY / window.innerHeight) * 2 + 1
     if (x == pointer.x && y == pointer.y) return
-- 
2.40.1


From 6456b5fd525979e146920d7378612f1983124208 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 30 Jul 2024 09:17:00 +0300
Subject: [PATCH 18/18] autorotate fix

---
 front/src/components/Promo/load_models.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 45c7084..7077fd1 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -25,6 +25,7 @@ const clickable_refs = ref<any[]>([])
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
+const { pause, resume } = useLoop()
 const { seekByName, seekAllByName } = useSeek()
 const envVars = reactive({}) as {
     focus: number,
@@ -41,6 +42,7 @@ const groundTexture = await useTexture({
 })
 
 const timer = ref(10)
+let int
 
 // renderer.value.capabilities.maxTextures = 4
 renderer.value.capabilities.maxTextureSize = 512
@@ -184,11 +186,13 @@ const loadModels = async () => {
     controls.value.enabled = true;
     props.loaded(false)
 
+    clearInterval(int)
     timer.value = 10
-    setInterval(() => {
+    int = setInterval(() => {
         if (timer.value > 0) {
             timer.value -= 1
         } else if (timer.value == 0 && !controls.value.autoRotate) {
+            pause()
             camera.value?.position.set(
                 controls.value.minDistance * 0.5,
                 controls.value.minDistance * 0.5,
@@ -196,6 +200,7 @@ const loadModels = async () => {
             );
             (controls.value as any).autoRotate = true;
             (controls.value as any).autoRotateSpeed = 1;
+            resume()
         }
     }, 1000)
 }
-- 
2.40.1