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()
 })

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()" />

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"
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
-                        :clear-color="clearColor" />
                 </Suspense>
-
+                <TresAmbientLight />
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">

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 { Color, Fog } from 'three';
-import { GammaCorrectionShader, TAARenderPass } from 'three/examples/jsm/Addons.js';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
-const props = defineProps(['tiltShift', 'clearColor'])
+const props = defineProps(['tiltShift'])
-const k = { start: 0.5, end: 3 }
+const k = { start: 0.5, end: 2.5 }
 
-if (camera.value) {
+const makePostProcess = () => {
-    const renderPass = new RenderPass(scene.value, camera.value);
+    if (camera.value) {
+        const renderPass = new RenderPass(scene.value, camera.value);
 
-    // const bokehPass = new BokehPass(scene.value, camera.value, {
+        const bokehPass = new BokehPass(scene.value, camera.value, {
-    //     focus: props.tiltShift.focus,
+            focus: props.tiltShift.focus,
-    //     aperture: (props.tiltShift.aperture) * 0.00001,
+            aperture: (props.tiltShift.aperture) * 0.00001,
-    //     maxblur: (props.tiltShift.maxblur) * 0.01
+            maxblur: (props.tiltShift.maxblur) * 0.01
-    // });
+        });
-    const outputPass = new OutputPass();
+        const outputPass = new OutputPass();
-    composer.addPass(renderPass);
+        // composer.addPass(renderPass);
-    // composer.addPass(outputPass);
+        // 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, () => {
+watch(props.tiltShift, makePostProcess, { deep: true })
-    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 })
 </script>
 <template></template>