@react-three/drei 9.56.24 → 9.56.26

package/materials/MeshRefractionMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("three"),e=require("../core/shaderMaterial.cjs.js"),n=require("three-mesh-bvh");function i(r){if(r&&r.__esModule)return r;var e=Object.create(null);return r&&Object.keys(r).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(e,n,i.get?i:{enumerable:!0,get:function(){return r[n]}})}})),e.default=r,Object.freeze(e)}var o=i(r);const t=e.shaderMaterial({envMap:null,bounces:3,ior:2.4,correctMips:!0,aberrationStrength:.01,fresnel:0,bvh:new n.MeshBVHUniformStruct,color:new o.Color("white"),resolution:new o.Vector2},"\n  #ifndef USE_COLOR\n    uniform vec3 color;\n  #endif\n  varying vec3 vWorldPosition;  \n  varying vec3 vNormal;\n  varying mat4 projectionMatrixInv;\n  varying mat4 viewMatrixInv;\n  varying vec3 viewDirection;\n  varying mat4 vInstanceMatrix;\n  varying vec3 vColor;\n  \n  void main() {        \n    vec4 transformedNormal = vec4(normal, 0.0);\n    vec4 transformedPosition = vec4(position, 1.0);\n    #ifdef USE_INSTANCING\n      vInstanceMatrix = instanceMatrix;\n      transformedNormal = instanceMatrix * transformedNormal;\n      transformedPosition = instanceMatrix * transformedPosition;\n    #else\n      vInstanceMatrix = mat4(1.0);\n    #endif\n\n    vColor = color;\n    #ifdef USE_INSTANCING_COLOR\n      vColor *= instanceColor.rgb;\n    #endif\n  \n    projectionMatrixInv = inverse(projectionMatrix);\n    viewMatrixInv = inverse(viewMatrix);\n\n    vWorldPosition = (modelMatrix * transformedPosition).xyz;\n    vNormal = normalize((viewMatrixInv * vec4(normalMatrix * transformedNormal.xyz, 0.0)).xyz);\n    viewDirection = normalize(vWorldPosition - cameraPosition);\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * transformedPosition;\n  }",`\n  #define ENVMAP_TYPE_CUBE_UV\n  precision highp isampler2D;\n  precision highp usampler2D;\n  varying vec3 vWorldPosition;\n  varying vec3 vNormal;\n    \n  #ifdef ENVMAP_TYPE_CUBEM\n    uniform samplerCube envMap;\n  #else\n    uniform sampler2D envMap;\n  #endif\n    \n  uniform float bounces;\n  ${n.shaderStructs}\n  ${n.shaderIntersectFunction}\n  uniform BVH bvh;\n  uniform float ior;\n  uniform bool correctMips;\n  uniform vec2 resolution;\n  uniform float fresnel;\n  uniform mat4 modelMatrix;\n    \n  uniform float aberrationStrength;\n  varying mat4 projectionMatrixInv;\n  varying mat4 viewMatrixInv;\n  varying vec3 viewDirection;  \n  varying mat4 vInstanceMatrix;\n  varying vec3 vColor;\n  \n  float fresnelFunc(vec3 viewDirection, vec3 worldNormal) {\n    return pow( 1.0 + dot( viewDirection, worldNormal), 10.0 );\n  }\n    \n  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 normal, float ior, mat4 modelMatrixInverse) {\n    vec3 rayOrigin = ro;\n    vec3 rayDirection = rd;\n    rayDirection = refract(rayDirection, normal, 1.0 / ior);\n    rayOrigin = vWorldPosition + rayDirection * 0.001;\n    rayOrigin = (modelMatrixInverse * vec4(rayOrigin, 1.0)).xyz;\n    rayDirection = normalize((modelMatrixInverse * vec4(rayDirection, 0.0)).xyz);\n    for(float i = 0.0; i < bounces; i++) {\n      uvec4 faceIndices = uvec4( 0u );\n      vec3 faceNormal = vec3( 0.0, 0.0, 1.0 );\n      vec3 barycoord = vec3( 0.0 );\n      float side = 1.0;\n      float dist = 0.0;\n      bvhIntersectFirstHit( bvh, rayOrigin, rayDirection, faceIndices, faceNormal, barycoord, side, dist );\n      vec3 hitPos = rayOrigin + rayDirection * max(dist - 0.001, 0.0);      \n      vec3 tempDir = refract(rayDirection, faceNormal, ior);\n      if (length(tempDir) != 0.0) {\n        rayDirection = tempDir;\n        break;\n      }\n      rayDirection = reflect(rayDirection, faceNormal);\n      rayOrigin = hitPos + rayDirection * 0.01;\n    }\n    rayDirection = normalize((modelMatrix * vec4(rayDirection, 0.0)).xyz);\n    return rayDirection;\n  }\n    \n  #include <common>\n  #include <cube_uv_reflection_fragment>\n    \n  #ifdef ENVMAP_TYPE_CUBEM\n    vec4 textureGradient(samplerCube envMap, vec3 rayDirection, vec3 directionCamPerfect) {\n      return textureGrad(envMap, rayDirection, dFdx(correctMips ? directionCamPerfect: rayDirection), dFdy(correctMips ? directionCamPerfect: rayDirection));\n    }\n  #else\n    vec4 textureGradient(sampler2D envMap, vec3 rayDirection, vec3 directionCamPerfect) {\n      vec2 uvv = equirectUv( rayDirection );\n      vec2 smoothUv = equirectUv( directionCamPerfect );\n      return textureGrad(envMap, uvv, dFdx(correctMips ? smoothUv : uvv), dFdy(correctMips ? smoothUv : uvv));\n    }\n  #endif\n  \n  void main() {\n    mat4 modelMatrixInverse = inverse(modelMatrix * vInstanceMatrix);\n    vec2 uv = gl_FragCoord.xy / resolution;\n    vec3 directionCamPerfect = (projectionMatrixInv * vec4(uv * 2.0 - 1.0, 0.0, 1.0)).xyz;\n    directionCamPerfect = (viewMatrixInv * vec4(directionCamPerfect, 0.0)).xyz;\n    directionCamPerfect = normalize(directionCamPerfect);\n    vec3 normal = vNormal;\n    vec3 rayOrigin = cameraPosition;\n    vec3 rayDirection = normalize(vWorldPosition - cameraPosition);\n    vec3 finalColor;\n    #ifdef CHROMATIC_ABERRATIONS\n      vec3 rayDirectionG = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);\n      #ifdef FAST_CHROMA \n        vec3 rayDirectionR = normalize(rayDirectionG + 1.0 * vec3(aberrationStrength / 2.0));\n        vec3 rayDirectionB = normalize(rayDirectionG - 1.0 * vec3(aberrationStrength / 2.0));\n      #else\n        vec3 rayDirectionR = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 - aberrationStrength), 1.0), modelMatrixInverse);\n        vec3 rayDirectionB = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 + aberrationStrength), 1.0), modelMatrixInverse);\n      #endif\n      float finalColorR = textureGradient(envMap, rayDirectionR, directionCamPerfect).r;\n      float finalColorG = textureGradient(envMap, rayDirectionG, directionCamPerfect).g;\n      float finalColorB = textureGradient(envMap, rayDirectionB, directionCamPerfect).b;\n      finalColor = vec3(finalColorR, finalColorG, finalColorB) * vColor;\n    #else\n      rayDirection = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);\n      finalColor = textureGradient(envMap, rayDirection, directionCamPerfect).rgb;    \n      finalColor *= vColor;\n    #endif\n    float nFresnel = fresnelFunc(viewDirection, normal) * fresnel;\n    gl_FragColor = vec4(mix(finalColor, vec3(1.0), nFresnel), 1.0);      \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }`);exports.MeshRefractionMaterial=t;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("../core/shaderMaterial.cjs.js"),n=require("three-mesh-bvh");function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}})),r.default=e,Object.freeze(r)}var o=i(e);const t=r.shaderMaterial({envMap:null,bounces:3,ior:2.4,correctMips:!0,aberrationStrength:.01,fresnel:0,bvh:new n.MeshBVHUniformStruct,color:new o.Color("white"),resolution:new o.Vector2,viewMatrixInverse:new o.Matrix4,projectionMatrixInverse:new o.Matrix4},"\n  uniform mat4 viewMatrixInverse;\n\n  varying vec3 vWorldPosition;  \n  varying vec3 vNormal;\n  varying mat4 vModelMatrixInverse;\n\n  #ifdef USE_INSTANCING_COLOR\n    varying vec3 vInstanceColor;\n  #endif\n\n  void main() {        \n    vec4 transformedNormal = vec4(normal, 0.0);\n    vec4 transformedPosition = vec4(position, 1.0);\n    #ifdef USE_INSTANCING\n      transformedNormal = instanceMatrix * transformedNormal;\n      transformedPosition = instanceMatrix * transformedPosition;\n    #endif\n\n    #ifdef USE_INSTANCING\n      vModelMatrixInverse = inverse(modelMatrix * instanceMatrix);\n    #else\n      vModelMatrixInverse = inverse(modelMatrix);\n    #endif\n\n    #ifdef USE_INSTANCING_COLOR\n      vInstanceColor = instanceColor.rgb;\n    #endif\n\n    vWorldPosition = (modelMatrix * transformedPosition).xyz;\n    vNormal = normalize((viewMatrixInverse * vec4(normalMatrix * transformedNormal.xyz, 0.0)).xyz);\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * transformedPosition;\n  }",`\n  #define ENVMAP_TYPE_CUBE_UV\n  precision highp isampler2D;\n  precision highp usampler2D;\n  varying vec3 vWorldPosition;\n  varying vec3 vNormal;\n  varying mat4 vModelMatrixInverse;\n\n  #ifdef USE_INSTANCING_COLOR\n    varying vec3 vInstanceColor;\n  #endif\n    \n  #ifdef ENVMAP_TYPE_CUBEM\n    uniform samplerCube envMap;\n  #else\n    uniform sampler2D envMap;\n  #endif\n    \n  uniform float bounces;\n  ${n.shaderStructs}\n  ${n.shaderIntersectFunction}\n  uniform BVH bvh;\n  uniform float ior;\n  uniform bool correctMips;\n  uniform vec2 resolution;\n  uniform float fresnel;\n  uniform mat4 modelMatrix;\n  uniform mat4 projectionMatrixInverse;\n  uniform mat4 viewMatrixInverse;\n  uniform float aberrationStrength;\n  uniform vec3 color;\n  \n  float fresnelFunc(vec3 viewDirection, vec3 worldNormal) {\n    return pow( 1.0 + dot( viewDirection, worldNormal), 10.0 );\n  }\n    \n  vec3 totalInternalReflection(vec3 ro, vec3 rd, vec3 normal, float ior, mat4 modelMatrixInverse) {\n    vec3 rayOrigin = ro;\n    vec3 rayDirection = rd;\n    rayDirection = refract(rayDirection, normal, 1.0 / ior);\n    rayOrigin = vWorldPosition + rayDirection * 0.001;\n    rayOrigin = (modelMatrixInverse * vec4(rayOrigin, 1.0)).xyz;\n    rayDirection = normalize((modelMatrixInverse * vec4(rayDirection, 0.0)).xyz);\n    for(float i = 0.0; i < bounces; i++) {\n      uvec4 faceIndices = uvec4( 0u );\n      vec3 faceNormal = vec3( 0.0, 0.0, 1.0 );\n      vec3 barycoord = vec3( 0.0 );\n      float side = 1.0;\n      float dist = 0.0;\n      bvhIntersectFirstHit( bvh, rayOrigin, rayDirection, faceIndices, faceNormal, barycoord, side, dist );\n      vec3 hitPos = rayOrigin + rayDirection * max(dist - 0.001, 0.0);      \n      vec3 tempDir = refract(rayDirection, faceNormal, ior);\n      if (length(tempDir) != 0.0) {\n        rayDirection = tempDir;\n        break;\n      }\n      rayDirection = reflect(rayDirection, faceNormal);\n      rayOrigin = hitPos + rayDirection * 0.01;\n    }\n    rayDirection = normalize((modelMatrix * vec4(rayDirection, 0.0)).xyz);\n    return rayDirection;\n  }\n    \n  #include <common>\n  #include <cube_uv_reflection_fragment>\n    \n  #ifdef ENVMAP_TYPE_CUBEM\n    vec4 textureGradient(samplerCube envMap, vec3 rayDirection, vec3 directionCamPerfect) {\n      return textureGrad(envMap, rayDirection, dFdx(correctMips ? directionCamPerfect: rayDirection), dFdy(correctMips ? directionCamPerfect: rayDirection));\n    }\n  #else\n    vec4 textureGradient(sampler2D envMap, vec3 rayDirection, vec3 directionCamPerfect) {\n      vec2 uvv = equirectUv( rayDirection );\n      vec2 smoothUv = equirectUv( directionCamPerfect );\n      return textureGrad(envMap, uvv, dFdx(correctMips ? smoothUv : uvv), dFdy(correctMips ? smoothUv : uvv));\n    }\n  #endif\n  \n  void main() {\n    vec2 uv = gl_FragCoord.xy / resolution;\n    vec3 directionCamPerfect = (projectionMatrixInverse * vec4(uv * 2.0 - 1.0, 0.0, 1.0)).xyz;\n    directionCamPerfect = (viewMatrixInverse * vec4(directionCamPerfect, 0.0)).xyz;\n    directionCamPerfect = normalize(directionCamPerfect);\n    vec3 normal = vNormal;\n    vec3 rayOrigin = cameraPosition;\n    vec3 rayDirection = normalize(vWorldPosition - cameraPosition);\n    vec3 finalColor;\n    #ifdef CHROMATIC_ABERRATIONS\n      vec3 rayDirectionG = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), vModelMatrixInverse);\n      #ifdef FAST_CHROMA \n        vec3 rayDirectionR = normalize(rayDirectionG + 1.0 * vec3(aberrationStrength / 2.0));\n        vec3 rayDirectionB = normalize(rayDirectionG - 1.0 * vec3(aberrationStrength / 2.0));\n      #else\n        vec3 rayDirectionR = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 - aberrationStrength), 1.0), vModelMatrixInverse);\n        vec3 rayDirectionB = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 + aberrationStrength), 1.0), vModelMatrixInverse);\n      #endif\n      float finalColorR = textureGradient(envMap, rayDirectionR, directionCamPerfect).r;\n      float finalColorG = textureGradient(envMap, rayDirectionG, directionCamPerfect).g;\n      float finalColorB = textureGradient(envMap, rayDirectionB, directionCamPerfect).b;\n      finalColor = vec3(finalColorR, finalColorG, finalColorB);\n    #else\n      rayDirection = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), vModelMatrixInverse);\n      finalColor = textureGradient(envMap, rayDirection, directionCamPerfect).rgb;    \n    #endif\n\n    finalColor *= color;\n    #ifdef USE_INSTANCING_COLOR\n      finalColor *= vInstanceColor;\n    #endif\n\n    vec3 viewDirection = normalize(vWorldPosition - cameraPosition);\n    float nFresnel = fresnelFunc(viewDirection, normal) * fresnel;\n    gl_FragColor = vec4(mix(finalColor, vec3(1.0), nFresnel), 1.0);      \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }`);exports.MeshRefractionMaterial=t;

