【Unity】オブジェクトを折り紙のように折りたい

Question

Unity　折り紙　等で調べましたが良いのが見つかりませんでした。

紙みたいなオブジェクトに文字を書き込み、
それを四つ折りにしたいと思っています。

四つ折にした紙オブジェクトは、ゴミ箱に投げます。
四つ折りにしたあとは「投げる」もしくは、「もう一度開く」が出来るようにしたいです。

検討している方法

1.UnityでPlaneを作成しアニメーションで四つ折りにし、最後の状態を維持する
四つ折りにする方法がよく分かりません。検索が足りないのかもしれません。
アニメーションで最後の状態を維持するのが良いかと思ったのですが
アニメーション2つを同時には出来ないと見た覚えがあるので
本当にそれで良いのか疑問です。
ただ、20分近く探しても良いのは見つかりませんでした。

2.Blenderで四つ折りの部分までアニメーションを作成する
Blenderでポリゴンを折り紙のように折りたたむ
http://bluebirdofoz.hatenablog.com/entry/2018/07/03/084835
上記が参考になりそうだと思いました。

分からないこと

　アニメーションで「遷移したまま動かない」というのはできるのでしょうか。
ドアで例えるなら、開いたら、開きっぱなしという形に。
あれば参考リンクなど教えていただけますでしょうか。

よろしくお願いいたします。

Answer 1

面白いテーマですね。
アニメーションをループさせない件については、アニメーションクリップの「Loop Time」をオフにするのでどうでしょうか。

さらに、その折り畳むアニメーションステートから次のステート（広げるアニメーション、あるいは投げるアニメーションでしょうか）へ伸びる遷移矢印を選択し、「Has Exit Time」をオフにすれば、「Conditions」に指定した条件が満たされるまで折り畳むステートにとどまるかと思います。
詳しくはアニメーション遷移 - Unity マニュアルをご参照いただくのがよさそうです。

四つ折りに関しては、下図のような構造のメッシュにボーンを仕込み、4つのエリアの回転をコントロールできるようにしてはいかがでしょう。

頂点数は「田」の字のような9頂点ではなく、折り目部分に幅を持たせた16頂点としてみました。
折る際に頂点位置が回転すると併せて法線も回転するため、折り目部分が1頂点しかないと折り曲げたときの法線は2つの面の向きの中間になってしまい、面に平らな陰影を付けることが困難になると予想されます。
折り目部分が2頂点になっていればそれぞれの頂点が個別に法線を持つことができるので、陰影の不具合を防ぐことができるでしょう。
また、折り目のエッジがシャープになりすぎるのを避けるため、折り目の2頂点をぴったり同じ位置に重ね合わせることはせず、若干幅を持たせることにしました。

「広げた状態→二つ折り」のZ軸周り回転をboneZ0とboneZ1が担当し、「二つ折り→四つ折り」のX軸周り回転をboneXが担当する作りになっています。boneZ0を回す際にはboneZ1を同じだけ逆回転し、黄色の面が水色の面と一緒に回ってしまうのを防いでいます。

Blenderには明るくないため、Unity上でメッシュを作ることにしましたが、Blenderで作っても構わないかと思います。
空のゲームオブジェクトに下記スクリプトをアタッチすることにより、メッシュ生成・ボーン階層構成を行うことにしました。

using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode]
public class Origami : MonoBehaviour
{
    private const float FoldHalfWidth = 0.05f;
    private static readonly int[] BackIndices = {0, 1, 4, 5, 4, 1};
    private static readonly int[] FrontIndices = {4, 1, 0, 1, 4, 5};
    [Range(0.0f, 1.0f)] public float Folding = 0.0f;
    [Range(0.0f, 1.0f)] public float Completeness = 0.98f;
    [Range(0.0f, 0.5f)] public float Overwrap = 0.1f;
    private bool inited;
    private Transform boneZ0;
    private Transform boneX;
    private Transform boneZ1;

