@pmndrs/vanilla - npm Package Compare versions

Comparing version 1.15.1 to 1.16.0

core/Outlines.cjs.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),n=require("three/examples/jsm/utils/BufferGeometryUtils"),t=require("./shaderMaterial.cjs.js");function r(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 i=r(e);const o=t.shaderMaterial({color:new i.Color("black"),opacity:1,thickness:.05},"\n   #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   }",`\n   uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(i.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e=new i.Color("black"),opacity:t=1,transparent:r=!1,thickness:a=.05,angle:c=Math.PI}){const s=new i.Group;let l={color:e,opacity:t,transparent:r,thickness:a,angle:c};function d(e){const t=s.parent;if(s.clear(),t&&t.geometry){let r;t.skeleton?(r=new i.SkinnedMesh,r.material=new o({side:i.BackSide}),r.bind(t.skeleton,t.bindMatrix),s.add(r)):t.isInstancedMesh?(r=new i.InstancedMesh(t.geometry,new o({side:i.BackSide}),t.count),r.instanceMatrix=t.instanceMatrix,s.add(r)):(r=new i.Mesh,r.material=new o({side:i.BackSide}),s.add(r)),r.geometry=e?n.toCreasedNormals(t.geometry,e):t.geometry}}function u(e){l={...l,...e};const n=s.children[0];if(n){const{transparent:e,thickness:t,color:r,opacity:i}=l;Object.assign(n.material,{transparent:e,thickness:t,color:r,opacity:i})}}return{group:s,updateProps(e){var n;const t=null!==(n=e.angle)&&void 0!==n?n:l.angle;t!==l.angle&&d(t),u(e)},generate(){d(l.angle),u(l)}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./shaderMaterial.cjs.js"),n=require("three"),t=require("three/examples/jsm/utils/BufferGeometryUtils");function r(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 o=r(n);const i=e.shaderMaterial({screenspace:!1,color:new o.Color("black"),opacity:1,thickness:.05,size:new o.Vector2},"\n   #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   }",`\n   uniform vec3 color;\n   uniform float opacity;\n   void main(){\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${parseInt(o.REVISION.replace(/\D+/g,""))>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e=new o.Color("black"),opacity:n=1,transparent:r=!1,screenspace:a=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:l=0,renderOrder:p=0,thickness:d=.05,angle:f=Math.PI,gl:u}){const m=new o.Group;let g={color:e,opacity:n,transparent:r,screenspace:a,toneMapped:c,polygonOffset:s,polygonOffsetFactor:l,renderOrder:p,thickness:d,angle:f};function v(e){const n=m.parent;if(m.clear(),n&&n.geometry){let r;const a=new i({side:o.BackSide});n.skeleton?(r=new o.SkinnedMesh,r.material=a,r.bind(n.skeleton,n.bindMatrix),m.add(r)):n.isInstancedMesh?(r=new o.InstancedMesh(n.geometry,a,n.count),r.instanceMatrix=n.instanceMatrix,m.add(r)):(r=new o.Mesh,r.material=a,m.add(r)),r.geometry=e?t.toCreasedNormals(n.geometry,e):n.geometry}}function x(e){g={...g,...e};const n=m.children[0];if(n){const{transparent:e,thickness:t,color:r,opacity:i,screenspace:a,toneMapped:c,polygonOffset:s,polygonOffsetFactor:l,renderOrder:p}=g,d=new o.Vector2;!u&&g.screenspace&&console.warn('Outlines: "screenspace" requires a WebGLRenderer instance to calculate the outline size'),u&&u.getSize(d),Object.assign(n.material,{transparent:e,thickness:t,color:r,opacity:i,size:d,screenspace:a,toneMapped:c,polygonOffset:s,polygonOffsetFactor:l}),void 0!==p&&(n.renderOrder=p)}}return{group:m,updateProps(e){var n;const t=null!==(n=e.angle)&&void 0!==n?n:g.angle;t!==g.angle&&v(t),x(e)},generate(){v(g.angle),x(g)}}};

core/Outlines.d.ts

 import * as THREE from 'three';
 export declare type OutlinesProps = {
-    color: THREE.Color;
-    opacity: number;
-    transparent: boolean;
-    thickness: number;
-    angle: number;
+    color?: THREE.Color;
+    screenspace?: boolean;
+    opacity?: number;
+    transparent?: boolean;
+    thickness?: number;
+    angle?: number;
+    toneMapped?: boolean;
+    polygonOffset?: boolean;
+    polygonOffsetFactor?: number;
+    renderOrder?: number;
+    gl?: THREE.WebGLRenderer;
 };
@@ -14,2 +20,2 @@ export declare type OutlinesType = {
 };
-export declare function Outlines({ color, opacity, transparent, thickness, angle, }: Partial<OutlinesProps>): OutlinesType;
+export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, renderOrder, thickness, angle, gl, }: Partial<OutlinesProps>): OutlinesType;

core/Outlines.js

