I'm trying to implement this Water Shader in my project but the water doesn't show up. I get no errors in the console only a warning:
React Hook useMemo has a missing dependency: 'gl.encoding'. Either include it or remove the dependency array
I've tried removing it but no luck. I'm not exactly sure what this might mean, at first I thought the water wasn't appearing because of the texture I was loading in but this doesn't seem to be the case.
My code is here:
function Ocean() {
const ref = useRef()
const gl = useThree((state) => state.gl)
const waterNormals = useLoader(THREE.TextureLoader, 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/waternormals.jpg')
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping
const geom = useMemo(() => new THREE.PlaneGeometry(10000, 10000), [])
const config = useMemo(
() => ({
textureWidth: 512,
textureHeight: 512,
waterNormals,
sunDirection: new THREE.Vector3(),
sunColor: 0xFFF05D,
waterColor: 0x7F7F7F,
distortionScale: 3.7,
fog: false,
format: gl.encoding
}),
[waterNormals]
)
useFrame((state, delta) => (ref.current.material.uniforms.time.value += delta))
return <water ref={ref} args={[geom, config]} rotation-x={-Math.PI / 2} position={[0, 0, 0]} />
}And the code when calling it:
export default function App() {
return (
<Canvas camera={{ position: [0, 5, 100], fov: 55, near: 1, far: 20000 }}>
<pointLight position={[100, 100, 100]} />
<pointLight position={[-100, -100, -100]} />
<Suspense fallback={null}>
<Ocean />
<Box />
</Suspense>
<Sky scale={1000} sunPosition={[500, 150, -1000]} turbidity={0.1} />
<OrbitControls />
</Canvas>
)
}