    private void Init()
    {
        if (this.inited)
        {
            return;
        }
        this.inited = true;
        var renderer = this.GetComponent<SkinnedMeshRenderer>();
        if (renderer != null)
        {
            return;
        }
        renderer = this.gameObject.AddComponent<SkinnedMeshRenderer>();
        var mesh = new Mesh();

        // 頂点を作成
        var vertices = new Vector3[32];
        var normals = new Vector3[32];
        var tangents = new Vector4[32];
        var uv = new Vector2[32];
        var boneWeights = new BoneWeight[32];
        var colors = new Color[32];
        // 前面の頂点
        var count = 0;
        for (var z0 = -1; z0 < 1; z0++)
        {
            for (var z1 = 0; z1 < 2; z1++)
            {
                var sz = z1 - z0 - 1;
                for (var x0 = -1; x0 < 1; x0++)
                {
                    var boneIndex = (2 * (z0 + 1)) + (((((-2 * z0) - 1) * ((2 * x0) + 1)) + 1) / 2);
                    for (var x1 = 0; x1 < 2; x1++)
                    {
                        var sx = x1 - x0 - 1;
                        var x = (x0 + x1) - (FoldHalfWidth * sx);
                        var z = (z0 + z1) - (FoldHalfWidth * sz);
                        vertices[count] = new Vector3(x, 0, z);
                        normals[count] = Vector3.up;
                        tangents[count] = new Vector4(1, 0, 0, 1);
                        uv[count] = 0.5f * new Vector2(x + 1, z + 1);
                        boneWeights[count].boneIndex0 = boneIndex;
                        boneWeights[count].weight0 = 1;
                        colors[count] = Color.clear;
                        count++;
                    }
                }
            }
        }
        // 背面の頂点
        for (var i = 0; i < count; i++)
        {
            var j = i + count;
            vertices[j] = vertices[i];
            normals[j] = Vector3.down;
            tangents[j] = new Vector4(-1, 0, 0, 1);
            uv[j] = new Vector2(1.0f - uv[i].x, uv[i].y);
            boneWeights[j] = boneWeights[i];
            colors[j] = Color.white;
        }

        // 面を作成
        var triangles = new List<int>();
        for (var i = 0; i < 3; i++)
        {
            var i4 = i * 4;
            for (var j = 0; j < 3; j++)
            {
                // 前面
                var o = i4 + j;
                for (var k = 0; k < 6; k++)
                {
                    triangles.Add(FrontIndices[k] + o);
                }
                // 背面
                o += 16;
                for (var k = 0; k < 6; k++)
                {
                    triangles.Add(BackIndices[k] + o);
                }
            }
        }

        // ボーンを作成
        var bones = new Transform[4];
        var bindposes = new Matrix4x4[4];
        for (var i = 0; i < 4; i++)
        {
            var bone = new GameObject("Bone" + i).transform;
            bone.SetParent(i > 0 ? bones[i - 1] : this.transform, false);
            bones[i] = bone;
        }
        bones[3].localPosition = Vector3.forward;
        for (var i = 0; i < 4; i++)
        {
            bindposes[i] = bones[i].worldToLocalMatrix * bones[0].localToWorldMatrix;
        }

        // メッシュに作成したデータを適用
        mesh.vertices = vertices;
        mesh.normals = normals;
        mesh.tangents = tangents;
        mesh.uv = uv;
        mesh.boneWeights = boneWeights;
        mesh.triangles = triangles.ToArray();
        mesh.bindposes = bindposes;
        mesh.colors = colors;
        mesh.RecalculateBounds();

        // レンダラーにメッシュをセット
        var shader = Shader.Find("Custom/Origami");
        if (shader == null)
        {
            var quad = GameObject.CreatePrimitive(PrimitiveType.Quad);
            renderer.sharedMaterial = quad.GetComponent<MeshRenderer>().sharedMaterial;
            DestroyImmediate(quad);
        }
        else
        {
            renderer.sharedMaterial = new Material(shader);
        }
        renderer.rootBone = bones[0];
        renderer.bones = bones;
        renderer.sharedMesh = mesh;
    }

    private void OnEnable()
    {
        this.Init();
    }

    private void Start()
    {
        var path = "Bone0/Bone1";
        this.boneZ0 = transform.Find(path);
        path += "/Bone2";
        this.boneX = transform.Find(path);
        path += "/Bone3";
        this.boneZ1 = transform.Find(path);
    }

