Ocean

Animated open sea for offshore scenes: six Gerstner swell components scaled by the significant wave height, wind chop and whitecaps in the per-pixel normals, a physical water material (IOR 1.333) with Fresnel, sun glints and environment reflections, and foam rings around legs, risers and piles (foam: [x, z, radius]). Slightly transparent looking down, so an underwater jacket reads through. Origin at mean sea level (y = 0); the polar LOD grid follows the camera and respects scene fog.

Installation

Copies environment/ocean.tsx and the shared lib/ into src/components/deck-twin/. Needs three, @react-three/fiber and @react-three/drei. See installation for the manual route.

Usage

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Stage } from './components/deck-twin/lib/stage'
import { Ocean } from './components/deck-twin/environment/ocean'

export default function Scene() {
  return (
    <Canvas shadows camera={{ position: [8, 5, 9], fov: 35 }}>
      <Stage>
        <Ocean />
      </Stage>
      <OrbitControls makeDefault />
    </Canvas>
  )
}

Props

P&ID

Elevation: the mean sea level (MSL) or LAT line marked with an inverted triangle and its elevation (EL +0.000), with wave lines below it; jacket and riser drawings dimension the air gap and water depth from it.

Layout plan convention (structural elevations, plot plans); metocean design basis

Not on P&IDs. Metocean data (significant wave height, wind speed) comes from the project design basis.

Metocean design basis fields and the props they set

Significant wave height (Hs)waveHeight

Wind speed (10 m)wind

For agents

Machine-readable entry with props, ranges, defaults and ports:

Or fetch /r/ocean.json, or copy a ready-made instruction:

Add the Deck Twin "Ocean" component to this project. Run `npx -y https://decktwin.com/cli/deck-twin-0.2.2.tgz add ocean` (it copies the file and the shared lib into src/components/deck-twin/), then `npx -y https://decktwin.com/cli/deck-twin-0.2.2.tgz info ocean` for its props, ranges and ports. Render <Ocean /> inside a React Three Fiber <Canvas shadows>, wrapped in <Stage> from src/components/deck-twin/lib/stage. Set props from my data (metres, NPS in inches, ASME class) and leave the rest at defaults. Install three, @react-three/fiber, @react-three/drei and @types/three if they're missing. Full guide: https://decktwin.com/skill/SKILL.md