@react-three/drei 9.109.1 → 9.109.3

package/README.md

@@ -5092,14 +5092,25 @@ Makes an object's shadow respect its opacity and alphaMap.
 <details>
   <summary>Maintenance</summary>
 
+### INSTALL
+
+```sh
+& corepack enable
+$ yarn install
+```
+
 ### Tests
 
 To run visual tests in the same environment as the CI:
 
 ```sh
+$ yarn build
 $ docker run --init --rm -v $(pwd):/app -w /app ghcr.io/pmndrs/playwright:main yarn test
 ```
 
-NB: if running on mac m-series, you'll need to add `--platform linux/arm64` to the docker command.
+> [!TIP]
+> If running on mac m-series, you may need to add `--platform linux/arm64` to the docker command.
+
+To update a snapshot, simply remove it and relaunch the test command.
 
 </details>

package/core/Outlines.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform float screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace == 0.0) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef();return d.useLayoutEffect((()=>{const e=x.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){var t;M.current=g,b.current=n.geometry;let r=null==(t=e.children)?void 0:t[0];r&&(g&&r.geometry.dispose(),e.remove(r)),n.skeleton?(r=new u.SkinnedMesh,r.material=y,r.bind(n.skeleton,n.bindMatrix),e.add(r)):n.isInstancedMesh?(r=new u.InstancedMesh(n.geometry,y,n.count),r.instanceMatrix=n.instanceMatrix,e.add(r)):(r=new u.Mesh,r.material=y,e.add(r)),r.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current;if(!o)return;const l=o.children[0];l&&(l.renderOrder=p,i.applyProps(l.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\n   uniform bool screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef();return d.useLayoutEffect((()=>{const e=x.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){var t;M.current=g,b.current=n.geometry;let r=null==(t=e.children)?void 0:t[0];r&&(g&&r.geometry.dispose(),e.remove(r)),n.skeleton?(r=new u.SkinnedMesh,r.material=y,r.bind(n.skeleton,n.bindMatrix),e.add(r)):n.isInstancedMesh?(r=new u.InstancedMesh(n.geometry,y,n.count),r.instanceMatrix=n.instanceMatrix,e.add(r)):(r=new u.Mesh,r.material=y,e.add(r)),r.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current;if(!o)return;const l=o.children[0];l&&(l.renderOrder=p,i.applyProps(l.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};

package/core/Outlines.js

@@ -16,7 +16,7 @@ const OutlinesMaterial = /* @__PURE__ */shaderMaterial({
    #include <morphtarget_pars_vertex>
    #include <skinning_pars_vertex>
    uniform float thickness;
-   uniform float screenspace;
+   uniform bool screenspace;
    uniform vec2 size;
    void main() {
      #if defined (USE_SKINNING)
@@ -36,7 +36,7 @@ const OutlinesMaterial = /* @__PURE__ */shaderMaterial({
        tNormal = instanceMatrix * tNormal;
        tPosition = instanceMatrix * tPosition;
      #endif
-     if (screenspace == 0.0) {
+     if (screenspace) {
        vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
      } else {

package/core/Svg.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),a=require("three"),s=require("three-stdlib");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=l(e),u=o(r);const n=r.forwardRef((function({src:e,skipFill:l,skipStrokes:o,fillMaterial:n,strokeMaterial:c,fillMeshProps:f,strokeMeshProps:d,...p},m){const y=t.useLoader(s.SVGLoader,e.startsWith("<svg")?`data:image/svg+xml;utf8,${e}`:e),h=r.useMemo((()=>o?[]:y.paths.map((e=>{var t;return void 0===(null==(t=e.userData)?void 0:t.style.stroke)||"none"===e.userData.style.stroke?null:e.subPaths.map((t=>s.SVGLoader.pointsToStroke(t.getPoints(),e.userData.style)))}))),[y,o]);return r.useEffect((()=>()=>h.forEach((e=>e&&e.map((e=>e.dispose()))))),[h]),u.createElement("object3D",i.default({ref:m},p),u.createElement("object3D",{scale:[1,-1,1]},y.paths.map(((e,t)=>{var p,m;return u.createElement(r.Fragment,{key:t},!l&&void 0!==(null==(p=e.userData)?void 0:p.style.fill)&&"none"!==e.userData.style.fill&&s.SVGLoader.createShapes(e).map(((t,r)=>u.createElement("mesh",i.default({key:r},f),u.createElement("shapeGeometry",{args:[t]}),u.createElement("meshBasicMaterial",i.default({color:e.userData.style.fill,opacity:e.userData.style.fillOpacity,transparent:!0,side:a.DoubleSide,depthWrite:!1},n))))),!o&&void 0!==(null==(m=e.userData)?void 0:m.style.stroke)&&"none"!==e.userData.style.stroke&&e.subPaths.map(((r,s)=>u.createElement("mesh",i.default({key:s,geometry:h[t][s]},d),u.createElement("meshBasicMaterial",i.default({color:e.userData.style.stroke,opacity:e.userData.style.strokeOpacity,transparent:!0,side:a.DoubleSide,depthWrite:!1},c))))))}))))}));exports.Svg=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),a=require("three"),s=require("three-stdlib");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var i=l(e),u=o(r);const n=r.forwardRef((function({src:e,skipFill:l,skipStrokes:o,fillMaterial:n,strokeMaterial:c,fillMeshProps:d,strokeMeshProps:f,...p},m){const y=t.useLoader(s.SVGLoader,e.startsWith("<svg")?`data:image/svg+xml;utf8,${e}`:e),h=r.useMemo((()=>o?[]:y.paths.map((e=>{var t;return void 0===(null==(t=e.userData)?void 0:t.style.stroke)||"none"===e.userData.style.stroke?null:e.subPaths.map((t=>s.SVGLoader.pointsToStroke(t.getPoints(),e.userData.style)))}))),[y,o]);r.useEffect((()=>()=>h.forEach((e=>e&&e.map((e=>e.dispose()))))),[h]);let b=0;return u.createElement("object3D",i.default({ref:m},p),u.createElement("object3D",{scale:[1,-1,1]},y.paths.map(((e,t)=>{var p,m;return u.createElement(r.Fragment,{key:t},!l&&void 0!==(null==(p=e.userData)?void 0:p.style.fill)&&"none"!==e.userData.style.fill&&s.SVGLoader.createShapes(e).map(((t,r)=>u.createElement("mesh",i.default({key:r},d,{renderOrder:b++}),u.createElement("shapeGeometry",{args:[t]}),u.createElement("meshBasicMaterial",i.default({color:e.userData.style.fill,opacity:e.userData.style.fillOpacity,transparent:!0,side:a.DoubleSide,depthWrite:!1},n))))),!o&&void 0!==(null==(m=e.userData)?void 0:m.style.stroke)&&"none"!==e.userData.style.stroke&&e.subPaths.map(((r,s)=>u.createElement("mesh",i.default({key:s,geometry:h[t][s]},f,{renderOrder:b++}),u.createElement("meshBasicMaterial",i.default({color:e.userData.style.stroke,opacity:e.userData.style.strokeOpacity,transparent:!0,side:a.DoubleSide,depthWrite:!1},c))))))}))))}));exports.Svg=n;

package/core/Svg.js

@@ -23,6 +23,7 @@ const Svg = /* @__PURE__ */forwardRef(function R3FSvg({
   useEffect(() => {
     return () => strokeGeometries.forEach(group => group && group.map(g => g.dispose()));
   }, [strokeGeometries]);
+  let renderOrder = 0;
   return /*#__PURE__*/React.createElement("object3D", _extends({
     ref: ref
   }, props), /*#__PURE__*/React.createElement("object3D", {
@@ -33,7 +34,9 @@ const Svg = /* @__PURE__ */forwardRef(function R3FSvg({
       key: p
     }, !skipFill && ((_path$userData2 = path.userData) == null ? void 0 : _path$userData2.style.fill) !== undefined && path.userData.style.fill !== 'none' && SVGLoader.createShapes(path).map((shape, s) => /*#__PURE__*/React.createElement("mesh", _extends({
       key: s
-    }, fillMeshProps), /*#__PURE__*/React.createElement("shapeGeometry", {
+    }, fillMeshProps, {
+      renderOrder: renderOrder++
+    }), /*#__PURE__*/React.createElement("shapeGeometry", {
       args: [shape]
     }), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
       color: path.userData.style.fill,
@@ -44,7 +47,9 @@ const Svg = /* @__PURE__ */forwardRef(function R3FSvg({
     }, fillMaterial)))), !skipStrokes && ((_path$userData3 = path.userData) == null ? void 0 : _path$userData3.style.stroke) !== undefined && path.userData.style.stroke !== 'none' && path.subPaths.map((_subPath, s) => /*#__PURE__*/React.createElement("mesh", _extends({
       key: s,
       geometry: strokeGeometries[p][s]
-    }, strokeMeshProps), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
+    }, strokeMeshProps, {
+      renderOrder: renderOrder++
+    }), /*#__PURE__*/React.createElement("meshBasicMaterial", _extends({
       color: path.userData.style.stroke,
       opacity: path.userData.style.strokeOpacity,
       transparent: true,