boke

front/src/components/Promo/load_models.vue

@@ -15,7 +15,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'])
+const props = defineProps(['source', 'loaded', 'loaded_pan', 'tres_values'])
 
 const models = ref<model3DType[]>([])
 const clickable = ref<clickableAreaType[]>([])
@@ -191,7 +191,7 @@ watch(() => sidebar_scene.list, () => {
 <template>
     <TresGroup name="loaded">
         <Env v-bind="envVars" />
-        <PostProcess />
+        <PostProcess :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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, watch, computed } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
@@ -53,15 +53,39 @@ watch(() => route.params.target, () => {
         sidebar.close()
     }
 }, { deep: true })
+
+import { useControls, TresLeches } from '@tresjs/leches'
+import '@tresjs/leches/dist/style.css'
+const tres_values = useControls({
+    focus: {
+        value: 1,
+        min: 0,
+        max: 500,
+        step: 1,
+    },
+    aperture: {
+        value: 1,
+        min: 0,
+        max: 100,
+        step: 1,
+    },
+    maxblur: {
+        value: 0.01,
+        min: 0,
+        max: 1,
+        step: 0.01,
+    },
+})
 </script>
 <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 />
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
+                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" :tres_values="tres_values" />
                 </Suspense>
                 <TresMesh :position-y="-1" :rotate-x="-Math.PI / 2" receive-shadow name="ground" v-if="false">
                     <TresPlaneGeometry :args="[200, 200]" />

front/src/components/Promo/post_pocessing.vue

@@ -3,29 +3,48 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
 
-import { RGBShiftShader } from 'three/addons/shaders/RGBShiftShader.js';
-import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js';
+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, controls, camera, scene, raycaster } = useTresContext()
+const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
+
+const props = defineProps(['tres_values'])
+
 if (camera.value) {
-    composer.addPass(new RenderPass(scene.value, 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 || 100.0,
+        aperture: props.tres_values.aperture.value.value || 3.6,
+        maxblur: props.tres_values.maxblur.value.value || 0.01
+    });
+
+    const outputPass = new OutputPass();
+    composer.addPass(renderPass);
+    composer.addPass(bokehPass);
+    composer.addPass(outputPass);
 }
-
-const effect1 = new ShaderPass(DotScreenShader);
-effect1.uniforms['scale'].value = 40;
-composer.addPass(effect1);
-
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    if (composer) {
-        composer.render()
-    }
+    composer.render(0.1)
 })
+watch([
+    props.tres_values.focus.value,
+    props.tres_values.aperture.value,
+    props.tres_values.maxblur.value
+], () => {
+    const bokehPass = new BokehPass(scene.value, camera.value, {
+        focus: props.tres_values.focus.value.value || 100.0,
+        aperture: props.tres_values.aperture.value.value || 3.6,
+        maxblur: props.tres_values.maxblur.value.value || 0.01
+    });
+    composer.passes[1] = bokehPass;
+}, { deep: true })
 </script>
 <template></template>