src/data/world/waterConfig.ts

@@ -3,7 +3,9 @@ import type { Vector3Tuple } from "@/types/three/three";
 
 export interface WaterSurfaceConfig {
   position: Vector3Tuple;
+  rotation: Vector3Tuple;
   size: [number, number];
+  renderOrder: number;
 }
 
 export const WATER_SHADER_CONFIG = {
@@ -30,6 +32,8 @@ export const WATER_SHADER_CONFIG = {
 export const WATER_SURFACES: WaterSurfaceConfig[] = [
   {
     position: [62, TERRAIN_WATER_HEIGHT, -82],
+    rotation: [0, 0, 0],
     size: [75, 42],
+    renderOrder: 0,
   },
 ];

src/world/water/WaterSurface.tsx

@@ -10,6 +10,8 @@ import {
 
 export function WaterSurface({
   position,
+  renderOrder,
+  rotation,
   size,
 }: WaterSurfaceConfig): React.JSX.Element {
   const materialRef = useRef<THREE.ShaderMaterial>(null);
@@ -46,11 +48,16 @@ export function WaterSurface({
   });
 
   return (
-    <mesh position={position} rotation={[-Math.PI / 2, 0, 0]} renderOrder={1}>
+    <mesh
+      position={position}
+      rotation={[-Math.PI / 2 + rotation[0], rotation[1], rotation[2]]}
+      renderOrder={renderOrder}
+    >
       <planeGeometry args={size} />
       <shaderMaterial
         ref={materialRef}
         attach="material"
+        depthTest
         depthWrite={false}
         fragmentShader={WATER_FRAGMENT_SHADER}
         side={THREE.FrontSide}