background blur

components/calcModels.vue

@@ -35,7 +35,7 @@ const loadAll = async () => {
     const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
     pointLight.value = light.children[2]
     pointLight.value.color = '#f0dea9'
-    pointLight.value.intensity = pointLight.value.intensity * 0.2
+    pointLight.value.intensity = pointLight.value.intensity * 0.1
     // pointLight.value.intensity = 0
     pointLight.value.shadow.camera.near = 50
     pointLight.value.shadow.bias = -0.002
@@ -112,8 +112,6 @@ watch([section_count, extra_section], () => {
                 <template v-if="pointLight">
                     <TresPointLight v-bind="pointLight" cast-shadow />
                 </template>
-
-                <TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
             </TresCanvas>
         </ClientOnly>
     </div>

components/model/parametric.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import {
-    ReinhardToneMapping, PCFSoftShadowMap,
+    PCFSoftShadowMap,
-    PMREMGenerator, Euler,
+    EquirectangularReflectionMapping,
+    CineonToneMapping,
+    Euler,
 } from 'three';
 import { GainMapLoader, } from '@monogrid/gainmap-js'
 import { useGLTF, } from '@tresjs/cientos'
@@ -14,7 +16,9 @@ const extra_section = use_extra_section()
 const max_size = use_max_size()
 
 const { scene, renderer } = useTresContext()
-renderer.value.toneMapping = ReinhardToneMapping
+renderer.value.toneMapping = CineonToneMapping
+renderer.value.toneMappingExposure = 0.5
+// renderer.value.gammaOutput = true
 
 renderer.value.shadowMap.enabled = true
 renderer.value.shadowMap.type = PCFSoftShadowMap
@@ -61,24 +65,19 @@ watch([section_count, extra_section], () => {
     }
 })
 
-const pmremGenerator = new PMREMGenerator(renderer.value);
-pmremGenerator.compileEquirectangularShader();
 onMounted(async () => {
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([
-        'hdrmaps/alps_field_4k.webp',
+        'hdrmaps/hdr.webp',
-        'hdrmaps/alps_field_4k-gainmap.webp',
+        'hdrmaps/hdr-gainmap.webp',
-        'hdrmaps/alps_field_4k.json',
+        'hdrmaps/hdr.json',
     ])
-    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    scene.value.environment = result.renderTarget.texture
-    const exrBackground = exrCubeRenderTarget.texture;
+    scene.value.background = result.renderTarget.texture
-    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+    scene.value.background.mapping = EquirectangularReflectionMapping
-
+    scene.value.backgroundRotation = new Euler(0, 10, 0)
-    scene.value.environment = newEnvMap
+    scene.value.backgroundIntensity = 1.5
-    scene.value.background = exrBackground
+    scene.value.backgroundBlurriness = 0.05
-    scene.value.backgroundRotation = new Euler(0, 5, 0)
-    // scene.value.background.mapping = EquirectangularReflectionMapping
-
     result.renderTarget.texture.dispose();
 })
 

public/hdrmaps/hdr.json

@@ -1,8 +1,8 @@
 {
   "gainMapMax": [
-    15.999075124875333,
+    5.336506559810254,
-    15.999075124875333,
+    5.336506559810254,
-    15.999075124875333
+    5.336506559810254
   ],
   "gainMapMin": [
     0,
@@ -14,7 +14,7 @@
     1,
     1
   ],
-  "hdrCapacityMax": 15.999075124875333,
+  "hdrCapacityMax": 5.336506559810254,
   "hdrCapacityMin": 0,
   "offsetHdr": [
     0.015625,

utils/material.ts

@@ -16,8 +16,8 @@ export const set_material = (scene: any, color: any) => {
         color: new Color(c || '#9c9c00'),
         transparent: true,
         opacity: 1,
-        roughness: 0.3,
+        roughness: 0.5,
-        metalness: 0.3
+        metalness: 0
     })
     set_metaril_func(scene, material)
 }