@react-three/drei 9.74.11 → 9.74.13

package/src/core/MeshReflectorMaterial.js

@@ -0,0 +1,182 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, LinearFilter, HalfFloatType } from 'three';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { BlurPass } from '../materials/BlurPass.js';
+import { MeshReflectorMaterial as MeshReflectorMaterial$1 } from '../materials/MeshReflectorMaterial.js';
+
+extend({
+  MeshReflectorMaterialImpl: MeshReflectorMaterial$1
+});
+const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
+  mixBlur = 0,
+  mixStrength = 1,
+  resolution = 256,
+  blur = [0, 0],
+  minDepthThreshold = 0.9,
+  maxDepthThreshold = 1,
+  depthScale = 0,
+  depthToBlurRatioBias = 0.25,
+  mirror = 0,
+  distortion = 1,
+  mixContrast = 1,
+  distortionMap,
+  reflectorOffset = 0,
+  ...props
+}, ref) => {
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  blur = Array.isArray(blur) ? blur : [blur, blur];
+  const hasBlur = blur[0] + blur[1] > 0;
+  const materialRef = React.useRef(null);
+  const [reflectorPlane] = React.useState(() => new Plane());
+  const [normal] = React.useState(() => new Vector3());
+  const [reflectorWorldPosition] = React.useState(() => new Vector3());
+  const [cameraWorldPosition] = React.useState(() => new Vector3());
+  const [rotationMatrix] = React.useState(() => new Matrix4());
+  const [lookAtPosition] = React.useState(() => new Vector3(0, 0, -1));
+  const [clipPlane] = React.useState(() => new Vector4());
+  const [view] = React.useState(() => new Vector3());
+  const [target] = React.useState(() => new Vector3());
+  const [q] = React.useState(() => new Vector4());
+  const [textureMatrix] = React.useState(() => new Matrix4());
+  const [virtualCamera] = React.useState(() => new PerspectiveCamera());
+  const beforeRender = React.useCallback(() => {
+    var _materialRef$current;
+
+    // TODO: As of R3f 7-8 this should be __r3f.parent
+    const parent = materialRef.current.parent || ((_materialRef$current = materialRef.current) == null ? void 0 : _materialRef$current.__r3f.parent);
+    if (!parent) return;
+    reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
+    cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+    rotationMatrix.extractRotation(parent.matrixWorld);
+    normal.set(0, 0, 1);
+    normal.applyMatrix4(rotationMatrix);
+    reflectorWorldPosition.addScaledVector(normal, reflectorOffset);
+    view.subVectors(reflectorWorldPosition, cameraWorldPosition); // Avoid rendering when reflector is facing away
+
+    if (view.dot(normal) > 0) return;
+    view.reflect(normal).negate();
+    view.add(reflectorWorldPosition);
+    rotationMatrix.extractRotation(camera.matrixWorld);
+    lookAtPosition.set(0, 0, -1);
+    lookAtPosition.applyMatrix4(rotationMatrix);
+    lookAtPosition.add(cameraWorldPosition);
+    target.subVectors(reflectorWorldPosition, lookAtPosition);
+    target.reflect(normal).negate();
+    target.add(reflectorWorldPosition);
+    virtualCamera.position.copy(view);
+    virtualCamera.up.set(0, 1, 0);
+    virtualCamera.up.applyMatrix4(rotationMatrix);
+    virtualCamera.up.reflect(normal);
+    virtualCamera.lookAt(target);
+    virtualCamera.far = camera.far; // Used in WebGLBackground
+
+    virtualCamera.updateMatrixWorld();
+    virtualCamera.projectionMatrix.copy(camera.projectionMatrix); // Update the texture matrix
+
+    textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+    textureMatrix.multiply(virtualCamera.projectionMatrix);
+    textureMatrix.multiply(virtualCamera.matrixWorldInverse);
+    textureMatrix.multiply(parent.matrixWorld); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+
+    reflectorPlane.setFromNormalAndCoplanarPoint(normal, reflectorWorldPosition);
+    reflectorPlane.applyMatrix4(virtualCamera.matrixWorldInverse);
+    clipPlane.set(reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant);
+    const projectionMatrix = virtualCamera.projectionMatrix;
+    q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+    q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+    q.z = -1.0;
+    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]; // Calculate the scaled plane vector
+
+    clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); // Replacing the third row of the projection matrix
+
+    projectionMatrix.elements[2] = clipPlane.x;
+    projectionMatrix.elements[6] = clipPlane.y;
+    projectionMatrix.elements[10] = clipPlane.z + 1.0;
+    projectionMatrix.elements[14] = clipPlane.w;
+  }, [camera, reflectorOffset]);
+  const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
+    const parameters = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      type: HalfFloatType
+    };
+    const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
+    fbo1.depthBuffer = true;
+    fbo1.depthTexture = new DepthTexture(resolution, resolution);
+    fbo1.depthTexture.format = DepthFormat;
+    fbo1.depthTexture.type = UnsignedShortType;
+    const fbo2 = new WebGLRenderTarget(resolution, resolution, parameters);
+    const blurpass = new BlurPass({
+      gl,
+      resolution,
+      width: blur[0],
+      height: blur[1],
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias
+    });
+    const reflectorProps = {
+      mirror,
+      textureMatrix,
+      mixBlur,
+      tDiffuse: fbo1.texture,
+      tDepth: fbo1.depthTexture,
+      tDiffuseBlur: fbo2.texture,
+      hasBlur,
+      mixStrength,
+      minDepthThreshold,
+      maxDepthThreshold,
+      depthScale,
+      depthToBlurRatioBias,
+      distortion,
+      distortionMap,
+      mixContrast,
+      'defines-USE_BLUR': hasBlur ? '' : undefined,
+      'defines-USE_DEPTH': depthScale > 0 ? '' : undefined,
+      'defines-USE_DISTORTION': distortionMap ? '' : undefined
+    };
+    return [fbo1, fbo2, blurpass, reflectorProps];
+  }, [gl, blur, textureMatrix, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast]);
+  useFrame(() => {
+    var _materialRef$current2;
+
+    // TODO: As of R3f 7-8 this should be __r3f.parent
+    const parent = materialRef.current.parent || ((_materialRef$current2 = materialRef.current) == null ? void 0 : _materialRef$current2.__r3f.parent);
+    if (!parent) return;
+    parent.visible = false;
+    const currentXrEnabled = gl.xr.enabled;
+    const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
+    beforeRender();
+    gl.xr.enabled = false;
+    gl.shadowMap.autoUpdate = false;
+    gl.setRenderTarget(fbo1);
+    gl.state.buffers.depth.setMask(true);
+    if (!gl.autoClear) gl.clear();
+    gl.render(scene, virtualCamera);
+    if (hasBlur) blurpass.render(gl, fbo1, fbo2);
+    gl.xr.enabled = currentXrEnabled;
+    gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
+    parent.visible = true;
+    gl.setRenderTarget(null);
+  });
+  return /*#__PURE__*/React.createElement("meshReflectorMaterialImpl", _extends({
+    attach: "material" // Defines can't be updated dynamically, so we need to recreate the material
+    ,
+    key: 'key' + reflectorProps['defines-USE_BLUR'] + reflectorProps['defines-USE_DEPTH'] + reflectorProps['defines-USE_DISTORTION'],
+    ref: mergeRefs([materialRef, ref])
+  }, reflectorProps, props));
+});
+
+export { MeshReflectorMaterial };

