Interactive Water Surface

A React Three Fiber component for water surface with realistic reflections, with additional interactive FX.

Installation

1. Make sure you have all dependencies installed first:

npm i three @react-three/fiber @react-three/drei @funtech-inc/use-shader-fx @types/three

2. Then copy/download the /WaterSurface directory to your project. Could be done by clone the repo.

WaterSurface
|_InteractiveFX
|_Water
|_...

3. Copy/Download assets files in /public to your /public.

/public
|_water
|_fx

Usage

Import components from the directory just copied above. There are 2 type of components: WaterSurface & InteractiveFX. All of them are listed below:

WaterSurface WaterSurfaceSimple WaterSurfaceComplex InteractiveFX RippleFX FluidFX

WaterSurface

WaterSurface type component will be the water shader plane that reflects your scene and apply distortion effects.

⚠️ The implementation is Planar Reflection, therefore it could be expensive in medium and complex scene.

<WaterSurfaceSimple />

WaterSurfaceSimple

Simple water surface using 1 normal map distortion, imported from public/water/simple/waternormals.jpeg.

This is the three.js Water implementation.

type Props = {
  width?: number;
  length?: number;
  dimensions?: number;
  waterColor?: number;
  position?: [number, number, number];
  distortionScale?: number;
  fxDistortionFactor?: number;
  fxDisplayColorAlpha?: number;
  fxMixColor?: number | string;
  children?: React.ReactNode;
};

WaterSurfaceComplex

Complex Water Surface using 2 normal map distortion, imported from public/water/complex/Water_1_M_Normal.jpg & public/water/complex/Water_2_M_Normal.jpg.

This is the three.js Water2 implementation.

type Props = {
  children?: React.ReactNode;
  position?: [number, number, number];
  width?: number;
  length?: number;
  color?: number | string;
  scale?: number;
  flowDirection?: Vector2 | [number, number];
  flowSpeed?: number;
  dimensions?: number;
  reflectivity?: number;
  fxDistortionFactor?: number;
  fxDisplayColorAlpha?: number;
};

(Will have support for refraction in near future!)

InteractiveFX

IntertiveFX type component will be the additional effects apply on the WaterSurface type. This can be added as children component of the WaterSurface component.

<WaterSurfaceComplex>
  <FluidFX />
</WaterSurfaceComplex>

RippleFX

Cheap ripple effect using image texture as distortion on water surface.

An implementation of @funtech-inc/use-shader-fx useRipple hook.

type Props = {
  frequency?: number;
  rotation?: number;
  fadeout_speed?: number;
	scale?: number;
	alpha?: number;
};

Make sure you have smoke.png at public/fx/smoke.png first before using this.

FluidFX

Fluid simulation effect with customizable colors that distort water surface reflection.

An implementation of @funtech-inc/use-shader-fx useFluid hook.

type Props = {
	densityDissipation?: number;
	velocityDissipation?: number;
	velocityAcceleration?: number;
	pressureDissipation?: number;
	splatRadius?: number;
	curlStrength?: number;
	pressureIterations?: number;
	fluidColor?: (velocity: Vector2) => Vector3;
};