@react-three/drei 9.51.8 → 9.51.10

package/core/MeshTransmissionMaterial.js

@@ -6,25 +6,34 @@ import { useFBO } from './useFBO.js';
 
 class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
   constructor({
-    samples = 5,
+    samples = 6,
     ...args
   } = {}) {
     super(args);
     this.uniforms = {
-      refraction: {
-        value: 0
+      chromaticAberration: {
+        value: 0.05
+      },
+      transmission: {
+        value: 1
+      },
+      thickness: {
+        value: 1
       },
-      rgbShift: {
-        value: 0.3
+      anisotropy: {
+        value: 0.1
       },
-      noise: {
-        value: 0.03
+      time: {
+        value: 0
+      },
+      distortion: {
+        value: 0.0
       },
-      saturation: {
-        value: 1.0
+      distortionScale: {
+        value: 0.5
       },
-      contrast: {
-        value: 1.0
+      temporalDistortion: {
+        value: 0.5
       },
       buffer: {
         value: null
@@ -39,44 +48,232 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
         ...this.uniforms
       }; // Head
 
-      shader.fragmentShader = `uniform float rgbShift;
-      uniform vec2 resolution;
-      uniform vec3 refractionColor;
-      uniform float refraction;
-      uniform float noise;
-      uniform float saturation;
-      uniform float contrast;
+      shader.fragmentShader =
+      /*glsl*/
+      `
+      uniform float chromaticAberration;
+      uniform vec2 resolution;            
+      uniform float anisotropy;      
+      uniform float time;
+      uniform float distortion;
+      uniform float distortionScale;
+      uniform float temporalDistortion;
       uniform sampler2D buffer;
       
       vec3 sat(vec3 rgb, float adjustment) {
         const vec3 W = vec3(0.2125, 0.7154, 0.0721);
         vec3 intensity = vec3(dot(rgb, W));
         return mix(intensity, rgb, adjustment);
-      }\n` + shader.fragmentShader; // Remove transmission
-
-      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_pars_fragment>', '');
-      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_fragment>', ''); // Add refraction
-
-      shader.fragmentShader = shader.fragmentShader.replace('vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;', `vec2 uv = gl_FragCoord.xy / resolution.xy;
-        vec2 refractNormal = vNormal.xy * (1.0 - vNormal.z * 0.85);
-        vec3 refractCol = vec3(0.0);        
-        float randomCoords = rand(uv);
-        vec2 randomCoords2;
-        float roughBlur = roughness * roughness;
-        float slide;
-        #pragma unroll_loop_start
-        for (int i = 0; i < ${samples}; i ++) {
-          slide = float(UNROLLED_LOOP_INDEX) / float(${samples}) * 0.1 + randomCoords * noise;
-          randomCoords2 = vec2(rand(uv + randomCoords + 0.1 * float(UNROLLED_LOOP_INDEX)), rand(uv - randomCoords - 0.1 * float(UNROLLED_LOOP_INDEX))) - 0.5;
-          randomCoords2 = normalize(randomCoords2) * sqrt(rand(uv + 0.12 * float(UNROLLED_LOOP_INDEX)));
-          refractCol.r += texture2D(buffer, uv - refractNormal * (refraction + slide * 1.0) * rgbShift + randomCoords2 * roughBlur).r;
-          refractCol.g += texture2D(buffer, uv - refractNormal * (refraction + slide * 2.0) * rgbShift + randomCoords2 * roughBlur).g;
-          refractCol.b += texture2D(buffer, uv - refractNormal * (refraction + slide * 3.0) * rgbShift + randomCoords2 * roughBlur).b;
-          refractCol = sat(refractCol, saturation);
+      }
+      vec3 random3(vec3 c) {
+        float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
+        vec3 r;
+        r.z = fract(512.0*j);
+        j *= .125;
+        r.x = fract(512.0*j);
+        j *= .125;
+        r.y = fract(512.0*j);
+        return r-0.5;
+      }
+
+      float seed = 0.0;
+      uint hash( uint x ) {
+        x += ( x << 10u );
+        x ^= ( x >>  6u );
+        x += ( x <<  3u );
+        x ^= ( x >> 11u );
+        x += ( x << 15u );
+        return x;
+      }
+
+      // Compound versions of the hashing algorithm I whipped together.
+      uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y)                         ); }
+      uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z)             ); }
+      uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); }
+
+      // Construct a float with half-open range [0:1] using low 23 bits.
+      // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0.
+      float floatConstruct( uint m ) {
+        const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask
+        const uint ieeeOne      = 0x3F800000u; // 1.0 in IEEE binary32
+
+        m &= ieeeMantissa;                     // Keep only mantissa bits (fractional part)
+        m |= ieeeOne;                          // Add fractional part to 1.0
+
+        float  f = uintBitsToFloat( m );       // Range [1:2]
+        return f - 1.0;                        // Range [0:1]
+      }
+
+      // Pseudo-random value in half-open range [0:1].
+      float random( float x ) { return floatConstruct(hash(floatBitsToUint(x))); }
+      float random( vec2  v ) { return floatConstruct(hash(floatBitsToUint(v))); }
+      float random( vec3  v ) { return floatConstruct(hash(floatBitsToUint(v))); }
+      float random( vec4  v ) { return floatConstruct(hash(floatBitsToUint(v))); }
+
+      float rand() {
+        float result = random(vec3(gl_FragCoord.xy, seed));
+        seed += 1.0;
+        return result;
+      }
+
+      const float F3 =  0.3333333;
+      const float G3 =  0.1666667;
+
+      float snoise(vec3 p) {
+        vec3 s = floor(p + dot(p, vec3(F3)));
+        vec3 x = p - s + dot(s, vec3(G3));
+        vec3 e = step(vec3(0.0), x - x.yzx);
+        vec3 i1 = e*(1.0 - e.zxy);
+        vec3 i2 = 1.0 - e.zxy*(1.0 - e);
+        vec3 x1 = x - i1 + G3;
+        vec3 x2 = x - i2 + 2.0*G3;
+        vec3 x3 = x - 1.0 + 3.0*G3;
+        vec4 w, d;
+        w.x = dot(x, x);
+        w.y = dot(x1, x1);
+        w.z = dot(x2, x2);
+        w.w = dot(x3, x3);
+        w = max(0.6 - w, 0.0);
+        d.x = dot(random3(s), x);
+        d.y = dot(random3(s + i1), x1);
+        d.z = dot(random3(s + i2), x2);
+        d.w = dot(random3(s + 1.0), x3);
+        w *= w;
+        w *= w;
+        d *= w;
+        return dot(d, vec4(52.0));
+      }
+
+      float snoiseFractal(vec3 m) {
+        return   0.5333333* snoise(m)
+              +0.2666667* snoise(2.0*m)
+              +0.1333333* snoise(4.0*m)
+              +0.0666667* snoise(8.0*m);
+      }\n` + shader.fragmentShader; // Replace transmission
+
+      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_pars_fragment>',
+      /*glsl*/
+      `
+        #ifdef USE_TRANSMISSION
+          // Transmission code is based on glTF-Sampler-Viewer
+          // https://github.com/KhronosGroup/glTF-Sample-Viewer
+          uniform float transmission;
+          uniform float thickness;
+          uniform float attenuationDistance;
+          uniform vec3 attenuationColor;
+          #ifdef USE_TRANSMISSIONMAP
+            uniform sampler2D transmissionMap;
+          #endif
+          #ifdef USE_THICKNESSMAP
+            uniform sampler2D thicknessMap;
+          #endif
+          uniform vec2 transmissionSamplerSize;
+          uniform sampler2D transmissionSamplerMap;
+          uniform mat4 modelMatrix;
+          uniform mat4 projectionMatrix;
+          varying vec3 vWorldPosition;
+          vec3 getVolumeTransmissionRay( const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix ) {
+            // Direction of refracted light.
+            vec3 refractionVector = refract( - v, normalize( n ), 1.0 / ior );
+            // Compute rotation-independant scaling of the model matrix.
+            vec3 modelScale;
+            modelScale.x = length( vec3( modelMatrix[ 0 ].xyz ) );
+            modelScale.y = length( vec3( modelMatrix[ 1 ].xyz ) );
+            modelScale.z = length( vec3( modelMatrix[ 2 ].xyz ) );
+            // The thickness is specified in local space.
+            return normalize( refractionVector ) * thickness * modelScale;
+          }
+          float applyIorToRoughness( const in float roughness, const in float ior ) {
+            // Scale roughness with IOR so that an IOR of 1.0 results in no microfacet refraction and
+            // an IOR of 1.5 results in the default amount of microfacet refraction.
+            return roughness * clamp( ior * 2.0 - 2.0, 0.0, 1.0 );
+          }
+          vec4 getTransmissionSample( const in vec2 fragCoord, const in float roughness, const in float ior ) {
+            return texture2D(buffer, fragCoord.xy);
+          }
+          vec3 applyVolumeAttenuation( const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance ) {
+            if ( isinf( attenuationDistance ) ) {
+              // Attenuation distance is +∞, i.e. the transmitted color is not attenuated at all.
+              return radiance;
+            } else {
+              // Compute light attenuation using Beer's law.
+              vec3 attenuationCoefficient = -log( attenuationColor ) / attenuationDistance;
+              vec3 transmittance = exp( - attenuationCoefficient * transmissionDistance ); // Beer's law
+              return transmittance * radiance;
+            }
+          }
+          vec4 getIBLVolumeRefraction( const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,
+            const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,
+            const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,
+            const in vec3 attenuationColor, const in float attenuationDistance ) {
+            vec3 transmissionRay = getVolumeTransmissionRay( n, v, thickness, ior, modelMatrix );
+            vec3 refractedRayExit = position + transmissionRay;
+            // Project refracted vector on the framebuffer, while mapping to normalized device coordinates.
+            vec4 ndcPos = projMatrix * viewMatrix * vec4( refractedRayExit, 1.0 );
+            vec2 refractionCoords = ndcPos.xy / ndcPos.w;
+            refractionCoords += 1.0;
+            refractionCoords /= 2.0;
+            // Sample framebuffer to get pixel the refracted ray hits.
+            vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );
+            vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );
+            // Get the specular component.
+            vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );
+            return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );
+          }
+        #endif\n`);
+      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_fragment>',
+      /*glsl*/
+      `
+        vec2 uv = gl_FragCoord.xy / resolution.xy;      
+        // Improve the refraction to use the world pos
+        material.transmission = transmission;
+        material.transmissionAlpha = 1.0;
+        material.thickness = thickness;
+        material.attenuationDistance = attenuationDistance;
+        material.attenuationColor = attenuationColor;
+        #ifdef USE_TRANSMISSIONMAP
+          material.transmission *= texture2D( transmissionMap, vUv ).r;
+        #endif
+        #ifdef USE_THICKNESSMAP
+          material.thickness *= texture2D( thicknessMap, vUv ).g;
+        #endif
+        
+        vec3 pos = vWorldPosition;
+        vec3 v = normalize( cameraPosition - pos );
+        vec3 n = inverseTransformDirection( normal, viewMatrix );
+        vec3 transmission = vec3(0.0);
+        float transmissionR, transmissionB, transmissionG;
+        float randomCoords = rand();
+        float thickness_smear = thickness * max(pow(roughness, 0.33), anisotropy);
+        vec3 distortionNormal = vec3(0.0);
+        vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;
+        if (distortion > 0.0) {
+          distortionNormal = distortion * vec3(snoiseFractal(vec3((pos * distortionScale + temporalOffset))), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));
+        }
+        for (float i = 0.0; i < ${samples}.0; i ++) {
+          vec3 sampleNorm = normalize(n + roughness * roughness * 2.0 * normalize(vec3(rand() - 0.5, rand() - 0.5, rand() - 0.5)) * pow(rand(), 0.33) + distortionNormal);
+          transmissionR = getIBLVolumeRefraction(
+            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
+            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness  + thickness_smear * (i + randomCoords) / float(${samples}),
+            material.attenuationColor, material.attenuationDistance
+          ).r;
+          transmissionG = getIBLVolumeRefraction(
+            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
+            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior  * (1.0 + chromaticAberration * (i + randomCoords) / float(${samples})) , material.thickness + thickness_smear * (i + randomCoords) / float(${samples}),
+            material.attenuationColor, material.attenuationDistance
+          ).g;
+          transmissionB = getIBLVolumeRefraction(
+            sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,
+            pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${samples})), material.thickness + thickness_smear * (i + randomCoords) / float(${samples}),
+            material.attenuationColor, material.attenuationDistance
+          ).b;
+          transmission.r += transmissionR;
+          transmission.g += transmissionG;
+          transmission.b += transmissionB;
         }
-        #pragma unroll_loop_end
-        refractCol /= float(${samples});
-        vec3 outgoingLight = (refractCol * totalDiffuse * contrast) + totalSpecular + totalEmissiveRadiance;`);
+        transmission /= ${samples}.0;
+        material.transmissionAlpha = 1.0;
+        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`);
     };
 
     Object.keys(this.uniforms).forEach(name => Object.defineProperty(this, name, {
@@ -89,8 +286,9 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
 
 const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
   buffer,
+  distortionSpeed = 1,
   samples = 10,
-  resolution = 1024,
+  resolution,
   background,
   ...props
 }, fref) => {
@@ -103,15 +301,13 @@ const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
     viewport
   } = useThree();
   const fbo = useFBO(resolution);
-  const config = React.useMemo(() => ({
-    samples
-  }), [samples]);
   let oldBg;
   let oldVis;
   let parent;
   useFrame(state => {
     if (!buffer) {
       parent = ref.current.__r3f.parent;
+      ref.current.time = state.clock.getElapsedTime() * distortionSpeed;
 
       if (parent) {
         // Hide the outer groups contents
@@ -135,7 +331,9 @@ const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
 
   React.useImperativeHandle(fref, () => ref.current, []);
   return /*#__PURE__*/React.createElement("meshTransmissionMaterial", _extends({
-    args: [config],
+    args: [React.useMemo(() => ({
+      samples
+    }), [samples])],
     ref: ref,
     buffer: buffer || fbo.texture,
     resolution: [size.width * viewport.dpr, size.height * viewport.dpr]