{"id":13995825,"url":"https://github.com/nhtoby311/WaterSurface","last_synced_at":"2025-07-22T22:32:49.657Z","repository":{"id":226433633,"uuid":"767486439","full_name":"nhtoby311/WaterSurface","owner":"nhtoby311","description":"🌊 Interactive Water Surface shader component for React Three Fiber","archived":false,"fork":false,"pushed_at":"2024-04-06T09:43:28.000Z","size":8445,"stargazers_count":72,"open_issues_count":2,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-10T14:21:22.719Z","etag":null,"topics":["react-three-fiber","webgl"],"latest_commit_sha":null,"homepage":"https://water-surface.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nhtoby311.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-05T11:34:04.000Z","updated_at":"2024-08-05T16:09:23.000Z","dependencies_parsed_at":"2024-04-06T10:39:41.286Z","dependency_job_id":null,"html_url":"https://github.com/nhtoby311/WaterSurface","commit_stats":null,"previous_names":["nhtoby311/watersurface"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhtoby311%2FWaterSurface","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhtoby311%2FWaterSurface/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhtoby311%2FWaterSurface/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhtoby311%2FWaterSurface/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nhtoby311","download_url":"https://codeload.github.com/nhtoby311/WaterSurface/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227190419,"owners_count":17745261,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-three-fiber","webgl"],"created_at":"2024-08-09T14:03:36.097Z","updated_at":"2024-11-29T18:31:09.050Z","avatar_url":"https://github.com/nhtoby311.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Interactive Water Surface\n\nA React Three Fiber component for water surface with realistic reflections, with additional interactive FX.\n\n![image](https://github.com/nhtoby311/WaterSurface/assets/52330522/b65069fc-242d-4e2d-845d-83ede4d04a37)\n\n\n# Installation\n\n1. Make sure you have all dependencies installed first:\n\n```bash\nnpm i three @react-three/fiber @react-three/drei @funtech-inc/use-shader-fx @types/three\n```\n\n2. Then copy/download the `/WaterSurface` directory to your project. Could be done by clone the repo.\n\n```\nWaterSurface\n|_InteractiveFX\n|_Water\n|_...\n```\n\n3. Copy/Download assets files in `/public` to your `/public`.\n\n```\n/public\n|_water\n|_fx\n```\n\n# Usage\n\nImport components from the directory just copied above. There are 2 type of components: WaterSurface \u0026 InteractiveFX. All of them are listed below:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd valign=\"top\"\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#watersurface\"\u003eWaterSurface\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#watersurfacesimple\"\u003eWaterSurfaceSimple\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#watersurfacecomplex\"\u003eWaterSurfaceComplex\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cli\u003e\u003ca href=\"#InteractiveFX\"\u003eInteractiveFX\u003c/a\u003e\u003c/li\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#ripplefx\"\u003eRippleFX\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#fluidfx\"\u003eFluidFX\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/ul\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## WaterSurface\n\nWaterSurface type component will be the water shader plane that reflects your scene and apply distortion effects.\n\n⚠️ The implementation is Planar Reflection, therefore it could be expensive in medium and complex scene. \n\n```jsx\n\u003cWaterSurfaceSimple /\u003e\n```\n\n### WaterSurfaceSimple\n\nSimple water surface using 1 normal map distortion, imported from `public/water/simple/waternormals.jpeg`. \n\nThis is the three.js [Water](https://github.com/mrdoob/three.js/blob/66f7aa81379d0d3b31b7e58c9ecc42e08a16d724/examples/jsm/objects/Water.js) implementation.\n\n```tsx\ntype Props = {\n  width?: number;\n  length?: number;\n  dimensions?: number;\n  waterColor?: number;\n  position?: [number, number, number];\n  distortionScale?: number;\n  fxDistortionFactor?: number;\n  fxDisplayColorAlpha?: number;\n  fxMixColor?: number | string;\n  children?: React.ReactNode;\n};\n```\n\n### WaterSurfaceComplex\n\nComplex Water Surface using 2 normal map distortion, imported from `public/water/complex/Water_1_M_Normal.jpg` \u0026 `public/water/complex/Water_2_M_Normal.jpg`. \n\nThis is the three.js [Water2](https://github.com/mrdoob/three.js/blob/66f7aa81379d0d3b31b7e58c9ecc42e08a16d724/examples/jsm/objects/Water2.js) implementation.\n\n```tsx\ntype Props = {\n  children?: React.ReactNode;\n  position?: [number, number, number];\n  width?: number;\n  length?: number;\n  color?: number | string;\n  scale?: number;\n  flowDirection?: Vector2 | [number, number];\n  flowSpeed?: number;\n  dimensions?: number;\n  reflectivity?: number;\n  fxDistortionFactor?: number;\n  fxDisplayColorAlpha?: number;\n};\n```\n\n(Will have support for refraction in near future!)\n\n## InteractiveFX\n\nIntertiveFX type component will be the additional effects apply on the WaterSurface type. This can be added as children component of the WaterSurface component. \n\n```jsx\n\u003cWaterSurfaceComplex\u003e\n  \u003cFluidFX /\u003e\n\u003c/WaterSurfaceComplex\u003e\n```\n\n### RippleFX\n\nCheap ripple effect using image texture as distortion on water surface.\n\nAn implementation of @funtech-inc/use-shader-fx [useRipple](https://use-shader-fx-stories.vercel.app/?path=/docs/interactions-useripple--docs) hook.\n\n```tsx\ntype Props = {\n  frequency?: number;\n  rotation?: number;\n  fadeout_speed?: number;\n\tscale?: number;\n\talpha?: number;\n};\n\n```\n\nMake sure you have `smoke.png` at `public/fx/smoke.png` first before using this.\n\n### FluidFX\n\nFluid simulation effect with customizable colors that distort water surface reflection.\n\nAn implementation of @funtech-inc/use-shader-fx [useFluid](https://use-shader-fx-stories.vercel.app/?path=/docs/interactions-usefluid--docs) hook.\n\n```tsx\ntype Props = {\n\tdensityDissipation?: number;\n\tvelocityDissipation?: number;\n\tvelocityAcceleration?: number;\n\tpressureDissipation?: number;\n\tsplatRadius?: number;\n\tcurlStrength?: number;\n\tpressureIterations?: number;\n\tfluidColor?: (velocity: Vector2) =\u003e Vector3;\n};\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhtoby311%2FWaterSurface","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnhtoby311%2FWaterSurface","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhtoby311%2FWaterSurface/lists"}