From 74bc0559d7827c9e2401bdc38161faf8147589c6 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Wed, 24 Jul 2024 13:18:51 +0300 Subject: [PATCH 01/11] post processing in file --- front/components.d.ts | 2 + front/src/components/Promo/load_models.vue | 51 ++----------------- front/src/components/Promo/main.vue | 10 ++-- front/src/components/Promo/post_pocessing.vue | 31 +++++++++++ front/src/index.d.ts | 2 +- 5 files changed, 44 insertions(+), 52 deletions(-) create mode 100644 front/src/components/Promo/post_pocessing.vue diff --git a/front/components.d.ts b/front/components.d.ts index f13080a..36d640b 100644 --- a/front/components.d.ts +++ b/front/components.d.ts @@ -7,6 +7,7 @@ export {} declare module 'vue' { export interface GlobalComponents { + Composer: typeof import('./src/components/Promo/composer.vue')['default'] Env: typeof import('./src/components/Promo/env.vue')['default'] Floorplan: typeof import('./src/components/Floorplan/index.vue')['default'] Gallery: typeof import('./src/components/Promo/gallery.vue')['default'] @@ -25,6 +26,7 @@ declare module 'vue' { Main: typeof import('./src/components/Promo/main.vue')['default'] ModelItem: typeof import('./src/components/Promo/modelItem.vue')['default'] Models: typeof import('./src/components/Promo/models.vue')['default'] + Post_pocessing: typeof import('./src/components/Promo/post_pocessing.vue')['default'] Projects: typeof import('./src/components/Projects.vue')['default'] Promo: typeof import('./src/components/Promo/index.vue')['default'] RandomIcon: typeof import('./src/components/RandomIcon.vue')['default'] diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 41a7bf8..9abd9dd 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -4,22 +4,12 @@ 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 { useTresContext, useSeek, useRenderLoop } from '@tresjs/core'; import { useGLTF } from '@tresjs/cientos' import Env from './env.vue' +import PostProcess from './post_pocessing.vue' import { IMAGE_URL, SERVER_URL, } from '../../constants' import { usePromoSidebar } from '../../stores/promo_sidebar'; @@ -27,28 +17,19 @@ import { usePromoScene } from '../../stores/promo_scene'; const props = defineProps(['source', 'loaded', 'loaded_pan']) -function shadows_and_pos(scene: any) { - scene.children.forEach((el: any) => { - // el.receiveShadow = true - // el.castShadow = true - shadows_and_pos(el) - }) -} - const models = ref([]) const clickable = ref([]) const clickable_items = ref([]) const clickable_refs = ref([]) const sidebar = usePromoSidebar(); const sidebar_scene = usePromoScene() -const { renderer, controls, camera, scene, raycaster } = useTresContext() +const { controls, camera, scene, raycaster } = useTresContext() const { seekByName, seekAllByName } = useSeek() const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string } // 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 +58,6 @@ const loadModels = async () => { item.modelUrl = `${IMAGE_URL}/${element.model_file}` let { scene: loaded_scene } = await useGLTF(item.modelUrl) - shadows_and_pos(loaded_scene) item.modelFile = loaded_scene item.name = element.name @@ -93,7 +73,6 @@ const loadModels = async () => { const element = clickable.value[index]; const find_element = seekByName(scene.value, element.object_name) if (!find_element) continue - // const res_array = (find_element as Group).isGroup ? find_element?.children : [find_element] if (find_element && !(find_element as Group).isGroup) { const world_position = new Vector3(); ((find_element as Mesh).geometry.boundingBox as any).getCenter(world_position); @@ -114,9 +93,7 @@ const loadModels = async () => { } const point = new Mesh(plane, mesh_material); - // const point = new Sprite(sprite_material) point.position.set(world_position.x, p * 3, world_position.z) - // point.scale.set(p, p, 1) point.name = `${element.id}_clickable` point.renderOrder = 10 @@ -139,36 +116,17 @@ const loadModels = async () => { } controls.value.enabled = true; - props.loaded() - - 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() + props.loaded(false) } const { onLoop } = useRenderLoop() onLoop(() => { clickable_refs.value.map(el => { - // el.quaternion.copy(camera.value?.quaternion); if (el.value[0] && typeof el.value[0].lookAt == 'function') { el.value[0].lookAt(camera.value?.position) } }) }) -const { onAfterRender } = useLoop() -onAfterRender(() => { - if (composer) { - composer.render() - } -}) const openSidebar = (id: number) => { const target = clickable.value.find(el => el.id == id) @@ -233,6 +191,7 @@ watch(() => sidebar_scene.list, () => {