Commit df5cb43

author

takuma-hmng8

committed

add:useRawBlank

1 parent 1a6276d commit df5cb43Copy full SHA for df5cb43

File tree

22 files changed

+1072

-689

lines changed

README.md
app/playground
- Playground.tsx
packages/use-shader-fx
- build
- package-lock.json
- package.json
- src
  - fxs/blank
    - useBlank
      - index.ts
      - shader
        main.frag
        main.vert
      - useMesh.ts
    - useRawBlank
      - index.ts
      - shader
        main.frag
        main.vert
      - useMesh.ts
  - index.js
- types
  - fxs/blank
    - useBlank
      - index.d.ts
      - useMesh.d.ts
    - useRawBlank
      - index.d.ts
      - useMesh.d.ts
  - index.d.ts

22 files changed

+1072

-689

lines changed

`‎README.md‎`

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -500,11 +500,12 @@ return (`
`500`	`500`
`501`	`501`	`👉 [morphParticles demo](https://use-shader-fx.vercel.app/useMorphParticles) 👈`
`502`	`502`
`503`		`-# useBlank`
	`503`	`+# useBlank / useRawBlank`
`504`	`504`
`505`	`505`	By default, it is a blank canvas with nothing drawn on it. You can customise the shaders using `onBeforeInit`.
`506`	`506`
`507`	`507`	Fragment shaders have `uTexture`,`uBackbuffer`,`uTime`,`uPointer` and `uResolution` as default uniforms.
	`508`	+`useRawBlank` is more raw, default uniforms is only `uResolution`.
`508`	`509`
`509`	`510`	```tsx
`510`	`511`	`const [updateBlank, _, { output: blank, material }] = useBlank({`

`‎app/playground/Playground.tsx‎`

Lines changed: 44 additions & 50 deletions

Original file line number	Diff line number	Diff line change
`@@ -9,17 +9,7 @@ import {`
`9`	`9`	`useLoader,`
`10`	`10`	`createPortal,`
`11`	`11`	`} from "@react-three/fiber";`
`12`		`-import {`
`13`		`- useDoubleFBO,`
`14`		`- useSingleFBO,`
`15`		`- useFluid,`
`16`		`- useCoverTexture,`
`17`		`- useMotionBlur,`
`18`		`- useSimpleBlur,`
`19`		`- usePointer,`
`20`		`- useNoise,`
`21`		`- useCreateWobble3D,`
`22`		`-} from "@/packages/use-shader-fx/src";`
	`12`	`+import { useRawBlank } from "@/packages/use-shader-fx/src";`
`23`	`13`	`import { FxMaterial } from "./FxMaterial";`
`24`	`14`	`import { OrbitControls, useVideoTexture } from "@react-three/drei";`
`25`	`15`
`@@ -28,57 +18,61 @@ extend({ FxMaterial });`
`28`	`18`	`export const Playground = () => {`
`29`	`19`	`const { size, viewport, camera } = useThree();`
`30`	`20`
`31`		`- // /FT_Ch02-comp.mp4`
`32`		`- // http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4`
`33`		`- const funkun_mov = useVideoTexture("/FT_Ch02-comp.mp4", {`
`34`		`- width: 1280,`
`35`		`- height: 720,`
`36`		`- });`
`37`	`21`	`const [funkun] = useLoader(THREE.TextureLoader, ["/funkun.jpg"]);`
`38`	`22`
`39`		`- const [updateNoise,setNoise, { output: noise}] = useNoise({`
	`23`	`+ const [update,set, { output}] = useRawBlank({`
`40`	`24`	`size,`
`41`		`- dpr: 0.2,`
`42`		`- });`
`43`		`- setNoise({`
`44`		`- noiseOctaves: 1,`
`45`		`- fbmOctaves: 1,`
`46`		`- warpOctaves: 1,`
`47`		`- timeStrength: 1,`
`48`		`- scale: 2000,`
`49`		`- });`
`50`		`-`
`51`		`- const [updateWobble, wobble] = useCreateWobble3D({`
`52`		`- materialParameters: {`
`53`		`- color: "hotpink",`
`54`		`- // displacementMap: noise,`
`55`		`- // displacementScale: 2,`
	`25`	`+ dpr: 2,`
	`26`	`+ onBeforeInit: (param) => {`
	`27`	`+ Object.assign(param.uniforms, {`
	`28`	`+ uTexture: { value: funkun },`
	`29`	`+ uTime: { value: 0 },`
	`30`	`+ });`
	`31`	`+ param.fragmentShader = param.fragmentShader.replace(`
	`32`	`+ "#usf <uniforms>",`
	`33`	+ `
	`34`	`+ uniform sampler2D uTexture;`
	`35`	`+ uniform float uTime;`
	`36`	+ `
	`37`	`+ );`
	`38`	`+ param.fragmentShader = param.fragmentShader.replace(`
	`39`	`+ "#usf <main>",`
	`40`	+ `
	`41`	`+ vec2 uv = vUv;`
	`42`	`+ vec2 perDivSize = vec2(20.) / uResolution;`
	`43`	`+ vec4 outColor = vec4(`
	`44`	`+ texture2D(uTexture, uv + perDivSize * vec2(-1.0, -1.0)) +`
	`45`	`+ texture2D(uTexture, uv + perDivSize * vec2(0.0, -1.0)) +`
	`46`	`+ texture2D(uTexture, uv + perDivSize * vec2(1.0, -1.0)) +`
	`47`	`+ texture2D(uTexture, uv + perDivSize * vec2(-1.0, 0.0)) +`
	`48`	`+ texture2D(uTexture, uv + perDivSize * vec2(0.0, 0.0)) +`
	`49`	`+ texture2D(uTexture, uv + perDivSize * vec2(1.0, 0.0)) +`
	`50`	`+ texture2D(uTexture, uv + perDivSize * vec2(-1.0, 1.0)) +`
	`51`	`+ texture2D(uTexture, uv + perDivSize * vec2(0.0, 1.0)) +`
	`52`	`+ texture2D(uTexture, uv + perDivSize * vec2(1.0, 1.0))`
	`53`	`+ ) / 9.0;`
	`54`	`+ usf_FragColor = outColor;`
	`55`	`+ usf_FragColor.r += sin(uTime);`
	`56`	+ `
	`57`	`+ );`
`56`	`58`	`},`
`57`	`59`	`});`
`58`	`60`
`59`		`- updateWobble(null, {`
`60`		`- // wobbleStrength: 0.0,`
`61`		`- // colorMix: 0,`
`62`		`- });`
`63`		`-`
`64`	`61`	`useFrame((state) => {`
`65`		`- updateWobble(state);`
`66`		`- // updateNoise(state);`
	`62`	`+ update(`
	`63`	`+ state,`
	`64`	`+ { hofsehfgose: 2 },`
	`65`	`+ {`
	`66`	`+ uTime: state.clock.getElapsedTime(),`
	`67`	`+ }`
	`68`	`+ );`
`67`	`69`	`});`
`68`	`70`
`69`	`71`	`return (`
`70`	`72`	`<>`
`71`	`73`	`<mesh>`
`72`		`- <directionalLight`
`73`		`- color={"white"}`
`74`		`- position={[0.25, 2, 3]}`
`75`		`- intensity={2}`
`76`		`- />`
`77`		`- <ambientLight intensity={1} />`
`78`		`- <primitive object={wobble.mesh} />`
`79`		`- {/* <icosahedronGeometry args={[2, 20]} />`
`80`		`- <meshPhysicalMaterial color={"hotpink"} displacementMap={noise} /> */}`
`81`		`- <OrbitControls />`
	`74`	`+ <planeGeometry args={[2, 2]} />`
	`75`	`+ <fxMaterial u_fx={output} key={FxMaterial.key} />`
`82`	`76`	`</mesh>`
`83`	`77`	`</>`
`84`	`78`	`);`

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 df5cb43

File tree

22 files changed

22 files changed

`‎README.md‎`

`‎app/playground/Playground.tsx‎`

0 commit comments