プロシージャルな流体エフェクトを OpenSiv3D で実装する【Curl-Noise】

今回は、華やかな流体のような効果を生み出すのに便利な技術「Curl-Noise」のOpenSiv3Dでの実装について説明します。
...と思ったのですが、時間の都合上、詳しい解説は参考リンクに譲り、ここでは遊んでみた結果の記録を貼り付けます。

2D

Main.cpp

# include <Siv3D.hpp> // OpenSiv3D v0.6.3


struct Particle
{
	Vec2 pos;

	Vec2 velocity;

	double startTime;

	double radius;

	double weight;

	double offset;
};

void Main()
{
	Window::Resize(1280, 720);

	// 使用する画像
	const Image image{ U"example/siv3d-kun.png" };

	// テクスチャ
	const Texture texture{ image };
	// アルファ値 1 以上の領域を Polygon 化
	const Polygon polygon = image.alphaToPolygon(1, AllowHoles::No);

	// Polygon 単純化時の基準距離（ピクセル）
	double maxDistance = 4.0;

	// 単純化した Polygon
	Polygon simplifiedPolygon = polygon.simplified(maxDistance);

	simplifiedPolygon.moveBy(100, 100);

	PerlinNoise noise;




	Array<Particle> particles;

	
	const double lifeTime = 2.0;



	const Size sceneSize{ Scene::Size() };
	RenderTexture gaussianA1{ sceneSize }, gaussianB1{ sceneSize };
	RenderTexture gaussianA4{ sceneSize / 4 }, gaussianB4{ sceneSize / 4 };
	RenderTexture gaussianA8{ sceneSize / 8 }, gaussianB8{ sceneSize / 8 };

	double a1 = 1.0, a4 = 1.0, a8 = 1.0;

	auto drawFunction = [&]() {

		

		for (const auto& p : particles)
		{
			const double t = (Scene::Time() - p.startTime) / lifeTime;
			const double alpha = Sin(t * Math::Pi) * Sin(t * Math::Pi);
			const double wave = (Sin((t + p.offset) * Math::TwoPi * 5)) * 1.0;

			Circle(p.pos, p.radius).draw(ColorF(1.0, 0.5, 0.1, alpha + alpha * wave));
		}};

	while (System::Update())
	{

		if (MouseL.down())
		{
			Array<Particle> newParticles(1000);

			const double direction = Random() * Math::TwoPi;

			for (auto& particle : newParticles)
			{
				particle.pos = Cursor::Pos() + RandomVec2(Circle(30.0));

				particle.velocity = (Vec2::Right().rotated(direction) + RandomVec2(Circle(0.2))) * 10.0; 

				particle.startTime = Scene::Time();

				particle.radius = Random(1.0, 3.0);

				particle.weight = Random();

				particle.offset = Random();
			}

			std::copy(newParticles.begin(), newParticles.end(), std::back_inserter(particles));
		}



		Erase_if(particles, [](const Particle& p) {return p.startTime + lifeTime < Scene::Time(); });

		{
			const double delta = 0.1;

			for (auto& particle : particles)
			{
				const Vec2& p = particle.pos;
				const double x0 = noise.normalizedOctave2D0_1(p / 128.0, 1, 0.0);
				const double x1 = noise.normalizedOctave2D0_1((p + Vec2(delta, 0.0)) / 128.0, 1, 0.0);
				const double y0 = noise.normalizedOctave2D0_1(p / 128.0, 1, 0.0);
				const double y1 = noise.normalizedOctave2D0_1((p + Vec2(0.0, delta)) / 128.0, 1, 0.0);
				const double distance = (1.0 - 1.0 / (Max(1.0, Pow(Geometry2D::Distance(p, simplifiedPolygon), 1.0))));
				const Vec2 curl = distance * Vec2((y1 - y0) / delta, -(x1 - x0) / delta);
				const Vec2 add = curl * Scene::DeltaTime() * 50000;

				particle.velocity += -10 * (1.0 - particle.weight * 0.5) * particle.velocity * Scene::DeltaTime();

				particle.pos += particle.velocity * distance + add * particle.velocity * 0.5 + add * 0.5;
			}
		}

		drawFunction();

		texture.draw(100, 100);

		{
			// ガウスぼかし用テクスチャにもう一度シーンを描く
			{
				const ScopedRenderTarget2D target{ gaussianA1.clear(ColorF{ 0.0 }) };
				const ScopedRenderStates2D blend{ BlendState::Additive };

				drawFunction();
			}

			// オリジナルサイズのガウスぼかし (A1)
			// A1 を 1/4 サイズにしてガウスぼかし (A4)
			// A4 を 1/2 サイズにしてガウスぼかし (A8)
			Shader::GaussianBlur(gaussianA1, gaussianB1, gaussianA1);
			Shader::Downsample(gaussianA1, gaussianA4);
			Shader::GaussianBlur(gaussianA4, gaussianB4, gaussianA4);
			Shader::Downsample(gaussianA4, gaussianA8);
			Shader::GaussianBlur(gaussianA8, gaussianB8, gaussianA8);
		}

		{
			const ScopedRenderStates2D blend{ BlendState::Additive };

			if (a1)
			{
				gaussianA1.resized(sceneSize).draw(ColorF{ a1 });
			}

			if (a4)
			{
				gaussianA4.resized(sceneSize).draw(ColorF{ a4 });
			}

			if (a8)
			{
				gaussianA8.resized(sceneSize).draw(ColorF{ a8 });
			}
		}


	}
}

