This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Sea Level (with WebGL)

webgl 18 math 1 flood 2

#####

Sea level + m
Go to San Francisco, New York, Mumbai, or Shanghai

Render sea level at different elevations

The `style` property of a WebGL tile layer accepts a `color` expression that can be used to modify pixel values before rendering. Here, RGB tiles representing elevation data are loaded and rendered so that values at or below sea level are blue, and values above sea level are transparent. The `color` expression operates on normalized pixel values ranging from 0 to 1. The `band` operator is used to select normalized values from a single band.

After converting the normalized RGB values to elevation, the `case` expression is used to pick colors to apply at a given elevation. Instead of using constant numeric values as the stops in the colors array, the `var` operator allows you to use a value that can be modified by your application. When the user drags the sea level slider, the `layer.updateStyleVariables()` function is called to update the `level` style variable with the value from the slider.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import TileLayer from 'ol/layer/WebGLTile.js';
    import {fromLonLat} from 'ol/proj.js';
    import ImageTile from 'ol/source/ImageTile.js';

    const key = 'Get your own API key at https://www.maptiler.com/cloud/';
    const attributions =
      '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
      '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';

    // band math operates on normalized values from 0-1
    // so we scale by 255 to align with the elevation formula
    // from https://cloud.maptiler.com/tiles/terrain-rgb-v2/
    const elevation = [
      '+',
      -10000,
      ['*', 0.1 * 255 * 256 * 256, ['band', 1]],
      ['*', 0.1 * 255 * 256, ['band', 2]],
      ['*', 0.1 * 255, ['band', 3]],
    ];

    const layer = new TileLayer({
      opacity: 0.6,
      source: new ImageTile({
        url:
          'https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.webp?key=' +
          key,
        tileSize: 512,
        maxZoom: 14,
      }),
      style: {
        variables: {
          level: 0,
        },
        color: [
          'case',
          // use the `level` style variable to determine the color
          ['<=', elevation, ['var', 'level']],
          [139, 212, 255, 1],
          [139, 212, 255, 0],
        ],
      },
    });

    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new ImageTile({
            url:
              'https://api.maptiler.com/maps/streets-v2/{z}/{x}/{y}.png?key=' + key,
            attributions: attributions,
            tileSize: 512,
            maxZoom: 22,
          }),
        }),
        layer,
      ],
      view: new View({
        center: fromLonLat([-122.3267, 37.8377]),
        zoom: 11,
      }),
    });

    const control = document.getElementById('level');
    const output = document.getElementById('output');
    control.addEventListener('input', function () {
      output.innerText = control.value;
      layer.updateStyleVariables({level: parseFloat(control.value)});
    });
    output.innerText = control.value;

    const locations = document.getElementsByClassName('location');
    for (let i = 0, ii = locations.length; i < ii; ++i) {
      locations[i].addEventListener('click', relocate);
    }

    function relocate(event) {
      const data = event.target.dataset;
      const view = map.getView();
      view.setCenter(fromLonLat(data.center.split(',').map(Number)));
      view.setZoom(Number(data.zoom));
    }

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Sea Level (with WebGL)</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          #level {
            display: inline-block;
            width: 150px;
            vertical-align: text-bottom;
          }

          a.location {
            cursor: pointer;
          }

          #map {
            background: #8bd4ff;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <label>
          Sea level
          <input id="level" type="range" min="0" max="100" value="1"/>
          +<span id="output"></span> m
        </label>
        <br>
        Go to
        <a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
        <a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
        <a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
        <a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "webgl-sea-level",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }