@react-three/drei 9.30.2 → 9.30.3

package/README.md

@@ -1165,18 +1165,48 @@ This material makes your geometry distort following simplex noise.
   <a href="https://codesandbox.io/s/zqrreo"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/zqrreo/screenshot.png" alt="Demo"/></a>
 </p>
 
-A convincing Glass/Diamond refraction material. Best pair it with a cube-camera!
+A convincing Glass/Diamond refraction material.
+
+```tsx
+type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
+  /** Environment map */
+  envMap: THREE.CubeTexture | THREE.Texture
+  /** Number of ray-cast bounces, it can be expensive to have too many, 2 */
+  bounces?: number
+  /** Refraction index, 2.4 */
+  ior?: number
+  /** Fresnel (strip light), 0 */
+  fresnel?: number
+  /** RGB shift intensity, can be expensive, 0 */
+  aberrationStrength?: number
+  /** Color, white */
+  color?: ReactThreeFiber.Color
+  /** If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true */
+  fastChroma?: boolean
+}
+```
+
+If you want it to reflect other objects in the scene you best pair it with a cube-camera.
 
 ```jsx
 <CubeCamera>
   {(texture) => (
     <mesh geometry={diamondGeometry} {...props}>
-      <RefractionMaterial envMap={texture} toneMapped={false} />
+      <RefractionMaterial envMap={texture} />
     </mesh>
   )}
 </CubeCamera>
 ```
 
+Otherwise just pass it an environment map.
+
+```jsx
+const texture = useLoader(RGBELoader, "/textures/royal_esplanade_1k.hdr")
+return (
+  <mesh geometry={diamondGeometry} {...props}>
+    <RefractionMaterial envMap={texture} />
+```
+
 #### PointMaterial
 
 <p>

package/core/MeshRefractionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),a=require("three-mesh-bvh"),n=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({frames:e=1,resolution:i=256,near:u=.1,far:l=1e3,aberrationStrength:f=0,envMap:c,...h}){t.extend({MeshRefractionMaterial:n.MeshRefractionMaterial});const M=r.useRef(),{size:d}=t.useThree(),b=r.useMemo((()=>{const e={};if(c){var r,t;const n=(a=c)&&a.isCubeTexture,i=(null!==(r=n?null==(t=c.image[0])?void 0:t.width:c.image.width)&&void 0!==r?r:1024)/4,u=Math.floor(Math.log2(i)),o=Math.pow(2,u),s=3*Math.max(o,112),l=4*o;n&&(e.ENVMAP_TYPE_CUBEM=""),e.CUBEUV_TEXEL_WIDTH=""+1/s,e.CUBEUV_TEXEL_HEIGHT=""+1/l,e.CUBEUV_MAX_MIP=`${u}.0`}var a;return f>0&&(e.CHROMATIC_ABERRATIONS=""),e}),[f]);return r.useLayoutEffect((()=>{var e,r,t;const n=null==(e=M.current)||null==(r=e.__r3f)||null==(t=r.parent)?void 0:t.geometry;n&&M.current.bvh.updateFrom(new a.MeshBVH(n.toNonIndexed(),{lazyGeneration:!1,strategy:a.SAH}))}),[]),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(!!f),defines:b,ref:M,resolution:[d.width,d.height],aberrationStrength:f,envMap:c},h))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),a=require("three-mesh-bvh"),n=require("../materials/MeshRefractionMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three"),require("./shaderMaterial.cjs.js");var o=i(e),s=u(r);exports.MeshRefractionMaterial=function({aberrationStrength:e=0,fastChroma:i=!0,envMap:u,...l}){t.extend({MeshRefractionMaterial:n.MeshRefractionMaterial});const c=r.useRef(),{size:f}=t.useThree(),h=r.useMemo((()=>{var r,t;const a={},n=(o=u)&&o.isCubeTexture;var o;const s=(null!==(r=n?null==(t=u.image[0])?void 0:t.width:u.image.width)&&void 0!==r?r:1024)/4,l=Math.floor(Math.log2(s)),c=Math.pow(2,l),f=3*Math.max(c,112),h=4*c;return n&&(a.ENVMAP_TYPE_CUBEM=""),a.CUBEUV_TEXEL_WIDTH=""+1/f,a.CUBEUV_TEXEL_HEIGHT=""+1/h,a.CUBEUV_MAX_MIP=`${l}.0`,e>0&&(a.CHROMATIC_ABERRATIONS=""),i&&(a.FAST_CHROMA=""),a}),[e,i]);return r.useLayoutEffect((()=>{var e,r,t;const n=null==(e=c.current)||null==(r=e.__r3f)||null==(t=r.parent)?void 0:t.geometry;n&&c.current.bvh.updateFrom(new a.MeshBVH(n.toNonIndexed(),{lazyGeneration:!1,strategy:a.SAH}))}),[]),s.createElement("meshRefractionMaterial",o.default({key:JSON.stringify(h),defines:h,ref:c,resolution:[f.width,f.height],aberrationStrength:e,envMap:u},l))};

package/core/MeshRefractionMaterial.d.ts

@@ -10,16 +10,13 @@ declare global {
     }
 }
 declare type MeshRefractionMaterialProps = JSX.IntrinsicElements['shaderMaterial'] & {
+    envMap: THREE.CubeTexture | THREE.Texture;
     bounces?: number;
     ior?: number;
     fresnel?: number;
     aberrationStrength?: number;
     color?: ReactThreeFiber.Color;
-    resolution?: ReactThreeFiber.Vector2;
-    envMap?: THREE.CubeTexture | THREE.Texture;
-    frames?: number;
-    near?: number;
-    far?: number;
+    fastChroma?: boolean;
 };
-export declare function MeshRefractionMaterial({ frames, resolution, near, far, aberrationStrength, envMap, ...props }: MeshRefractionMaterialProps): JSX.Element;
+export declare function MeshRefractionMaterial({ aberrationStrength, fastChroma, envMap, ...props }: MeshRefractionMaterialProps): JSX.Element;
 export {};

package/core/MeshRefractionMaterial.js

@@ -8,11 +8,8 @@ import { MeshRefractionMaterial as MeshRefractionMaterial$1 } from '../materials
 const isCubeTexture = def => def && def.isCubeTexture;
 
 function MeshRefractionMaterial({
-  frames = 1,
-  resolution = 256,
-  near = 0.1,
-  far = 1000,
   aberrationStrength = 0,
+  fastChroma = true,
   envMap,
   ...props
 }) {
@@ -24,34 +21,35 @@ function MeshRefractionMaterial({
     size
   } = useThree();
   const defines = useMemo(() => {
-    const temp = {};
+    var _ref, _envMap$image$;
 
-    if (envMap) {
-      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 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 _lodMax = Math.floor(Math.log2(cubeSize));
 
-      const _cubeSize = Math.pow(2, _lodMax);
+    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`;
-    }
+    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]);
+  }, [aberrationStrength, fastChroma]);
   useLayoutEffect(() => {
     var _material$current, _material$current$__r, _material$current$__r2;
 
-    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;
+    // 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.updateFrom(new MeshBVH(geometry.toNonIndexed(), {
       lazyGeneration: false,
       strategy: SAH
@@ -59,7 +57,7 @@ function MeshRefractionMaterial({
   }, []);
   return /*#__PURE__*/React.createElement("meshRefractionMaterial", _extends({
     // @ts-ignore
-    key: JSON.stringify(!!aberrationStrength) // @ts-ignore
+    key: JSON.stringify(defines) // @ts-ignore
     ,
     defines: defines,
     ref: material,