Merge pull request #54 from takuma-hmng8/dev

v1.0.32

Author: takuma-hmng8

packages/use-shader-fx/build/use-shader-fx.js

@@ -1,6 +1,6 @@
 {
    "name": "@hmng8/use-shader-fx",
-   "version": "1.0.31",
+   "version": "1.0.32",
    "description": "wide variety of shader effects for React",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

packages/use-shader-fx/build/use-shader-fx.js.map

@@ -48,6 +48,7 @@ export const useDoubleFBO = ({
    isSizeUpdate = false,
    samples = 0,
    depthBuffer = false,
+   depthTexture = false,
 }: UseFboProps): UseDoubleFBOReturn => {
    const renderTarget = useRef<RenderTarget>({
       read: null,
@@ -60,6 +61,7 @@ export const useDoubleFBO = ({
    });
 
    const resolution = useResolution(size, dpr);
+
    const initRenderTargets = useMemo(() => {
       const read = new THREE.WebGLRenderTarget(resolution.x, resolution.y, {
          ...FBO_OPTION,
@@ -71,9 +73,24 @@ export const useDoubleFBO = ({
          samples,
          depthBuffer,
       });
+
+      if (depthTexture) {
+         read.depthTexture = new THREE.DepthTexture(
+            resolution.x,
+            resolution.y,
+            THREE.FloatType
+         );
+         write.depthTexture = new THREE.DepthTexture(
+            resolution.x,
+            resolution.y,
+            THREE.FloatType
+         );
+      }
+
       return { read, write };
       // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
+
    renderTarget.current.read = initRenderTargets.read;
    renderTarget.current.write = initRenderTargets.write;
 

packages/use-shader-fx/build/use-shader-fx.umd.cjs

@@ -26,8 +26,10 @@ export type UseFboProps = {
    isSizeUpdate?: boolean;
    /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default is 0. */
    samples?: number;
-   /** Renders to the depth buffer. Default is false. */
+   /** Renders to the depth buffer. Unlike the three.js,　Default is false. */
    depthBuffer?: boolean;
+   /** If set, the scene depth will be rendered to this texture. Default is false. */
+   depthTexture?: boolean;
 };
 
 type FBOUpdateFunction = (
@@ -51,17 +53,32 @@ export const useSingleFBO = ({
    isSizeUpdate = false,
    samples = 0,
    depthBuffer = false,
+   depthTexture = false,
 }: UseFboProps): UseSingleFBOReturn => {
    const renderTarget = useRef<THREE.WebGLRenderTarget>();
 
    const resolution = useResolution(size, dpr);
+
    renderTarget.current = useMemo(
-      () =>
-         new THREE.WebGLRenderTarget(resolution.x, resolution.y, {
-            ...FBO_OPTION,
-            samples,
-            depthBuffer,
-         }),
+      () => {
+         const target = new THREE.WebGLRenderTarget(
+            resolution.x,
+            resolution.y,
+            {
+               ...FBO_OPTION,
+               samples,
+               depthBuffer,
+            }
+         );
+         if (depthTexture) {
+            target.depthTexture = new THREE.DepthTexture(
+               resolution.x,
+               resolution.y,
+               THREE.FloatType
+            );
+         }
+         return target;
+      },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       []
    );

packages/use-shader-fx/build/use-shader-fx.umd.cjs.map

@@ -22,5 +22,5 @@ type UseDoubleFBOReturn = [
  * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false
  * @returns [{read:THREE.WebGLRenderTarget,write:THREE.WebGLRenderTarget} , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument.
  */
-export declare const useDoubleFBO: ({ scene, camera, size, dpr, isSizeUpdate, samples, depthBuffer, }: UseFboProps) => UseDoubleFBOReturn;
+export declare const useDoubleFBO: ({ scene, camera, size, dpr, isSizeUpdate, samples, depthBuffer, depthTexture, }: UseFboProps) => UseDoubleFBOReturn;
 export {};

packages/use-shader-fx/package-lock.json

@@ -11,8 +11,10 @@ export type UseFboProps = {
     isSizeUpdate?: boolean;
     /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default is 0. */
     samples?: number;
-    /** Renders to the depth buffer. Default is false. */
+    /** Renders to the depth buffer. Unlike the three.js,　Default is false. */
     depthBuffer?: boolean;
+    /** If set, the scene depth will be rendered to this texture. Default is false. */
+    depthTexture?: boolean;
 };
 type FBOUpdateFunction = (gl: THREE.WebGLRenderer, 
 /**  call before FBO is rendered */
@@ -25,5 +27,5 @@ type UseSingleFBOReturn = [THREE.WebGLRenderTarget, FBOUpdateFunction];
  * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false
  * @returns [THREE.WebGLRenderTarget , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument.
  */
-export declare const useSingleFBO: ({ scene, camera, size, dpr, isSizeUpdate, samples, depthBuffer, }: UseFboProps) => UseSingleFBOReturn;
+export declare const useSingleFBO: ({ scene, camera, size, dpr, isSizeUpdate, samples, depthBuffer, depthTexture, }: UseFboProps) => UseSingleFBOReturn;
 export {};