test

components/calc/models.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import { DoubleSide, PointLight } from 'three';
+import { degToRad } from 'three/src/math/MathUtils.js';
 import { TresCanvas } from '@tresjs/core'
 import { Stats, OrbitControls } from '@tresjs/cientos'
-import { degToRad } from 'three/src/math/MathUtils.js';
+
+import gaussMaterial from '~/utils/gauss_material';
 
 const controlsState = reactive({
     position: { x: 0, y: 0, z: 0 },

components/model/env.vue

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

components/model/fence.vue

@@ -243,7 +243,7 @@ watch([
 });
 </script>
 <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">
             <template v-for="item in pillar">
                 <TresMesh v-bind="item.clone()" />

utils/gauss_material.ts

@@ -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