@react-three/drei 9.83.5 → 9.83.7

package/README.md

@@ -1409,6 +1409,8 @@ An ornamental component that extracts the geometry from its parent and displays
 type OutlinesProps = JSX.IntrinsicElements['group'] & {
   /** Outline color, default: black */
   color: ReactThreeFiber.Color
+  /** Line thickness is independent of zoom, default: false */
+  screenspace: boolean
   /** Outline opacity, default: 1 */
   opacity: number
   /** Outline transparency, default: false */

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 l=a(e),s=c(n),u=c(t);const d=r.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     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     vec3 newPosition = tPosition.xyz + tNormal.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(s.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,thickness:r=.05,angle:a=Math.PI,...c}){var f,m;const p=u.useRef(null),[v]=u.useState((()=>new d({side:s.BackSide})));return u.useMemo((()=>i.extend({OutlinesMaterial:d})),[]),u.useLayoutEffect((()=>{const e=p.current,n=e.parent;if(n&&n.geometry){let t;return n.skeleton?(t=new s.SkinnedMesh,t.material=v,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new s.InstancedMesh(n.geometry,v,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new s.Mesh,t.material=v,e.add(t)),t.geometry=a?o.toCreasedNormals(n.geometry,a):n.geometry,()=>{a&&t.geometry.dispose(),e.remove(t)}}}),[a,null==(f=p.current)||null==(m=f.parent)?void 0:m.geometry]),u.useLayoutEffect((()=>{const o=p.current.children[0];o&&i.applyProps(o.material,{transparent:t,thickness:r,color:e,opacity:n})}),[a,t,r,e,n]),u.createElement("group",l.default({ref:p},c))};
+"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))};

package/core/Outlines.d.ts

@@ -2,10 +2,14 @@
 import { ReactThreeFiber } from '@react-three/fiber';
 declare type OutlinesProps = JSX.IntrinsicElements['group'] & {
     color: ReactThreeFiber.Color;
+    screenspace: boolean;
     opacity: number;
     transparent: boolean;
     thickness: number;
     angle: number;
+    toneMapped?: boolean;
+    polygonOffset?: boolean;
+    polygonOffsetFactor?: number;
 };
-export declare function Outlines({ color, opacity, transparent, thickness, angle, ...props }: OutlinesProps): JSX.Element;
+export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, thickness, angle, ...props }: OutlinesProps): JSX.Element;
 export {};

package/core/Outlines.js

@@ -2,17 +2,21 @@ 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, applyProps } from '@react-three/fiber';
+import { useThree, extend, applyProps } from '@react-three/fiber';
 import { toCreasedNormals } from 'three-stdlib';
 
 const OutlinesMaterial = shaderMaterial({
+  screenspace: false,
   color: new THREE.Color('black'),
   opacity: 1,
-  thickness: 0.05
+  thickness: 0.05,
+  size: new THREE.Vector2()
 }, `#include <common>
    #include <morphtarget_pars_vertex>
    #include <skinning_pars_vertex>
    uniform float thickness;
+   uniform float screenspace;
+   uniform vec2 size;
    void main() {
      #if defined (USE_SKINNING)
 	     #include <beginnormal_vertex>
@@ -31,8 +35,16 @@ const OutlinesMaterial = shaderMaterial({
        tNormal = instanceMatrix * tNormal;
        tPosition = instanceMatrix * tPosition;
      #endif
-     vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;
-     gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
+     if (screenspace == 0.0) {
+       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;
+       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
+     } else {
+       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;
+       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;
+       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;
+       clipPosition.xy += offset;
+       gl_Position = clipPosition;
+     }
    }`, `uniform vec3 color;
    uniform float opacity;
    void main(){
@@ -44,6 +56,10 @@ function Outlines({
   color = 'black',
   opacity = 1,
   transparent = false,
+  screenspace = false,
+  toneMapped = true,
+  polygonOffset = false,
+  polygonOffsetFactor = 0,
   thickness = 0.05,
   angle = Math.PI,
   ...props
@@ -54,6 +70,10 @@ function Outlines({
   const [material] = React.useState(() => new OutlinesMaterial({
     side: THREE.BackSide
   }));
+  const {
+    gl
+  } = useThree();
+  const contextSize = gl.getDrawingBufferSize(new THREE.Vector2());
   React.useMemo(() => extend({
     OutlinesMaterial
   }), []);
@@ -95,10 +115,15 @@ function Outlines({
         transparent,
         thickness,
         color,
-        opacity
+        opacity,
+        size: contextSize,
+        screenspace,
+        toneMapped,
+        polygonOffset,
+        polygonOffsetFactor
       });
     }
-  }, [angle, transparent, thickness, color, opacity]);
+  }, [angle, transparent, thickness, color, opacity, screenspace, toneMapped, polygonOffset, polygonOffsetFactor]);
   return /*#__PURE__*/React.createElement("group", _extends({
     ref: ref
   }, props));