Compare commits

...

2 Commits

Author SHA1 Message Date
Kseninia Mikhaylova e091f32adf test 2024-10-03 15:47:50 +03:00
Kseninia Mikhaylova b14163bd3c azimuth 2024-10-02 15:34:46 +03:00
5 changed files with 51 additions and 10 deletions

View File

@ -1,7 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { DoubleSide, PointLight } from 'three';
import { degToRad } from 'three/src/math/MathUtils.js';
import { TresCanvas } from '@tresjs/core' import { TresCanvas } from '@tresjs/core'
import { Stats, OrbitControls } from '@tresjs/cientos' import { Stats, OrbitControls } from '@tresjs/cientos'
import { degToRad } from 'three/src/math/MathUtils.js';
import gaussMaterial from '~/utils/gauss_material';
const controlsState = reactive({ const controlsState = reactive({
position: { x: 0, y: 0, z: 0 }, position: { x: 0, y: 0, z: 0 },
@ -9,8 +12,8 @@ const controlsState = reactive({
enableZoom: false, enableZoom: false,
minPolarAngle: degToRad(60), minPolarAngle: degToRad(60),
maxPolarAngle: degToRad(100), maxPolarAngle: degToRad(100),
minAzimuthAngle: degToRad(0), // minAzimuthAngle: degToRad(0),
maxAzimuthAngle: degToRad(180), // maxAzimuthAngle: degToRad(180),
}) })
const cameraStat = reactive({ const cameraStat = reactive({
position: [0, 0, 5], position: [0, 0, 5],

View File

@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { Vector3 } from 'three'; import { Vector3 } from 'three';
import { getColorNameFromRal } from '@/components/ral'
import type { ralTypes } from '@/components/ral' import type { ralTypes } from '@/components/ral'
import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc'; import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';

View File

@ -8,7 +8,7 @@ import {
import { GainMapLoader, } from '@monogrid/gainmap-js' import { GainMapLoader, } from '@monogrid/gainmap-js'
import { useLoop } from '@tresjs/core'; import { useLoop } from '@tresjs/core';
const { scene, renderer, camera } = useTresContext() const { scene, renderer, camera } = useTresContext()
const {onBeforeRender} = useLoop() const { onBeforeRender } = useLoop()
renderer.value.toneMapping = CineonToneMapping renderer.value.toneMapping = CineonToneMapping
renderer.value.toneMappingExposure = 1 renderer.value.toneMappingExposure = 1
@ -16,9 +16,10 @@ renderer.value.toneMappingExposure = 1
renderer.value.shadowMap.enabled = true renderer.value.shadowMap.enabled = true
renderer.value.shadowMap.type = PCFSoftShadowMap renderer.value.shadowMap.type = PCFSoftShadowMap
const pmremGenerator = new PMREMGenerator(renderer.value);
pmremGenerator.compileEquirectangularShader();
onMounted(async () => { onMounted(async () => {
const pmremGenerator = new PMREMGenerator(renderer.value);
pmremGenerator.compileEquirectangularShader();
const loader = new GainMapLoader(renderer.value) const loader = new GainMapLoader(renderer.value)
const result = await loader.loadAsync([ const result = await loader.loadAsync([
'hdrmaps/hdr.webp', 'hdrmaps/hdr.webp',
@ -36,8 +37,8 @@ onMounted(async () => {
scene.value.environmentRotation.z = 0.25 scene.value.environmentRotation.z = 0.25
result.renderTarget.texture.dispose(); result.renderTarget.texture.dispose();
}) })
onBeforeRender(()=>{ onBeforeRender(() => {
if(camera.value) { if (camera.value) {
const cameraDirection = new Vector3() const cameraDirection = new Vector3()
camera.value.getWorldDirection(cameraDirection); camera.value.getWorldDirection(cameraDirection);
const angle = Math.atan2(cameraDirection.z, cameraDirection.x); const angle = Math.atan2(cameraDirection.z, cameraDirection.x);

View File

@ -243,7 +243,7 @@ watch([
}); });
</script> </script>
<template> <template>
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="0"> <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :position-y="lSize * 0.5">
<TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"> <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos">
<template v-for="item in pillar"> <template v-for="item in pillar">
<TresMesh v-bind="item.clone()" /> <TresMesh v-bind="item.clone()" />

38
utils/gauss_material.ts Normal file
View File

@ -0,0 +1,38 @@
import { ShadowMaterial, type WebGLProgramParameters } from "three";
const gaussMaterial = new ShadowMaterial()
gaussMaterial.onBeforeCompile = (shader: WebGLProgramParameters) => {
// Изменяем фрагментный шейдер
console.log(shader.fragmentShader)
shader.fragmentShader = `
float gaussian(float x, float sigma) {
return (1.0 / (sqrt(2.0 * 3.14159265) * sigma)) * exp(-0.5 * (x * x) / (sigma * sigma));
}
${shader.fragmentShader}`
.replace(
`#include <colorspace_fragment>`,
`#include <colorspace_fragment>
// Add Gaussian blur logic here
vec4 blurColor = vec4(0.0);
vec4 test = vec4(0.0);
float totalWeight = 0.0;
const int blurRadius = 1; // Adjust for more or less blur
for (int x = -blurRadius; x <= blurRadius; x++) {
for (int y = -blurRadius; y <= blurRadius; y++) {
// Используем gaussian для вычисления веса
float weight = gaussian(float(sqrt(float(x * x + y * y))), float(blurRadius));
// Получаем цвет текстуры с учетом смещения
blurColor += texture2D(pointShadowMap[0], gl_FragCoord.xy + vec2(float(x), float(y))) * weight;
totalWeight += weight;
}
}
blurColor /= totalWeight;
gl_FragColor = vec4(texture2D(pointShadowMap[0], vec2(-1.0,1.0)));
`);
}
export default gaussMaterial