@react-three/drei 9.83.0 → 9.83.2

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"),o=require("@react-three/fiber"),i=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}){var f,m;const p=d.useRef(null),[g]=d.useState((()=>new u({side:l.BackSide})));return d.useMemo((()=>o.extend({OutlinesMaterial:u})),[]),d.useLayoutEffect((()=>{const e=p.current,n=e.parent;if(n&&n.geometry){let r;return n.skeleton?(r=new l.SkinnedMesh,r.material=g,r.bind(n.skeleton,n.bindMatrix),e.add(r)):n.isInstancedMesh?(r=new l.InstancedMesh(n.geometry,g,n.count),r.instanceMatrix=n.instanceMatrix,e.add(r)):(r=new l.Mesh,r.material=g,e.add(r)),r.geometry=a?i.toCreasedNormals(n.geometry,a):n.geometry,()=>{a&&r.geometry.dispose(),e.remove(r)}}}),[a,null==(f=p.current)||null==(m=f.parent)?void 0:m.geometry]),d.useLayoutEffect((()=>{const i=p.current;console.log(i.children.length);const a=i.children[0];a&&o.applyProps(a.material,{transparent:r,thickness:t,color:e,opacity:n})}),[a,r,t,e,n]),d.createElement("group",s.default({ref:p},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

@@ -2,7 +2,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as THREE from 'three';
 import * as React from 'react';
 import { shaderMaterial } from './shaderMaterial.js';
-import { extend, dispose, applyProps } from '@react-three/fiber';
+import { extend, applyProps } from '@react-three/fiber';
 import { toCreasedNormals } from 'three-stdlib';
 
 const OutlinesMaterial = shaderMaterial({
@@ -15,7 +15,7 @@ const OutlinesMaterial = shaderMaterial({
    uniform float thickness;
    void main() {
      #if defined (USE_SKINNING)
-	   #include <beginnormal_vertex>
+	     #include <beginnormal_vertex>
        #include <morphnormal_vertex>
        #include <skinbase_vertex>
        #include <skinnormal_vertex>
@@ -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;
@@ -42,7 +48,12 @@ function Outlines({
   angle = Math.PI,
   ...props
 }) {
+  var _ref$current, _ref$current$parent;
+
   const ref = React.useRef(null);
+  const [material] = React.useState(() => new OutlinesMaterial({
+    side: THREE.BackSide
+  }));
   React.useMemo(() => extend({
     OutlinesMaterial
   }), []);
@@ -55,28 +66,29 @@ function Outlines({
 
       if (parent.skeleton) {
         mesh = new THREE.SkinnedMesh();
-        mesh.material = new OutlinesMaterial({
-          side: THREE.BackSide
-        });
+        mesh.material = material;
         mesh.bind(parent.skeleton, parent.bindMatrix);
         group.add(mesh);
+      } else if (parent.isInstancedMesh) {
+        mesh = new THREE.InstancedMesh(parent.geometry, material, parent.count);
+        mesh.instanceMatrix = parent.instanceMatrix;
+        group.add(mesh);
       } else {
         mesh = new THREE.Mesh();
-        mesh.material = new OutlinesMaterial({
-          side: THREE.BackSide
-        });
+        mesh.material = material;
         group.add(mesh);
       }
 
       mesh.geometry = angle ? toCreasedNormals(parent.geometry, angle) : parent.geometry;
       return () => {
-        dispose(mesh);
-        group.clear();
+        if (angle) mesh.geometry.dispose();
+        group.remove(mesh);
       };
     }
-  }, [angle]);
+  }, [angle, (_ref$current = ref.current) == null ? void 0 : (_ref$current$parent = _ref$current.parent) == null ? void 0 : _ref$current$parent.geometry]);
   React.useLayoutEffect(() => {
     const group = ref.current;
+    console.log(group.children.length);
     const mesh = group.children[0];
 
     if (mesh) {