3Dで水を表現したい

Question

3Dで水を表現したいです
海とかなら塊で表現できると思いますが
ちゃんと現実の物理として表示するにはどうしたらいいですか？
事象の名前とかは出せますが
ちゃんと波紋とか飛沫とか波がぶつかり合ってちゃんと上に逃げたりひろがったりみたいなのとか表現したいです
使える手法とかは調べれば出るとは思いますが複合的にやるものなんでしょうか？
ツイッターでみると粒上でやってる人見たことありますがなにでやるのがいいんでしょうか？
完全に確立されたものではないんですか？

Comments

[fiveHundred]

用途は何ですか？
というのも、全て計算するには非常に負荷が大きく、例えばゲームの場合、本来のゲーム処理に弊害が出てしまうため、それっぽく動かすだけにしておく、というのが主流だからです。

Answer 1

流体シミュレーションは普通はライブラリにまかせることが多いでしょう。
自力でやるのであればナビエ–ストークス方程式を利用することです。
なお完全な物理シミュレーションは負荷が高いのでスパコンの世界になります。
個人が趣味でやるレベルであればある程度簡略化して疑似処理でやるしかないと思います。

参考

「ライブラリになしのjavascriptで流体シミュレーション書いてよチャッピー」とお願いしたらサンプルを書いてくれました。
マウスクリックで染料投入、マウスムーブで流体シミュレーションです。参考までに

