Siv3D の 3D プログラムテクニック集

Siv3D Advent Calendar 2016 1 日目の記事です。
Siv3D August 2016 v2 で使える 3D プログラムのテクニックを 3 つ紹介します。

1. スカイスフィア

ゲームワールドでリアリティのある空を表現するには、Equirectangular 形式の 360° 天球画像を Sphere に貼り付けて描画するのが簡単です。

（▲ Equirectangular 形式の天球画像の例。配布元: http://freepanorama.blogspot.com/ ）
このような画像は RICOH THETA で撮影して自作することもできますし、フリーの画像も見つかります。

スカイスフィアはシーンのライトの影響を受けないように、個別に光源を設定できる Forward Rendering で描画します。プログラムは次のとおりです。

# include <Siv3D.hpp>

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

    // 空と地面の境界をぼかすためにフォグを設定（空の色を使うと良い）
    Graphics3D::SetFog(Fog::SquaredExponential(ColorF(0.97), 0.005));
    Graphics3D::SetAmbientLight(ColorF(0.77));

    // スカイスフィア用の球状の Mesh
    // 裏側から球を覗くので、カリングされないように flipNormals を true にする。
    const Mesh skyMesh(MeshData::Sphere(480, 24, true));

    // スカイスフィア用の Equirectangular 天球画像
    const Texture skyTexture(L"sky.jpg", TextureDesc::For3D);

    // 地面の Mesh と Texture
    const Texture terrainTexture(L"Example/Ground.jpg", TextureDesc::For3D);
    const Mesh terrainMesh(MeshData::Plane(1000, { 1600, 1600 }));

    while (System::Update())
    {
        Graphics3D::FreeCamera(0.02);

        terrainMesh.draw(terrainTexture);

        // 空の画像をオリジナルの色で表示するために光源をオフ。環境光を 100% に
        Graphics3D::SetLightForward(0, Light::None());
        Graphics3D::SetAmbientLightForward(ColorF(1.0));
        {
            // 空の端に到達しないよう、常にスフィアの中心にいるようにする
            const Vec3 pos = Graphics3D::GetCamera().pos;

            // スカイスフィアを描く
            skyMesh.translated(pos.x, 0, pos.z).drawForward(skyTexture);
        }
        Graphics3D::SetLightForward(0, Light::Default());
        Graphics3D::SetAmbientLightForward(ColorF(0.77));
    }
}

3D モデルやシャドウを配置するとリアリティが増します。

2. マウスカーソルで選択している 3D オブジェクトを調べる

3D 空間で物体を選択するするには、マウスの Ray と Box, Sphere, Plane, Disc, Triangle3D 等との交差判定を利用します。交差する物体が複数存在する場合は、最も交点が近いオブジェクトを選択します。

# include <Siv3D.hpp>

void Main()
{
    Window::Resize(1280, 720);
    Graphics::SetBackground(ColorF(0.4, 0.5, 0.6));
    Graphics3D::SetAmbientLight(ColorF(0.8));
    Graphics3D::SetAmbientLightForward(ColorF(1.0));
    Graphics3D::SetLightForward(0, Light::None());

    Array<Sphere> spheres;

    for (size_t i = 0; i < 80; ++i)
    {
        spheres.push_back(Sphere(RandomVec3({ -8, 8 }, { 0.5, 0.5 }, { -8, 8 }), 0.5));
    }

    while (System::Update())
    {
        Graphics3D::FreeCamera();

        Optional<size_t> selected;
        double nearestDistance = Largest<double>();
        const Ray mouseRay = Mouse::Ray();
        const Vec3 cameraPos = Graphics3D::GetCamera().pos;

        for (size_t i = 0; i < spheres.size(); ++i)
        {
            if (const auto pos = mouseRay.intersectsAt(spheres[i]))
            {
                const double d = pos->distanceFromSq(cameraPos);

                if (d < nearestDistance)
                {
                    selected = i;
                    nearestDistance = d;
                }
            }
        }

        Plane(24).draw();

        for (size_t i = 0; i < spheres.size(); ++i)
        {
            if (i == selected)
            {
                spheres[i].draw(Palette::Red).drawShadow();
            }
            else
            {
                spheres[i].draw(HSV(i * 3, 0.4, 0.8)).drawShadow();
            }       
        }

        Cursor::SetStyle(selected ? CursorStyle::Hand : CursorStyle::Default);
    }
}

3. プログラムで作った 3D 形状を Mesh として描画する

複雑な 3D 形状をプログラムで作成する場合や、.obj 形式以外のモデルファイルを自前で読み込む場合は、頂点とインデックスの配列を MeshData に用意することで、Mesh として描画できます。

頂点配列 Array<MeshVertex> は各頂点の 座標 (Float3) と テクスチャ UV (Float2) と 法線 (Float3) の配列で構成されます。
インデックス配列 Array<uint32> は、頂点配列の「何番目」と「何番目」と「何番目」の頂点で三角形を構成するかを表す配列で、サイズは必ず 3 の倍数になります。

法線を計算するのが面倒な場合には、自動で計算してくれる Mesh::computeNormals() を使います。

# include <Siv3D.hpp>

MeshData CreateMeshData()
{
    const int32 N = 400;

    Array<MeshVertex> vertices;

    for (int32 i : step(N))
    {
        MeshVertex v;
        v.texcoord.set(0, 0);
        v.normal.set(0, 1, 0);

        v.position = Vec3(Cylindrical(i * 0.01, i * 0.05, i * 0.01));
        vertices.push_back(v);

        v.position = Vec3(Cylindrical(i * 0.01, i * 0.05, 0.4 + i * 0.01));
        vertices.push_back(v);
    }

    // 裏面用の頂点
    for (int32 i : step(N))
    {
        vertices.push_back(vertices[i * 2 + 0]);
        vertices.push_back(vertices[i * 2 + 1]);
    }

    Array<uint32> indices;

    for (int32 i : step(N - 1))
    {
        indices.push_back(2 * i + 0);
        indices.push_back(2 * i + 2);
        indices.push_back(2 * i + 1);

        indices.push_back(2 * i + 1);
        indices.push_back(2 * i + 2);
        indices.push_back(2 * i + 3);
    }

    const uint32 offset = N * 2;

    // 裏面用のインデックス
    for (int32 i : step(N - 1))
    {
        indices.push_back(offset + 2 * i + 0);
        indices.push_back(offset + 2 * i + 1);
        indices.push_back(offset + 2 * i + 2);

        indices.push_back(offset + 2 * i + 1);
        indices.push_back(offset + 2 * i + 3);
        indices.push_back(offset + 2 * i + 2);
    }

    MeshData meshData(vertices, indices);

    meshData.computeNormals();

    return meshData;
}

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

    Graphics::SetBackground(ColorF(0.5, 0.7, 0.9));

    Graphics3D::SetAmbientLight(ColorF(0.4));

    const Texture textureTerrain(L"Example/Grass.jpg", TextureDesc::For3D);

    const Mesh mesh(CreateMeshData());

    while (System::Update())
    {
        Graphics3D::FreeCamera();

        Plane(20).draw(textureTerrain);

        mesh.translated(0, 0, -4).draw().drawShadow();
    }
}

明日の Siv3D Advent Calendar の記事は @Mitsugoro32 さんです。
よろしくお願いします。