React WebGL Fluid Simulation


> Высокопроизводительная библиотека для создания интерактивных fluid-симуляций в React-приложениях с использованием WebGL.

> Основано на проекте Pavel Dobryakov’s WebGL Fluid Simulation.

---

🚀 Установка

Высокопроизводительная библиотека для создания интерактивных fluid симуляций в React приложениях с использованием WebGL.

Установка

``bash
npm install react-webgl-fluid
`

Быстрый старт

`tsx
import React from 'react';
import { useFluidSimulation } from 'react-webgl-fluid';

function FluidCanvas() {
const { canvasRef } = useFluidSimulation({
BLOOM: true,
SUNRAYS: true,
COLORFUL: true,
});

return ;
}

export default FluidCanvas;
`

API

$3

Основной React хук для создания fluid симуляции.

`tsx
const {
canvasRef,
simulation,
splat,
randomSplats,
updateConfig,
start,
stop,
pause,
resume,
captureScreenshot,
} = useFluidSimulation(config, enableEventListeners);
`

#### Параметры

- config (optional): Объект конфигурации симуляции
- enableEventListeners (optional, default: true): Включить автоматическую обработку событий мыши и касаний

#### Возвращаемые значения

- canvasRef: React ref для canvas элемента
- simulation: Экземпляр FluidSimulation для прямого управления
- splat: Функция для создания всплеска в определенной точке
- randomSplats: Функция для создания случайных всплесков
- updateConfig: Функция для обновления конфигурации
- start/stop/pause/resume: Функции управления анимацией
- captureScreenshot: Функция для создания скриншота

$3

`tsx
interface SimulationConfig {
// 🎯 ОСНОВНЫЕ НАСТРОЙКИ ДЛЯ ВИХРЕЙ, РАЗМЕРА И СКОРОСТИ
CURL?: number; // Размер вихрей (0-50, больше = больше вихрей)
SPLAT_RADIUS?: number; // Размер начальной точки (0.01-1.0)
DENSITY_DISSIPATION?: number; // Скорость исчезновения дыма (0-1, меньше = дольше)
VELOCITY_DISSIPATION?: number; // Скорость распространения (0-1, меньше = быстрее)

// Разрешение и качество
SIM_RESOLUTION?: number; // Разрешение симуляции (32-256)
DYE_RESOLUTION?: number; // Разрешение красителя (128-1024)

// Физика
PRESSURE?: number; // Давление жидкости (0-1)
PRESSURE_ITERATIONS?: number; // Точность расчетов (5-50)
SPLAT_FORCE?: number; // Сила всплеска (1000-10000)

// Визуальные эффекты
SHADING?: boolean; // Затенение
COLORFUL?: boolean; // Цветные всплески
COLOR_UPDATE_SPEED?: number; // Скорость смены цветов (1-20)
BLOOM?: boolean; // Эффект свечения
SUNRAYS?: boolean; // Эффект солнечных лучей
TRANSPARENT?: boolean; // Прозрачный фон

}
`

$3

| Параметр | Что контролирует | Диапазон | Эффект |
| ---------------------- | ------------------------------ | ---------- | ------------------------- |
| CURL | Размер вихрей | 0-50 | Больше = крупнее вихри |
| SPLAT_RADIUS | Размер начальной точки | 0.01-1.0 | Больше = крупнее всплеск |
| DENSITY_DISSIPATION | Скорость исчезновения дыма | 0-1 | Меньше = дольше держится |
| VELOCITY_DISSIPATION | Скорость распространения | 0-1 | Меньше = быстрее движется |
| SPLAT_FORCE | Сила всплеска | 1000-10000 | Больше = сильнее толчок |

Примеры использования

$3

`tsx
import { useFluidSimulation } from 'react-webgl-fluid';

