parallax: cut edges

.changeset/violet-horses-repeat.md

@@ -0,0 +1,5 @@
+---
+"@threejs-kit/materials": patch
+---
+
+new `cutEdges` parameter for `MeshParallaxMaterial`. Indicates whether to trim the edges of the geometry when the parallaxed UV coordinates exceed the value of 1. If set to true, any portions of the material where the parallaxed UV coordinates go beyond the limit wil get clipped producing a jagged look at the edge.

apps/docs/src/content/docs/materials/parallax-material.mdx

@@ -37,6 +37,7 @@ const material = new MeshParallaxMaterial(
     parallaxScale: 0.05,
     parallaxMinLayers: 16,
     parallaxMaxLayers: 96,
+    cutEdges: true,
     parallaxOcclusionMap: bumpTexture,
     repeatUv: new THREE.Vector2(2, 2),
   }
@@ -56,14 +57,6 @@ new MeshParallaxMaterial(
 
 ## Parameters
 
-### `debugQualityMask`
-
-**type:** `boolean`
-
-Enables a debug visualization to assist with quality optimization. The quality parameter
-has range of 0 to 1. A value of 0 results in a black preview, indicating minimal detail,
-while a value of 1 yields a white preview, signifying maximum detail.
-
 ### parallaxOcclusionMap
 
 **type:** `THREE.Texture`
@@ -85,6 +78,12 @@ along both the U and V axes.
 This parameter adjusts the intensity of the parallax effect. It accepts positive floating-point values.
 For most use cases, optimal results are generally achieved with values ranging from **0.01** to **0.15**.
 
+### cutEdges
+
+**type:** `boolean`
+
+Indicates whether to trim the edges of the geometry when the parallaxed UV coordinates exceed the value of 1. If set to true, any portions of the material where the parallaxed UV coordinates go beyond the limit wil get clipped producing a jagged look at the edge.
+
 ### parallaxMinLayers
 
 **type:** `number`
@@ -104,7 +103,13 @@ The number of layers will never exceed this value and typically approaches this
 Sets an upper limit for the effective range of the parallax effect. The number of occlusion layers is
 highest near the camera and gradually diminishes as the distance approaches this cutoff value.
 
-## Performance
+### `debugQualityMask`
+
+**type:** `boolean`
+
+Enables a debug visualization to assist with quality optimization. The quality parameter
+has range of 0 to 1. A value of 0 results in a black preview, indicating minimal detail,
+while a value of 1 yields a white preview, signifying maximum detail.
 
 import debugQualityMask from "../../../assets/materials/parallax/debug.png";
 

packages/materials/src/MeshParallaxMaterial/MeshParallaxMaterial.ts

@@ -16,6 +16,7 @@ interface MeshParallaxMaterialProps {
   parallaxMinLayers?: number;
   parallaxMaxLayers?: number;
   cutoffDistance?: number;
+  cutEdges?: boolean;
 }
 
 export class MeshParallaxMaterial extends MeshPhysicalMaterial {
@@ -25,6 +26,7 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
   private ParallaxMinLayers = { value: 16 };
   private ParallaxMaxLayers = { value: 128 };
   private CutoffDistance = { value: 300 };
+  private CutEdges = { value: true };
 
   constructor(
     parameters: MeshPhysicalMaterialParameters = {},
@@ -51,6 +53,9 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
     if (parallaxParameters.parallaxOcclusionMap)
       this.ParallaxOcclusionMap.value = parallaxParameters.parallaxOcclusionMap;
 
+    if (parallaxParameters.cutEdges)
+      this.CutEdges.value = parallaxParameters.cutEdges;
+
     if (parallaxParameters.debugQualityMask)
       this.defines["QUALITY_MASK_DEBUG"] = "";
   }
@@ -61,6 +66,7 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
     shader.uniforms.parallaxMinLayers = this.ParallaxMinLayers;
     shader.uniforms.parallaxMaxLayers = this.ParallaxMaxLayers;
     shader.uniforms.cutoffDistance = this.CutoffDistance;
+    shader.uniforms.cutEdges = this.CutEdges;
 
     shader.vertexShader = shader.vertexShader.replace(
       `#include <clipping_planes_pars_vertex>`,
@@ -113,6 +119,9 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
      uniform float cutoffDistance;
 
      uniform mat4 projectionMatrix;
+
+
+     uniform bool cutEdges;
      
 
      vec2 parallaxMap(in vec3 V, float parallaxScale, float oParallaxMinLayers, float oParallaxMaxLayers) {
@@ -181,7 +190,6 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
       `#include <clipping_planes_fragment>`,
       /*glsl*/ `
       
-
       float viewDirModifier = (1. - pow(vCosTheta, 1.))*0.45 +0.2;
       float steepViewDirModifier = (1. - clamp(pow((vCosTheta)*1., 2.),0.,1.))*0.6 + 0.01;
 
@@ -204,12 +212,12 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
       }
 
       vec2 currentTextureCoords = parallaxedUv / repeatUv;
-      // todo optional
-      // if (currentTextureCoords.x > 1.0f || currentTextureCoords.x < 0.0f || currentTextureCoords.y < 0.f || currentTextureCoords.y > 1.f)
-      //   discard;     
 
-      
-      
+
+      if(cutEdges == true){
+        if (currentTextureCoords.x > 1.0f || currentTextureCoords.x < 0.0f || currentTextureCoords.y < 0.f || currentTextureCoords.y > 1.f)
+          discard;               
+      }
  
       ${parallaxUv}
       #include <clipping_planes_fragment>`
@@ -268,4 +276,11 @@ export class MeshParallaxMaterial extends MeshPhysicalMaterial {
   set qualityCutoffDistance(distance: number) {
     this.CutoffDistance.value = distance;
   }
+
+  public get cutEdges() {
+    return this.CutEdges;
+  }
+  public set cutEdges(value) {
+    this.CutEdges = value;
+  }
 }