@react-three/drei 9.83.0 → 9.83.1

package/README.md

@@ -1403,7 +1403,7 @@ Abstracts [THREE.EdgesGeometry](https://threejs.org/docs/#api/en/geometries/Edge
   <a href="https://codesandbox.io/s/2gh6jf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2gh6jf/screenshot.png" alt="Demo"/></a>
 </p>
 
-An ornamental component that extracts the geometry from its parent and displays an [inverted-hull outline](https://bnpr.gitbook.io/bnpr/outline/inverse-hull-method).
+An ornamental component that extracts the geometry from its parent and displays an [inverted-hull outline](https://bnpr.gitbook.io/bnpr/outline/inverse-hull-method). Supported parents are `<mesh>`, `<skinnedMesh>` and `<instancedMesh>`.
 
 ```tsx
 type OutlinesProps = JSX.IntrinsicElements['group'] & {

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"),r=require("react"),t=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(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var l=a(e),s=c(n),u=c(r);const d=t.shaderMaterial({color:new s.Color("black"),opacity:1,thickness:.05},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\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     vec3 newPosition = transformed + normal * thickness;\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n   }",`uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(s.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:r=!1,thickness:t=.05,angle:a=Math.PI,...c}){const f=u.useRef(null);return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=f.current,n=e.parent;if(n&&n.geometry){let r;return n.skeleton?(r=new s.SkinnedMesh,r.material=new d({side:s.BackSide}),r.bind(n.skeleton,n.bindMatrix),e.add(r)):(r=new s.Mesh,r.material=new d({side:s.BackSide}),e.add(r)),r.geometry=a?o.toCreasedNormals(n.geometry,a):n.geometry,()=>{i.dispose(r),e.clear()}}}),[a]),u.useLayoutEffect((()=>{const o=f.current.children[0];o&&i.applyProps(o.material,{transparent:r,thickness:t,color:e,opacity:n})}),[a,r,t,e,n]),u.createElement("group",l.default({ref:f},c))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),r=require("react"),t=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(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var s=a(e),l=c(n),d=c(r);const u=t.shaderMaterial({color:new l.Color("black"),opacity:1,thickness:.05},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   uniform float thickness;\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 transformedNormal = vec4(normal, 0.0);\n     vec4 transformedPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       transformedNormal = instanceMatrix * transformedNormal;\n       transformedPosition = instanceMatrix * transformedPosition;\n     #endif\n     vec3 newPosition = transformedPosition.xyz + transformedNormal.xyz * thickness;\n     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \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:r=!1,thickness:t=.05,angle:a=Math.PI,...c}){const f=d.useRef(null);return d.useMemo((()=>i.extend({OutlinesMaterial:u})),[]),d.useLayoutEffect((()=>{const e=f.current,n=e.parent;if(n&&n.geometry){let r;return n.skeleton?(r=new l.SkinnedMesh,r.material=new u({side:l.BackSide}),r.bind(n.skeleton,n.bindMatrix),e.add(r)):n.isInstancedMesh?(r=new l.InstancedMesh(n.geometry,new u({side:l.BackSide}),n.count),r.instanceMatrix=n.instanceMatrix,e.add(r)):(r=new l.Mesh,r.material=new u({side:l.BackSide}),e.add(r)),r.geometry=a?o.toCreasedNormals(n.geometry,a):n.geometry,()=>{i.dispose(r),e.clear()}}}),[a]),d.useLayoutEffect((()=>{const o=f.current.children[0];o&&i.applyProps(o.material,{transparent:r,thickness:t,color:e,opacity:n})}),[a,r,t,e,n]),d.createElement("group",s.default({ref:f},c))};

package/core/Outlines.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-export declare function Outlines({ color, opacity, transparent, thickness, angle, ...props }: {
-    [x: string]: any;
-    color?: string | undefined;
-    opacity?: number | undefined;
-    transparent?: boolean | undefined;
-    thickness?: number | undefined;
-    angle?: number | undefined;
-}): JSX.Element;
+import { ReactThreeFiber } from '@react-three/fiber';
+declare type OutlinesProps = JSX.IntrinsicElements['group'] & {
+    color: ReactThreeFiber.Color;
+    opacity: number;
+    transparent: boolean;
+    thickness: number;
+    angle: number;
+};
+export declare function Outlines({ color, opacity, transparent, thickness, angle, ...props }: OutlinesProps): JSX.Element;
+export {};

package/core/Outlines.js

@@ -25,7 +25,13 @@ const OutlinesMaterial = shaderMaterial({
 	   #include <morphtarget_vertex>
 	   #include <skinning_vertex>
      #include <project_vertex>
-     vec3 newPosition = transformed + normal * thickness;
+     vec4 transformedNormal = vec4(normal, 0.0);
+     vec4 transformedPosition = vec4(transformed, 1.0);
+     #ifdef USE_INSTANCING
+       transformedNormal = instanceMatrix * transformedNormal;
+       transformedPosition = instanceMatrix * transformedPosition;
+     #endif
+     vec3 newPosition = transformedPosition.xyz + transformedNormal.xyz * thickness;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
    }`, `uniform vec3 color;
    uniform float opacity;
@@ -60,6 +66,12 @@ function Outlines({
         });
         mesh.bind(parent.skeleton, parent.bindMatrix);
         group.add(mesh);
+      } else if (parent.isInstancedMesh) {
+        mesh = new THREE.InstancedMesh(parent.geometry, new OutlinesMaterial({
+          side: THREE.BackSide
+        }), parent.count);
+        mesh.instanceMatrix = parent.instanceMatrix;
+        group.add(mesh);
       } else {
         mesh = new THREE.Mesh();
         mesh.material = new OutlinesMaterial({