@@ -0,9 +1,11 @@
+import { shaderMaterial } from './shaderMaterial.js';
 import * as THREE from 'three';
 import { toCreasedNormals } from 'three/examples/jsm/utils/BufferGeometryUtils';
-import { shaderMaterial } from './shaderMaterial.js';
 
 const OutlinesMaterial = shaderMaterial({
+  screenspace: false,
   color: new THREE.Color('black'),
   opacity: 1,
-  thickness: 0.05
+  thickness: 0.05,
+  size: new THREE.Vector2()
 }, /* glsl */`
@@ -14,2 +16,4 @@ #include <common>
    uniform float thickness;
+   uniform float screenspace;
+   uniform vec2 size;
    void main() {
@@ -27,10 +31,18 @@ #if defined (USE_SKINNING)
      #include <project_vertex>
-     vec4 transformedNormal = vec4(normal, 0.0);
-     vec4 transformedPosition = vec4(transformed, 1.0);
+     vec4 tNormal = vec4(normal, 0.0);
+     vec4 tPosition = vec4(transformed, 1.0);
      #ifdef USE_INSTANCING
-       transformedNormal = instanceMatrix * transformedNormal;
-       transformedPosition = instanceMatrix * transformedPosition;
+       tNormal = instanceMatrix * tNormal;
+       tPosition = instanceMatrix * tPosition;
      #endif
-     vec3 newPosition = transformedPosition.xyz + transformedNormal.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;
+     }
    }`, /* glsl */`
@@ -48,4 +60,10 @@ uniform vec3 color;
   transparent = false,
+  screenspace = false,
+  toneMapped = true,
+  polygonOffset = false,
+  polygonOffsetFactor = 0,
+  renderOrder = 0,
   thickness = 0.05,
-  angle = Math.PI
+  angle = Math.PI,
+  gl
 }) {
@@ -57,2 +75,7 @@ const group = new THREE.Group();
     transparent,
+    screenspace,
+    toneMapped,
+    polygonOffset,
+    polygonOffsetFactor,
+    renderOrder,
     thickness,
@@ -66,13 +89,12 @@ angle
       let mesh;
+      const material = new OutlinesMaterial({
+        side: THREE.BackSide
+      });
       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, new OutlinesMaterial({
-          side: THREE.BackSide
-        }), parent.count);
+        mesh = new THREE.InstancedMesh(parent.geometry, material, parent.count);
         mesh.instanceMatrix = parent.instanceMatrix;
@@ -82,5 +104,3 @@ group.add(mesh);
         mesh = new THREE.Mesh();
-        mesh.material = new OutlinesMaterial({
-          side: THREE.BackSide
-        });
+        mesh.material = material;
         group.add(mesh);
@@ -102,4 +122,14 @@ }
         color,
-        opacity
+        opacity,
+        screenspace,
+        toneMapped,
+        polygonOffset,
+        polygonOffsetFactor,
+        renderOrder
       } = shapeProps;
+      const contextSize = new THREE.Vector2();
+      if (!gl && shapeProps.screenspace) {
+        console.warn('Outlines: "screenspace" requires a WebGLRenderer instance to calculate the outline size');
+      }
+      if (gl) gl.getSize(contextSize);
       Object.assign(mesh.material, {
@@ -109,4 +139,10 @@ transparent,
         color,
-        opacity
+        opacity,
+        size: contextSize,
+        screenspace,
+        toneMapped,
+        polygonOffset,
+        polygonOffsetFactor
       });
+      if (renderOrder !== undefined) mesh.renderOrder = renderOrder;
     }
@@ -113,0 +149,0 @@ }

package.json

 {
   "name": "@pmndrs/vanilla",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "private": false,
@@ -5,0 +5,0 @@ "publishConfig": {

README.md

@@ -514,11 +514,19 @@ ![logo](logo.jpg)
   /** Outline color, default: black */
-  color: THREE.Color
+  color?: THREE.Color
+  /** Line thickness is independent of zoom, default: false */
+  screenspace?: boolean
   /** Outline opacity, default: 1 */
-  opacity: number
+  opacity?: number
   /** Outline transparency, default: false */
-  transparent: boolean
+  transparent?: boolean
   /** Outline thickness, default 0.05 */
-  thickness: number
+  thickness?: number
   /** Geometry crease angle (0 === no crease), default: Math.PI */
-  angle: number
+  angle?: number
+  toneMapped?: boolean
+  polygonOffset?: boolean
+  polygonOffsetFactor?: number
+  renderOrder?: number
+  /** needed if `screenspace` is true */
+  gl?: THREE.WebGLRenderer
 }
@@ -586,3 +594,3 @@ ```
 
-scene.add(billboard)
+scene.add(billboard.group)
 
@@ -589,0 +597,0 @@ // call in animate loop

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

320799

increased by1.04%

Lines of code

4173

increased by1.16%

Number of lines in readme file

818

increased by0.99%

Worsened metrics

Number of low supply chain risk alerts

12

increased by20%

No dependency changes