<canvas id="canvas" width="600" height="600"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const N = 100;
const SIZE = N * N;
const dt = 0.1;
const viscosity = 0.00001;
const pressureIterations = 30;
const u = new Float32Array(SIZE);
const v = new Float32Array(SIZE);
const uPrev = new Float32Array(SIZE);
const vPrev = new Float32Array(SIZE);
const pressure = new Float32Array(SIZE);
const pressurePrev = new Float32Array(SIZE);
const divergence = new Float32Array(SIZE);
const density = new Float32Array(SIZE);
const densityPrev = new Float32Array(SIZE);
function IX(x, y) {
    return x + y * N;
}
function setBoundary(field, type) {
    for (let i = 1; i < N - 1; i++) {
        field[IX(i, 0)] =
            type === 2
                ? -field[IX(i, 1)]
                : field[IX(i, 1)];
        field[IX(i, N - 1)] =
            type === 2 
                ? -field[IX(i, N - 2)]
                : field[IX(i, N - 2)];
        field[IX(0, i)] =
            type === 1
                ? -field[IX(1, i)]
                : field[IX(1, i)];
        field[IX(N - 1, i)] =
            type === 1
                ? -field[IX(N - 2, i)]
                : field[IX(N - 2, i)];
    }
    field[IX(0, 0)] =
        0.5 * (
            field[IX(1, 0)] +
            field[IX(0, 1)]
        );
    field[IX(0, N - 1)] =
        0.5 * (
            field[IX(1, N - 1)] +
            field[IX(0, N - 2)]
        );
    field[IX(N - 1, 0)] =
        0.5 * (
            field[IX(N - 2, 0)] +
            field[IX(N - 1, 1)]
        );
    field[IX(N - 1, N - 1)] =
        0.5 * (
            field[IX(N - 2, N - 1)] +
            field[IX(N - 1, N - 2)]
        );
}
function diffuse(field, source, diff, dt, boundaryType) {
    const a = dt * diff * (N - 2) * (N - 2);
    for (let k = 0; k < 20; k++) {
        for (let y = 1; y < N - 1; y++) {
            for (let x = 1; x < N - 1; x++) {
                const i = IX(x, y);
                field[i] =
                    (
                        source[i] +
                        a * (
                            field[IX(x - 1, y)] +
                            field[IX(x + 1, y)] +
                            field[IX(x, y - 1)] +
                            field[IX(x, y + 1)]
                        )
                    )
                    /
                    (1 + 4 * a);
            }
        }
        setBoundary(field, boundaryType);
    }
}
function advect(
    field,
    source,
    uVelocity,
    vVelocity,
    dt,
    boundaryType
) {
    const dt0 = dt * (N - 2);
    for (let y = 1; y < N - 1; y++) {
        for (let x = 1; x < N - 1; x++) {
            const i = IX(x, y);
            let px = x - dt0 * uVelocity[i];
            let py = y - dt0 * vVelocity[i];
            if (px < 0.5) px = 0.5;
            if (px > N - 1.5) px = N - 1.5;
            if (py < 0.5) py = 0.5;
            if (py > N - 1.5) py = N - 1.5;
            const x0 = Math.floor(px);
            const x1 = x0 + 1;
            const y0 = Math.floor(py);
            const y1 = y0 + 1;
            const sx = px - x0;
            const sy = py - y0;
            const i00 = IX(x0, y0);
            const i10 = IX(x1, y0);
            const i01 = IX(x0, y1);
            const i11 = IX(x1, y1);
            field[i] =
                (1 - sy) *
                (
                    (1 - sx) * source[i00] +
                    sx * source[i10]
                )
                +
                sy *
                (
                    (1 - sx) * source[i01] +
                    sx * source[i11]
                );
        }
    }
    setBoundary(field, boundaryType);
}
function project(u, v, pressure, divergence) {
    for (let y = 1; y < N - 1; y++) {
        for (let x = 1; x < N - 1; x++) {
            const i = IX(x, y);
            divergence[i] =
                -0.5 * (
                    u[IX(x + 1, y)] -
                    u[IX(x - 1, y)] +
                    v[IX(x, y + 1)] -
                    v[IX(x, y - 1)]
                ) / N;
            pressure[i] = 0;
        }
    }
    setBoundary(divergence, 0);
    setBoundary(pressure, 0);
    for (let k = 0; k < pressureIterations; k++) {
        for (let y = 1; y < N - 1; y++) {
            for (let x = 1; x < N - 1; x++) {
                const i = IX(x, y);
                pressure[i] =
                    (
                        divergence[i] +
                        pressure[IX(x - 1, y)] +
                        pressure[IX(x + 1, y)] +
                        pressure[IX(x, y - 1)] +
                        pressure[IX(x, y + 1)]
                    ) / 4;
            }
        }
        setBoundary(pressure, 0);
    }
    for (let y = 1; y < N - 1; y++) {
        for (let x = 1; x < N - 1; x++) {
            const i = IX(x, y);
            u[i] -=
                0.5 *
                N *
                (
                    pressure[IX(x + 1, y)] -
                    pressure[IX(x - 1, y)]
                );
            v[i] -=
                0.5 *
                N *
                (
                    pressure[IX(x, y + 1)] -
                    pressure[IX(x, y - 1)]
                );
        }
    }
    setBoundary(u, 1);
    setBoundary(v, 2);
}
function velocityStep() {
    uPrev.set(u);
    vPrev.set(v);
    diffuse(
        u,
        uPrev,
        viscosity,
        dt,
        1
    );
    diffuse(
        v,
        vPrev,
        viscosity,
        dt,
        2
    );
    project(
        u,
        v,
        pressure,
        divergence
    );
    uPrev.set(u);
    vPrev.set(v);
    advect(
        u,
        uPrev,
        uPrev,
        vPrev,
        dt,
        1
    );
    advect(
        v,
        vPrev,
        uPrev,
        vPrev,
        dt,
        2
    );
    project(
        u,
        v,
        pressure,
        divergence
    );
}
function densityStep() {
    densityPrev.set(density);
    diffuse(
        density,
        densityPrev,
        0.00001,
        dt,
        0
    );
    densityPrev.set(density);
    advect(
        density,
        densityPrev,
        u,
        v,
        dt,
        0
    );
}
let mouseX = 50;
let mouseY = 50;
let previousMouseX = 50;
let previousMouseY = 50;
let mouseDown = false;
canvas.addEventListener("mousemove", function(e) {
    const rect = canvas.getBoundingClientRect();
    mouseX =
        (e.clientX - rect.left)
        / rect.width
        * N;
    mouseY =
        (e.clientY - rect.top)
        / rect.height
        * N;
});
canvas.addEventListener("mousedown", function() {
    mouseDown = true;
});
canvas.addEventListener("mouseup", function() {
    mouseDown = false;
});
canvas.addEventListener("mouseleave", function() {
    mouseDown = false;
});
function addMouseForce() {
    const x = Math.floor(mouseX);
    const y = Math.floor(mouseY);
    if (
        x < 2 ||
        x >= N - 2 ||
        y < 2 ||
        y >= N - 2
    ) {
        return;
    }
    const dx = mouseX - previousMouseX;
    const dy = mouseY - previousMouseY;
    const radius = 4;
    for (let yy = -radius; yy <= radius; yy++) {
        for (let xx = -radius; xx <= radius; xx++) {
            const px = x + xx;
            const py = y + yy;
            if (
                px < 1 ||
                px >= N - 1 ||
                py < 1 ||
                py >= N - 1
            ) {
                continue;
            }
            const distance =
                Math.sqrt(xx * xx + yy * yy);
            if (distance > radius) {
                continue;
            }
            const strength =
                1 - distance / radius;
            const i = IX(px, py);
            u[i] += dx * 5 * strength;
            v[i] += dy * 5 * strength;
            if (mouseDown) {
                density[i] += 5 * strength;
            }
        }
    }
    previousMouseX = mouseX;
    previousMouseY = mouseY;
}
const image =
    ctx.createImageData(
        canvas.width,
        canvas.height
    );
function render() {
    const pixels = image.data;
    for (let py = 0; py < canvas.height; py++) {
        for (let px = 0; px < canvas.width; px++) {
            const x =
                Math.floor(
                    px / canvas.width * N
                );
            const y =
                Math.floor(
                    py / canvas.height * N
                );
            const d =
                Math.min(
                    255,
                    density[IX(x, y)] * 255
                );
            const index =
                (px + py * canvas.width) * 4;
            pixels[index] = d;
            pixels[index + 1] = d * 0.15;
            pixels[index + 2] = d * 0.15;
            pixels[index + 3] = 255;
        }
    }
    ctx.putImageData(image, 0, 0);
}
function update() {
    addMouseForce();
    velocityStep();
    densityStep();
    render();
    requestAnimationFrame(update);
}
update();
</script>