@react-three/drei 9.51.9 → 9.51.11

package/README.md

@@ -1480,30 +1480,24 @@ return (
   <a href="https://codesandbox.io/s/hmgdjq"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/hmgdjq/screenshot.png" alt="Demo"/></a>
 </p>
 
-A more convincing transmission shader with RGB shift (based on THREE.MeshPhysicalMaterial). This material can be expensive as it causes an additional render pass of the scene. Low samples and low resolution will make it faster. It will temporarily make the mesh that uses it invisible for that pass, this is better for performance and also improves visuals. If you have other objects that you don't want to see reflected in the material just add them to the parent mesh as children.
+An improved THREE.MeshPhysicalMaterial. It acts like a normal PhysicalMaterial in terms of transmission support, thickness, ior, roughness, etc., but has chromatic aberration, noise-based roughness blur, (primitive) anisotropy support, and unlike the original it can "see" other transmissive or transparent objects which leads to improved visuals.
+
+Keep in mind that it can be expensive as it causes an additional render pass of the scene, minus the host mesh which gets removed from the render-stack temporarily. If you have other objects that you don't want to see reflected in the material just add them to the parent mesh as children. Low samples and low resolution will make it faster.
+
+If you use roughness consider using a tiny resolution, for instance 32x32 pixels, it will still look good but perform much faster.
 
 ```tsx
-type MeshTransmissionMaterialProps = {
-  /** Refraction shift, default: 0 */
-  refraction?: number
-  /** White noise roughness, default: 0 */
-  roughness?: number
-  /** RGB color shift, default: 0.3 */
-  rgbShift?: number
-  /** Noise, default: 0.03 */
-  noise?: number
-  /** Color saturation, default: 1 */
-  saturation?: number
-  /** Color contrast, default: 1 */
-  contrast?: number
-  /** Resolution of the local buffer, default: 1024 */
-  resolution?: number
-  /** Refraction samples, default: 10 */
-  samples?: number
-  /** Buffer scene background (can be a texture, a cubetexture or a color), default: null */
-  background?: THREE.Texture
-  /** The scene rendered into a texture (use it to share a texture between materials), default: null  */
-  buffer?: THREE.Texture
+type MeshTransmissionMaterialProps = JSX.IntrinsicElements['meshPhysicalMaterial'] & {
+  /* Chromatic aberration, default: 0.03 */
+  chromaticAberration?: number
+  /* Anisotropy, default: 0.1 */
+  anisotropy?: number
+  /* Distortion, default: 0 */
+  distortion?: number
+  /* Distortion scale, default: 0.5 */
+  distortionScale?: number
+  /* Temporal distortion, default: 0.5 */
+  temporalDistortion?: number
 }
 ```
 
@@ -1513,7 +1507,7 @@ return (
     <MeshTransmissionMaterial />
 ```
 
-If each material rendering the scene on its own is too much expensense you can share the buffer, for instance using drei/PerspectiveCamera.
+If each material rendering the scene on its own is too much expensense you can share a buffer texture, for instance using drei/PerspectiveCamera. This would mimic the default THREE.MeshPhysicalMaterial behaviour, the upside is that it's faster if you have multiple materials, the downside is that one transmissive material now can't "see" the other.
 
 ```jsx
 <PerspectiveCamera makeDefault fov={75} position={[10, 0, 15]} resolution={1024}>

package/core/MeshTransmissionMaterial.cjs.js

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

package/core/MeshTransmissionMaterial.d.ts

@@ -1,19 +1,23 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import { ReactThreeFiber } from '@react-three/fiber';
-declare type MeshTransmissionMaterialType = Omit<JSX.IntrinsicElements['meshPhysicalMaterial'], 'args' | 'roughness' | 'transmission' | 'transmissionMap' | 'thickness'> & {
-    refraction?: number;
-    roughness?: number;
-    rgbShift?: number;
-    noise?: number;
-    saturation?: number;
-    contrast?: number;
+declare type MeshTransmissionMaterialType = Omit<JSX.IntrinsicElements['meshPhysicalMaterial'], 'args'> & {
+    transmission?: number;
+    chromaticAberration?: number;
+    anisotropy?: number;
+    distortion?: number;
+    distortionScale: Uniform<number>;
+    temporalDistortion: Uniform<number>;
+    time?: number;
     resolution?: ReactThreeFiber.Vector2;
     buffer?: THREE.Texture;
     args?: [{
         samples: number;
     }];
 };
+interface Uniform<T> {
+    value: T;
+}
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -22,8 +26,9 @@ declare global {
     }
 }
 export declare const MeshTransmissionMaterial: React.ForwardRefExoticComponent<Pick<Omit<MeshTransmissionMaterialType, "args" | "resolution"> & {
+    distortionSpeed?: number | undefined;
     resolution?: number | undefined;
     samples?: number | undefined;
     background?: THREE.Texture | undefined;
-}, "visible" | "attach" | "children" | "key" | "onUpdate" | "dispose" | "type" | "id" | "uuid" | "name" | "userData" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | "blending" | "map" | "transparent" | "saturation" | "fog" | "alphaTest" | "alphaToCoverage" | "blendDst" | "blendDstAlpha" | "blendEquation" | "blendEquationAlpha" | "blendSrc" | "blendSrcAlpha" | "clipIntersection" | "clippingPlanes" | "clipShadows" | "colorWrite" | "defines" | "depthFunc" | "depthTest" | "depthWrite" | "stencilWrite" | "stencilFunc" | "stencilRef" | "stencilWriteMask" | "stencilFuncMask" | "stencilFail" | "stencilZFail" | "stencilZPass" | "isMaterial" | "needsUpdate" | "opacity" | "polygonOffset" | "polygonOffsetFactor" | "polygonOffsetUnits" | "precision" | "premultipliedAlpha" | "dithering" | "side" | "shadowSide" | "toneMapped" | "vertexColors" | "version" | "onBeforeCompile" | "customProgramCacheKey" | "setValues" | "background" | "buffer" | "alphaMap" | "wireframe" | "wireframeLinewidth" | "clearcoat" | "clearcoatMap" | "clearcoatRoughness" | "clearcoatRoughnessMap" | "clearcoatNormalScale" | "clearcoatNormalMap" | "reflectivity" | "ior" | "sheen" | "sheenColor" | "sheenColorMap" | "sheenRoughness" | "sheenRoughnessMap" | "thicknessMap" | "attenuationDistance" | "attenuationColor" | "specularIntensity" | "specularColor" | "specularIntensityMap" | "specularColorMap" | "roughness" | "metalness" | "lightMap" | "lightMapIntensity" | "aoMap" | "aoMapIntensity" | "emissive" | "emissiveIntensity" | "emissiveMap" | "bumpMap" | "bumpScale" | "normalMap" | "normalMapType" | "normalScale" | "displacementMap" | "displacementScale" | "displacementBias" | "roughnessMap" | "metalnessMap" | "envMap" | "envMapIntensity" | "wireframeLinecap" | "wireframeLinejoin" | "flatShading" | "isMeshStandardMaterial" | "resolution" | "samples" | "refraction" | "rgbShift" | "noise" | "contrast"> & React.RefAttributes<unknown>>;
+}, "attach" | "children" | "key" | "onUpdate" | "time" | "background" | "buffer" | keyof THREE.MeshPhysicalMaterial | "anisotropy" | "resolution" | "samples" | "distortion" | "chromaticAberration" | "distortionScale" | "temporalDistortion" | "distortionSpeed"> & React.RefAttributes<unknown>>;
 export {};

package/core/MeshTransmissionMaterial.js

@@ -6,25 +6,51 @@ import { useFBO } from './useFBO.js';
 
 class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
   constructor({
-    samples = 5,
+    samples = 6,
     ...args
   } = {}) {
     super(args);
     this.uniforms = {
-      refraction: {
+      chromaticAberration: {
+        value: 0.05
+      },
+      // Transmission must always be 0
+      transmission: {
+        value: 0
+      },
+      // Instead a workaround is used, see below for reasons why
+      _transmission: {
+        value: 1
+      },
+      transmissionMap: {
+        value: null
+      },
+      thickness: {
+        value: 1
+      },
+      thicknessMap: {
+        value: null
+      },
+      attenuationDistance: {
         value: 0
       },
-      rgbShift: {
-        value: 0.3
+      attenuationColor: {
+        value: new THREE.Color()
+      },
+      anisotropy: {
+        value: 0.1
+      },
+      time: {
+        value: 0
       },
-      noise: {
-        value: 0.03
+      distortion: {
+        value: 0.0
       },
-      saturation: {
-        value: 1.0
+      distortionScale: {
+        value: 0.5
       },
-      contrast: {
-        value: 1.0
+      temporalDistortion: {
+        value: 0.5
       },
       buffer: {
         value: null
@@ -37,46 +63,235 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
     this.onBeforeCompile = shader => {
       shader.uniforms = { ...shader.uniforms,
         ...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.defines.USE_TRANSMISSION = ''; // Head
+
+      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);
+      }
+      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>', '');
-      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);
+      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`); // Add refraction
+
+      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;
+        totalDiffuse = mix( totalDiffuse, transmission.rgb, material.transmission );\n`);
     };
 
     Object.keys(this.uniforms).forEach(name => Object.defineProperty(this, name, {
@@ -89,8 +304,10 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
 
 const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
   buffer,
+  transmission = 1,
+  distortionSpeed = 1,
   samples = 10,
-  resolution = 1024,
+  resolution,
   background,
   ...props
 }, fref) => {
@@ -103,15 +320,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,11 +350,19 @@ const MeshTransmissionMaterial = /*#__PURE__*/React.forwardRef(({
 
   React.useImperativeHandle(fref, () => ref.current, []);
   return /*#__PURE__*/React.createElement("meshTransmissionMaterial", _extends({
-    args: [config],
-    ref: ref,
-    buffer: buffer || fbo.texture,
+    args: [React.useMemo(() => ({
+      samples
+    }), [samples])],
+    ref: ref
+  }, props, {
+    buffer: buffer || fbo.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 executed extra renders.
+    ,
+    transmission: 0,
     resolution: [size.width * viewport.dpr, size.height * viewport.dpr]
-  }, props));
+  }));
 });
 
 export { MeshTransmissionMaterial };