おもちゃラボ

Unityで遊びを作っていきます

【Unityシェーダ入門】3Dモデルをワイヤーフレームで表示する

前回の記事では3Dモデルの頂点を点(ドット)で表示する方法を紹介しました。今回は頂点の表示ではなく辺の表示、つまりポリゴンをワイヤーフレームで表示してみます。また、綺麗にワイヤーフレームを表示するためのシェーダも作成します!

f:id:nn_hokuson:20180301183740j:plain:w600

メッシュのトポロジを変更する

3Dモデルをワイヤーフレームで表示するには、頂点を表示したときと同様にメッシュの再構築を行います。

まずはメッシュの再構築をするスクリプトを作成してみましょう。プロジェクトウィンドウで右クリックし、Create→Script→C# Scriptを選択して、wireframe.csを作成してください。

ファイルが出来たら次のスクリプトを入力してください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class wireframe : MonoBehaviour 
{
    void Start()
    {
        MeshFilter meshFilter = GetComponent<MeshFilter>();
        meshFilter.mesh.SetIndices(meshFilter.mesh.GetIndices(0), MeshTopology.Lines, 0);
    }
}

Startメソッドの中でMeshFilterコンポーネントからメッシュ情報を取り出し、MeshTopologyにLineを指定しています。

スクリプトが入力できたら、wireframe.csを3Dモデルにアタッチしてください。

f:id:nn_hokuson:20180301191759j:plain

ちなみに今回のモデルはこちらのAssetを使わさせていただきました。

実行結果はこちらです。残念ながらあまり綺麗・・・ではないですね。

f:id:nn_hokuson:20180301192522j:plain:w600

ワイヤーフレームを綺麗に表示する

上の方法でワイヤーフレームが綺麗に表示されていないのは主に次のような原因が考えられます。

  • ワイヤーフレームが不透明でアンチエイリアスが効いていない
  • Standard Shaderのテクスチャが反映されていてゴチャってる


そこで単色できれいに発色するようなシェーダを作りましょう。まずはプロジェクトウィンドウで右クリックし、Create→Shader→Unlit Shaderを選択して、wireframe.shaderという名前で保存してください。また、作成したwireframe.shaderを右クリックしてCreate→Materialでwireframe.matというマテリアルを作成しておきます。

f:id:nn_hokuson:20180301192745p:plain:w250

wireframe.shaderのシェーダファイルに次のシェーダプログラムを入力して下さい。

Shader "Custom/wireframe" {
    Properties {
        _Color ("Color", Color) = (1,1,1,1)
        _Emission ("Emission", Range(0,3)) = 1.0
    }
    SubShader {
        Tags { "RenderType"="Transparent" "Queue"="Transparent" }
        LOD 200
        Cull off
        Blend SrcAlpha OneMinusSrcAlpha 

        CGPROGRAM
        #pragma surface surf Standard fullforwardshadows alpha:fade
        #pragma target 3.0

        struct Input {
            float2 uv_MainTex;
        };
                
        half _Emission;
        fixed4 _Color;

        void surf (Input IN, inout SurfaceOutputStandard o) {
            fixed4 c = _Color;
            o.Albedo = c.rgb;
            o.Alpha = c.a;
            o.Metallic = o.Smoothness = 0;
            o.Emission = _Emission;
        }
        ENDCG

    }
    FallBack "Diffuse"
}

このシェーダではワイヤーフレームの色とEmissionをインスペクタから設定できるようになっています。ワイヤーフレームの色には透明度も反映されます。透明度を高めに設定することで線が重なったときに加算合成されて綺麗に表示されます。

シェーダが入力できたら、wireframeマテリアルを3Dモデルにアタッチしましょう。

f:id:nn_hokuson:20180301193044j:plain

マテリアルがアタッチできたら、最後にインスペクタからワイヤーフレームの色とEmissionを指定します。今回は次のように設定しました。カラーピッカーで透明度は高く設定していることに注意して下さい。

f:id:nn_hokuson:20180301193316p:plain:w300

Unityで実行してみて、先程よりも綺麗に表示されていることを確認してみましょう!

f:id:nn_hokuson:20180301183740j:plain:w600

まとめ

3Dモデルをワイヤーフレームを表示するための方法を紹介しました。標準のStandard Shaderでは綺麗に表示できないため、オリジナルのシェーダも作成しました。

前回紹介した、頂点をドットで表示する方法はこちらの記事を参考にして下さい。

nn-hokuson.hatenablog.com


Unityの教科書 Unity 2017完全対応版  2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)

Unityの教科書 Unity 2017完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)