    private void Update()
    {
        // Folding     ...四つ折りの進行度。0で広げた状態、1で四つ折り状態。
        // Completeness...どれだけしっかり折るか。1で完全に折り畳まれますが、ポリゴンが重なって
        //                Zファイティング現象が起こるので、1より少しだけ小さくするといいでしょう。
        // Overwrap    ...「広げた状態→二つ折り」と「二つ折り→四つ折り」の動きの重なり。
        //                0.5にすると二つの動きが同時に起こりますが、大きなひずみが生じて
        //                ポリゴンが引きのばされてしまいます。
        var foldingZ = Mathf.SmoothStep(0.0f, 1.0f, Mathf.InverseLerp(0.0f, 0.5f + this.Overwrap, this.Folding));
        var foldingX = Mathf.SmoothStep(0.0f, 1.0f, Mathf.InverseLerp(0.5f - this.Overwrap, 1.0f, this.Folding));
        var angleZ = foldingZ * this.Completeness * 180.0f;
        var angleX = foldingX * this.Completeness * 180.0f;
        this.boneZ0.localEulerAngles = new Vector3(0.0f, 0.0f, angleZ);
        this.boneZ1.localEulerAngles = new Vector3(0.0f, 0.0f, -angleZ);
        this.boneX.localEulerAngles = new Vector3(angleX, 0.0f, 0.0f);
    }
}

また、マテリアルをどうするかについても検討する必要があるかと思います。表面と裏面に異なるテクスチャを使いたいところですが、今回はメッシュを表用と裏用に二重化し、それぞれを片面レンダリングすることにしました。面は一重にして両面レンダリングする手もあるかと思いますが、影の制御が難しくなりそうでしたので見送りました。
描画中の面が表なのか裏なのかを区別するため、表と裏の頂点に異なる頂点カラーを仕込んでおき、シェーダー内ではそれを参照して表・裏テクスチャを選択することにしました。

Shader "Custom/Origami" {
    Properties {
        _MainTex ("Front (RGB)", 2D) = "white" {}
        _BackTex ("Back (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
    }
    SubShader {
        Tags { "RenderType"="Opaque" }

        CGPROGRAM
        #pragma surface surf Standard addshadow fullforwardshadows
        #pragma target 3.0
        struct Input {
            float2 uv_MainTex;
            float2 uv_BackTex;
            float4 color : COLOR;
        };
        half _Glossiness;
        half _Metallic;
        sampler2D _MainTex;
        sampler2D _BackTex;
        void surf(Input IN, inout SurfaceOutputStandard o) {
            fixed3 frontColor = tex2D(_MainTex, IN.uv_MainTex).rgb;
            fixed3 backColor = tex2D(_BackTex, IN.uv_BackTex).rgb;
            o.Albedo = lerp(frontColor, backColor, IN.color.r);
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
        }
        ENDCG
    }
    FallBack Off
}

後はアニメーションクリップでOrigamiコンポーネントのFoldingをコントロールすればアニメーションを付けることができますし、コライダーとRigidbodyをアタッチして投げることも可能だと思います。

折りかけの状態で、折り目から若干光が漏れたように見えてしまっています。これは薄っぺらいオブジェクトが影を落とす際にありがちな不具合で、ある程度は妥協するべきかと思います。
光源の影設定のうち、バイアス関連の値を小さくすることでいくらかは軽減できますが、他のオブジェクトの影が狂いやすくなってしまうかもしれません。
アニメーションを素早くして、折り畳む途中経過をあまり見せないようにしてごまかすのがよさそうです...

Comments

[退会済みユーザー]

返信遅くなり申し訳ありませんでした！回答頂きありがとうございます！
丁寧に参考画像やGIFアニメまで……！本当に助かります！ありがとうございます！

>アニメーションをループさせない件については、アニメーションクリップの「Loop Time」をオフにする
ありがとうございます。ループOFFにすればいけそうです。

>詳しくはアニメーション遷移 - Unity マニュアルをご参照いただくのがよさそうです。
アニメーション自体あまりやっていなく、全然理解できていないため
教えていただいたので分からなければ参照させて頂きます！

GIFアニメがやりたい事そのままで、ソースコードまで記載頂き本当に助かります！
まだ全部理解できていないので、ソースは1文1文読み込み解読したいと思います！
ありがとうございました！！！