troika-three-utils - npm Package Compare versions

Comparing version 0.28.0 to 0.28.1

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+## [0.28.1](https://github.com/protectwise/troika/compare/v0.28.0...v0.28.1) (2020-06-17)
+
+
+### Bug Fixes
+
+* **troika-3d-text:** don't dispose derived materials on base material switch ([3d88475](https://github.com/protectwise/troika/commit/3d88475d2f3ead6bec92694ff0720d4ab643e872)), closes [#59](https://github.com/protectwise/troika/issues/59)
+
+
+### Performance Improvements
+
+* **troika-three-utils:** increase chance of program reuse in createDerivedMaterial ([56daf65](https://github.com/protectwise/troika/commit/56daf6535a7bd8fec30d86a713feb5b8f26fa6a5)), closes [#59](https://github.com/protectwise/troika/issues/59)
+
+
+
+
+
 # [0.28.0](https://github.com/protectwise/troika/compare/v0.27.1...v0.28.0) (2020-06-09)
@@ -8,0 +24,0 @@

dist/troika-three-utils.esm.js

@@ -42,3 +42,2 @@ import { ShaderChunk, UniformsUtils, MeshDepthMaterial, RGBADepthPacking, MeshDistanceMaterial, ShaderLib, DataTexture, Vector3, MeshStandardMaterial, DoubleSide, Mesh, CylinderBufferGeometry, Vector2 } from 'three';
 
-let idCtr = 0;
 const epoch = Date.now();
@@ -116,3 +115,7 @@ const CACHE = new WeakMap(); //threejs requires WeakMap internally so should be safe to assume support
 
-  const id = ++idCtr;
+  // Even if baseMaterial is changing, use a consistent id in shader rewrites based on the
+  // optionsHash. This makes it more likely that deriving from base materials of the same
+  // type/class, e.g. multiple instances of MeshStandardMaterial, will produce identical
+  // rewritten shader code so they can share a single WebGLProgram behind the scenes.
+  const id = getIdForOptionsHash(optionsHash);
   const privateDerivedShadersProp = `_derivedShaders${id}`;
@@ -372,2 +375,12 @@ const privateBeforeCompileProp = `_onBeforeCompile${id}`;
 
+let _idCtr = 0;
+const optionsHashesToIds = new Map();
+function getIdForOptionsHash(optionsHash) {
+  let id = optionsHashesToIds.get(optionsHash);
+  if (id == null) {
+    optionsHashesToIds.set(optionsHash, (id = ++_idCtr));
+  }
+  return id
+}
+
 // Copied from threejs WebGLPrograms.js so we can resolve builtin materials to their shaders
@@ -852,5 +865,2 @@ // TODO how can we keep this from getting stale?
     if (!derivedMaterial || derivedMaterial.baseMaterial !== baseMaterial) {
-      if (derivedMaterial) {
-        derivedMaterial.dispose();
-      }
       derivedMaterial = this._derivedMaterial = createBezierMeshMaterial(baseMaterial);
@@ -857,0 +867,0 @@ // dispose the derived material when its base material is disposed:

dist/troika-three-utils.umd.js

@@ -48,3 +48,2 @@ (function (global, factory) {
 
-  var idCtr = 0;
   var epoch = Date.now();
@@ -122,3 +121,7 @@ var CACHE = new WeakMap(); //threejs requires WeakMap internally so should be safe to assume support
 
-    var id = ++idCtr;
+    // Even if baseMaterial is changing, use a consistent id in shader rewrites based on the
+    // optionsHash. This makes it more likely that deriving from base materials of the same
+    // type/class, e.g. multiple instances of MeshStandardMaterial, will produce identical
+    // rewritten shader code so they can share a single WebGLProgram behind the scenes.
+    var id = getIdForOptionsHash(optionsHash);
     var privateDerivedShadersProp = "_derivedShaders" + id;
@@ -363,2 +366,12 @@ var privateBeforeCompileProp = "_onBeforeCompile" + id;
 
+  var _idCtr = 0;
+  var optionsHashesToIds = new Map();
+  function getIdForOptionsHash(optionsHash) {
+    var id = optionsHashesToIds.get(optionsHash);
+    if (id == null) {
+      optionsHashesToIds.set(optionsHash, (id = ++_idCtr));
+    }
+    return id
+  }
+
   // Copied from threejs WebGLPrograms.js so we can resolve builtin materials to their shaders
@@ -782,5 +795,2 @@ // TODO how can we keep this from getting stale?
       if (!derivedMaterial || derivedMaterial.baseMaterial !== baseMaterial) {
-        if (derivedMaterial) {
-          derivedMaterial.dispose();
-        }
         derivedMaterial = this._derivedMaterial = createBezierMeshMaterial(baseMaterial);
@@ -787,0 +797,0 @@ // dispose the derived material when its base material is disposed:

dist/troika-three-utils.umd.min.js

 'use strict';(function(g,e){"object"===typeof exports&&"undefined"!==typeof module?e(exports,require("three")):"function"===typeof define&&define.amd?define(["exports","three"],e):(g=g||self,e(g.troika_three_utils={},g.THREE))})(this,function(g,e){function u(a){return a.replace(/^[ \t]*#include +<([\w\d./]+)>/gm,function(a,c){return(c=e.ShaderChunk[c])?u(c):a})}function q(a,b){function c(c){a.onBeforeCompile.call(this,c);var d=this[g]||(this[g]={vertex:{},fragment:{}}),f=d.vertex;d=d.fragment;if(f.source!==
-c.vertexShader||d.source!==c.fragmentShader){var e=B(c,b,r);f.source=c.vertexShader;f.result=e.vertexShader;d.source=c.fragmentShader;d.result=e.fragmentShader}c.vertexShader=f.result;c.fragmentShader=d.result;l(c.uniforms,this.uniforms);b.timeUniform&&(c.uniforms[b.timeUniform]={get value(){return Date.now()-C}});if(this[p])this[p](c)}function d(){a.constructor.apply(this,arguments);this._listeners=void 0}var f=JSON.stringify(b,D),t=v.get(a);t||(t=Object.create(null),v.set(a,t));if(t[f])return t[f].clone();
-var r=++E,g="_derivedShaders"+r,p="_onBeforeCompile"+r,h,m;d.prototype=Object.create(a,{constructor:{value:d},isDerivedMaterial:{value:!0},baseMaterial:{value:a},onBeforeCompile:{get:function(){return c},set:function(a){this[p]=a}},copy:{value:function(b){a.copy.call(this,b);a.isShaderMaterial||a.isDerivedMaterial||(this.extensions=l({},b.extensions),this.defines=l({},b.defines),this.uniforms=e.UniformsUtils.clone(b.uniforms));return this}},getDepthMaterial:{value:function(){var c=this._depthMaterial;
+c.vertexShader||d.source!==c.fragmentShader){var e=C(c,b,r);f.source=c.vertexShader;f.result=e.vertexShader;d.source=c.fragmentShader;d.result=e.fragmentShader}c.vertexShader=f.result;c.fragmentShader=d.result;l(c.uniforms,this.uniforms);b.timeUniform&&(c.uniforms[b.timeUniform]={get value(){return Date.now()-D}});if(this[p])this[p](c)}function d(){a.constructor.apply(this,arguments);this._listeners=void 0}var f=JSON.stringify(b,E),t=v.get(a);t||(t=Object.create(null),v.set(a,t));if(t[f])return t[f].clone();
+var r=F(f),g="_derivedShaders"+r,p="_onBeforeCompile"+r,h,m;d.prototype=Object.create(a,{constructor:{value:d},isDerivedMaterial:{value:!0},baseMaterial:{value:a},onBeforeCompile:{get:function(){return c},set:function(a){this[p]=a}},copy:{value:function(b){a.copy.call(this,b);a.isShaderMaterial||a.isDerivedMaterial||(this.extensions=l({},b.extensions),this.defines=l({},b.defines),this.uniforms=e.UniformsUtils.clone(b.uniforms));return this}},getDepthMaterial:{value:function(){var c=this._depthMaterial;
 c||(m||(m=q(a.isDerivedMaterial?a.getDepthMaterial():new e.MeshDepthMaterial({depthPacking:e.RGBADepthPacking}),b),m.defines.IS_DEPTH_MATERIAL=""),c=this._depthMaterial=m.clone(),c.uniforms=this.uniforms);return c}},getDistanceMaterial:{value:function(){var c=this._distanceMaterial;c||(h||(h=q(a.isDerivedMaterial?a.getDistanceMaterial():new e.MeshDistanceMaterial,b),h.defines.IS_DISTANCE_MATERIAL=""),c=this._distanceMaterial=h.clone(),c.uniforms=this.uniforms);return c}},dispose:{value:function(){var b=
-this._depthMaterial,c=this._distanceMaterial;b&&b.dispose();c&&c.dispose();a.dispose.call(this)}}});var k=new d;k.copy(a);k.uniforms=l(e.UniformsUtils.clone(a.uniforms||{}),b.uniforms);k.defines=l({},a.defines,b.defines);k.defines.TROIKA_DERIVED_MATERIAL=r;k.extensions=l({},a.extensions,b.extensions);t[f]=k;return k.clone()}function B(a,b,c){var d=a.vertexShader,f=a.fragmentShader;a=b.vertexDefs;var e=b.vertexMainIntro,g=b.vertexMainOutro,h=b.vertexTransform,p=b.fragmentDefs,l=b.fragmentMainIntro,
+this._depthMaterial,c=this._distanceMaterial;b&&b.dispose();c&&c.dispose();a.dispose.call(this)}}});var k=new d;k.copy(a);k.uniforms=l(e.UniformsUtils.clone(a.uniforms||{}),b.uniforms);k.defines=l({},a.defines,b.defines);k.defines.TROIKA_DERIVED_MATERIAL=r;k.extensions=l({},a.extensions,b.extensions);t[f]=k;return k.clone()}function C(a,b,c){var d=a.vertexShader,f=a.fragmentShader;a=b.vertexDefs;var e=b.vertexMainIntro,g=b.vertexMainOutro,h=b.vertexTransform,p=b.fragmentDefs,l=b.fragmentMainIntro,
 m=b.fragmentMainOutro,k=b.fragmentColorTransform,n=b.customRewriter;b=b.timeUniform;a=a||"";e=e||"";g=g||"";p=p||"";l=l||"";m=m||"";if(h||n)d=u(d);if(k||n)f=f.replace(/^[ \t]*#include <((?:tonemapping|encodings|fog|premultiplied_alpha|dithering)_fragment)>/gm,"\n//!BEGIN_POST_CHUNK $1\n$&\n//!END_POST_CHUNK\n"),f=u(f);n&&(f=n({vertexShader:d,fragmentShader:f}),d=f.vertexShader,f=f.fragmentShader);if(k){var q=[];f=f.replace(/^\/\/!BEGIN_POST_CHUNK[^]+?^\/\/!END_POST_CHUNK/gm,function(a){q.push(a);
 return""});m=k+"\n"+q.join("\n")+"\n"+m}b&&(k="\nuniform float "+b+";\n",a=k+a,p=k+p);h&&(a=a+"\nvec3 troika_position_"+c+";\nvec3 troika_normal_"+c+";\nvec2 troika_uv_"+c+";\nvoid troikaVertexTransform"+c+"(inout vec3 position, inout vec3 normal, inout vec2 uv) {\n  "+h+"\n}\n",e="\ntroika_position_"+c+" = vec3(position);\ntroika_normal_"+c+" = vec3(normal);\ntroika_uv_"+c+" = vec2(uv);\ntroikaVertexTransform"+c+"(troika_position_"+c+", troika_normal_"+c+", troika_uv_"+c+");\n"+e+"\n",d=d.replace(/\b(position|normal|uv)\b/g,
-function(a,b,d,f){return/\battribute\s+vec[23]\s+$/.test(f.substr(0,d))?b:"troika_"+b+"_"+c}));d=w(d,c,a,e,g);f=w(f,c,p,l,m);return{vertexShader:d,fragmentShader:f}}function w(a,b,c,d,f){if(d||f||c)a=a.replace(x,"\n"+c+"\nvoid troikaOrigMain"+b+"() {"),a+="\nvoid main() {\n  "+d+"\n  troikaOrigMain"+b+"();\n  "+f+"\n}";return a}function D(a,b){return"uniforms"===a?void 0:"function"===typeof b?b.toString():b}function y(a,b,c){a*=255;var d=a%1*255,f=d%1*255;var e=Math.round(f%1*255)&255;b[c]=a&255;
-b[c+1]=d&255;b[c+2]=f&255;b[c+3]=e;return b}var x=/\bvoid\s+main\s*\(\s*\)\s*{/g,l=Object.assign||function(){for(var a=arguments,b=arguments[0],c=1,d=arguments.length;c<d;c++){var f=a[c];if(f)for(var e in f)f.hasOwnProperty(e)&&(b[e]=f[e])}return b},E=0,C=Date.now(),v=new WeakMap,F={MeshDepthMaterial:"depth",MeshDistanceMaterial:"distanceRGBA",MeshNormalMaterial:"normal",MeshBasicMaterial:"basic",MeshLambertMaterial:"lambert",MeshPhongMaterial:"phong",MeshToonMaterial:"phong",MeshStandardMaterial:"physical",
-MeshPhysicalMaterial:"physical",MeshMatcapMaterial:"matcap",LineBasicMaterial:"basic",LineDashedMaterial:"dashed",PointsMaterial:"points",ShadowMaterial:"shadow",SpriteMaterial:"sprite"},h=function(a){this.name=a;this.textureUniform="dataTex_"+a;this.textureSizeUniform="dataTexSize_"+a;this.multiplierUniform="dataMultiplier_"+a;this.dataSizeUniform="dataSize_"+a;this.readFunction="readData_"+a;this._raw=new Float32Array(0);this._texture=new e.DataTexture(new Uint8Array(0),0,1);this._length=0;this._multiplier=
-1},n={length:{configurable:!0}};n.length.set=function(a){if(a!==this._length){var b=Math.pow(2,Math.ceil(Math.log2(a))),c=this._raw;b<c.length?this._raw=c.subarray(0,b):b>c.length&&(this._raw=new Float32Array(b),this._raw.set(c));this._length=a}};n.length.get=function(){return this._length};h.prototype.push=function(a){return this.set(this.length++,a)};h.prototype.setArray=function(a){this.length=a.length;this._raw.set(a);this._needsRepack=!0};h.prototype.get=function(a){return this._raw[a]};h.prototype.set=
-function(a,b){a+1>this._length&&(this.length=a+1);b!==this._raw[a]&&(this._raw[a]=b,y(b/this._multiplier,this._texture.image.data,4*a),this._needsMultCheck=!0)};h.prototype.clone=function(){var a=new h(this.name);a.setArray(this._raw);return a};h.prototype.getShaderUniforms=function(){var a,b=this;return a={},a[this.textureUniform]={get value(){b._sync();return b._texture}},a[this.textureSizeUniform]={get value(){b._sync();return b._texture.image.width}},a[this.dataSizeUniform]={get value(){b._sync();
-return b.length}},a[this.multiplierUniform]={get value(){b._sync();return b._multiplier}},a};h.prototype.getShaderHeaderCode=function(){var a=this.textureUniform,b=this.textureSizeUniform,c=this.multiplierUniform;return"\nuniform sampler2D "+a+";\nuniform float "+b+";\nuniform float "+this.dataSizeUniform+";\nuniform float "+c+";\n\nfloat "+this.readFunction+"(float index) {\n  vec2 texUV = vec2((index + 0.5) / "+b+", 0.5);\n  vec4 pixel = texture2D("+a+", texUV);\n  return dot(pixel, 1.0 / vec4(1.0, 255.0, 65025.0, 16581375.0)) * "+
-c+";\n}\n"};h.prototype._sync=function(){var a=this._texture,b=this._raw,c=this._needsRepack;b.length!==a.image.width&&(a.image={data:new Uint8Array(4*b.length),width:b.length,height:1},c=!0);if(c||this._needsMultCheck){var d=this._raw.reduce(function(a,b){return Math.max(a,b)},0);d=Math.pow(2,Math.ceil(Math.log2(d)));d!==this._multiplier&&(this._multiplier=d,c=!0);a.needsUpdate=!0;this._needsMultCheck=!1}if(c){c=0;d=b.length;for(var f=this._multiplier;c<d;c++)y(b[c]/f,a.image.data,4*c);this._needsRepack=
-!1}};Object.defineProperties(h.prototype,n);var z=null,A=new e.MeshStandardMaterial({color:16777215,side:e.DoubleSide});n=function(a){function b(){a.call(this,b.getGeometry(),A);this.pointA=new e.Vector3;this.controlA=new e.Vector3;this.controlB=new e.Vector3;this.pointB=new e.Vector3;this.radius=.01;this.dashArray=new e.Vector2;this.dashOffset=0;this.frustumCulled=!1}a&&(b.__proto__=a);b.prototype=Object.create(a&&a.prototype);b.prototype.constructor=b;var c={material:{configurable:!0},customDepthMaterial:{configurable:!0},
-customDistanceMaterial:{configurable:!0}};b.getGeometry=function(){return z||(z=(new e.CylinderBufferGeometry(1,1,1,6,64)).translate(0,.5,0))};c.material.get=function(){var a=this._derivedMaterial,b=this._baseMaterial||A;a&&a.baseMaterial===b||(a&&a.dispose(),a=this._derivedMaterial=q(b,{uniforms:{pointA:{value:new e.Vector3},controlA:{value:new e.Vector3},controlB:{value:new e.Vector3},pointB:{value:new e.Vector3},radius:{value:.01},dashing:{value:new e.Vector3}},vertexDefs:"\nuniform vec3 pointA;\nuniform vec3 controlA;\nuniform vec3 controlB;\nuniform vec3 pointB;\nuniform float radius;\nvarying float bezierT;\n\nvec3 cubicBezier(vec3 p1, vec3 c1, vec3 c2, vec3 p2, float t) {\n  float t2 = 1.0 - t;\n  float b0 = t2 * t2 * t2;\n  float b1 = 3.0 * t * t2 * t2;\n  float b2 = 3.0 * t * t * t2;\n  float b3 = t * t * t;\n  return b0 * p1 + b1 * c1 + b2 * c2 + b3 * p2;\n}\n\nvec3 cubicBezierDerivative(vec3 p1, vec3 c1, vec3 c2, vec3 p2, float t) {\n  float t2 = 1.0 - t;\n  return -3.0 * p1 * t2 * t2 +\n    c1 * (3.0 * t2 * t2 - 6.0 * t2 * t) +\n    c2 * (6.0 * t2 * t - 3.0 * t * t) +\n    3.0 * p2 * t * t;\n}\n",
+function(a,b,d,f){return/\battribute\s+vec[23]\s+$/.test(f.substr(0,d))?b:"troika_"+b+"_"+c}));d=w(d,c,a,e,g);f=w(f,c,p,l,m);return{vertexShader:d,fragmentShader:f}}function w(a,b,c,d,f){if(d||f||c)a=a.replace(x,"\n"+c+"\nvoid troikaOrigMain"+b+"() {"),a+="\nvoid main() {\n  "+d+"\n  troikaOrigMain"+b+"();\n  "+f+"\n}";return a}function E(a,b){return"uniforms"===a?void 0:"function"===typeof b?b.toString():b}function F(a){var b=y.get(a);null==b&&y.set(a,b=++G);return b}function z(a,b,c){a*=255;var d=
+a%1*255,f=d%1*255;var e=Math.round(f%1*255)&255;b[c]=a&255;b[c+1]=d&255;b[c+2]=f&255;b[c+3]=e;return b}var x=/\bvoid\s+main\s*\(\s*\)\s*{/g,l=Object.assign||function(){for(var a=arguments,b=arguments[0],c=1,d=arguments.length;c<d;c++){var f=a[c];if(f)for(var e in f)f.hasOwnProperty(e)&&(b[e]=f[e])}return b},D=Date.now(),v=new WeakMap,G=0,y=new Map,H={MeshDepthMaterial:"depth",MeshDistanceMaterial:"distanceRGBA",MeshNormalMaterial:"normal",MeshBasicMaterial:"basic",MeshLambertMaterial:"lambert",MeshPhongMaterial:"phong",
+MeshToonMaterial:"phong",MeshStandardMaterial:"physical",MeshPhysicalMaterial:"physical",MeshMatcapMaterial:"matcap",LineBasicMaterial:"basic",LineDashedMaterial:"dashed",PointsMaterial:"points",ShadowMaterial:"shadow",SpriteMaterial:"sprite"},h=function(a){this.name=a;this.textureUniform="dataTex_"+a;this.textureSizeUniform="dataTexSize_"+a;this.multiplierUniform="dataMultiplier_"+a;this.dataSizeUniform="dataSize_"+a;this.readFunction="readData_"+a;this._raw=new Float32Array(0);this._texture=new e.DataTexture(new Uint8Array(0),
+0,1);this._length=0;this._multiplier=1},n={length:{configurable:!0}};n.length.set=function(a){if(a!==this._length){var b=Math.pow(2,Math.ceil(Math.log2(a))),c=this._raw;b<c.length?this._raw=c.subarray(0,b):b>c.length&&(this._raw=new Float32Array(b),this._raw.set(c));this._length=a}};n.length.get=function(){return this._length};h.prototype.push=function(a){return this.set(this.length++,a)};h.prototype.setArray=function(a){this.length=a.length;this._raw.set(a);this._needsRepack=!0};h.prototype.get=
+function(a){return this._raw[a]};h.prototype.set=function(a,b){a+1>this._length&&(this.length=a+1);b!==this._raw[a]&&(this._raw[a]=b,z(b/this._multiplier,this._texture.image.data,4*a),this._needsMultCheck=!0)};h.prototype.clone=function(){var a=new h(this.name);a.setArray(this._raw);return a};h.prototype.getShaderUniforms=function(){var a,b=this;return a={},a[this.textureUniform]={get value(){b._sync();return b._texture}},a[this.textureSizeUniform]={get value(){b._sync();return b._texture.image.width}},
+a[this.dataSizeUniform]={get value(){b._sync();return b.length}},a[this.multiplierUniform]={get value(){b._sync();return b._multiplier}},a};h.prototype.getShaderHeaderCode=function(){var a=this.textureUniform,b=this.textureSizeUniform,c=this.multiplierUniform;return"\nuniform sampler2D "+a+";\nuniform float "+b+";\nuniform float "+this.dataSizeUniform+";\nuniform float "+c+";\n\nfloat "+this.readFunction+"(float index) {\n  vec2 texUV = vec2((index + 0.5) / "+b+", 0.5);\n  vec4 pixel = texture2D("+
+a+", texUV);\n  return dot(pixel, 1.0 / vec4(1.0, 255.0, 65025.0, 16581375.0)) * "+c+";\n}\n"};h.prototype._sync=function(){var a=this._texture,b=this._raw,c=this._needsRepack;b.length!==a.image.width&&(a.image={data:new Uint8Array(4*b.length),width:b.length,height:1},c=!0);if(c||this._needsMultCheck){var d=this._raw.reduce(function(a,b){return Math.max(a,b)},0);d=Math.pow(2,Math.ceil(Math.log2(d)));d!==this._multiplier&&(this._multiplier=d,c=!0);a.needsUpdate=!0;this._needsMultCheck=!1}if(c){c=0;
+d=b.length;for(var f=this._multiplier;c<d;c++)z(b[c]/f,a.image.data,4*c);this._needsRepack=!1}};Object.defineProperties(h.prototype,n);var A=null,B=new e.MeshStandardMaterial({color:16777215,side:e.DoubleSide});n=function(a){function b(){a.call(this,b.getGeometry(),B);this.pointA=new e.Vector3;this.controlA=new e.Vector3;this.controlB=new e.Vector3;this.pointB=new e.Vector3;this.radius=.01;this.dashArray=new e.Vector2;this.dashOffset=0;this.frustumCulled=!1}a&&(b.__proto__=a);b.prototype=Object.create(a&&
+a.prototype);b.prototype.constructor=b;var c={material:{configurable:!0},customDepthMaterial:{configurable:!0},customDistanceMaterial:{configurable:!0}};b.getGeometry=function(){return A||(A=(new e.CylinderBufferGeometry(1,1,1,6,64)).translate(0,.5,0))};c.material.get=function(){var a=this._derivedMaterial,b=this._baseMaterial||B;a&&a.baseMaterial===b||(a=this._derivedMaterial=q(b,{uniforms:{pointA:{value:new e.Vector3},controlA:{value:new e.Vector3},controlB:{value:new e.Vector3},pointB:{value:new e.Vector3},
+radius:{value:.01},dashing:{value:new e.Vector3}},vertexDefs:"\nuniform vec3 pointA;\nuniform vec3 controlA;\nuniform vec3 controlB;\nuniform vec3 pointB;\nuniform float radius;\nvarying float bezierT;\n\nvec3 cubicBezier(vec3 p1, vec3 c1, vec3 c2, vec3 p2, float t) {\n  float t2 = 1.0 - t;\n  float b0 = t2 * t2 * t2;\n  float b1 = 3.0 * t * t2 * t2;\n  float b2 = 3.0 * t * t * t2;\n  float b3 = t * t * t;\n  return b0 * p1 + b1 * c1 + b2 * c2 + b3 * p2;\n}\n\nvec3 cubicBezierDerivative(vec3 p1, vec3 c1, vec3 c2, vec3 p2, float t) {\n  float t2 = 1.0 - t;\n  return -3.0 * p1 * t2 * t2 +\n    c1 * (3.0 * t2 * t2 - 6.0 * t2 * t) +\n    c2 * (6.0 * t2 * t - 3.0 * t * t) +\n    3.0 * p2 * t * t;\n}\n",
 vertexTransform:'\nfloat t = position.y;\nbezierT = t;\nvec3 bezierCenterPos = cubicBezier(pointA, controlA, controlB, pointB, t);\nvec3 bezierDir = normalize(cubicBezierDerivative(pointA, controlA, controlB, pointB, t));\n\n// Make "sideways" always perpendicular to the camera ray; this ensures that any twists\n// in the cylinder occur where you won\'t see them: \nvec3 viewDirection = normalMatrix * vec3(0.0, 0.0, 1.0);\nif (bezierDir == viewDirection) {\n  bezierDir = normalize(cubicBezierDerivative(pointA, controlA, controlB, pointB, t == 1.0 ? t - 0.0001 : t + 0.0001));\n}\nvec3 sideways = normalize(cross(bezierDir, viewDirection));\nvec3 upish = normalize(cross(sideways, bezierDir));\n\n// Build a matrix for transforming this disc in the cylinder:\nmat4 discTx;\ndiscTx[0].xyz = sideways * radius;\ndiscTx[1].xyz = bezierDir * radius;\ndiscTx[2].xyz = upish * radius;\ndiscTx[3].xyz = bezierCenterPos;\ndiscTx[3][3] = 1.0;\n\n// Apply transform, ignoring original y\nposition = (discTx * vec4(position.x, 0.0, position.z, 1.0)).xyz;\nnormal = normalize(mat3(discTx) * normal);\n',
 fragmentDefs:"\nuniform vec3 dashing;\nvarying float bezierT;\n",fragmentMainIntro:"\nif (dashing.x + dashing.y > 0.0) {\n  float dashFrac = mod(bezierT - dashing.z, dashing.x + dashing.y);\n  if (dashFrac > dashing.x) {\n    discard;\n  }\n}\n"}),b.addEventListener("dispose",function r(){b.removeEventListener("dispose",r);a.dispose()}));return a};c.material.set=function(a){this._baseMaterial=a};c.customDepthMaterial.get=function(){return this.material.getDepthMaterial()};c.customDistanceMaterial.get=
 function(){return this.material.getDistanceMaterial()};b.prototype.onBeforeRender=function(a){a=this.material.uniforms;var b=this.controlA,c=this.controlB,d=this.pointB,e=this.radius,g=this.dashArray,h=this.dashOffset;a.pointA.value.copy(this.pointA);a.controlA.value.copy(b);a.controlB.value.copy(c);a.pointB.value.copy(d);a.radius.value=e;a.dashing.value.set(g.x,g.y,h||0)};b.prototype.raycast=function(a,b){};Object.defineProperties(b.prototype,c);return b}(e.Mesh);g.BezierMesh=n;g.ShaderFloatArray=
-h;g.createDerivedMaterial=q;g.expandShaderIncludes=u;g.getShaderUniformTypes=function(a){for(var b=/\buniform\s+(int|float|vec[234])\s+([A-Za-z_][\w]*)/g,c=Object.create(null),d;null!==(d=b.exec(a));)c[d[2]]=d[1];return c};g.getShadersForMaterial=function(a){var b=F[a.type];return b?e.ShaderLib[b]:a};g.voidMainRegExp=x;Object.defineProperty(g,"__esModule",{value:!0})})
+h;g.createDerivedMaterial=q;g.expandShaderIncludes=u;g.getShaderUniformTypes=function(a){for(var b=/\buniform\s+(int|float|vec[234])\s+([A-Za-z_][\w]*)/g,c=Object.create(null),d;null!==(d=b.exec(a));)c[d[2]]=d[1];return c};g.getShadersForMaterial=function(a){var b=H[a.type];return b?e.ShaderLib[b]:a};g.voidMainRegExp=x;Object.defineProperty(g,"__esModule",{value:!0})})

package.json

 {
   "name": "troika-three-utils",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Various utilities related to Three.js",
@@ -17,3 +17,3 @@ "author": "Jason Johnston <[e-mail]>",
   "module:src": "src/index.js",
-  "gitHead": "abfdef4be8b700cc817c34991dc7c8604ed8d75b"
+  "gitHead": "96b3c36ff397b784d58a85c3ab29abae0f19bff3"
 }

src/BezierMesh.js

@@ -68,5 +68,2 @@ import { CylinderBufferGeometry, DoubleSide, Mesh, MeshStandardMaterial, Vector2, Vector3 } from 'three'
     if (!derivedMaterial || derivedMaterial.baseMaterial !== baseMaterial) {
-      if (derivedMaterial) {
-        derivedMaterial.dispose()
-      }
       derivedMaterial = this._derivedMaterial = createBezierMeshMaterial(baseMaterial)
@@ -73,0 +70,0 @@ // dispose the derived material when its base material is disposed:

src/DerivedMaterial.js

@@ -23,3 +23,2 @@ import { voidMainRegExp } from './voidMainRegExp.js'
 
-let idCtr = 0
 const epoch = Date.now()
@@ -97,3 +96,7 @@ const CACHE = new WeakMap() //threejs requires WeakMap internally so should be safe to assume support
 
-  const id = ++idCtr
+  // Even if baseMaterial is changing, use a consistent id in shader rewrites based on the
+  // optionsHash. This makes it more likely that deriving from base materials of the same
+  // type/class, e.g. multiple instances of MeshStandardMaterial, will produce identical
+  // rewritten shader code so they can share a single WebGLProgram behind the scenes.
+  const id = getIdForOptionsHash(optionsHash)
   const privateDerivedShadersProp = `_derivedShaders${id}`
@@ -352,1 +355,11 @@ const privateBeforeCompileProp = `_onBeforeCompile${id}`
 }
+
+let _idCtr = 0
+const optionsHashesToIds = new Map()
+function getIdForOptionsHash(optionsHash) {
+  let id = optionsHashesToIds.get(optionsHash)
+  if (id == null) {
+    optionsHashesToIds.set(optionsHash, (id = ++_idCtr))
+  }
+  return id
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125273

increased by1.88%

Lines of code

2535

increased by1.16%

Worsened metrics

Published versions last months

2

decreased by-33.33%

No dependency changes