change pointer

front/src/components/Main/main_load_models.vue

@@ -4,9 +4,12 @@ import { useLoop, useTresContext } from '@tresjs/core';
 // @ts-ignore 
 import { useGLTF } from '@tresjs/cientos';
 import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
+
 import { useRawData } from '../../stores/raw_data';
 import { IMAGE_URL } from '../../constants';
 
+import PostProcessing from '../Promo/post_processing.vue';
+
 const { controls, camera } = useTresContext()
 const raw_dataStore = useRawData()
 const models = ref([] as model3DType[])
@@ -74,6 +77,9 @@ onAfterRender(() => {
 </script>
 <template>
     <Env v-bind="envVars" />
+    <Suspense>
+        <PostProcessing />
+    </Suspense>
     <template v-for="item in models">
         <TresGroup :name="item.name">
             <TresObject3D v-bind="item.modelFile.clone()" />

front/src/components/Promo/index.vue

@@ -9,6 +9,7 @@ import { OrbitControls, Stats } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
 import LoadModels from './load_models.vue'
+import PostProcessing from './post_processing.vue'
 import Sidebar from '../sidebar.vue'
 import { PROMOBG } from '../../constants';
 import { usePromoSidebar } from '../../stores/promo_sidebar';
@@ -94,6 +95,9 @@ const nextClickableId = () => {
                 <Suspense>
                     <LoadModels :source="route.params.target" :loaded_pan="loadedPan" :push="router.push" />
                 </Suspense>
+                <Suspense>
+                    <PostProcessing />
+                </Suspense>
             </TresCanvas>
             <div class="itemnav" v-if="sidebar.is_btn_open">
                 <div class="itemnav-close itemnav_one" v-if="sidebar.target">

front/src/components/Promo/load_models.vue

@@ -55,7 +55,7 @@ const itemStore = useItem();
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
 
-const { scene: point_mesh_obj } = await useGLTF((await import('../../assets/pointer/point-v1-v1.glb')).default)
+const { scene: point_mesh_obj } = await useGLTF((await import('../../assets/pointer/point.glb')).default)
 
 const set_moveto = (obj: smooth, value: Vector3 | Quaternion | undefined) => {
     obj.value = value

front/src/components/Promo/post_processing.vue

@@ -1,33 +1,56 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { useTresContext, useLoop } from '@tresjs/core';
+
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
+import { DotScreenShader } from 'three/addons/shaders/DotScreenShader.js';
-import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
-import { BleachBypassShader } from 'three/addons/shaders/BleachBypassShader.js';
+import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
 
+// import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+// import { BleachBypassShader } from 'three/addons/shaders/BleachBypassShader.js';
 
-import { useTresContext, useLoop } from '@tresjs/core';
+const { renderer, camera, scene, sizes } = useTresContext()
-import { Vector2 } from 'three';
-
-const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
-const renderPass = new RenderPass(scene.value, camera.value);
+onMounted(() => {
-const outputPass = new OutputPass();
+    if (camera.value) {
-const testPass = new ShaderPass(BleachBypassShader);
+        const renderPass = new RenderPass(scene.value, camera.value);
-const copyPass = new ShaderPass(CopyShader);
+
-composer.passes = [
+        const outputPass = new OutputPass();
-    renderPass,
+        let testPass
-    testPass,
+
-    outputPass,
+        testPass = new SSAOPass(scene.value, camera.value, sizes.width.value, sizes.height.value);
-    copyPass
+
-]
+        // testPass = new SAOPass(scene.value, camera.value)
+
+        console.log(testPass)
+        testPass.output = SSAOPass.OUTPUT.SSAO
+        testPass.output = SSAOPass.OUTPUT.Default
+        testPass.output = SSAOPass.OUTPUT.Default
+        testPass.kernelRadius = 512
+        testPass.maxDistance = 10
+        testPass.minDistance = 0.01
+        // testPass.params['saoBlur'] = false
+        // testPass.params['saoBlurRadius'] = 0.01
+
+        // testPass = new ShaderPass(DotScreenShader)
+        // testPass.uniforms[ 'scale' ].value = 4
+        composer.passes = [
+            renderPass,
+            testPass,
+            outputPass,
+        ]
+    }
+})
 
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    composer.render()
+    // composer.render()
 })
 </script>
 <template></template>