package/src/core/MeshRefractionMaterial.js

@@ -0,0 +1,79 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useRef, useMemo, useLayoutEffect } from 'react';
+import { extend, useThree, useFrame } from '@react-three/fiber';
+import { MeshBVHUniformStruct, MeshBVH, SAH } from 'three-mesh-bvh';
+import { MeshRefractionMaterial as MeshRefractionMaterial$1 } from '../materials/MeshRefractionMaterial.js';
+
+const isCubeTexture = def => def && def.isCubeTexture;
+
+function MeshRefractionMaterial({
+  aberrationStrength = 0,
+  fastChroma = true,
+  envMap,
+  ...props
+}) {
+  extend({
+    MeshRefractionMaterial: MeshRefractionMaterial$1
+  });
+  const material = useRef();
+  const {
+    size
+  } = useThree();
+  const defines = useMemo(() => {
+    var _ref, _envMap$image$;
+
+    const temp = {}; // Sampler2D and SamplerCube need different defines
+
+    const isCubeMap = isCubeTexture(envMap);
+    const w = (_ref = isCubeMap ? (_envMap$image$ = envMap.image[0]) == null ? void 0 : _envMap$image$.width : envMap.image.width) !== null && _ref !== void 0 ? _ref : 1024;
+    const cubeSize = w / 4;
+
+    const _lodMax = Math.floor(Math.log2(cubeSize));
+
+    const _cubeSize = Math.pow(2, _lodMax);
+
+    const width = 3 * Math.max(_cubeSize, 16 * 7);
+    const height = 4 * _cubeSize;
+    if (isCubeMap) temp.ENVMAP_TYPE_CUBEM = '';
+    temp.CUBEUV_TEXEL_WIDTH = `${1.0 / width}`;
+    temp.CUBEUV_TEXEL_HEIGHT = `${1.0 / height}`;
+    temp.CUBEUV_MAX_MIP = `${_lodMax}.0`; // Add defines from chromatic aberration
+
+    if (aberrationStrength > 0) temp.CHROMATIC_ABERRATIONS = '';
+    if (fastChroma) temp.FAST_CHROMA = '';
+    return temp;
+  }, [aberrationStrength, fastChroma]);
+  useLayoutEffect(() => {
+    var _material$current, _material$current$__r, _material$current$__r2;
+
+    // Get the geometry of this materials parent
+    const geometry = (_material$current = material.current) == null ? void 0 : (_material$current$__r = _material$current.__r3f) == null ? void 0 : (_material$current$__r2 = _material$current$__r.parent) == null ? void 0 : _material$current$__r2.geometry; // Update the BVH
+
+    if (geometry) {
+      material.current.bvh = new MeshBVHUniformStruct();
+      material.current.bvh.updateFrom(new MeshBVH(geometry.clone().toNonIndexed(), {
+        lazyGeneration: false,
+        strategy: SAH
+      }));
+    }
+  }, []);
+  useFrame(({
+    camera
+  }) => {
+    material.current.viewMatrixInverse = camera.matrixWorld;
+    material.current.projectionMatrixInverse = camera.projectionMatrixInverse;
+  });
+  return /*#__PURE__*/React.createElement("meshRefractionMaterial", _extends({
+    // @ts-ignore
+    key: JSON.stringify(defines) // @ts-ignore
+    ,
+    defines: defines,
+    ref: material,
+    resolution: [size.width, size.height],
+    aberrationStrength: aberrationStrength,
+    envMap: envMap
+  }, props));
+}
+
+export { MeshRefractionMaterial };

