@react-three/drei 9.66.0 → 9.66.1

package/README.md

@@ -192,6 +192,7 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
         <li><a href="#staging">Staging</a></li>
         <ul>
           <li><a href="#center">Center</a></li>
+          <li><a href="#resize">Resize</a></li>
           <li><a href="#BBAnchor">BBAnchor</a></li>        
           <li><a href="#bounds">Bounds</a></li>
           <li><a href="#camerashake">CameraShake</a></li>
@@ -1023,7 +1024,7 @@ It adds three properties that do not exist in the original `TextGeometry`, `line
 
 Abstraction around threes own [EffectComposer](https://threejs.org/docs/#examples/en/postprocessing/EffectComposer). By default it will prepend a render-pass and a gammacorrection-pass. Children are cloned, `attach` is given to them automatically. You can only use passes or effects in there.
 
-By default it creates a render target with HalfFloatType, RGBAFormat and gl.outputEncoding. You can change all of this to your liking, inspect the types.
+By default it creates a render target with HalfFloatType, RGBAFormat. You can change all of this to your liking, inspect the types.
 
 ```jsx
 import { SSAOPass } from "three-stdlib"
@@ -3126,6 +3127,10 @@ function ScaledModel() {
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-resize)
 
+<p>
+  <a href="https://codesandbox.io/s/6yg0i3"><img width="20%" src="https://user-images.githubusercontent.com/76580/234665568-2be311d2-1896-4f82-ae20-b10b44c1e952.png" alt="Demo"/></a>
+</p>
+
 Calculates a boundary box and scales its children so the highest dimension is constrained by 1. NB: proportions are preserved.
 
 ```tsx

package/core/AccumulativeShadows.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),s=require("../materials/DiscardMaterial.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=n(e),h=o(t),c=o(r);const u=c.createContext(null),d=i.shaderMaterial({color:new h.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }","varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <encodings_fragment>\n   }"),p=c.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:s=20,scale:n=10,opacity:o=1,alphaTest:l=.75,color:h="black",colorBlend:p=2,resolution:g=1024,toneMapped:m=!0,...v},M)=>{a.extend({SoftShadowMaterial:d});const b=a.useThree((e=>e.gl)),y=a.useThree((e=>e.scene)),w=a.useThree((e=>e.camera)),x=a.useThree((e=>e.invalidate)),C=c.useRef(null),S=c.useRef(null),[j]=c.useState((()=>new f(b,y,g)));c.useLayoutEffect((()=>{j.configure(C.current)}),[]);const T=c.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?s:r),count:0,getMesh:()=>C.current,reset:()=>{j.clear();const e=C.current.material;e.opacity=0,e.alphaTest=0,T.count=0},update:(e=1)=>{const t=C.current.material;T.temporal?(t.opacity=Math.min(o,t.opacity+o/T.blend),t.alphaTest=Math.min(l,t.alphaTest+l/T.blend)):(t.opacity=o,t.alphaTest=l),S.current.visible=!0,j.prepare();for(let t=0;t<e;t++)T.lights.forEach((e=>e.update())),j.update(w,T.blend);S.current.visible=!1,j.finish()}})),[j,w,y,t,r,s,o,l]);return c.useLayoutEffect((()=>{T.reset(),T.temporal||T.frames===1/0||T.update(T.blend)})),c.useImperativeHandle(M,(()=>T),[T]),a.useFrame((()=>{(T.temporal||T.frames===1/0)&&T.count<T.frames&&T.count<i&&(x(),T.update(),T.count++)})),c.createElement("group",v,c.createElement("group",{traverse:()=>null,ref:S},c.createElement(u.Provider,{value:T},e)),c.createElement("mesh",{receiveShadow:!0,ref:C,scale:n,rotation:[-Math.PI/2,0,0]},c.createElement("planeGeometry",null),c.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:m,color:h,blend:p,map:j.progressiveLightMap2.texture})))})),g=c.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:s=500,frames:n=1,position:o=[0,0,0],radius:d=1,amount:p=8,intensity:g=1,ambient:f=.5,...m},v)=>{const M=c.useRef(null),b=new h.Vector3(...o).length(),y=c.useContext(u),w=c.useCallback((()=>{let e;if(M.current)for(let t=0;t<M.current.children.length;t++)if(e=M.current.children[t],Math.random()>f)e.position.set(o[0]+h.MathUtils.randFloatSpread(d),o[1]+h.MathUtils.randFloatSpread(d),o[2]+h.MathUtils.randFloatSpread(d));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*b,Math.abs(Math.cos(t)*Math.sin(r)*b),Math.sin(t)*b)}}),[d,f,b,...o]),x=c.useMemo((()=>({update:w})),[w]);return c.useImperativeHandle(v,(()=>x),[x]),c.useLayoutEffect((()=>{const e=M.current;return y&&y.lights.set(e.uuid,x),()=>{y.lights.delete(e.uuid)}}),[y,x]),c.createElement("group",l.default({ref:M},m),Array.from({length:p},((n,o)=>c.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/p},c.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,s]})))))}));class f{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null,this.clearColor=new h.Color,this.clearAlpha=0;const a=/(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent)?h.HalfFloatType:h.FloatType;this.progressiveLightMap1=new h.WebGLRenderTarget(this.res,this.res,{type:a,encoding:e.outputEncoding}),this.progressiveLightMap2=new h.WebGLRenderTarget(this.res,this.res,{type:a,encoding:e.outputEncoding}),this.discardMat=new s.DiscardMaterial,this.targetMat=new h.MeshLambertMaterial({fog:!1}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=e.fragmentShader.indexOf("void main() {");e.fragmentShader="varying vec2 vUv;\n"+e.fragmentShader.slice(0,t)+"uniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.getClearColor(this.clearColor),this.clearAlpha=this.renderer.getClearAlpha(),this.renderer.setClearColor("black",1),this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.renderer.setRenderTarget(null),this.renderer.setClearColor(this.clearColor,this.clearAlpha),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1,i=this.scene.background;this.scene.background=null,this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null),this.scene.background=i}}exports.AccumulativeShadows=p,exports.RandomizedLight=g,exports.accumulativeContext=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),a=require("@react-three/fiber"),i=require("./shaderMaterial.cjs.js"),s=require("../materials/DiscardMaterial.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var l=n(e),h=o(t),c=o(r);const u=c.createContext(null),d=i.shaderMaterial({color:new h.Color,blend:2,alphaTest:.75,opacity:0,map:null},"varying vec2 vUv;\n   void main() {\n     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n     vUv = uv;\n   }","varying vec2 vUv;\n   uniform sampler2D map;\n   uniform vec3 color;\n   uniform float opacity;\n   uniform float alphaTest;\n   uniform float blend;\n   void main() {\n     vec4 sampledDiffuseColor = texture2D(map, vUv);\n     gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);\n     #include <tonemapping_fragment>\n     #include <encodings_fragment>\n   }"),p=c.forwardRef((({children:e,temporal:t,frames:r=40,limit:i=1/0,blend:s=20,scale:n=10,opacity:o=1,alphaTest:l=.75,color:h="black",colorBlend:p=2,resolution:g=1024,toneMapped:m=!0,...v},M)=>{a.extend({SoftShadowMaterial:d});const b=a.useThree((e=>e.gl)),y=a.useThree((e=>e.scene)),w=a.useThree((e=>e.camera)),x=a.useThree((e=>e.invalidate)),C=c.useRef(null),S=c.useRef(null),[j]=c.useState((()=>new f(b,y,g)));c.useLayoutEffect((()=>{j.configure(C.current)}),[]);const T=c.useMemo((()=>({lights:new Map,temporal:!!t,frames:Math.max(2,r),blend:Math.max(2,r===1/0?s:r),count:0,getMesh:()=>C.current,reset:()=>{j.clear();const e=C.current.material;e.opacity=0,e.alphaTest=0,T.count=0},update:(e=1)=>{const t=C.current.material;T.temporal?(t.opacity=Math.min(o,t.opacity+o/T.blend),t.alphaTest=Math.min(l,t.alphaTest+l/T.blend)):(t.opacity=o,t.alphaTest=l),S.current.visible=!0,j.prepare();for(let t=0;t<e;t++)T.lights.forEach((e=>e.update())),j.update(w,T.blend);S.current.visible=!1,j.finish()}})),[j,w,y,t,r,s,o,l]);return c.useLayoutEffect((()=>{T.reset(),T.temporal||T.frames===1/0||T.update(T.blend)})),c.useImperativeHandle(M,(()=>T),[T]),a.useFrame((()=>{(T.temporal||T.frames===1/0)&&T.count<T.frames&&T.count<i&&(x(),T.update(),T.count++)})),c.createElement("group",v,c.createElement("group",{traverse:()=>null,ref:S},c.createElement(u.Provider,{value:T},e)),c.createElement("mesh",{receiveShadow:!0,ref:C,scale:n,rotation:[-Math.PI/2,0,0]},c.createElement("planeGeometry",null),c.createElement("softShadowMaterial",{transparent:!0,depthWrite:!1,toneMapped:m,color:h,blend:p,map:j.progressiveLightMap2.texture})))})),g=c.forwardRef((({castShadow:e=!0,bias:t=.001,mapSize:r=512,size:a=5,near:i=.5,far:s=500,frames:n=1,position:o=[0,0,0],radius:d=1,amount:p=8,intensity:g=1,ambient:f=.5,...m},v)=>{const M=c.useRef(null),b=new h.Vector3(...o).length(),y=c.useContext(u),w=c.useCallback((()=>{let e;if(M.current)for(let t=0;t<M.current.children.length;t++)if(e=M.current.children[t],Math.random()>f)e.position.set(o[0]+h.MathUtils.randFloatSpread(d),o[1]+h.MathUtils.randFloatSpread(d),o[2]+h.MathUtils.randFloatSpread(d));else{let t=Math.acos(2*Math.random()-1)-Math.PI/2,r=2*Math.PI*Math.random();e.position.set(Math.cos(t)*Math.cos(r)*b,Math.abs(Math.cos(t)*Math.sin(r)*b),Math.sin(t)*b)}}),[d,f,b,...o]),x=c.useMemo((()=>({update:w})),[w]);return c.useImperativeHandle(v,(()=>x),[x]),c.useLayoutEffect((()=>{const e=M.current;return y&&y.lights.set(e.uuid,x),()=>{y.lights.delete(e.uuid)}}),[y,x]),c.createElement("group",l.default({ref:M},m),Array.from({length:p},((n,o)=>c.createElement("directionalLight",{key:o,castShadow:e,"shadow-bias":t,"shadow-mapSize":[r,r],intensity:g/p},c.createElement("orthographicCamera",{attach:"shadow-camera",args:[-a,a,a,-a,i,s]})))))}));class f{constructor(e,t,r=1024){this.renderer=e,this.res=r,this.scene=t,this.buffer1Active=!1,this.lights=[],this.meshes=[],this.object=null,this.clearColor=new h.Color,this.clearAlpha=0;const a=/(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent)?h.HalfFloatType:h.FloatType;this.progressiveLightMap1=new h.WebGLRenderTarget(this.res,this.res,{type:a}),this.progressiveLightMap2=new h.WebGLRenderTarget(this.res,this.res,{type:a}),this.discardMat=new s.DiscardMaterial,this.targetMat=new h.MeshLambertMaterial({fog:!1}),this.previousShadowMap={value:this.progressiveLightMap1.texture},this.averagingWindow={value:100},this.targetMat.onBeforeCompile=e=>{e.vertexShader="varying vec2 vUv;\n"+e.vertexShader.slice(0,-1)+"vUv = uv; gl_Position = vec4((uv - 0.5) * 2.0, 1.0, 1.0); }";const t=e.fragmentShader.indexOf("void main() {");e.fragmentShader="varying vec2 vUv;\n"+e.fragmentShader.slice(0,t)+"uniform sampler2D previousShadowMap;\n\tuniform float averagingWindow;\n"+e.fragmentShader.slice(t-1,-1)+"\nvec3 texelOld = texture2D(previousShadowMap, vUv).rgb;\n        gl_FragColor.rgb = mix(texelOld, gl_FragColor.rgb, 1.0/ averagingWindow);\n      }",e.uniforms.previousShadowMap=this.previousShadowMap,e.uniforms.averagingWindow=this.averagingWindow}}clear(){this.renderer.getClearColor(this.clearColor),this.clearAlpha=this.renderer.getClearAlpha(),this.renderer.setClearColor("black",1),this.renderer.setRenderTarget(this.progressiveLightMap1),this.renderer.clear(),this.renderer.setRenderTarget(this.progressiveLightMap2),this.renderer.clear(),this.renderer.setRenderTarget(null),this.renderer.setClearColor(this.clearColor,this.clearAlpha),this.lights=[],this.meshes=[],this.scene.traverse((e=>{!function(e){return!!e.geometry}(e)?function(e){return e.isLight}(e)&&this.lights.push({object:e,intensity:e.intensity}):this.meshes.push({object:e,material:e.material})}))}prepare(){this.lights.forEach((e=>e.object.intensity=0)),this.meshes.forEach((e=>e.object.material=this.discardMat))}finish(){this.lights.forEach((e=>e.object.intensity=e.intensity)),this.meshes.forEach((e=>e.object.material=e.material))}configure(e){this.object=e}update(e,t=100){if(!this.object)return;this.averagingWindow.value=t,this.object.material=this.targetMat;const r=this.buffer1Active?this.progressiveLightMap1:this.progressiveLightMap2,a=this.buffer1Active?this.progressiveLightMap2:this.progressiveLightMap1,i=this.scene.background;this.scene.background=null,this.renderer.setRenderTarget(r),this.previousShadowMap.value=a.texture,this.buffer1Active=!this.buffer1Active,this.renderer.render(this.scene,e),this.renderer.setRenderTarget(null),this.scene.background=i}}exports.AccumulativeShadows=p,exports.RandomizedLight=g,exports.accumulativeContext=u;

package/core/AccumulativeShadows.js

@@ -215,12 +215,10 @@ class ProgressiveLightMap {
 
     const format = /(Android|iPad|iPhone|iPod)/g.test(navigator.userAgent) ? THREE.HalfFloatType : THREE.FloatType;
     this.progressiveLightMap1 = new THREE.WebGLRenderTarget(this.res, this.res, {
-      type: format,
-      encoding: renderer.outputEncoding
+      type: format
     });
     this.progressiveLightMap2 = new THREE.WebGLRenderTarget(this.res, this.res, {
-      type: format,
-      encoding: renderer.outputEncoding
+      type: format
     }); // Inject some spicy new logic into a standard phong material
 
     this.discardMat = new DiscardMaterial();

package/core/Cloud.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var o=c(e);exports.Cloud=function({opacity:e=.5,speed:c=.4,width:s=10,depth:i=1.5,segments:u=20,texture:l="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",color:d="#ffffff",depthTest:p=!0,...f}){const h=r.useThree((e=>e.gl)),m=o.useRef(),b=n.useTexture(l),M=o.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:s/2-Math.random()*s,y:s/2-Math.random()*s,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*c})))),[s,u,c]);return r.useFrame((e=>{var r;return null==(r=m.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=M[t].rotation,r.children[0].scale.setScalar(M[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),o.createElement("group",f,o.createElement("group",{position:[0,0,u/2*i],ref:m},M.map((({x:r,y:n,scale:c,density:s},u)=>o.createElement(t.Billboard,{key:u,position:[r,n,-u*i]},o.createElement(a.Plane,{scale:c,rotation:[0,0,0]},o.createElement("meshStandardMaterial",{map:b,"map-encoding":h.outputEncoding,transparent:!0,opacity:c/6*s*e,depthTest:p,color:d})))))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:o=10,depth:i=1.5,segments:u=20,texture:l="https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png",color:d="#ffffff",depthTest:f=!0,...h}){const p=c.useRef(),m=n.useTexture(l),b=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:o/2-Math.random()*o,y:o/2-Math.random()*o,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[o,u,s]);return r.useFrame((e=>{var r;return null==(r=p.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=b[t].rotation,r.children[0].scale.setScalar(b[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",h,c.createElement("group",{position:[0,0,u/2*i],ref:p},b.map((({x:r,y:n,scale:s,density:o},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*i]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:m,transparent:!0,opacity:s/6*o*e,depthTest:f,color:d})))))))};

package/core/Cloud.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useThree, useFrame } from '@react-three/fiber';
+import { useFrame } from '@react-three/fiber';
 import { Billboard } from './Billboard.js';
 import { Plane } from './shapes.js';
 import { useTexture } from './useTexture.js';
@@ -16,7 +16,6 @@ function Cloud({
   depthTest = true,
   ...props
 }) {
-  const gl = useThree(state => state.gl);
   const group = React.useRef();
   const cloudTexture = useTexture(texture);
   const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
@@ -50,7 +49,6 @@ function Cloud({
     rotation: [0, 0, 0]
   }, /*#__PURE__*/React.createElement("meshStandardMaterial", {
     map: cloudTexture,
-    "map-encoding": gl.outputEncoding,
     transparent: true,
     opacity: scale / 6 * density * opacity,
     depthTest: depthTest,

package/core/ContactShadows.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=o(e),l=u(r),s=u(t);const c=l.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:u=1,blur:c=1,far:d=10,resolution:f=512,smooth:h=!0,color:m="#000000",depthWrite:p=!1,renderOrder:g,...v},b)=>{const M=l.useRef(null),y=a.useThree((e=>e.scene)),w=a.useThree((e=>e.gl)),T=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,u*=Array.isArray(e)?e[1]:e||1;const[x,O,R,S,j,C,P]=l.useMemo((()=>{const e=new s.WebGLRenderTarget(f,f),r=new s.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new s.PlaneGeometry(o,u).rotateX(Math.PI/2),a=new s.Mesh(t),i=new s.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new s.Color(m)}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );")};const l=new s.ShaderMaterial(n.HorizontalBlurShader),c=new s.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=l.depthTest=!1,[e,t,i,a,l,c,r]}),[f,o,u,e,m]),E=e=>{S.visible=!0,S.material=j,j.uniforms.tDiffuse.value=x.texture,j.uniforms.h.value=1*e/256,w.setRenderTarget(P),w.render(S,T.current),S.material=C,C.uniforms.tDiffuse.value=P.texture,C.uniforms.v.value=1*e/256,w.setRenderTarget(x),w.render(S,T.current),S.visible=!1};let q,W,k=0;return a.useFrame((()=>{T.current&&(r===1/0||k<r)&&(k++,q=y.background,W=y.overrideMaterial,M.current.visible=!1,y.background=null,y.overrideMaterial=R,w.setRenderTarget(x),w.render(y,T.current),E(c),h&&E(.4*c),w.setRenderTarget(null),M.current.visible=!0,y.overrideMaterial=W,y.background=q)})),l.useImperativeHandle(b,(()=>M.current),[]),l.createElement("group",i.default({"rotation-x":Math.PI/2},v,{ref:M}),l.createElement("mesh",{renderOrder:g,geometry:O,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{transparent:!0,map:x.texture,"map-encoding":w.outputEncoding,opacity:t,depthWrite:p})),l.createElement("orthographicCamera",{ref:T,args:[-o/2,o/2,u/2,-u/2,0,d]}))}));exports.ContactShadows=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var i=o(e),l=u(r),s=u(t);const c=l.forwardRef((({scale:e=10,frames:r=1/0,opacity:t=1,width:o=1,height:u=1,blur:c=1,far:d=10,resolution:f=512,smooth:h=!0,color:m="#000000",depthWrite:p=!1,renderOrder:g,...v},b)=>{const M=l.useRef(null),y=a.useThree((e=>e.scene)),w=a.useThree((e=>e.gl)),T=l.useRef(null);o*=Array.isArray(e)?e[0]:e||1,u*=Array.isArray(e)?e[1]:e||1;const[x,O,R,S,j,C,P]=l.useMemo((()=>{const e=new s.WebGLRenderTarget(f,f),r=new s.WebGLRenderTarget(f,f);r.texture.generateMipmaps=e.texture.generateMipmaps=!1;const t=new s.PlaneGeometry(o,u).rotateX(Math.PI/2),a=new s.Mesh(t),i=new s.MeshDepthMaterial;i.depthTest=i.depthWrite=!1,i.onBeforeCompile=e=>{e.uniforms={...e.uniforms,ucolor:{value:new s.Color(m)}},e.fragmentShader=e.fragmentShader.replace("void main() {","uniform vec3 ucolor;\n           void main() {\n          "),e.fragmentShader=e.fragmentShader.replace("vec4( vec3( 1.0 - fragCoordZ ), opacity );","vec4( ucolor * fragCoordZ * 2.0, ( 1.0 - fragCoordZ ) * 1.0 );")};const l=new s.ShaderMaterial(n.HorizontalBlurShader),c=new s.ShaderMaterial(n.VerticalBlurShader);return c.depthTest=l.depthTest=!1,[e,t,i,a,l,c,r]}),[f,o,u,e,m]),q=e=>{S.visible=!0,S.material=j,j.uniforms.tDiffuse.value=x.texture,j.uniforms.h.value=1*e/256,w.setRenderTarget(P),w.render(S,T.current),S.material=C,C.uniforms.tDiffuse.value=P.texture,C.uniforms.v.value=1*e/256,w.setRenderTarget(x),w.render(S,T.current),S.visible=!1};let E,W,k=0;return a.useFrame((()=>{T.current&&(r===1/0||k<r)&&(k++,E=y.background,W=y.overrideMaterial,M.current.visible=!1,y.background=null,y.overrideMaterial=R,w.setRenderTarget(x),w.render(y,T.current),q(c),h&&q(.4*c),w.setRenderTarget(null),M.current.visible=!0,y.overrideMaterial=W,y.background=E)})),l.useImperativeHandle(b,(()=>M.current),[]),l.createElement("group",i.default({"rotation-x":Math.PI/2},v,{ref:M}),l.createElement("mesh",{renderOrder:g,geometry:O,scale:[1,-1,1],rotation:[-Math.PI/2,0,0]},l.createElement("meshBasicMaterial",{transparent:!0,map:x.texture,opacity:t,depthWrite:p})),l.createElement("orthographicCamera",{ref:T,args:[-o/2,o/2,u/2,-u/2,0,d]}))}));exports.ContactShadows=c;

package/core/ContactShadows.js

@@ -103,7 +103,6 @@ const ContactShadows = /*#__PURE__*/React.forwardRef(({
   }, /*#__PURE__*/React.createElement("meshBasicMaterial", {
     transparent: true,
     map: renderTarget.texture,
-    "map-encoding": gl.outputEncoding,
     opacity: opacity,
     depthWrite: depthWrite
   })), /*#__PURE__*/React.createElement("orthographicCamera", {

package/core/Effects.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),s=require("react-merge-refs");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var o=u(e),i=c(r),l=u(s);const d=i.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:u,disableGamma:c,disableRenderPass:d,depthBuffer:f=!0,stencilBuffer:p=!1,anisotropy:h=1,encoding:m,type:g,...b},y)=>{i.useMemo((()=>a.extend({EffectComposer:n.EffectComposer,RenderPass:n.RenderPass,ShaderPass:n.ShaderPass})),[]);const E=i.useRef(),{scene:v,camera:P,gl:R,size:w,viewport:x}=a.useThree(),[j]=i.useState((()=>{const e=new t.WebGLRenderTarget(w.width,w.height,{type:g||t.HalfFloatType,format:t.RGBAFormat,encoding:m||R.outputEncoding,depthBuffer:f,stencilBuffer:p,anisotropy:h});return e.samples=r,e}));i.useEffect((()=>{var e,r;null==(e=E.current)||e.setSize(w.width,w.height),null==(r=E.current)||r.setPixelRatio(x.dpr)}),[R,w,x.dpr]),a.useFrame((()=>{var e;u||null==(e=E.current)||e.render()}),s);const C=[];return d||C.push(i.createElement("renderPass",{key:"renderpass",attach:`passes-${C.length}`,args:[v,P]})),c||C.push(i.createElement("shaderPass",{attach:`passes-${C.length}`,key:"gammapass",args:[n.GammaCorrectionShader]})),i.Children.forEach(e,(e=>{e&&C.push(i.cloneElement(e,{key:C.length,attach:`passes-${C.length}`}))})),i.createElement("effectComposer",o.default({ref:l.default([y,E]),args:[R,j]},b),C)}));exports.Effects=d,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),a=require("@react-three/fiber"),n=require("three-stdlib"),s=require("react-merge-refs");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var l=c(e),o=u(r),i=c(s);const d=o.forwardRef((({children:e,multisamping:r=8,renderIndex:s=1,disableRender:c,disableGamma:u,disableRenderPass:d,depthBuffer:f=!0,stencilBuffer:p=!1,anisotropy:h=1,encoding:m,type:g,...b},y)=>{o.useMemo((()=>a.extend({EffectComposer:n.EffectComposer,RenderPass:n.RenderPass,ShaderPass:n.ShaderPass})),[]);const v=o.useRef(),{scene:x,camera:E,gl:P,size:R,viewport:w}=a.useThree(),[j]=o.useState((()=>{const e=new t.WebGLRenderTarget(R.width,R.height,{type:g||t.HalfFloatType,format:t.RGBAFormat,depthBuffer:f,stencilBuffer:p,anisotropy:h});return g===t.UnsignedByteType&&null!=m&&("colorSpace"in e?e.texture.colorSpace=m:e.texture.encoding=m),e.samples=r,e}));o.useEffect((()=>{var e,r;null==(e=v.current)||e.setSize(R.width,R.height),null==(r=v.current)||r.setPixelRatio(w.dpr)}),[P,R,w.dpr]),a.useFrame((()=>{var e;c||null==(e=v.current)||e.render()}),s);const C=[];return d||C.push(o.createElement("renderPass",{key:"renderpass",attach:`passes-${C.length}`,args:[x,E]})),u||C.push(o.createElement("shaderPass",{attach:`passes-${C.length}`,key:"gammapass",args:[n.GammaCorrectionShader]})),o.Children.forEach(e,(e=>{e&&C.push(o.cloneElement(e,{key:C.length,attach:`passes-${C.length}`}))})),o.createElement("effectComposer",l.default({ref:i.default([y,v]),args:[P,j]},b),C)}));exports.Effects=d,exports.isWebGL2Available=()=>{try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}};

package/core/Effects.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { WebGLRenderTarget, HalfFloatType, RGBAFormat } from 'three';
+import { WebGLRenderTarget, HalfFloatType, RGBAFormat, UnsignedByteType } from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import { EffectComposer, RenderPass, ShaderPass, GammaCorrectionShader } from 'three-stdlib';
 import mergeRefs from 'react-merge-refs';
@@ -44,11 +44,15 @@ const Effects = /*#__PURE__*/React.forwardRef(({
     const t = new WebGLRenderTarget(size.width, size.height, {
       type: type || HalfFloatType,
       format: RGBAFormat,
-      encoding: encoding || gl.outputEncoding,
       depthBuffer,
       stencilBuffer,
       anisotropy
-    });
+    }); // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
+
+    if (type === UnsignedByteType && encoding != null) {
+      if ('colorSpace' in t) t.texture.colorSpace = encoding;else t.texture.encoding = encoding;
+    }
+
     t.samples = multisamping;
     return t;
   });

package/core/GizmoViewcube.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-three/fiber"),o=require("./GizmoHelper.cjs.js"),n=require("three");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./Hud.cjs.js");var l=a(e),s=i(t);const c="#f0f0f0",u="#999",p="black",m="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new n.Vector3(...e).multiplyScalar(.38),d=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),g=[.25,.25,.25],y=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=y.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:a=f,color:i=c,hoverColor:l=u,textColor:h=p,strokeColor:d=m,opacity:g=1})=>{const y=r.useThree((e=>e.gl)),b=s.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=d,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(a[t].toUpperCase(),64,76),new n.CanvasTexture(e)}),[t,a,o,i,h,d]);return s.createElement("meshLambertMaterial",{map:b,"map-encoding":y.outputEncoding,"map-anisotropy":y.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?l:"white",transparent:!0,opacity:g})},C=e=>{const{tweenCamera:t}=o.useGizmoContext(),[r,n]=s.useState(null);return s.createElement("mesh",{onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,o)=>s.createElement(x,l.default({key:o,index:o,hover:r===o},e)))),s.createElement("boxGeometry",null))},E=({onClick:e,dimensions:t,position:r,hoverColor:n=u})=>{const{tweenCamera:a}=o.useGizmoContext(),[i,l]=s.useState(!1);return s.createElement("mesh",{scale:1.01,position:r,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),a(r)})},s.createElement("meshBasicMaterial",{color:i?n:"white",transparent:!0,opacity:.6,visible:i}),s.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>s.createElement("group",{scale:[60,60,60]},s.createElement(C,e),y.map(((t,r)=>s.createElement(E,l.default({key:r,position:t,dimensions:b[r]},e)))),d.map(((t,r)=>s.createElement(E,l.default({key:r,position:t,dimensions:g},e)))),s.createElement("ambientLight",{intensity:.5}),s.createElement("pointLight",{position:[10,10,10],intensity:.5}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),o=require("./GizmoHelper.cjs.js"),n=require("three");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./Hud.cjs.js");var l=a(e),s=i(t);const c="#f0f0f0",u="#999",p="black",m="black",f=["Right","Left","Top","Bottom","Front","Back"],h=e=>new n.Vector3(...e).multiplyScalar(.38),d=[[1,1,1],[1,1,-1],[1,-1,1],[1,-1,-1],[-1,1,1],[-1,1,-1],[-1,-1,1],[-1,-1,-1]].map(h),g=[.25,.25,.25],y=[[1,1,0],[1,0,1],[1,0,-1],[1,-1,0],[0,1,1],[0,1,-1],[0,-1,1],[0,-1,-1],[-1,1,0],[-1,0,1],[-1,0,-1],[-1,-1,0]].map(h),b=y.map((e=>e.toArray().map((e=>0==e?.5:.25)))),x=({hover:e,index:t,font:o="20px Inter var, Arial, sans-serif",faces:a=f,color:i=c,hoverColor:l=u,textColor:h=p,strokeColor:d=m,opacity:g=1})=>{const y=r.useThree((e=>e.gl)),b=s.useMemo((()=>{const e=document.createElement("canvas");e.width=128,e.height=128;const r=e.getContext("2d");return r.fillStyle=i,r.fillRect(0,0,e.width,e.height),r.strokeStyle=d,r.strokeRect(0,0,e.width,e.height),r.font=o,r.textAlign="center",r.fillStyle=h,r.fillText(a[t].toUpperCase(),64,76),new n.CanvasTexture(e)}),[t,a,o,i,h,d]);return s.createElement("meshLambertMaterial",{map:b,"map-anisotropy":y.capabilities.getMaxAnisotropy()||1,attach:`material-${t}`,color:e?l:"white",transparent:!0,opacity:g})},C=e=>{const{tweenCamera:t}=o.useGizmoContext(),[r,n]=s.useState(null);return s.createElement("mesh",{onPointerOut:e=>{e.stopPropagation(),n(null)},onPointerMove:e=>{e.stopPropagation(),n(Math.floor(e.faceIndex/2))},onClick:e.onClick||(e=>{e.stopPropagation(),t(e.face.normal)})},[...Array(6)].map(((t,o)=>s.createElement(x,l.default({key:o,index:o,hover:r===o},e)))),s.createElement("boxGeometry",null))},j=({onClick:e,dimensions:t,position:r,hoverColor:n=u})=>{const{tweenCamera:a}=o.useGizmoContext(),[i,l]=s.useState(!1);return s.createElement("mesh",{scale:1.01,position:r,onPointerOver:e=>{e.stopPropagation(),l(!0)},onPointerOut:e=>{e.stopPropagation(),l(!1)},onClick:e||(e=>{e.stopPropagation(),a(r)})},s.createElement("meshBasicMaterial",{color:i?n:"white",transparent:!0,opacity:.6,visible:i}),s.createElement("boxGeometry",{args:t}))};exports.GizmoViewcube=e=>s.createElement("group",{scale:[60,60,60]},s.createElement(C,e),y.map(((t,r)=>s.createElement(j,l.default({key:r,position:t,dimensions:b[r]},e)))),d.map(((t,r)=>s.createElement(j,l.default({key:r,position:t,dimensions:g},e)))),s.createElement("ambientLight",{intensity:.5}),s.createElement("pointLight",{position:[10,10,10],intensity:.5}));

package/core/GizmoViewcube.js

@@ -48,7 +48,6 @@ const FaceMaterial = ({
   }, [index, faces, font, color, textColor, strokeColor]);
   return /*#__PURE__*/React.createElement("meshLambertMaterial", {
     map: texture,
-    "map-encoding": gl.outputEncoding,
     "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
     attach: `material-${index}`,
     color: hover ? hoverColor : 'white',

package/core/GizmoViewport.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-three/fiber"),a=require("three"),o=require("./GizmoHelper.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./Hud.cjs.js");var i=n(e),c=l(t);function s({scale:e=[.8,.05,.05],color:t,rotation:r}){return c.createElement("group",{rotation:r},c.createElement("mesh",{position:[.4,0,0]},c.createElement("boxGeometry",{args:e}),c.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function u({onClick:e,font:t,disabled:o,arcStyle:n,label:l,labelColor:s,axisHeadScale:u=1,...p}){const d=r.useThree((e=>e.gl)),f=c.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const r=e.getContext("2d");return r.beginPath(),r.arc(32,32,16,0,2*Math.PI),r.closePath(),r.fillStyle=n,r.fill(),l&&(r.font=t,r.textAlign="center",r.fillStyle=s,r.fillText(l,32,41)),new a.CanvasTexture(e)}),[n,l,s,t]),[m,b]=c.useState(!1),g=(l?1:.75)*(m?1.2:1)*u;return c.createElement("sprite",i.default({scale:g,onPointerOver:o?void 0:e=>{e.stopPropagation(),b(!0)},onPointerOut:o?void 0:e||(e=>{e.stopPropagation(),b(!1)})},p),c.createElement("spriteMaterial",{map:f,"map-encoding":d.outputEncoding,"map-anisotropy":d.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:l?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:a="18px Inter var, Arial, sans-serif",axisColors:n=["#ff2060","#20df80","#2080ff"],axisHeadScale:l=1,axisScale:p,labels:d=["X","Y","Z"],labelColor:f="#000",onClick:m,...b})=>{const[g,E,h]=n,{tweenCamera:y}=o.useGizmoContext(),x={font:a,disabled:r,labelColor:f,onClick:m,axisHeadScale:l,onPointerDown:r?void 0:e=>{y(e.object.position),e.stopPropagation()}};return c.createElement("group",i.default({scale:40},b),c.createElement(s,{color:g,rotation:[0,0,0],scale:p}),c.createElement(s,{color:E,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:h,rotation:[0,-Math.PI/2,0],scale:p}),!t&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[1,0,0],label:d[0]},x)),c.createElement(u,i.default({arcStyle:E,position:[0,1,0],label:d[1]},x)),c.createElement(u,i.default({arcStyle:h,position:[0,0,1],label:d[2]},x)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[-1,0,0]},x)),c.createElement(u,i.default({arcStyle:E,position:[0,-1,0]},x)),c.createElement(u,i.default({arcStyle:h,position:[0,0,-1]},x)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("@react-three/fiber"),a=require("three"),o=require("./GizmoHelper.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("./OrthographicCamera.cjs.js"),require("react-merge-refs"),require("./useFBO.cjs.js"),require("./Hud.cjs.js");var i=l(e),c=n(t);function s({scale:e=[.8,.05,.05],color:t,rotation:r}){return c.createElement("group",{rotation:r},c.createElement("mesh",{position:[.4,0,0]},c.createElement("boxGeometry",{args:e}),c.createElement("meshBasicMaterial",{color:t,toneMapped:!1})))}function u({onClick:e,font:t,disabled:o,arcStyle:l,label:n,labelColor:s,axisHeadScale:u=1,...p}){const f=r.useThree((e=>e.gl)),d=c.useMemo((()=>{const e=document.createElement("canvas");e.width=64,e.height=64;const r=e.getContext("2d");return r.beginPath(),r.arc(32,32,16,0,2*Math.PI),r.closePath(),r.fillStyle=l,r.fill(),n&&(r.font=t,r.textAlign="center",r.fillStyle=s,r.fillText(n,32,41)),new a.CanvasTexture(e)}),[l,n,s,t]),[m,b]=c.useState(!1),g=(n?1:.75)*(m?1.2:1)*u;return c.createElement("sprite",i.default({scale:g,onPointerOver:o?void 0:e=>{e.stopPropagation(),b(!0)},onPointerOut:o?void 0:e||(e=>{e.stopPropagation(),b(!1)})},p),c.createElement("spriteMaterial",{map:d,"map-anisotropy":f.capabilities.getMaxAnisotropy()||1,alphaTest:.3,opacity:n?1:.75,toneMapped:!1}))}exports.GizmoViewport=({hideNegativeAxes:e,hideAxisHeads:t,disabled:r,font:a="18px Inter var, Arial, sans-serif",axisColors:l=["#ff2060","#20df80","#2080ff"],axisHeadScale:n=1,axisScale:p,labels:f=["X","Y","Z"],labelColor:d="#000",onClick:m,...b})=>{const[g,h,E]=l,{tweenCamera:y}=o.useGizmoContext(),x={font:a,disabled:r,labelColor:d,onClick:m,axisHeadScale:n,onPointerDown:r?void 0:e=>{y(e.object.position),e.stopPropagation()}};return c.createElement("group",i.default({scale:40},b),c.createElement(s,{color:g,rotation:[0,0,0],scale:p}),c.createElement(s,{color:h,rotation:[0,0,Math.PI/2],scale:p}),c.createElement(s,{color:E,rotation:[0,-Math.PI/2,0],scale:p}),!t&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[1,0,0],label:f[0]},x)),c.createElement(u,i.default({arcStyle:h,position:[0,1,0],label:f[1]},x)),c.createElement(u,i.default({arcStyle:E,position:[0,0,1],label:f[2]},x)),!e&&c.createElement(c.Fragment,null,c.createElement(u,i.default({arcStyle:g,position:[-1,0,0]},x)),c.createElement(u,i.default({arcStyle:h,position:[0,-1,0]},x)),c.createElement(u,i.default({arcStyle:E,position:[0,0,-1]},x)))),c.createElement("ambientLight",{intensity:.5}),c.createElement("pointLight",{position:[10,10,10],intensity:.5}))};

package/core/GizmoViewport.js

@@ -71,7 +71,6 @@ function AxisHead({
     onPointerOut: !disabled ? onClick || handlePointerOut : undefined
   }, props), /*#__PURE__*/React.createElement("spriteMaterial", {
     map: texture,
-    "map-encoding": gl.outputEncoding,
     "map-anisotropy": gl.capabilities.getMaxAnisotropy() || 1,
     alphaTest: 0.3,
     opacity: label ? 1 : 0.75,

package/core/GradientTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(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 c=o(e),i=u(t),a=u(r);exports.GradientTexture=function({stops:e,colors:t,size:r=1024,...o}){const u=n.useThree((e=>e.gl)),l=a.useMemo((()=>{const n=document.createElement("canvas"),o=n.getContext("2d");n.width=16,n.height=r;const u=o.createLinearGradient(0,0,0,r);let c=e.length;for(;c--;)u.addColorStop(e[c],t[c]);o.fillStyle=u,o.fillRect(0,0,16,r);const a=new i.Texture(n);return a.needsUpdate=!0,a}),[e]);return a.useEffect((()=>()=>{l.dispose()}),[l]),a.createElement("primitive",c.default({object:l,attach:"map",encoding:u.outputEncoding},o))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(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 o=r(e),u=n(t);exports.GradientTexture=function({stops:e,colors:t,size:r=1024,...n}){const a=u.useMemo((()=>{const n=document.createElement("canvas"),o=n.getContext("2d");n.width=16,n.height=r;const u=o.createLinearGradient(0,0,0,r);let a=e.length;for(;a--;)u.addColorStop(e[a],t[a]);return o.fillStyle=u,o.fillRect(0,0,16,r),n}),[e]);return u.createElement("texture",o.default({args:[a],attach:"map"},n))};

package/core/GradientTexture.js

@@ -1,7 +1,5 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
-import * as THREE from 'three';
 import * as React from 'react';
-import { useThree } from '@react-three/fiber';
 
 function GradientTexture({
   stops,
@@ -9,8 +7,7 @@ function GradientTexture({
   size = 1024,
   ...props
 }) {
-  const gl = useThree(state => state.gl);
-  const texture = React.useMemo(() => {
+  const canvas = React.useMemo(() => {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
     canvas.width = 16;
@@ -24,15 +21,11 @@ function GradientTexture({
 
     context.fillStyle = gradient;
     context.fillRect(0, 0, 16, size);
-    const texture = new THREE.Texture(canvas);
-    texture.needsUpdate = true;
-    return texture;
+    return canvas;
   }, [stops]);
-  React.useEffect(() => () => void texture.dispose(), [texture]);
-  return /*#__PURE__*/React.createElement("primitive", _extends({
-    object: texture,
-    attach: "map",
-    encoding: gl.outputEncoding
+  return /*#__PURE__*/React.createElement("texture", _extends({
+    args: [canvas],
+    attach: "map"
   }, props));
 }
 

package/core/Image.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var s=c(e),l=i(r),u=i(t);const f=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:u,toneMapped:m,transparent:v,...d},g)=>{n.extend({ImageMaterial:f});const y=n.useThree((e=>e.gl)),p=Array.isArray(a)?[a[0],a[1]]:[a,a],x=[u.image.width,u.image.height];return l.createElement("mesh",s.default({ref:g,scale:Array.isArray(a)?[...a,1]:a},d),l.createElement("planeGeometry",{args:[1,1,t,t]}),l.createElement("imageMaterial",{color:r,map:u,"map-encoding":y.outputEncoding,zoom:o,grayscale:c,opacity:i,scale:p,imageBounds:x,toneMapped:m,transparent:v}),e)})),v=l.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return l.createElement(m,s.default({},r,{texture:n,ref:t}))})),d=l.forwardRef((({url:e,...r},t)=>l.createElement(m,s.default({},r,{ref:t})))),g=l.forwardRef(((e,r)=>{if(e.url)return l.createElement(v,s.default({},e,{ref:r}));if(e.texture)return l.createElement(d,s.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("three"),n=require("@react-three/fiber"),a=require("./shaderMaterial.cjs.js"),o=require("./useTexture.cjs.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var s=c(e),l=i(r),u=i(t);const f=a.shaderMaterial({color:new u.Color("white"),scale:[1,1],imageBounds:[1,1],map:null,zoom:1,grayscale:0,opacity:1},"\n  varying vec2 vUv;\n  void main() {\n    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);\n    vUv = uv;\n  }\n","\n  // mostly from https://gist.github.com/statico/df64c5d167362ecf7b34fca0b1459a44\n  varying vec2 vUv;\n  uniform vec2 scale;\n  uniform vec2 imageBounds;\n  uniform vec3 color;\n  uniform sampler2D map;\n  uniform float zoom;\n  uniform float grayscale;\n  uniform float opacity;\n  const vec3 luma = vec3(.299, 0.587, 0.114);\n  vec4 toGrayscale(vec4 color, float intensity) {\n    return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a);\n  }\n  vec2 aspect(vec2 size) {\n    return size / min(size.x, size.y);\n  }\n  void main() {\n    vec2 s = aspect(scale);\n    vec2 i = aspect(imageBounds);\n    float rs = s.x / s.y;\n    float ri = i.x / i.y;\n    vec2 new = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);\n    vec2 offset = (rs < ri ? vec2((new.x - s.x) / 2.0, 0.0) : vec2(0.0, (new.y - s.y) / 2.0)) / new;\n    vec2 uv = vUv * s / new + offset;\n    vec2 zUv = (uv - vec2(0.5, 0.5)) / zoom + vec2(0.5, 0.5);\n    gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);\n    \n    #include <tonemapping_fragment>\n    #include <encodings_fragment>\n  }\n"),m=l.forwardRef((({children:e,color:r,segments:t=1,scale:a=1,zoom:o=1,grayscale:c=0,opacity:i=1,texture:u,toneMapped:m,transparent:v,...d},y)=>{n.extend({ImageMaterial:f});const g=Array.isArray(a)?[a[0],a[1]]:[a,a],p=[u.image.width,u.image.height];return l.createElement("mesh",s.default({ref:y,scale:Array.isArray(a)?[...a,1]:a},d),l.createElement("planeGeometry",{args:[1,1,t,t]}),l.createElement("imageMaterial",{color:r,map:u,zoom:o,grayscale:c,opacity:i,scale:g,imageBounds:p,toneMapped:m,transparent:v}),e)})),v=l.forwardRef((({url:e,...r},t)=>{const n=o.useTexture(e);return l.createElement(m,s.default({},r,{texture:n,ref:t}))})),d=l.forwardRef((({url:e,...r},t)=>l.createElement(m,s.default({},r,{ref:t})))),y=l.forwardRef(((e,r)=>{if(e.url)return l.createElement(v,s.default({},e,{ref:r}));if(e.texture)return l.createElement(d,s.default({},e,{ref:r}));throw new Error("<Image /> requires a url or texture")}));exports.Image=y;

package/core/Image.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import { extend, useThree } from '@react-three/fiber';
+import { extend } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 import { useTexture } from './useTexture.js';
 
@@ -71,7 +71,6 @@ const ImageBase = /*#__PURE__*/React.forwardRef(({
   extend({
     ImageMaterial: ImageMaterialImpl
   });
-  const gl = useThree(state => state.gl);
   const planeBounds = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
   const imageBounds = [texture.image.width, texture.image.height];
   return /*#__PURE__*/React.createElement("mesh", _extends({
@@ -82,7 +81,6 @@ const ImageBase = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React.createElement("imageMaterial", {
     color: color,
     map: texture,
-    "map-encoding": gl.outputEncoding,
     zoom: zoom,
     grayscale: grayscale,
     opacity: opacity,

package/core/MeshReflectorMaterial.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:i=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:T=0,...S},y)=>{const w=a.useThree((({gl:e})=>e)),b=a.useThree((({camera:e})=>e)),g=a.useThree((({scene:e})=>e)),R=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[D]=d.useState((()=>new r.Vector3)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Matrix4)),[P]=d.useState((()=>new r.Vector3(0,0,-1))),[U]=d.useState((()=>new r.Vector4)),[E]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(b.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,T),E.subVectors(B,_),E.dot(D)>0)return;E.reflect(D).negate(),E.add(B),O.extractRotation(b.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),V.subVectors(B,P),V.reflect(D).negate(),V.add(B),q.position.copy(E),q.up.set(0,1,0),q.up.applyMatrix4(O),q.up.reflect(D),q.lookAt(V),q.far=b.far,q.updateMatrixWorld(),q.projectionMatrix.copy(b.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(D,B),j.applyMatrix4(q.matrixWorldInverse),U.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;F.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(F)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[b,T]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:w.outputEncoding,type:r.HalfFloatType},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new o.BlurPass({gl:w,resolution:n,width:i[0],height:i[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:R,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":R?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,i,W,n,h,R,e,t,s,l,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;I(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(g,q),R&&L.render(w,C,k),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,y])},z,S))}));exports.MeshReflectorMaterial=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),i=require("../materials/BlurPass.cjs.js"),o=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterialImpl:o.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=1,resolution:n=256,blur:o=[0,0],minDepthThreshold:s=.9,maxDepthThreshold:l=1,depthScale:p=0,depthToBlurRatioBias:m=.25,mirror:h=0,distortion:f=1,mixContrast:x=1,distortionMap:M,reflectorOffset:T=0,...S},y)=>{const w=a.useThree((({gl:e})=>e)),b=a.useThree((({camera:e})=>e)),R=a.useThree((({scene:e})=>e)),g=(o=Array.isArray(o)?o:[o,o])[0]+o[1]>0,v=d.useRef(null),[j]=d.useState((()=>new r.Plane)),[D]=d.useState((()=>new r.Vector3)),[B]=d.useState((()=>new r.Vector3)),[_]=d.useState((()=>new r.Vector3)),[O]=d.useState((()=>new r.Matrix4)),[P]=d.useState((()=>new r.Vector3(0,0,-1))),[U]=d.useState((()=>new r.Vector4)),[V]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector4)),[W]=d.useState((()=>new r.Matrix4)),[q]=d.useState((()=>new r.PerspectiveCamera)),I=d.useCallback((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;if(B.setFromMatrixPosition(t.matrixWorld),_.setFromMatrixPosition(b.matrixWorld),O.extractRotation(t.matrixWorld),D.set(0,0,1),D.applyMatrix4(O),B.addScaledVector(D,T),V.subVectors(B,_),V.dot(D)>0)return;V.reflect(D).negate(),V.add(B),O.extractRotation(b.matrixWorld),P.set(0,0,-1),P.applyMatrix4(O),P.add(_),E.subVectors(B,P),E.reflect(D).negate(),E.add(B),q.position.copy(V),q.up.set(0,1,0),q.up.applyMatrix4(O),q.up.reflect(D),q.lookAt(E),q.far=b.far,q.updateMatrixWorld(),q.projectionMatrix.copy(b.projectionMatrix),W.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),W.multiply(q.projectionMatrix),W.multiply(q.matrixWorldInverse),W.multiply(t.matrixWorld),j.setFromNormalAndCoplanarPoint(D,B),j.applyMatrix4(q.matrixWorldInverse),U.set(j.normal.x,j.normal.y,j.normal.z,j.constant);const r=q.projectionMatrix;F.x=(Math.sign(U.x)+r.elements[8])/r.elements[0],F.y=(Math.sign(U.y)+r.elements[9])/r.elements[5],F.z=-1,F.w=(1+r.elements[10])/r.elements[14],U.multiplyScalar(2/U.dot(F)),r.elements[2]=U.x,r.elements[6]=U.y,r.elements[10]=U.z+1,r.elements[14]=U.w}),[b,T]),[C,k,L,z]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,type:r.HalfFloatType},u=new r.WebGLRenderTarget(n,n,a);u.depthBuffer=!0,u.depthTexture=new r.DepthTexture(n,n),u.depthTexture.format=r.DepthFormat,u.depthTexture.type=r.UnsignedShortType;const d=new r.WebGLRenderTarget(n,n,a);return[u,d,new i.BlurPass({gl:w,resolution:n,width:o[0],height:o[1],minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m}),{mirror:h,textureMatrix:W,mixBlur:e,tDiffuse:u.texture,tDepth:u.depthTexture,tDiffuseBlur:d.texture,hasBlur:g,mixStrength:t,minDepthThreshold:s,maxDepthThreshold:l,depthScale:p,depthToBlurRatioBias:m,distortion:f,distortionMap:M,mixContrast:x,"defines-USE_BLUR":g?"":void 0,"defines-USE_DEPTH":p>0?"":void 0,"defines-USE_DISTORTION":M?"":void 0}]}),[w,o,W,n,h,g,e,t,s,l,p,m,f,M,x]);return a.useFrame((()=>{var e;const t=v.current.parent||(null==(e=v.current)?void 0:e.__r3f.parent);if(!t)return;t.visible=!1;const r=w.xr.enabled,a=w.shadowMap.autoUpdate;I(),w.xr.enabled=!1,w.shadowMap.autoUpdate=!1,w.setRenderTarget(C),w.state.buffers.depth.setMask(!0),w.autoClear||w.clear(),w.render(R,q),g&&L.render(w,C,k),w.xr.enabled=r,w.shadowMap.autoUpdate=a,t.visible=!0,w.setRenderTarget(null)})),d.createElement("meshReflectorMaterialImpl",u.default({attach:"material",key:"key"+z["defines-USE_BLUR"]+z["defines-USE_DEPTH"]+z["defines-USE_DISTORTION"],ref:c.default([v,y])},z,S))}));exports.MeshReflectorMaterial=p;

package/core/MeshReflectorMaterial.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, HalfFloatType, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, LinearFilter, HalfFloatType } from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 import { BlurPass } from '../materials/BlurPass.js';
@@ -109,7 +109,6 @@ const MeshReflectorMaterial = /*#__PURE__*/React.forwardRef(({
     const parameters = {
       minFilter: LinearFilter,
       magFilter: LinearFilter,
-      encoding: gl.outputEncoding,
       type: HalfFloatType
     };
     const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);

package/core/Reflector.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),i=require("../materials/MeshReflectorMaterial.cjs.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=s(e),d=l(t),c=s(n);a.extend({MeshReflectorMaterial:i.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:i=[0,0],args:s=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:p=1,depthScale:m=0,depthToBlurRatioBias:h=.25,mirror:f=0,children:x,debug:M=0,distortion:b=1,mixContrast:w=1,distortionMap:g,...T},y)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const S=a.useThree((({gl:e})=>e)),R=a.useThree((({camera:e})=>e)),j=a.useThree((({scene:e})=>e)),v=(i=Array.isArray(i)?i:[i,i])[0]+i[1]>0,B=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[P]=d.useState((()=>new r.Vector3)),[E]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Matrix4)),[F]=d.useState((()=>new r.Vector3(0,0,-1))),[O]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector3)),[C]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Matrix4)),[L]=d.useState((()=>new r.PerspectiveCamera)),k=d.useCallback((()=>{if(E.setFromMatrixPosition(B.current.matrixWorld),V.setFromMatrixPosition(R.matrixWorld),W.extractRotation(B.current.matrixWorld),P.set(0,0,1),P.applyMatrix4(W),q.subVectors(E,V),q.dot(P)>0)return;q.reflect(P).negate(),q.add(E),W.extractRotation(R.matrixWorld),F.set(0,0,-1),F.applyMatrix4(W),F.add(V),U.subVectors(E,F),U.reflect(P).negate(),U.add(E),L.position.copy(q),L.up.set(0,1,0),L.up.applyMatrix4(W),L.up.reflect(P),L.lookAt(U),L.far=R.far,L.updateMatrixWorld(),L.projectionMatrix.copy(R.projectionMatrix),_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(L.projectionMatrix),_.multiply(L.matrixWorldInverse),_.multiply(B.current.matrixWorld),D.setFromNormalAndCoplanarPoint(P,E),D.applyMatrix4(L.matrixWorldInverse),O.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const e=L.projectionMatrix;C.x=(Math.sign(O.x)+e.elements[8])/e.elements[0],C.y=(Math.sign(O.y)+e.elements[9])/e.elements[5],C.z=-1,C.w=(1+e.elements[10])/e.elements[14],O.multiplyScalar(2/O.dot(C)),e.elements[2]=O.x,e.elements[6]=O.y,e.elements[10]=O.z+1,e.elements[14]=O.w}),[]),[z,A,I,G]=d.useMemo((()=>{const a={minFilter:r.LinearFilter,magFilter:r.LinearFilter,encoding:S.outputEncoding},s=new r.WebGLRenderTarget(n,n,a);s.depthBuffer=!0,s.depthTexture=new r.DepthTexture(n,n),s.depthTexture.format=r.DepthFormat,s.depthTexture.type=r.UnsignedShortType;const u=new r.WebGLRenderTarget(n,n,a);return[s,u,new o.BlurPass({gl:S,resolution:n,width:i[0],height:i[1],minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h}),{mirror:f,textureMatrix:_,mixBlur:e,tDiffuse:s.texture,tDepth:s.depthTexture,tDiffuseBlur:u.texture,hasBlur:v,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:g,mixContrast:w,"defines-USE_BLUR":v?"":void 0,"defines-USE_DEPTH":m>0?"":void 0,"defines-USE_DISTORTION":g?"":void 0}]}),[S,i,_,n,f,v,e,t,l,p,m,h,M,b,g,w]);return a.useFrame((()=>{if(null==B||!B.current)return;B.current.visible=!1;const e=S.xr.enabled,t=S.shadowMap.autoUpdate;k(),S.xr.enabled=!1,S.shadowMap.autoUpdate=!1,S.setRenderTarget(z),S.state.buffers.depth.setMask(!0),S.autoClear||S.clear(),S.render(j,L),v&&I.render(S,z,A),S.xr.enabled=e,S.shadowMap.autoUpdate=t,B.current.visible=!0,S.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([B,y])},T),d.createElement("planeGeometry",{args:s}),x?x("meshReflectorMaterial",G):d.createElement("meshReflectorMaterial",G))}));exports.Reflector=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),n=require("react-merge-refs"),o=require("../materials/BlurPass.cjs.js"),s=require("../materials/MeshReflectorMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("../materials/ConvolutionMaterial.cjs.js");var u=i(e),d=l(t),c=i(n);a.extend({MeshReflectorMaterial:s.MeshReflectorMaterial});const p=d.forwardRef((({mixBlur:e=0,mixStrength:t=.5,resolution:n=256,blur:s=[0,0],args:i=[1,1],minDepthThreshold:l=.9,maxDepthThreshold:p=1,depthScale:m=0,depthToBlurRatioBias:h=.25,mirror:f=0,children:x,debug:M=0,distortion:b=1,mixContrast:w=1,distortionMap:y,...T},g)=>{d.useEffect((()=>{console.warn("Reflector has been deprecated and will be removed next major. Replace it with <MeshReflectorMaterial />!")}),[]);const S=a.useThree((({gl:e})=>e)),R=a.useThree((({camera:e})=>e)),j=a.useThree((({scene:e})=>e)),v=(s=Array.isArray(s)?s:[s,s])[0]+s[1]>0,B=d.useRef(null),[D]=d.useState((()=>new r.Plane)),[P]=d.useState((()=>new r.Vector3)),[F]=d.useState((()=>new r.Vector3)),[V]=d.useState((()=>new r.Vector3)),[W]=d.useState((()=>new r.Matrix4)),[E]=d.useState((()=>new r.Vector3(0,0,-1))),[O]=d.useState((()=>new r.Vector4)),[q]=d.useState((()=>new r.Vector3)),[U]=d.useState((()=>new r.Vector3)),[C]=d.useState((()=>new r.Vector4)),[_]=d.useState((()=>new r.Matrix4)),[L]=d.useState((()=>new r.PerspectiveCamera)),k=d.useCallback((()=>{if(F.setFromMatrixPosition(B.current.matrixWorld),V.setFromMatrixPosition(R.matrixWorld),W.extractRotation(B.current.matrixWorld),P.set(0,0,1),P.applyMatrix4(W),q.subVectors(F,V),q.dot(P)>0)return;q.reflect(P).negate(),q.add(F),W.extractRotation(R.matrixWorld),E.set(0,0,-1),E.applyMatrix4(W),E.add(V),U.subVectors(F,E),U.reflect(P).negate(),U.add(F),L.position.copy(q),L.up.set(0,1,0),L.up.applyMatrix4(W),L.up.reflect(P),L.lookAt(U),L.far=R.far,L.updateMatrixWorld(),L.projectionMatrix.copy(R.projectionMatrix),_.set(.5,0,0,.5,0,.5,0,.5,0,0,.5,.5,0,0,0,1),_.multiply(L.projectionMatrix),_.multiply(L.matrixWorldInverse),_.multiply(B.current.matrixWorld),D.setFromNormalAndCoplanarPoint(P,F),D.applyMatrix4(L.matrixWorldInverse),O.set(D.normal.x,D.normal.y,D.normal.z,D.constant);const e=L.projectionMatrix;C.x=(Math.sign(O.x)+e.elements[8])/e.elements[0],C.y=(Math.sign(O.y)+e.elements[9])/e.elements[5],C.z=-1,C.w=(1+e.elements[10])/e.elements[14],O.multiplyScalar(2/O.dot(C)),e.elements[2]=O.x,e.elements[6]=O.y,e.elements[10]=O.z+1,e.elements[14]=O.w}),[]),[z,A,I,G]=d.useMemo((()=>{const a={type:r.HalfFloatType,minFilter:r.LinearFilter,magFilter:r.LinearFilter},i=new r.WebGLRenderTarget(n,n,a);i.depthBuffer=!0,i.depthTexture=new r.DepthTexture(n,n),i.depthTexture.format=r.DepthFormat,i.depthTexture.type=r.UnsignedShortType;const u=new r.WebGLRenderTarget(n,n,a);return[i,u,new o.BlurPass({gl:S,resolution:n,width:s[0],height:s[1],minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h}),{mirror:f,textureMatrix:_,mixBlur:e,tDiffuse:i.texture,tDepth:i.depthTexture,tDiffuseBlur:u.texture,hasBlur:v,mixStrength:t,minDepthThreshold:l,maxDepthThreshold:p,depthScale:m,depthToBlurRatioBias:h,transparent:!0,debug:M,distortion:b,distortionMap:y,mixContrast:w,"defines-USE_BLUR":v?"":void 0,"defines-USE_DEPTH":m>0?"":void 0,"defines-USE_DISTORTION":y?"":void 0}]}),[S,s,_,n,f,v,e,t,l,p,m,h,M,b,y,w]);return a.useFrame((()=>{if(null==B||!B.current)return;B.current.visible=!1;const e=S.xr.enabled,t=S.shadowMap.autoUpdate;k(),S.xr.enabled=!1,S.shadowMap.autoUpdate=!1,S.setRenderTarget(z),S.state.buffers.depth.setMask(!0),S.autoClear||S.clear(),S.render(j,L),v&&I.render(S,z,A),S.xr.enabled=e,S.shadowMap.autoUpdate=t,B.current.visible=!0,S.setRenderTarget(null)})),d.createElement("mesh",u.default({ref:c.default([B,g])},T),d.createElement("planeGeometry",{args:i}),x?x("meshReflectorMaterial",G):d.createElement("meshReflectorMaterial",G))}));exports.Reflector=p;

package/core/Reflector.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType } from 'three';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, HalfFloatType, LinearFilter } from 'three';
 import { extend, useThree, useFrame } from '@react-three/fiber';
 import mergeRefs from 'react-merge-refs';
 import { BlurPass } from '../materials/BlurPass.js';
@@ -110,9 +110,9 @@ const Reflector = /*#__PURE__*/React.forwardRef(({
   }, []);
   const [fbo1, fbo2, blurpass, reflectorProps] = React.useMemo(() => {
     const parameters = {
+      type: HalfFloatType,
       minFilter: LinearFilter,
-      magFilter: LinearFilter,
-      encoding: gl.outputEncoding
+      magFilter: LinearFilter
     };
     const fbo1 = new WebGLRenderTarget(resolution, resolution, parameters);
     fbo1.depthBuffer = true;

package/core/useCubeCamera.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e),o=u(r);exports.useCubeCamera=function({resolution:u=256,near:a=.1,far:c=1e3,envMap:s,fog:f}={}){const i=t.useThree((({gl:e})=>e)),b=t.useThree((({scene:e})=>e)),d=r.useMemo((()=>{const r=new e.WebGLCubeRenderTarget(u);return r.texture.encoding=i.outputEncoding,r.texture.type=e.HalfFloatType,r}),[u,i.outputEncoding]);r.useEffect((()=>()=>{d.dispose()}),[d]);const g=r.useMemo((()=>new n.CubeCamera(a,c,d)),[a,c,d]);let l,p;const O=o.useCallback((()=>{l=b.fog,p=b.background,b.background=s||p,b.fog=f||l,g.update(i,b),b.fog=l,b.background=p}),[i,b,g]);return{fbo:d,camera:g,update:O}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e),a=u(r);exports.useCubeCamera=function({resolution:u=256,near:o=.1,far:c=1e3,envMap:s,fog:f}={}){const b=t.useThree((({gl:e})=>e)),i=t.useThree((({scene:e})=>e)),l=r.useMemo((()=>{const r=new e.WebGLCubeRenderTarget(u);return r.texture.type=e.HalfFloatType,r}),[u]);r.useEffect((()=>()=>{l.dispose()}),[l]);const d=r.useMemo((()=>new n.CubeCamera(o,c,l)),[o,c,l]);let g,p;const O=a.useCallback((()=>{g=i.fog,p=i.background,i.background=s||p,i.fog=f||g,d.update(b,i),i.fog=g,i.background=p}),[b,i,d]);return{fbo:l,camera:d,update:O}};

package/core/useCubeCamera.js

@@ -19,10 +19,9 @@ function useCubeCamera({
   }) => scene);
   const fbo = useMemo(() => {
     const fbo = new WebGLCubeRenderTarget(resolution);
-    fbo.texture.encoding = gl.outputEncoding;
     fbo.texture.type = HalfFloatType;
     return fbo;
-  }, [resolution, gl.outputEncoding]);
+  }, [resolution]);
   useEffect(() => {
     return () => {
       fbo.dispose();

package/core/useFBO.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var u=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,u.get?u:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var n=u(e),i=u(t);exports.useFBO=function(e,t,u){const{gl:o,size:s,viewport:a}=r.useThree(),p="number"==typeof e?e:s.width*a.dpr,c="number"==typeof t?t:s.height*a.dpr,f=("number"==typeof e?u:e)||{},{samples:l=0,depth:d,...b}=f,y=n.useMemo((()=>{let e;return e=new i.WebGLRenderTarget(p,c,{minFilter:i.LinearFilter,magFilter:i.LinearFilter,encoding:o.outputEncoding,type:i.HalfFloatType,...b}),d&&(e.depthTexture=new i.DepthTexture(p,c,i.FloatType)),e.samples=l,e}),[]);return n.useLayoutEffect((()=>{y.setSize(p,c),l&&(y.samples=l)}),[l,y,p,c]),n.useEffect((()=>()=>y.dispose()),[]),y};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("@react-three/fiber");function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=u(e),i=u(r);exports.useFBO=function(e,r,u){const s=t.useThree((e=>e.size)),o=t.useThree((e=>e.viewport)),a="number"==typeof e?e:s.width*o.dpr,p="number"==typeof r?r:s.height*o.dpr,f=("number"==typeof e?u:e)||{},{samples:c=0,depth:l,...d}=f,b=n.useMemo((()=>{const e=new i.WebGLRenderTarget(a,p,{minFilter:i.LinearFilter,magFilter:i.LinearFilter,type:i.HalfFloatType,...d});return l&&(e.depthTexture=new i.DepthTexture(a,p,i.FloatType)),e.samples=c,e}),[]);return n.useLayoutEffect((()=>{b.setSize(a,p),c&&(b.samples=c)}),[c,b,a,p]),n.useEffect((()=>()=>b.dispose()),[]),b};

package/core/useFBO.js

@@ -11,11 +11,8 @@ width,
 height,
 /**Settings */
 settings) {
-  const {
-    gl,
-    size,
-    viewport
-  } = useThree();
+  const size = useThree(state => state.size);
+  const viewport = useThree(state => state.viewport);
 
   const _width = typeof width === 'number' ? width : size.width * viewport.dpr;
 
@@ -29,11 +26,9 @@ settings) {
     ...targetSettings
   } = _settings;
   const target = React.useMemo(() => {
-    let target;
-    target = new THREE.WebGLRenderTarget(_width, _height, {
+    const target = new THREE.WebGLRenderTarget(_width, _height, {
       minFilter: THREE.LinearFilter,
       magFilter: THREE.LinearFilter,
-      encoding: gl.outputEncoding,
       type: THREE.HalfFloatType,
       ...targetSettings
     });

package/core/useVideoTexture.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),t=require("react"),r=require("@react-three/fiber"),n=require("suspend-react");function o(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=o(e);exports.useVideoTexture=function(e,o){const{unsuspend:u,start:i,crossOrigin:c,muted:a,loop:d,...f}={unsuspend:"loadedmetadata",crossOrigin:"Anonymous",muted:!0,loop:!0,start:!0,playsInline:!0,...o},l=r.useThree((e=>e.gl)),p=n.suspend((()=>new Promise(((t,r)=>{const n=Object.assign(document.createElement("video"),{src:"string"==typeof e&&e||void 0,srcObject:e instanceof MediaStream&&e||void 0,crossOrigin:c,loop:d,muted:a,...f}),o=new s.VideoTexture(n);o.encoding=l.outputEncoding,n.addEventListener(u,(()=>t(o)))}))),[e]);return t.useEffect((()=>{i&&p.image.play()}),[p,i]),p};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("three"),r=require("react"),t=require("@react-three/fiber"),n=require("suspend-react");function o(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var u=o(e);exports.useVideoTexture=function(e,o){const{unsuspend:s,start:c,crossOrigin:i,muted:a,loop:d,...p}={unsuspend:"loadedmetadata",crossOrigin:"Anonymous",muted:!0,loop:!0,start:!0,playsInline:!0,...o},l=t.useThree((e=>e.gl)),f=n.suspend((()=>new Promise(((r,t)=>{const n=Object.assign(document.createElement("video"),{src:"string"==typeof e&&e||void 0,srcObject:e instanceof MediaStream&&e||void 0,crossOrigin:i,loop:d,muted:a,...p}),o=new u.VideoTexture(n);"colorSpace"in o?o.colorSpace=l.outputColorSpace:o.encoding=l.outputEncoding,n.addEventListener(s,(()=>r(o)))}))),[e]);return r.useEffect((()=>{c&&f.image.play()}),[f,c]),f};

package/core/useVideoTexture.js

@@ -31,7 +31,7 @@ function useVideoTexture(src, props) {
       ...rest
     });
     const texture = new THREE.VideoTexture(video);
-    texture.encoding = gl.outputEncoding;
+    if ('colorSpace' in texture) texture.colorSpace = gl.outputColorSpace;else texture.encoding = gl.outputEncoding;
     video.addEventListener(unsuspend, () => res(texture));
   }), [src]);
   useEffect(() => void (start && texture.image.play()), [texture, start]);