Commit 029a2c2

authored

Merge pull request #29 from takuma-hmng8/dev

add useCopyTexture

2 parents 068819e + 8732440 commit 029a2c2Copy full SHA for 029a2c2

File tree

14 files changed

+449

-299

lines changed

README.md
app/domSyncer
- DomSyncer.tsx
- page.tsx
packages/use-shader-fx
- build
- package-lock.json
- package.json
- src
  - hooks/useSimpleBlur
    - index.ts
  - index.js
  - utils
    - useCopyTexture.ts
- types
  - index.d.ts
  - utils
    - useCopyTexture.d.ts

14 files changed

+449

-299

lines changed

`‎README.md‎`

Lines changed: 18 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -225,6 +225,18 @@ const [params, setParams] = useParams<HooksParams>;`
`225`	`225`	`}`
`226`	`226`	```
`227`	`227`
	`228`	`+## useCopyTexture`
	`229`	`+`
	`230`	`+Generate an FBO array to copy the texture.`
	`231`	`+`
	`232`	+```tsx
	`233`	`+const [renderTargets, copyTexture] = useCopyTexture(`
	`234`	`+ { scene, camera, size, dpr },`
	`235`	`+ length`
	`236`	`+);`
	`237`	`+copyTexture(gl, index); // return texture`
	`238`	+```
	`239`	`+`
`228`	`240`	`# Other Hooks`
`229`	`241`
`230`	`242`	`## useDomSyncer`
`@@ -254,6 +266,11 @@ useLayoutEffect(() => {`
`254`	`266`	`});`
`255`	`267`	`}, [state]);`
`256`	`268`
	`269`	`+const [, copyTexture] = useCopyTexture(`
	`270`	`+ { scene: fxTextureObj.scene, camera: fxTextureObj.camera, size, dpr },`
	`271`	`+ domArr.current.length`
	`272`	`+);`
	`273`	`+`
`257`	`274`	`useFrame((props) => {`
`258`	`275`	`const syncedTexture = updateDomSyncer(props, {`
`259`	`276`	`texture: [...Array(domArr.current.length)].map((_, i) => {`
`@@ -262,6 +279,7 @@ useFrame((props) => {`
`262`	`279`	`map: someFx,`
`263`	`280`	`texture0: someTexture,`
`264`	`281`	`});`
	`282`	`+ return copyTexture(props.gl, i);`
`265`	`283`	`}`
`266`	`284`	`}),`
`267`	`285`	`resolution: [...Array(domArr.current.length)].map(() =>`

`‎app/domSyncer/DomSyncer.tsx‎`

Lines changed: 12 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,12 @@`
`1`	`1`	`import * as THREE from "three";`
`2`		`-import { useLayoutEffect, useRef } from "react";`
	`2`	`+import { useEffect,useLayoutEffect, useRef } from "react";`
`3`	`3`	`import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";`
`4`	`4`	`import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";`
`5`	`5`	`import {`
`6`	`6`	`useDomSyncer,`
`7`	`7`	`useWave,`
`8`	`8`	`useFxTexture,`
	`9`	`+ useCopyTexture,`
`9`	`10`	`} from "@/packages/use-shader-fx/src";`
`10`	`11`	`import { WaveParams } from "@/packages/use-shader-fx/src/hooks/useWave";`
`11`	`12`	`import gsap from "gsap";`
`@@ -36,7 +37,7 @@ export const DomSyncer = ({ state }: { state: number }) => {`
`36`	`37`	`const size = useThree((state) => state.size);`
`37`	`38`	`const dpr = useThree((state) => state.viewport.dpr);`
`38`	`39`
`39`		`- const [updateFxTexture] = useFxTexture({ size, dpr });`
	`40`	`+ const [updateFxTexture,,fxTextureObj] = useFxTexture({ size, dpr });`
`40`	`41`	`const [updateWave] = useWave({ size, dpr });`
`41`	`42`
`42`	`43`	`const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer(`
`@@ -48,6 +49,7 @@ export const DomSyncer = ({ state }: { state: number }) => {`
`48`	`49`
`49`	`50`	`useLayoutEffect(() => {`
`50`	`51`	`CONFIG.waveArr = [];`
	`52`	`+`
`51`	`53`	`if (state === 0) {`
`52`	`54`	`domArr.current = [...document.querySelectorAll(".item")!];`
`53`	`55`	`} else {`
`@@ -83,11 +85,16 @@ export const DomSyncer = ({ state }: { state: number }) => {`
`83`	`85`	`// eslint-disable-next-line react-hooks/exhaustive-deps`
`84`	`86`	`}, [state]);`
`85`	`87`
	`88`	`+ const [, copyTexture] = useCopyTexture(`
	`89`	`+ { scene: fxTextureObj.scene, camera: fxTextureObj.camera, size, dpr },`
	`90`	`+ domArr.current.length`
	`91`	`+ );`
	`92`	`+`
`86`	`93`	`useFrame((props) => {`
`87`	`94`	`const syncedTexture = updateDomSyncer(props, {`
`88`	`95`	`texture: [...Array(domArr.current.length)].map((_, i) => {`
`89`	`96`	`if (domSyncerObj.isIntersecting(i, false)) {`
`90`		`- textureRef.current=updateFxTexture(props, {`
	`97`	`+ updateFxTexture(props, {`
`91`	`98`	`padding: 0.0,`
`92`	`99`	`map: updateWave(props, {`
`93`	`100`	`epicenter: CONFIG.waveArr[i].epicenter,`
`@@ -99,6 +106,8 @@ export const DomSyncer = ({ state }: { state: number }) => {`
`99`	`106`	`textureResolution: CONFIG.textureResolution,`
`100`	`107`	`texture0: momo,`
`101`	`108`	`});`
	`109`	`+`
	`110`	`+ return copyTexture(props.gl, i);`
`102`	`111`	`}`
`103`	`112`	`return textureRef.current;`
`104`	`113`	`}),`

`‎app/domSyncer/page.tsx‎`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ export default function Page() {`
`52`	`52`	`key={i}`
`53`	`53`	`style={{`
`54`	`54`	`width: "calc(50% - 40px)",`
`55`		`- height: "120vh",`
	`55`	`+ height: "80vh",`
`56`	`56`	`zIndex: 100,`
`57`	`57`	borderRadius: `${i * 50}px`,
`58`	`58`	`}}></div>`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Commit 029a2c2

File tree

14 files changed

14 files changed

`‎README.md‎`

`‎app/domSyncer/DomSyncer.tsx‎`

`‎app/domSyncer/page.tsx‎`

0 commit comments