package/materials/MeshRefractionMaterial.js

@@ -12,43 +12,42 @@ const MeshRefractionMaterial = shaderMaterial({
   fresnel: 0,
   bvh: new MeshBVHUniformStruct(),
   color: new THREE.Color('white'),
-  resolution: new THREE.Vector2()
+  resolution: new THREE.Vector2(),
+  viewMatrixInverse: new THREE.Matrix4(),
+  projectionMatrixInverse: new THREE.Matrix4()
 },
 /*glsl*/
 `
-  #ifndef USE_COLOR
-    uniform vec3 color;
-  #endif
+  uniform mat4 viewMatrixInverse;
+
   varying vec3 vWorldPosition;  
   varying vec3 vNormal;
-  varying mat4 projectionMatrixInv;
-  varying mat4 viewMatrixInv;
-  varying vec3 viewDirection;
-  varying mat4 vInstanceMatrix;
-  varying vec3 vColor;
-  
+  varying mat4 vModelMatrixInverse;
+
+  #ifdef USE_INSTANCING_COLOR
+    varying vec3 vInstanceColor;
+  #endif
+
   void main() {        
     vec4 transformedNormal = vec4(normal, 0.0);
     vec4 transformedPosition = vec4(position, 1.0);
     #ifdef USE_INSTANCING
-      vInstanceMatrix = instanceMatrix;
       transformedNormal = instanceMatrix * transformedNormal;
       transformedPosition = instanceMatrix * transformedPosition;
+    #endif
+
+    #ifdef USE_INSTANCING
+      vModelMatrixInverse = inverse(modelMatrix * instanceMatrix);
     #else
-      vInstanceMatrix = mat4(1.0);
+      vModelMatrixInverse = inverse(modelMatrix);
     #endif
 
-    vColor = color;
     #ifdef USE_INSTANCING_COLOR
-      vColor *= instanceColor.rgb;
+      vInstanceColor = instanceColor.rgb;
     #endif
-  
-    projectionMatrixInv = inverse(projectionMatrix);
-    viewMatrixInv = inverse(viewMatrix);
 
     vWorldPosition = (modelMatrix * transformedPosition).xyz;
-    vNormal = normalize((viewMatrixInv * vec4(normalMatrix * transformedNormal.xyz, 0.0)).xyz);
-    viewDirection = normalize(vWorldPosition - cameraPosition);
+    vNormal = normalize((viewMatrixInverse * vec4(normalMatrix * transformedNormal.xyz, 0.0)).xyz);
     gl_Position = projectionMatrix * viewMatrix * modelMatrix * transformedPosition;
   }`,
 /*glsl*/
@@ -58,6 +57,11 @@ const MeshRefractionMaterial = shaderMaterial({
   precision highp usampler2D;
   varying vec3 vWorldPosition;
   varying vec3 vNormal;
+  varying mat4 vModelMatrixInverse;
+
+  #ifdef USE_INSTANCING_COLOR
+    varying vec3 vInstanceColor;
+  #endif
     
   #ifdef ENVMAP_TYPE_CUBEM
     uniform samplerCube envMap;
@@ -74,13 +78,10 @@ const MeshRefractionMaterial = shaderMaterial({
   uniform vec2 resolution;
   uniform float fresnel;
   uniform mat4 modelMatrix;
-    
+  uniform mat4 projectionMatrixInverse;
+  uniform mat4 viewMatrixInverse;
   uniform float aberrationStrength;
-  varying mat4 projectionMatrixInv;
-  varying mat4 viewMatrixInv;
-  varying vec3 viewDirection;  
-  varying mat4 vInstanceMatrix;
-  varying vec3 vColor;
+  uniform vec3 color;
   
   float fresnelFunc(vec3 viewDirection, vec3 worldNormal) {
     return pow( 1.0 + dot( viewDirection, worldNormal), 10.0 );
@@ -129,33 +130,38 @@ const MeshRefractionMaterial = shaderMaterial({
   #endif
   
   void main() {
-    mat4 modelMatrixInverse = inverse(modelMatrix * vInstanceMatrix);
     vec2 uv = gl_FragCoord.xy / resolution;
-    vec3 directionCamPerfect = (projectionMatrixInv * vec4(uv * 2.0 - 1.0, 0.0, 1.0)).xyz;
-    directionCamPerfect = (viewMatrixInv * vec4(directionCamPerfect, 0.0)).xyz;
+    vec3 directionCamPerfect = (projectionMatrixInverse * vec4(uv * 2.0 - 1.0, 0.0, 1.0)).xyz;
+    directionCamPerfect = (viewMatrixInverse * vec4(directionCamPerfect, 0.0)).xyz;
     directionCamPerfect = normalize(directionCamPerfect);
     vec3 normal = vNormal;
     vec3 rayOrigin = cameraPosition;
     vec3 rayDirection = normalize(vWorldPosition - cameraPosition);
     vec3 finalColor;
     #ifdef CHROMATIC_ABERRATIONS
-      vec3 rayDirectionG = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);
+      vec3 rayDirectionG = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), vModelMatrixInverse);
       #ifdef FAST_CHROMA 
         vec3 rayDirectionR = normalize(rayDirectionG + 1.0 * vec3(aberrationStrength / 2.0));
         vec3 rayDirectionB = normalize(rayDirectionG - 1.0 * vec3(aberrationStrength / 2.0));
       #else
-        vec3 rayDirectionR = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 - aberrationStrength), 1.0), modelMatrixInverse);
-        vec3 rayDirectionB = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 + aberrationStrength), 1.0), modelMatrixInverse);
+        vec3 rayDirectionR = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 - aberrationStrength), 1.0), vModelMatrixInverse);
+        vec3 rayDirectionB = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior * (1.0 + aberrationStrength), 1.0), vModelMatrixInverse);
       #endif
       float finalColorR = textureGradient(envMap, rayDirectionR, directionCamPerfect).r;
       float finalColorG = textureGradient(envMap, rayDirectionG, directionCamPerfect).g;
       float finalColorB = textureGradient(envMap, rayDirectionB, directionCamPerfect).b;
