@react-three/drei 9.95.0 → 9.96.0

package/README.md

@@ -1310,10 +1310,26 @@ api.eyeRightRef.current.irisDirRef.current.localToWorld(new THREE.Vector3(0, 0,
 
 A shader-based image component with auto-cover (similar to css/background: cover).
 
+```tsx
+export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
+  segments?: number
+  scale?: number | [number, number]
+  color?: Color
+  zoom?: number
+  radius?: number
+  grayscale?: number
+  toneMapped?: boolean
+  transparent?: boolean
+  opacity?: number
+  side?: THREE.Side
+}
+```
+
 ```jsx
 function Foo() {
   const ref = useRef()
   useFrame(() => {
+    ref.current.material.radius = ... // between 0 and 1
     ref.current.material.zoom = ... // 1 and higher
     ref.current.material.grayscale = ... // between 0 and 1
     ref.current.material.color.set(...) // mix-in color

package/core/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js"),c=require("../helpers/constants.cjs.js");function i(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 l=i(e),u=s(r),f=s(t);const m=a.shaderMaterial({color:new f.Color("white"),scale:new f.Vector2(1,1),imageBounds:new f.Vector2(1,1),map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),v=u.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:s,toneMapped:f,transparent:v,side:d,...y},g)=>{n.extend({ImageMaterial:m});const p=u.useRef(null),x=Array.isArray(a)?[a[0],a[1]]:[a,a],h=[s.image.width,s.image.height];return u.useImperativeHandle(g,(()=>p.current),[]),u.useLayoutEffect((()=>{p.current.geometry.parameters&&p.current.material.scale.set(x[0]*p.current.geometry.parameters.width,x[1]*p.current.geometry.parameters.height)}),[]),u.createElement("mesh",l.default({ref:p,scale:Array.isArray(a)?[...a,1]:a},y),u.createElement("planeGeometry",{args:[1,1,t,t]}),u.createElement("imageMaterial",{color:r,map:s,zoom:o,grayscale:c,opacity:i,scale:x,imageBounds:h,toneMapped:f,transparent:v,side:d}),e)})),d=u.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return u.createElement(v,l.default({},r,{texture:n,ref:t}))})),y=u.forwardRef((({url:e,...r},t)=>u.createElement(v,l.default({},r,{ref:t})))),g=u.forwardRef(((e,r)=>{if(e.url)return u.createElement(d,l.default({},e,{ref:r}));if(e.texture)return u.createElement(y,l.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js"),s=require("../helpers/constants.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 l=i(e),u=c(r),f=c(t);const v=a.shaderMaterial({color:new f.Color("white"),scale:new f.Vector2(1,1),imageBounds:new f.Vector2(1,1),resolution:1024,map:null,zoom:1,radius:0,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  varying vec2 vPos;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n    vPos = position.xy;\n  }\n",`\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  varying vec2 vPos;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform float resolution;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float radius;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  \n  const float PI = 3.14159265;\n    \n  // from https://iquilezles.org/articles/distfunctions\n  float udRoundBox( vec2 p, vec2 b, float r ) {\n    return length(max(abs(p)-b+r,0.0))-r;\n  }\n\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n\n    vec2 res = vec2(scale * resolution);\n    vec2 halfRes = 0.5 * res;\n    float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);    \n\t  vec3 a = mix(vec3(1.0,0.0,0.0), vec3(0.0,0.0,0.0), smoothstep(0.0, 1.0, b));\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <${s.version>=154?"colorspace_fragment":"encodings_fragment"}>\n  }\n`),m=u.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:s=0,opacity:i=1,radius:c=0,texture:f,toneMapped:m,transparent:d,side:y,...g},p)=>{n.extend({ImageMaterial:v});const x=u.useRef(null),h=n.useThree((e=>e.size)),b=Array.isArray(a)?[a[0],a[1]]:[a,a],w=[f.image.width,f.image.height],j=Math.max(h.width,h.height);return u.useImperativeHandle(p,(()=>x.current),[]),u.useLayoutEffect((()=>{x.current.geometry.parameters&&x.current.material.scale.set(b[0]*x.current.geometry.parameters.width,b[1]*x.current.geometry.parameters.height)}),[]),u.createElement("mesh",l.default({ref:x,scale:Array.isArray(a)?[...a,1]:a},g),u.createElement("planeGeometry",{args:[1,1,t,t]}),u.createElement("imageMaterial",{color:r,map:f,zoom:o,grayscale:s,opacity:i,scale:b,imageBounds:w,resolution:j,radius:c,toneMapped:m,transparent:d,side:y,key:v.key}),e)})),d=u.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return u.createElement(m,l.default({},r,{texture:n,ref:t}))})),y=u.forwardRef((({url:e,...r},t)=>u.createElement(m,l.default({},r,{ref:t})))),g=u.forwardRef(((e,r)=>{if(e.url)return u.createElement(d,l.default({},e,{ref:r}));if(e.texture)return u.createElement(y,l.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;

package/core/Image.d.ts

@@ -6,6 +6,7 @@ export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
     scale?: number | [number, number];
     color?: Color;
     zoom?: number;
+    radius?: number;
     grayscale?: number;
     toneMapped?: boolean;
     transparent?: boolean;
@@ -21,6 +22,8 @@ export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
 type ImageMaterialType = JSX.IntrinsicElements['shaderMaterial'] & {
     scale?: number[];
     imageBounds?: number[];
+    radius?: number;
+    resolution?: number;
     color?: Color;
     map: THREE.Texture;
     zoom?: number;

package/core/Image.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import { extend } from '@react-three/fiber';
+import { extend, useThree } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 import { useTexture } from './useTexture.js';
 import { version } from '../helpers/constants.js';
@@ -12,23 +12,30 @@ const ImageMaterialImpl = /* @__PURE__ */shaderMaterial({
   color: /* @__PURE__ */new THREE.Color('white'),
   scale: /* @__PURE__ */new THREE.Vector2(1, 1),
   imageBounds: /* @__PURE__ */new THREE.Vector2(1, 1),
+  resolution: 1024,
   map: null,
   zoom: 1,
+  radius: 0,
   grayscale: 0,
   opacity: 1
 }, /* glsl */`
   varying vec2 vUv;
+  varying vec2 vPos;
   void main() {
     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
     vUv = uv;
+    vPos = position.xy;
   }
 `, /* glsl */`
   // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44
   varying vec2 vUv;
+  varying vec2 vPos;
   uniform vec2 scale;
   uniform vec2 imageBounds;
+  uniform float resolution;
   uniform vec3 color;
   uniform sampler2D map;
+  uniform float radius;
   uniform float zoom;
   uniform float grayscale;
   uniform float opacity;
@@ -39,6 +46,14 @@ const ImageMaterialImpl = /* @__PURE__ */shaderMaterial({
   vec2 aspect(vec2 size) {
     return size / min(size.x, size.y);
   }
+  
+  const float PI = 3.14159265;
+    
+  // from https://iquilezles.org/articles/distfunctions
+  float udRoundBox( vec2 p, vec2 b, float r ) {
+    return length(max(abs(p)-b+r,0.0))-r;
+  }
+
   void main() {
     vec2 s = aspect(scale);
     vec2 i = aspect(imageBounds);
@@ -48,7 +63,12 @@ const ImageMaterialImpl = /* @__PURE__ */shaderMaterial({
     vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;
     vec2 uv = vUv * s / new + offset;
     vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);
-    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);
+
+    vec2 res = vec2(scale * resolution);
+    vec2 halfRes = 0.5 * res;
+    float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);    
+	  vec3 a = mix(vec3(1.0,0.0,0.0), vec3(0.0,0.0,0.0), smoothstep(0.0, 1.0, b));
+    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);
     
     #include <tonemapping_fragment>
     #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
@@ -62,6 +82,7 @@ const ImageBase = /* @__PURE__ */React.forwardRef(({
   zoom = 1,
   grayscale = 0,
   opacity = 1,
+  radius = 0,
   texture,
   toneMapped,
   transparent,
@@ -72,8 +93,10 @@ const ImageBase = /* @__PURE__ */React.forwardRef(({
     ImageMaterial: ImageMaterialImpl
   });
   const ref = React.useRef(null);
+  const size = useThree(state => state.size);
   const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
   const imageBounds = [texture.image.width, texture.image.height];
+  const resolution = Math.max(size.width, size.height);
   React.useImperativeHandle(fref, () => ref.current, []);
   React.useLayoutEffect(() => {
     // Support arbitrary plane geometries (for instance with rounded corners)
@@ -100,9 +123,12 @@ const ImageBase = /* @__PURE__ */React.forwardRef(({
     opacity: opacity,
     scale: planeBounds,
     imageBounds: imageBounds,
+    resolution: resolution,
+    radius: radius,
     toneMapped: toneMapped,
     transparent: transparent,
-    side: side
+    side: side,
+    key: ImageMaterialImpl.key
   }), children);
 });
 const ImageWithUrl = /* @__PURE__ */React.forwardRef(({