ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bx-1140-postprocessing #12

Merged
ksenia_mikhailova merged 18 commits from bx-1140-postprocessing into dev 2024-07-30 09:17:41 +03:00
Conversation 0 Commits 18 Files Changed 17 +45 -51
4 changed files with 45 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1d8739d7d4 - Show all commits

15
front/src/components/Promo/env.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { ACESFilmicToneMapping, EquirectangularReflectionMapping, ReinhardToneMapping, SRGBColorSpace } from 'three';
import { ACESFilmicToneMapping, Color, EquirectangularReflectionMapping, ReinhardToneMapping, SRGBColorSpace } from 'three';
import { GainMapLoader } from '@monogrid/gainmap-js'
import { useTresContext } from '@tresjs/core';
@ -12,6 +12,12 @@ import hdr_webp from '../../assets/promo/hdr/hdr.webp'
const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
const { renderer, scene } = useTresContext()
// renderer.value.toneMapping = ReinhardToneMapping
renderer.value.outputColorSpace = SRGBColorSpace;
renderer.value.toneMapping = ACESFilmicToneMapping;
renderer.value.toneMappingExposure = 1.25;
renderer.value.setPixelRatio(1.5)
const loadEnv = async () => {
const loader = new GainMapLoader(renderer.value)
const result = await loader.loadAsync([
@ -21,17 +27,14 @@ const loadEnv = async () => {
])
scene.value.environment = result.renderTarget.texture
scene.value.environmentIntensity = 2.5
// scene.value.background = result.renderTarget.texture
// scene.value.background.mapping = EquirectangularReflectionMapping
// scene.value.backgroundBlurriness = 0.15
result.renderTarget.texture.dispose();
}
// renderer.value.toneMapping = ReinhardToneMapping
renderer.value.outputColorSpace = SRGBColorSpace;
renderer.value.toneMapping = ACESFilmicToneMapping;
renderer.value.toneMappingExposure = 1;
renderer.value.setPixelRatio(1.5)
onMounted(async () => {
loadEnv()
})

15
front/src/components/Promo/load_models.vue
View File

@ -16,7 +16,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', 'clearColor'])
const props = defineProps(['source', 'loaded', 'loaded_pan'])
const models = ref<model3DType[]>([])
const clickable = ref<clickableAreaType[]>([])
@ -24,7 +24,7 @@ const clickable_items = ref<any[]>([])
const clickable_refs = ref<any[]>([])
const sidebar = usePromoSidebar();
const sidebar_scene = usePromoScene()
const { controls, camera, scene, raycaster } = useTresContext()
const { controls, camera, scene, raycaster, renderer } = 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 }
@ -50,6 +50,11 @@ const loadModels = async () => {
tiltShift.aperture = 0.1
tiltShift.maxblur = 5
const c = new Color()
renderer.value.getClearColor(c)
// console.log(c, c.offsetHSL(0, 0, 10))
// renderer.value.setClearColor(c.offsetHSL(10, 10, 10))
const data = raw_data.elements
if (!controls.value) return;
@ -72,7 +77,7 @@ const loadModels = async () => {
item.modelFile = loaded_scene
item.name = element.name
if(!element.is_enabled) {
if (!element.is_enabled) {
item.modelFile.visible = false
}
@ -85,7 +90,7 @@ const loadModels = async () => {
const ground = new Mesh(
new CircleGeometry(tiltShift.focus * 10, tiltShift.focus * 10),
new MeshStandardMaterial({
color: props.clearColor,
color: c.offsetHSL(0, 0, -0.5),
displacementMap: groundTexture.displacementMap,
displacementScale: tiltShift.focus,
roughness: 100,
@ -221,7 +226,7 @@ watch(() => sidebar_scene.list, () => {
<template>
<TresGroup name="loaded">
<Env v-bind="envVars" />
<PostProcess :tiltShift="tiltShift" :clearColor="props.clearColor" />
<PostProcess :tiltShift="tiltShift" />
<template v-for="item in models">
<TresGroup :name="item.name">
<TresObject3D v-bind="item.modelFile.clone()" />

11
front/src/components/Promo/main.vue
View File

@ -3,7 +3,7 @@ import { reactive, ref, watch } from 'vue';
import type { Ref } from 'vue'
import { RouterLink, useRoute } from 'vue-router';
import { Vector3 } from 'three';
import { Color, Vector3 } from 'three';
import { TresCanvas, useTexture } from '@tresjs/core';
import { OrbitControls } from '@tresjs/cientos'
import '@tresjs/leches/styles'
@ -54,19 +54,18 @@ watch(() => route.params.target, () => {
}
}, { deep: true })
const clearColor = 'steelBlue'
</script>
<template>
<div>
<div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
<TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="clearColor" :logarithmicDepthBuffer="true">
<TresCanvas window-size :alpha="false" power-preference="high-performance" clear-color="MediumSlateBlue"
:logarithmicDepthBuffer="true">
<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"
:clear-color="clearColor" />
<LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan" />
</Suspense>
<TresAmbientLight />
</TresCanvas>
<div class="homelink">
<a href="#" @click.prevent="sidebar.open" v-if="!sidebar.is_open">

55
front/src/components/Promo/post_pocessing.vue
View File

@ -8,52 +8,39 @@ import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { useTresContext, useLoop } from '@tresjs/core';
import { watch } from 'vue';
import { Color, Fog, FogExp2 } from 'three';
import { GammaCorrectionShader, TAARenderPass } from 'three/examples/jsm/Addons.js';
import { Color, Fog } from 'three';
const { renderer, camera, scene } = useTresContext()
const composer = new EffectComposer(renderer.value);
const props = defineProps(['tiltShift', 'clearColor'])
const k = { start: 0.5, end: 3 }
const props = defineProps(['tiltShift'])
const k = { start: 0.5, end: 2.5 }
if (camera.value) {
const renderPass = new RenderPass(scene.value, camera.value);
const makePostProcess = () => {
if (camera.value) {
const renderPass = new RenderPass(scene.value, camera.value);
// const bokehPass = new BokehPass(scene.value, camera.value, {
// focus: props.tiltShift.focus,
// aperture: (props.tiltShift.aperture) * 0.00001,
// maxblur: (props.tiltShift.maxblur) * 0.01
// });
const outputPass = new OutputPass();
composer.addPass(renderPass);
// composer.addPass(outputPass);
const bokehPass = new BokehPass(scene.value, camera.value, {
focus: props.tiltShift.focus,
aperture: (props.tiltShift.aperture) * 0.00001,
maxblur: (props.tiltShift.maxblur) * 0.01
});
const outputPass = new OutputPass();
// composer.addPass(renderPass);
// composer.addPass(bokehPass);
// composer.addPass(outputPass);
scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
const c = new Color()
renderer.value.getClearColor(c)
scene.value.fog = new Fog(c, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
}
}
makePostProcess()
const { onAfterRender } = useLoop()
onAfterRender(() => {
// composer.render()
})
watch(props.tiltShift, () => {
if (camera.value) {
// const args = {
// focus: props.tiltShift.focus,
// aperture: props.tiltShift.aperture * 0.00001,
// maxblur: props.tiltShift.maxblur * 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);
const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaCorrectionPass);
scene.value.fog = new Fog(props.clearColor, props.tiltShift.focus * k.start, props.tiltShift.focus * k.end)
}
}, { deep: true })
watch(props.tiltShift, makePostProcess, { deep: true })
</script>
<template></template>