-      finalColor = vec3(finalColorR, finalColorG, finalColorB) * vColor;
+      finalColor = vec3(finalColorR, finalColorG, finalColorB);
     #else
-      rayDirection = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), modelMatrixInverse);
+      rayDirection = totalInternalReflection(rayOrigin, rayDirection, normal, max(ior, 1.0), vModelMatrixInverse);
       finalColor = textureGradient(envMap, rayDirection, directionCamPerfect).rgb;    
-      finalColor *= vColor;
     #endif
+
+    finalColor *= color;
+    #ifdef USE_INSTANCING_COLOR
+      finalColor *= vInstanceColor;
+    #endif
+
+    vec3 viewDirection = normalize(vWorldPosition - cameraPosition);
     float nFresnel = fresnelFunc(viewDirection, normal) * fresnel;
     gl_FragColor = vec4(mix(finalColor, vec3(1.0), nFresnel), 1.0);      
     #include <tonemapping_fragment>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/drei",
-  "version": "9.56.24",
+  "version": "9.56.26",
   "private": false,
   "description": "useful add-ons for react-three-fiber",
   "keywords": [

package/web/Html.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("three"),o=require("@react-three/fiber");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=i(e),c=a(t),l=a(r);const u=new n.Vector3,d=new n.Vector3,m=new n.Vector3;function f(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,i=r.height/2;return[n.x*o+o,-n.y*i+i]}const h=e=>Math.abs(e)<1e-10?0:e;function p(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=h(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(v=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>p(e,v));var v;const y=(e,t)=>{return p(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r};const g=c.forwardRef((({children:e,eps:t=.001,style:r,className:i,prepend:a,center:p,fullscreen:v,portal:g,distanceFactor:M,sprite:P=!1,transform:b=!1,occlude:w,onOcclude:E,castShadow:W,receiveShadow:S,material:$,geometry:j,zIndexRange:z=[16777271,0],calculatePosition:O=f,as:R="div",wrapperClass:F,pointerEvents:C="auto",...T},A)=>{const{gl:I,camera:k,scene:H,size:N,raycaster:_,events:q,viewport:V}=o.useThree(),[L]=c.useState((()=>document.createElement(R))),D=c.useRef(),G=c.useRef(null),Z=c.useRef(0),B=c.useRef([0,0]),J=c.useRef(null),K=c.useRef(null),Q=(null==g?void 0:g.current)||q.connected||I.domElement.parentNode,U=c.useRef(null),X=c.useRef(!1),Y=c.useMemo((()=>w&&"blending"!==w||Array.isArray(w)&&w.length&&function(e){return e&&"object"==typeof e&&"current"in e}(w[0])),[w]);c.useLayoutEffect((()=>{const e=I.domElement;e.style.zIndex=`${Math.floor(z[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"}),[]),c.useLayoutEffect((()=>{if(G.current){const e=D.current=l.createRoot(L);if(H.updateMatrixWorld(),b)L.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=O(G.current,k,N);L.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return Q&&(a?Q.prepend(L):Q.appendChild(L)),()=>{Q&&Q.removeChild(L),e.unmount()}}}),[Q,b]),c.useLayoutEffect((()=>{F&&(L.className=F)}),[F]);const ee=c.useMemo((()=>b?{position:"absolute",top:0,left:0,width:N.width,height:N.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:p?"translate3d(-50%,-50%,0)":"none",...v&&{top:-N.height/2,left:-N.width/2,width:N.width,height:N.height},...r}),[r,p,v,N,b]),te=c.useMemo((()=>({position:"absolute",pointerEvents:C})),[C]);c.useLayoutEffect((()=>{var t,n;(X.current=!1,b)?null==(t=D.current)||t.render(c.createElement("div",{ref:J,style:ee},c.createElement("div",{ref:K,style:te},c.createElement("div",{ref:A,className:i,style:r,children:e})))):null==(n=D.current)||n.render(c.createElement("div",{ref:A,style:ee,className:i,children:e}))}));const re=c.useRef(!0);o.useFrame((e=>{if(G.current){k.updateMatrixWorld(),G.current.updateWorldMatrix(!0,!1);const e=b?B.current:O(G.current,k,N);if(b||Math.abs(Z.current-k.zoom)>t||Math.abs(B.current[0]-e[0])>t||Math.abs(B.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),i=t.getWorldDirection(m);return o.angleTo(i)>Math.PI/2}(G.current,k);let r=!1;Y&&("blending"!==w?r=[H]:Array.isArray(w)&&(r=w.map((e=>e.current))));const o=re.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),i=o.clone();i.project(t),r.setFromCamera(i,t);const a=r.intersectObjects(n,!0);if(a.length){const e=a[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(G.current,k,_,r);re.current=e&&!t}else re.current=!t;o!==re.current&&(E?E(!re.current):L.style.display=re.current?"block":"none");const i=Math.floor(z[0]/2),a=w?Y?[z[0],i]:[i-1,0]:z;if(L.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),i=n.distanceTo(o),a=(r[1]-r[0])/(t.far-t.near),s=r[1]-a*t.far;return Math.round(a*i+s)}}(G.current,k,a)}`,b){const[e,t]=[N.width/2,N.height/2],r=k.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:i,bottom:a,right:s}=k,c=x(k.matrixWorldInverse),l=n?`scale(${r})translate(${h(-(s+i)/2)}px,${h((o+a)/2)}px)`:`translateZ(${r}px)`;let u=G.current.matrixWorld;P&&(u=k.matrixWorldInverse.clone().transpose().copyPosition(u).scale(G.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),L.style.width=N.width+"px",L.style.height=N.height+"px",L.style.perspective=n?"":`${r}px`,J.current&&K.current&&(J.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,K.current.style.transform=y(u,1/((M||10)/400)))}else{const t=void 0===M?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,i=r.distanceTo(n);return 1/(2*Math.tan(o/2)*i)}return 1}(G.current,k)*M;L.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}B.current=e,Z.current=k.zoom}}if(!Y&&U.current&&!X.current)if(b){if(J.current){const e=J.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){const{isOrthographicCamera:t}=k;if(t||j)T.scale&&(Array.isArray(T.scale)?T.scale instanceof n.Vector3?U.current.scale.copy(T.scale.clone().divideScalar(1)):U.current.scale.set(1/T.scale[0],1/T.scale[1],1/T.scale[2]):U.current.scale.setScalar(1/T.scale));else{const t=(M||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;U.current.scale.set(r,n,1)}X.current=!0}}}else{const t=L.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){const e=1/V.factor,r=t.clientWidth*e,n=t.clientHeight*e;U.current.scale.set(r,n,1),X.current=!0}U.current.lookAt(e.camera.position)}}));const ne=c.useMemo((()=>({vertexShader:b?void 0:'\n          /*\n            This shader is from the THREE\'s SpriteMaterial.\n            We need to turn the backing plane into a Sprite\n            (make it always face the camera) if "transfrom" \n            is false. \n          */\n          #include <common>\n\n          void main() {\n            vec2 center = vec2(0., 1.);\n            float rotation = 0.0;\n            \n            // This is somewhat arbitrary, but it seems to work well\n            // Need to figure out how to derive this dynamically if it even matters\n            float size = 0.03;\n\n            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n            vec2 scale;\n            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n            bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n            if ( isPerspective ) scale *= - mvPosition.z;\n\n            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n            vec2 rotatedPosition;\n            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n            mvPosition.xy += rotatedPosition;\n\n            gl_Position = projectionMatrix * mvPosition;\n          }\n      ',fragmentShader:"\n        void main() {\n          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n        }\n      "})),[b]);return c.createElement("group",s.default({},T,{ref:G}),w&&!Y&&c.createElement("mesh",{castShadow:W,receiveShadow:S,ref:U},j||c.createElement("planeGeometry",null),$||c.createElement("shaderMaterial",{side:n.DoubleSide,vertexShader:ne.vertexShader,fragmentShader:ne.fragmentShader})))}));exports.Html=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("react-dom/client"),n=require("three"),o=require("@react-three/fiber");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=i(e),c=s(t),l=s(r);const u=new n.Vector3,d=new n.Vector3,m=new n.Vector3;function f(e,t,r){const n=u.setFromMatrixPosition(e.matrixWorld);n.project(t);const o=r.width/2,i=r.height/2;return[n.x*o+o,-n.y*i+i]}const h=e=>Math.abs(e)<1e-10?0:e;function p(e,t,r=""){let n="matrix3d(";for(let r=0;16!==r;r++)n+=h(t[r]*e.elements[r])+(15!==r?",":")");return r+n}const x=(v=[1,-1,1,1,1,-1,1,1,1,-1,1,1,1,-1,1,1],e=>p(e,v));var v;const y=(e,t)=>{return p(e,[1/(r=t),1/r,1/r,1,-1/r,-1/r,-1/r,-1,1/r,1/r,1/r,1,1,1,1,1],"translate(-50%,-50%)");var r};const g=c.forwardRef((({children:e,eps:t=.001,style:r,className:i,prepend:s,center:p,fullscreen:v,portal:g,distanceFactor:M,sprite:b=!1,transform:P=!1,occlude:w,onOcclude:E,castShadow:W,receiveShadow:S,material:$,geometry:j,zIndexRange:z=[16777271,0],calculatePosition:O=f,as:R="div",wrapperClass:F,pointerEvents:C="auto",...T},I)=>{const{gl:A,camera:k,scene:H,size:N,raycaster:_,events:q,viewport:V}=o.useThree(),[L]=c.useState((()=>document.createElement(R))),D=c.useRef(),G=c.useRef(null),Z=c.useRef(0),B=c.useRef([0,0]),J=c.useRef(null),K=c.useRef(null),Q=(null==g?void 0:g.current)||q.connected||A.domElement.parentNode,U=c.useRef(null),X=c.useRef(!1),Y=c.useMemo((()=>w&&"blending"!==w||Array.isArray(w)&&w.length&&function(e){return e&&"object"==typeof e&&"current"in e}(w[0])),[w]);c.useLayoutEffect((()=>{const e=A.domElement;w&&"blending"===w?(e.style.zIndex=`${Math.floor(z[0]/2)}`,e.style.position="absolute",e.style.pointerEvents="none"):(e.style.zIndex=null,e.style.position=null,e.style.pointerEvents=null)}),[w]),c.useLayoutEffect((()=>{if(G.current){const e=D.current=l.createRoot(L);if(H.updateMatrixWorld(),P)L.style.cssText="position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;";else{const e=O(G.current,k,N);L.style.cssText=`position:absolute;top:0;left:0;transform:translate3d(${e[0]}px,${e[1]}px,0);transform-origin:0 0;`}return Q&&(s?Q.prepend(L):Q.appendChild(L)),()=>{Q&&Q.removeChild(L),e.unmount()}}}),[Q,P]),c.useLayoutEffect((()=>{F&&(L.className=F)}),[F]);const ee=c.useMemo((()=>P?{position:"absolute",top:0,left:0,width:N.width,height:N.height,transformStyle:"preserve-3d",pointerEvents:"none"}:{position:"absolute",transform:p?"translate3d(-50%,-50%,0)":"none",...v&&{top:-N.height/2,left:-N.width/2,width:N.width,height:N.height},...r}),[r,p,v,N,P]),te=c.useMemo((()=>({position:"absolute",pointerEvents:C})),[C]);c.useLayoutEffect((()=>{var t,n;(X.current=!1,P)?null==(t=D.current)||t.render(c.createElement("div",{ref:J,style:ee},c.createElement("div",{ref:K,style:te},c.createElement("div",{ref:I,className:i,style:r,children:e})))):null==(n=D.current)||n.render(c.createElement("div",{ref:I,style:ee,className:i,children:e}))}));const re=c.useRef(!0);o.useFrame((e=>{if(G.current){k.updateMatrixWorld(),G.current.updateWorldMatrix(!0,!1);const e=P?B.current:O(G.current,k,N);if(P||Math.abs(Z.current-k.zoom)>t||Math.abs(B.current[0]-e[0])>t||Math.abs(B.current[1]-e[1])>t){const t=function(e,t){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=r.sub(n),i=t.getWorldDirection(m);return o.angleTo(i)>Math.PI/2}(G.current,k);let r=!1;Y&&("blending"!==w?r=[H]:Array.isArray(w)&&(r=w.map((e=>e.current))));const o=re.current;if(r){const e=function(e,t,r,n){const o=u.setFromMatrixPosition(e.matrixWorld),i=o.clone();i.project(t),r.setFromCamera(i,t);const s=r.intersectObjects(n,!0);if(s.length){const e=s[0].distance;return o.distanceTo(r.ray.origin)<e}return!0}(G.current,k,_,r);re.current=e&&!t}else re.current=!t;o!==re.current&&(E?E(!re.current):L.style.display=re.current?"block":"none");const i=Math.floor(z[0]/2),s=w?Y?[z[0],i]:[i-1,0]:z;if(L.style.zIndex=`${function(e,t,r){if(t instanceof n.PerspectiveCamera||t instanceof n.OrthographicCamera){const n=u.setFromMatrixPosition(e.matrixWorld),o=d.setFromMatrixPosition(t.matrixWorld),i=n.distanceTo(o),s=(r[1]-r[0])/(t.far-t.near),a=r[1]-s*t.far;return Math.round(s*i+a)}}(G.current,k,s)}`,P){const[e,t]=[N.width/2,N.height/2],r=k.projectionMatrix.elements[5]*t,{isOrthographicCamera:n,top:o,left:i,bottom:s,right:a}=k,c=x(k.matrixWorldInverse),l=n?`scale(${r})translate(${h(-(a+i)/2)}px,${h((o+s)/2)}px)`:`translateZ(${r}px)`;let u=G.current.matrixWorld;b&&(u=k.matrixWorldInverse.clone().transpose().copyPosition(u).scale(G.current.scale),u.elements[3]=u.elements[7]=u.elements[11]=0,u.elements[15]=1),L.style.width=N.width+"px",L.style.height=N.height+"px",L.style.perspective=n?"":`${r}px`,J.current&&K.current&&(J.current.style.transform=`${l}${c}translate(${e}px,${t}px)`,K.current.style.transform=y(u,1/((M||10)/400)))}else{const t=void 0===M?1:function(e,t){if(t instanceof n.OrthographicCamera)return t.zoom;if(t instanceof n.PerspectiveCamera){const r=u.setFromMatrixPosition(e.matrixWorld),n=d.setFromMatrixPosition(t.matrixWorld),o=t.fov*Math.PI/180,i=r.distanceTo(n);return 1/(2*Math.tan(o/2)*i)}return 1}(G.current,k)*M;L.style.transform=`translate3d(${e[0]}px,${e[1]}px,0) scale(${t})`}B.current=e,Z.current=k.zoom}}if(!Y&&U.current&&!X.current)if(P){if(J.current){const e=J.current.children[0];if(null!=e&&e.clientWidth&&null!=e&&e.clientHeight){const{isOrthographicCamera:t}=k;if(t||j)T.scale&&(Array.isArray(T.scale)?T.scale instanceof n.Vector3?U.current.scale.copy(T.scale.clone().divideScalar(1)):U.current.scale.set(1/T.scale[0],1/T.scale[1],1/T.scale[2]):U.current.scale.setScalar(1/T.scale));else{const t=(M||10)/400,r=e.clientWidth*t,n=e.clientHeight*t;U.current.scale.set(r,n,1)}X.current=!0}}}else{const t=L.children[0];if(null!=t&&t.clientWidth&&null!=t&&t.clientHeight){const e=1/V.factor,r=t.clientWidth*e,n=t.clientHeight*e;U.current.scale.set(r,n,1),X.current=!0}U.current.lookAt(e.camera.position)}}));const ne=c.useMemo((()=>({vertexShader:P?void 0:'\n          /*\n            This shader is from the THREE\'s SpriteMaterial.\n            We need to turn the backing plane into a Sprite\n            (make it always face the camera) if "transfrom" \n            is false. \n          */\n          #include <common>\n\n          void main() {\n            vec2 center = vec2(0., 1.);\n            float rotation = 0.0;\n            \n            // This is somewhat arbitrary, but it seems to work well\n            // Need to figure out how to derive this dynamically if it even matters\n            float size = 0.03;\n\n            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\n            vec2 scale;\n            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );\n            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );\n\n            bool isPerspective = isPerspectiveMatrix( projectionMatrix );\n            if ( isPerspective ) scale *= - mvPosition.z;\n\n            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;\n            vec2 rotatedPosition;\n            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;\n            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;\n            mvPosition.xy += rotatedPosition;\n\n            gl_Position = projectionMatrix * mvPosition;\n          }\n      ',fragmentShader:"\n        void main() {\n          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n        }\n      "})),[P]);return c.createElement("group",a.default({},T,{ref:G}),w&&!Y&&c.createElement("mesh",{castShadow:W,receiveShadow:S,ref:U},j||c.createElement("planeGeometry",null),$||c.createElement("shaderMaterial",{side:n.DoubleSide,vertexShader:ne.vertexShader,fragmentShader:ne.fragmentShader})))}));exports.Html=g;

package/web/Html.js

@@ -142,10 +142,17 @@ const Html = /*#__PURE__*/React.forwardRef(({
   }, [occlude]);
   React.useLayoutEffect(() => {
     const el = gl.domElement;
-    el.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`;
-    el.style.position = 'absolute';
-    el.style.pointerEvents = 'none';
-  }, []);
+
+    if (occlude && occlude === 'blending') {
+      el.style.zIndex = `${Math.floor(zIndexRange[0] / 2)}`;
+      el.style.position = 'absolute';
+      el.style.pointerEvents = 'none';
+    } else {
+      el.style.zIndex = null;
+      el.style.position = null;
+      el.style.pointerEvents = null;
+    }
+  }, [occlude]);
   React.useLayoutEffect(() => {
     if (group.current) {
       const currentRoot = root.current = ReactDOM.createRoot(el);