function BasicFluid() {
const { canvasRef } = useFluidSimulation();

return ;
}
`

$3

`tsx
function CustomFluid() {
const { canvasRef, updateConfig } = useFluidSimulation({
BLOOM: true,
BLOOM_INTENSITY: 0.5,
SUNRAYS: false,
COLORFUL: true,
SPLAT_RADIUS: 0.3,
});

const handleConfigChange = () => {
updateConfig({
BLOOM_INTENSITY: 1.0,
CURL: 40,
});
};

return (


`tsx
function InteractiveFluid() {
const { canvasRef, splat, randomSplats } = useFluidSimulation();

const handleClick = (e: React.MouseEvent) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = 1 - (e.clientY - rect.top) / rect.height;

splat(x, y, 1000, 1000, { r: 1, g: 0, b: 0 });
};

return (


`tsx
function ControlledFluid() {
const { canvasRef, start, stop, pause, resume, captureScreenshot } = useFluidSimulation();

const handleScreenshot = () => {
const dataUrl = captureScreenshot();
if (dataUrl) {
const link = document.createElement('a');
link.download = 'fluid-screenshot.png';
link.href = dataUrl;
link.click();
}
};

return (


`tsx
function HoverFluid() {
const { canvasRef, updateConfig } = useFluidSimulation({
SIM_RESOLUTION: 128,
DYE_RESOLUTION: 512,
DENSITY_DISSIPATION: 0.97,
VELOCITY_DISSIPATION: 0.98,
PRESSURE_ITERATIONS: 10,
CURL: 5,
SPLAT_RADIUS: 0.2,
SHADING: true,
COLORFUL: true,
BACK_COLOR: { r: 15, g: 15, b: 15 },
BLOOM: false, // Отключить для лучшей производительности
TRIGGER_ON_HOVER: true, // Включить hover эффект
HOVER_FORCE_MULTIPLIER: 1, // Базовый множитель (настраивайте от 0.1 до 10)
});

const toggleHover = (enabled: boolean) => {
updateConfig({ TRIGGER_ON_HOVER: enabled });
};

return (


`tsx
// Крупные медленные вихри
function LargeVorticesFluid() {
const { canvasRef } = useFluidSimulation({
CURL: 30, // Крупные вихри
SPLAT_RADIUS: 0.5, // Большая начальная точка
DENSITY_DISSIPATION: 0.99, // Дым держится очень долго
VELOCITY_DISSIPATION: 0.95, // Медленное затухание движения
SPLAT_FORCE: 3000, // Умеренная сила
});

return ;
}

// Мелкие быстрые вихри
function SmallFastFluid() {
const { canvasRef } = useFluidSimulation({
CURL: 5, // Мелкие вихри
SPLAT_RADIUS: 0.1, // Маленькая точка
DENSITY_DISSIPATION: 0.9, // Быстро исчезает
VELOCITY_DISSIPATION: 0.8, // Быстро затухает
SPLAT_FORCE: 8000, // Сильный толчок
});

return ;
}
`

$3

`tsx
function CustomForceFluid() {
const { canvasRef } = useFluidSimulation({
TRIGGER_ON_HOVER: true,
HOVER_FORCE_MULTIPLIER: 3, // Слабый hover эффект
CLICK_FORCE_MULTIPLIER: 2, // Усиленные клики
TOUCH_FORCE_MULTIPLIER: 10, // Очень сильные касания
});

return ;
}
`

$3

`tsx
function ManualFluid() {
const { canvasRef, splat } = useFluidSimulation({}, false);

// Ваша собственная логика обработки событий
const handleMouseMove = (e: React.MouseEvent) => {
// Кастомная логика
};

return ;
}
`

Производительность

$3

`tsx
{
SIM_RESOLUTION: 128, // Средняя детализация
DYE_RESOLUTION: 512, // Экономия памяти
BLOOM: false, // Отключить для производительности
SUNRAYS: false, // Отключить для производительности
}
`

$3

- Уменьшите SIM_RESOLUTION и DYE_RESOLUTION на слабых устройствах
- Отключите BLOOM и SUNRAYS для лучшей производительности
- Используйте PRESSURE_ITERATIONS: 10-15` вместо 20 для ускорения

Совместимость

- React 16.8+
- Современные браузеры с поддержкой WebGL
- TypeScript поддержка из коробки

Лицензия

MIT

Благодарности

Основано на WebGL Fluid Simulation от Pavel Dobryakov.