package/src/core/MeshTransmissionMaterial.js

@@ -0,0 +1,395 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { extend, useFrame } from '@react-three/fiber';
+import { useFBO } from './useFBO.js';
+import { DiscardMaterial } from '../materials/DiscardMaterial.js';
+
+class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
+  constructor(samples = 6, transmissionSampler = false) {
+    super();
+    this.uniforms = {
+      chromaticAberration: {
+        value: 0.05
+      },
+      // Transmission must always be 0, unless transmissionSampler is being used
+      transmission: {
+        value: 0
+      },
+      // Instead a workaround is used, see below for reasons why
+      _transmission: {
+        value: 1
+      },
+      transmissionMap: {
+        value: null
+      },
+      // Roughness is 1 in THREE.MeshPhysicalMaterial but it makes little sense in a transmission material
+      roughness: {
+        value: 0
+      },
+      thickness: {
+        value: 0
+      },
+      thicknessMap: {
+        value: null
+      },
+      attenuationDistance: {
+        value: Infinity
+      },
+      attenuationColor: {
+        value: new THREE.Color('white')
+      },
+      anisotropicBlur: {
+        value: 0.1
+      },
+      time: {
+        value: 0
+      },
+      distortion: {
+        value: 0.0
+      },
+      distortionScale: {
+        value: 0.5
+      },
+      temporalDistortion: {
+        value: 0.0
+      },
+      buffer: {
+        value: null
+      }
+    };
+
+    this.onBeforeCompile = shader => {
+      shader.uniforms = { ...shader.uniforms,
+        ...this.uniforms
+      }; // If the transmission sampler is active inject a flag
+
+      if (transmissionSampler) shader.defines.USE_SAMPLER = ''; // Otherwise we do use use .transmission and must therefore force USE_TRANSMISSION
+      // because threejs won't inject it for us
+      else shader.defines.USE_TRANSMISSION = ''; // Head
+
+      shader.fragmentShader =
+      /*glsl*/
+      `
+      uniform float chromaticAberration;         
+      uniform float anisotropicBlur;      
+      uniform float time;
+      uniform float distortion;
+      uniform float distortionScale;
+      uniform float temporalDistortion;
+      uniform sampler2D buffer;
+
+      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; // Remove 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 ) {
+            float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );            
+            #ifdef USE_SAMPLER
+              #ifdef texture2DLodEXT
+                return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);
+              #else
+                return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);
+              #endif
+            #else
+              return texture2D(buffer, fragCoord.xy);
+            #endif
+          }
+          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`); // Add refraction
+
+      shader.fragmentShader = shader.fragmentShader.replace('#include <transmission_fragment>',
+      /*glsl*/
+      `  
+        // 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(roughnessFactor, 0.33), anisotropicBlur);
+        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 + roughnessFactor * roughnessFactor * 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;
+        }
+        transmission /= ${samples}.0;
+        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`);
+    };
+
+    Object.keys(this.uniforms).forEach(name => Object.defineProperty(this, name, {
+      get: () => this.uniforms[name].value,
+      set: v => this.uniforms[name].value = v
+    }));
+  }
+
+}
+
+const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
+  buffer,
+  transmissionSampler = false,
+  backside = false,
+  side = THREE.FrontSide,
+  transmission = 1,
+  thickness = 0,
+  backsideThickness = 0,
+  samples = 10,
+  resolution,
+  backsideResolution,
+  background,
+  anisotropy,
+  anisotropicBlur,
+  ...props
+}, fref) => {
+  extend({
+    MeshTransmissionMaterial: MeshTransmissionMaterialImpl
+  });
+  const ref = React.useRef(null);
+  const [discardMaterial] = React.useState(() => new DiscardMaterial());
+  const fboBack = useFBO(backsideResolution || resolution);
+  const fboMain = useFBO(resolution);
+  let oldBg;
+  let oldTone;
+  let parent;
+  useFrame(state => {
+    ref.current.time = state.clock.getElapsedTime(); // Render only if the buffer matches the built-in and no transmission sampler is set
+
+    if (ref.current.buffer === fboMain.texture && !transmissionSampler) {
+      parent = ref.current.__r3f.parent;
+
+      if (parent) {
+        // Save defaults
+        oldTone = state.gl.toneMapping;
+        oldBg = state.scene.background; // Switch off tonemapping lest it double tone maps
+        // Save the current background and set the HDR as the new BG
+        // Use discardmaterial, the parent will be invisible, but it's shadows will still be cast
+
+        state.gl.toneMapping = THREE.NoToneMapping;
+        if (background) state.scene.background = background;
+        parent.material = discardMaterial;
+
+        if (backside) {
+          // Render into the backside buffer
+          state.gl.setRenderTarget(fboBack);
+          state.gl.render(state.scene, state.camera); // And now prepare the material for the main render using the backside buffer
+
+          parent.material = ref.current;
+          parent.material.buffer = fboBack.texture;
+          parent.material.thickness = backsideThickness;
+          parent.material.side = THREE.BackSide;
+        } // Render into the main buffer
+
+
+        state.gl.setRenderTarget(fboMain);
+        state.gl.render(state.scene, state.camera);
+        parent.material.thickness = thickness;
+        parent.material.side = side;
+        parent.material.buffer = fboMain.texture; // Set old state back
+
+        state.scene.background = oldBg;
+        state.gl.setRenderTarget(null);
+        parent.material = ref.current;
+        state.gl.toneMapping = oldTone;
+      }
+    }
+  }); // Forward ref
+
+  React.useImperativeHandle(fref, () => ref.current, []);
+  return /*#__PURE__*/React.createElement("meshTransmissionMaterial", _extends({
+    // Samples must re-compile the shader so we memoize it
+    args: [samples, transmissionSampler],
+    ref: ref
+  }, props, {
+    buffer: buffer || fboMain.texture // @ts-ignore
+    ,
+    _transmission: transmission // In order for this to not incur extra cost "transmission" must be set to 0 and treated as a reserved prop.
+    // This is because THREE.WebGLRenderer will check for transmission > 0 and execute extra renders.
+    // The exception is when transmissionSampler is set, in which case we are using three's built in sampler.
+    ,
+    anisotropicBlur: anisotropicBlur !== null && anisotropicBlur !== void 0 ? anisotropicBlur : anisotropy,
+    transmission: transmissionSampler ? transmission : 0,
+    thickness: thickness,
+    side: side
+  }));
+});
+
+export { MeshTransmissionMaterial };