add focus depends on distance

front/.env.development

@@ -1,3 +1,3 @@
 VITE_SERVER_URL='https://demo.kustarshina.ru'
 VITE_IMAGE_URL='https://demo.kustarshina.ru'
-VITE_SERVER_URL='http://localhost:8000'
+# VITE_SERVER_URL='http://localhost:8000'

front/src/components/Promo/load_models.vue

@@ -26,6 +26,7 @@ const sidebar_scene = usePromoScene()
 const { controls, camera, scene, raycaster } = 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 }
 
 // renderer.value.capabilities.maxTextures = 4
 // renderer.value.capabilities.maxTextureSize = 512
@@ -39,6 +40,11 @@ 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.5
+    tiltShift.focus = raw_data.max_distance * 0.5
+    tiltShift.aperture = 15
+    tiltShift.maxblur = 1
+
     const data = raw_data.elements
     if (!controls.value) return;
 
@@ -191,7 +197,7 @@ watch(() => sidebar_scene.list, () => {
 <template>
     <TresGroup name="loaded">
         <Env v-bind="envVars" />
-        <PostProcess :tres_values="tres_values" />
+        <PostProcess :tiltShift="tiltShift" :tres_values="tres_values"/>
         <template v-for="item in models">
             <TresGroup :name="item.name">
                 <TresObject3D v-bind="item.modelFile.clone()" />

front/src/components/Promo/main.vue

@@ -80,7 +80,6 @@ const tres_values = useControls({
 <template>
     <div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
-            <TresLeches />
             <TresCanvas window-size :alpha="false" power-preference="high-performance">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />

front/src/components/Promo/post_pocessing.vue

@@ -7,22 +7,21 @@ import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
 import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 
 import { useTresContext, useLoop } from '@tresjs/core';
-import { useControls } from '@tresjs/leches'
 import { watch } from 'vue';
 
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
 
-const props = defineProps(['tres_values'])
+const props = defineProps(['tres_values', 'tiltShift'])
 
 if (camera.value) {
     const renderPass = new RenderPass(scene.value, camera.value);
 
     const bokehPass = new BokehPass(scene.value, camera.value, {
-        focus: props.tres_values.focus.value.value,
+        focus: props.tiltShift.focus,
-        aperture: props.tres_values.aperture.value.value * 0.00001,
+        aperture: (props.tiltShift.aperture) * 0.00001,
-        maxblur: props.tres_values.maxblur.value.value * 0.01
+        maxblur: (props.tiltShift.maxblur) * 0.01
     });
 
     const outputPass = new OutputPass();
@@ -34,23 +33,14 @@ const { onAfterRender } = useLoop()
 onAfterRender(() => {
     composer.render()
 })
-watch([
+watch(props.tiltShift, () => {
-    props.tres_values.focus.value,
-    props.tres_values.aperture.value,
-    props.tres_values.maxblur.value
-], () => {
     if (camera.value) {
         const args = {
-            focus: props.tres_values.focus.value.value,
+            focus: props.tiltShift.focus,
-            aperture: props.tres_values.aperture.value.value * 0.00001,
+            aperture: props.tiltShift.aperture * 0.00001,
-            maxblur: props.tres_values.maxblur.value.value * 0.01
+            maxblur: props.tiltShift.maxblur * 0.01
         }
-        console.log(args)
+        const bokehPass = new BokehPass(scene.value, camera.value, args);
-        const bokehPass = new BokehPass(scene.value, camera.value, {
-            focus: props.tres_values.focus.value.value,
-            aperture: props.tres_values.aperture.value.value * 0.00001,
-            maxblur: props.tres_values.maxblur.value.value * 0.01
-        });
         composer.passes = []
         const renderPass = new RenderPass(scene.value, camera.value);
         const outputPass = new OutputPass();
@@ -59,5 +49,25 @@ watch([
         composer.addPass(outputPass);
     }
 }, { deep: true })
+// watch([
+//     props.tres_values.focus.value,
+//     props.tres_values.aperture.value,
+//     props.tres_values.maxblur.value
+// ], () => {
+//     if (camera.value) {
+//         const args = {
+//             focus: props.tres_values.focus.value.value,
+//             aperture: props.tres_values.aperture.value.value * 0.00001,
+//             maxblur: props.tres_values.maxblur.value.value * 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);
+//     }
+// }, { deep: true })
 </script>
 <template></template>