3D

Main.cpp

# include <Siv3D.hpp>


struct Particle
{
	Vec3 pos;

	Vec3 velocity;

	double startTime;

	double radius;

	double weight;

	double offset;

	double lifeTime;
};

Vec3 GetVec3Noise(const Vec3& p, const PerlinNoise& noise)
{	
	return Vec3(noise.normalizedOctave3D(p / 128.0, 1, 0.0), noise.normalizedOctave3D(p / 128.0 + Vec3(100, 100, 100), 1, 0.0), noise.normalizedOctave3D(p / 128.0 + Vec3(-100, -100, -100), 1, 0.0));
}


void Main()
{
	Window::Resize(1280, 720);
	Scene::SetResizeMode(ResizeMode::Keep);

	const PixelShader psBright = HLSL{ U"example/shader/hlsl/extract_bright_linear.hlsl", U"PS" }
	| GLSL{ U"example/shader/glsl/extract_bright_linear.frag", {{U"PSConstants2D", 0}} };

	if (not psBright)
	{
		return;
	}

	const ColorF backgroundColor = ColorF{ 0.02 }.removeSRGBCurve();
	const MSRenderTexture renderTexture{ Scene::Size(), TextureFormat::R16G16B16A16_Float, HasDepth::Yes };
	const RenderTexture gaussianA4{ renderTexture.size() / 4 }, gaussianB4{ renderTexture.size() / 4 };
	const RenderTexture gaussianA8{ renderTexture.size() / 8 }, gaussianB8{ renderTexture.size() / 8 };
	const RenderTexture gaussianA16{ renderTexture.size() / 16 }, gaussianB16{ renderTexture.size() / 16 };
	DebugCamera3D camera{ renderTexture.size(), 30_deg, Vec3{ 10, 16, -32 } * 50 };

	bool glowEffect = true;


	Array<Particle> particles;


	PerlinNoise noise;



	while (System::Update())
	{
		camera.update(2.0);

		if (MouseL.down())
		{
			Array<Particle> newParticles(1000);

			const Vec3 direction = RandomVec3(1.0);

			for (auto& particle : newParticles)
			{
				particle.pos = RandomVec3(Sphere(10.0));

				particle.velocity = (direction + RandomVec3(Sphere(0.3))) * 20.0;

				particle.startTime = Scene::Time();

				particle.radius = Random(1.0, 5.0);

				particle.weight = Random();

				particle.offset = Random();

				particle.lifeTime = 2.0;
			}

			std::copy(newParticles.begin(), newParticles.end(), std::back_inserter(particles));
		}

		Erase_if(particles, [](const Particle& p) {return p.startTime + p.lifeTime < Scene::Time(); });

		{
			const double delta = 0.1;

			for (auto& particle : particles)
			{
				const Vec3& p = particle.pos;
				const Vec3 x0 = GetVec3Noise((p + Vec3(-delta, 0.0, 0.0)), noise);
				const Vec3 x1 = GetVec3Noise((p + Vec3(delta, 0.0, 0.0)) , noise);
				const Vec3 y0 = GetVec3Noise((p + Vec3(0.0, -delta, 0.0)), noise);
				const Vec3 y1 = GetVec3Noise((p + Vec3(0.0, delta, 0.0)) , noise);
				const Vec3 z0 = GetVec3Noise((p + Vec3(0.0, 0.0, -delta)), noise);
				const Vec3 z1 = GetVec3Noise((p + Vec3(0.0, 0.0, delta)) , noise);
				const Vec3 dx = x1 - x0;
				const Vec3 dy = y1 - y0;
				const Vec3 dz = z1 - z0;

				const Vec3 curl = Vec3(dy.z-dz.y, dz.x-dx.z, dx.y-dy.x)/(2.0 * delta);
				const Vec3 add = curl * Scene::DeltaTime() * 20000;

				particle.velocity += -10 * (1.0 - particle.weight * 0.5) * particle.velocity * Scene::DeltaTime();

				particle.pos +=  particle.velocity  + add * particle.velocity * 0.5 + add * 0.3;
			}
		}

		// 3D
		{
			Graphics3D::SetCameraTransform(camera);

			const ScopedRenderTarget3D target{ renderTexture.clear(backgroundColor) };

			PhongMaterial phong;
			phong.amibientColor = ColorF{ 1.0 };
			phong.diffuseColor = ColorF{ 0.0 };


			for (const auto& p : particles)
			{
				const double t = (Scene::Time() - p.startTime) / p.lifeTime;
				const double alpha = Sin(t * Math::Pi) * Sin(t * Math::Pi);
				const double wave = (Sin((t + p.offset) * Math::TwoPi * 5)) * 1.0;

				phong.emissionColor = ColorF(0.1, 0.5, 1.0).removeSRGBCurve() * ( alpha + alpha * wave) * 10.0;
				Sphere{ p.pos, p.radius }
				.draw(phong);
			}

		}

		// RenderTexture を 2D シーンに描画
		{
			Graphics3D::Flush();
			renderTexture.resolve();
			Shader::LinearToScreen(renderTexture);
		}

		if (glowEffect)
		{
			// 高輝度部分を抽出
			{
				const ScopedCustomShader2D shader{ psBright };
				const ScopedRenderTarget2D target{ gaussianA4.clear(ColorF{0.0}) };
				renderTexture.scaled(0.25).draw();
			}

			// 高輝度部分のぼかしテクスチャの生成
			{
				Shader::GaussianBlur(gaussianA4, gaussianB4, gaussianA4);
				Shader::Downsample(gaussianA4, gaussianA8);
				Shader::GaussianBlur(gaussianA8, gaussianB8, gaussianA8);
				Shader::GaussianBlur(gaussianA8, gaussianB8, gaussianA8);
				Shader::Downsample(gaussianA8, gaussianA16);
				Shader::GaussianBlur(gaussianA16, gaussianB16, gaussianA16);
				Shader::GaussianBlur(gaussianA16, gaussianB16, gaussianA16);
				Shader::GaussianBlur(gaussianA16, gaussianB16, gaussianA16);
			}

			// Glow エフェクト
			{
				const ScopedRenderStates2D blend{ BlendState::AdditiveRGB };

				{
					const ScopedRenderTarget2D target{ gaussianA8 };
					gaussianA16.scaled(2.0).draw(ColorF{ 3.0 });
				}

				{
					const ScopedRenderTarget2D target{ gaussianA4 };
					gaussianA8.scaled(2.0).draw(ColorF{ 1.0 });
				}

				gaussianA4.resized(Scene::Size()).draw(ColorF{ 1.0 });
			}
		}

		SimpleGUI::CheckBox(glowEffect, U"Glow", Vec2{ 20,20 });
		
	}

}

補足

Curl-Noiseは、2007年のSIGGRAPHでブリティッシュ・コロンビア大学のRobert Bridsonらが提案した、流体的な効果を簡単に発生させる方法です。https://www.cs.ubc.ca/~rbridson/docs/bridson-siggraph2007-curlnoise.pdf

参考サイト
https://prideout.net/blog/old/blog/index.html@p=63.html

3次元のパーリンノイズを持つポテンシャル場を用いて、3次元空間のベクトル場を生成する。その後、そのベクトル場に回転演算子を適用することにより、流体の流れを定義する。
ここで、ポテンシャル場からベクトル場を生成すると、そのベクトル場の発散はゼロになります。つまり、より自然界の流体の挙動に近い場を作ることができるのです。