@react-three/drei 9.83.7 → 9.83.9

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");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 s=a(e),l=c(n),u=c(t);const d=r.shaderMaterial({screenspace:!1,color:new l.Color("black"),opacity:1,thickness:.05,size:new l.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 <${parseInt(l.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:a=!0,polygonOffset:c=!1,polygonOffsetFactor:f=0,thickness:p=.05,angle:m=Math.PI,...g}){var v,x;const y=u.useRef(null),[_]=u.useState((()=>new d({side:l.BackSide}))),{gl:M}=i.useThree(),h=M.getDrawingBufferSize(new l.Vector2);return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=y.current,n=e.parent;if(n&&n.geometry){let t;return n.skeleton?(t=new l.SkinnedMesh,t.material=_,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new l.InstancedMesh(n.geometry,_,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new l.Mesh,t.material=_,e.add(t)),t.geometry=m?o.toCreasedNormals(n.geometry,m):n.geometry,()=>{m&&t.geometry.dispose(),e.remove(t)}}}),[m,null==(v=y.current)||null==(x=v.parent)?void 0:x.geometry]),u.useLayoutEffect((()=>{const o=y.current.children[0];o&&i.applyProps(o.material,{transparent:t,thickness:p,color:e,opacity:n,size:h,screenspace:r,toneMapped:a,polygonOffset:c,polygonOffsetFactor:f})}),[m,t,p,e,n,r,a,c,f]),u.createElement("group",s.default({ref:y},g))};
+"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");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 s=a(e),l=c(n),u=c(t);const d=r.shaderMaterial({screenspace:!1,color:new l.Color("black"),opacity:1,thickness:.05,size:new l.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 <${parseInt(l.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:a=!0,polygonOffset:c=!1,polygonOffsetFactor:f=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){var x,y;const _=u.useRef(null),[M]=u.useState((()=>new d({side:l.BackSide}))),{gl:h}=i.useThree(),b=h.getDrawingBufferSize(new l.Vector2);return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=_.current,n=e.parent;if(n&&n.geometry){let t;return n.skeleton?(t=new l.SkinnedMesh,t.material=M,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new l.InstancedMesh(n.geometry,M,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new l.Mesh,t.material=M,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry,()=>{g&&t.geometry.dispose(),e.remove(t)}}}),[g,null==(x=_.current)||null==(y=x.parent)?void 0:y.geometry]),u.useLayoutEffect((()=>{const o=_.current.children[0];o&&(o.renderOrder=p,i.applyProps(o.material,{transparent:t,thickness:m,color:e,opacity:n,size:b,screenspace:r,toneMapped:a,polygonOffset:c,polygonOffsetFactor:f}))}),[g,t,m,e,n,r,a,c,f,b,p]),u.createElement("group",s.default({ref:_},v))};

package/core/Outlines.d.ts

@@ -10,6 +10,7 @@ declare type OutlinesProps = JSX.IntrinsicElements['group'] & {
     toneMapped?: boolean;
     polygonOffset?: boolean;
     polygonOffsetFactor?: number;
+    renderOrder?: number;
 };
-export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, thickness, angle, ...props }: OutlinesProps): JSX.Element;
+export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, renderOrder, thickness, angle, ...props }: OutlinesProps): JSX.Element;
 export {};

package/core/Outlines.js

@@ -60,6 +60,7 @@ function Outlines({
   toneMapped = true,
   polygonOffset = false,
   polygonOffsetFactor = 0,
+  renderOrder = 0,
   thickness = 0.05,
   angle = Math.PI,
   ...props
@@ -111,6 +112,7 @@ function Outlines({
     const mesh = group.children[0];
 
     if (mesh) {
+      mesh.renderOrder = renderOrder;
       applyProps(mesh.material, {
         transparent,
         thickness,
@@ -123,7 +125,7 @@ function Outlines({
         polygonOffsetFactor
       });
     }
-  }, [angle, transparent, thickness, color, opacity, screenspace, toneMapped, polygonOffset, polygonOffsetFactor]);
+  }, [angle, transparent, thickness, color, opacity, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, contextSize, renderOrder]);
   return /*#__PURE__*/React.createElement("group", _extends({
     ref: ref
   }, props));