postprocessing

front/src/components/Promo/env.vue

@@ -32,3 +32,4 @@ onMounted(async () => {
 })
 watch(() => props.hdr_webp, loadEnv)
 </script>
+<template></template>

front/src/components/Promo/load_models.vue

@@ -1,7 +1,22 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { Box3, Color, DoubleSide, Group, Mesh, MeshBasicMaterial, PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3 } from 'three';
-import { useTresContext, useSeek, useRenderLoop } from '@tresjs/core';
+import {
+    Box3, Color, DoubleSide, Group, Mesh, MeshBasicMaterial,
+    PlaneGeometry, SpriteMaterial, TextureLoader, Vector2, Vector3,
+} from 'three';
+// import { DepthOfField, EffectComposer, Pixelation } from '@tresjs/post-processing'
+
+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 { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+import '@tresjs/leches/styles'
+
+import { useTresContext, useSeek, useRenderLoop, useLoop } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos'
 
 import Env from './env.vue'
@@ -38,6 +53,7 @@ const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_w
 // renderer.value.capabilities.maxTextures = 4
 // renderer.value.capabilities.maxTextureSize = 512
 // renderer.value.capabilities.precision = 'lowp'
+let composer: any = null
 
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
@@ -77,7 +93,6 @@ const loadModels = async () => {
         clickable.value.push(...clickable_areas)
     }
     sidebar_scene.setData(sidebar_items)
-    // sidebar.open()
 
     for (let index = 0; index < clickable.value.length; index++) {
         const element = clickable.value[index];
@@ -130,9 +145,18 @@ const loadModels = async () => {
 
     controls.value.enabled = true;
     props.loaded()
-    console.log("Number of Triangles :", renderer.value.info.render.triangles);
-    console.log("render.calls ", renderer.value.info.render.calls);
 
+    composer = new EffectComposer(renderer.value);
+    composer.addPass(new RenderPass(scene.value, camera.value));
+
+    const effect1 = new ShaderPass(DotScreenShader);
+    effect1.uniforms['scale'].value = 40;
+    composer.addPass(effect1);
+    function animate() {
+        requestAnimationFrame(animate);
+        composer.render();
+    }
+    // animate()
 }
 
 const { onLoop } = useRenderLoop()
@@ -144,6 +168,12 @@ onLoop(() => {
         }
     })
 })
+const { onAfterRender } = useLoop()
+onAfterRender(() => {
+    if (composer) {
+        composer.render()
+    }
+})
 
 const openSidebar = (id: number) => {
     const target = clickable.value.find(el => el.id == id)
@@ -172,7 +202,6 @@ watch(() => props.source, () => {
 
 onMounted(() => {
     document.addEventListener('click', clickEvent)
-    console.log(sidebar.is_open)
     if (sidebar.is_open) {
         sidebar.close()
     }

front/src/components/Promo/main.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref, watch, computed } from 'vue';
 import type { Ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router';
 
 import { Vector3 } from 'three';
-import { TresCanvas, vLightHelper } from '@tresjs/core';
-import { BakeShadows, OrbitControls, Stats } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core';
+import { OrbitControls } from '@tresjs/cientos'
+import '@tresjs/leches/styles'
 
 import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
@@ -56,7 +57,7 @@ watch(() => route.params.target, () => {
 <template>
     <div>
         <div :class="[{ 'loading': !models_loading }, 'canvas-wrapper']">
-            <TresCanvas window-size shadows :alpha="false" power-preference="high-performance">
+            <TresCanvas window-size :alpha="false" power-preference="high-performance" >
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
@@ -66,20 +67,6 @@ watch(() => route.params.target, () => {
                     <TresPlaneGeometry :args="[200, 200]" />
                     <TresShadowMaterial :opacity="0.2" />
                 </TresMesh>
-                <TresGroup name="lights" v-if="false">
-                    <TresHemisphereLight :intensity="100" :position-x="50" :position-y="20" cast-shadow color="red"
-                        v-light-helper />
-                    <TresPointLight :intensity="100" :position-x="0" :position-y="20" cast-shadow color="green"
-                        v-light-helper />
-                    <TresDirectionalLight :intensity="100" :position-x="-50" :position-y="20" cast-shadow color="blue"
-                        v-light-helper />
-                    <TresPointLight :intensity="2000" :position-x="0" :position-y="20" cast-shadow
-                        color="rgb(0,255,0)" />
-                </TresGroup>
-                <BakeShadows v-if="models_loading" />
-                <Suspense>
-                    <Stats />
-                </Suspense>
             </TresCanvas>
             <div class="homelink">
                 <a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">