平面メッシュの裏面を描画する

2023/12/02追記: 
本稿はUnityビルトインのStandardシェーダーで裏面を描画する手順としては有効ですが、ZEPETO/Standardシェーダーで裏面を描画する記事としては手順が不足しています。最新の内容は下記の2023/12版でご確認ください。

拙作goldfish_bitsの金魚ちゃんです。初めていちからモデリングしたアイテムです。

金魚

これを裏から見ると、

浣腸

ヒレが表示されずに浣腸みたいになってます。修正していきます。

シェーダーによっては裏面が描画されない

上記の金魚はMaterialのシェーダーにビルトインのStandardシェーダーを使用しています。Standardシェーダーは裏面を描画しません。

一般的なメッシュはハリボテ構造になっていて、内側が見えることはないため、多くのシェーダーでは内側を描画しないことで負荷を抑えています。ただ上記の金魚のヒレのような平面メッシュは表も裏も見えてしまうので、使用するシェーダーによっては裏側が消えてしまう…という事になってます。

Standard.shaderを改造して裏側も描画させる

というわけで、Standard.shaderを書き換えて裏側を描画するようにします。

Stanadard.shaderファイルの取得

まずは改造元となるStandard.shaderのファイルを取得するところから始めます。下記の Unity download archive にアクセスします。

Download Archive

ZEPETOで使用するUnityバージョンは2020.3.9f1なので、Unity 2020.Xを選択します。

Unity 2020.Xを選択。

下にスクロールして、Unity2020.3.9を見つけます。Windowsの場合はDownloads(Win)を選択し、Built in Shadersを選択すると、zipファイルのダウンロードが始まります。

Unity2020.3.9の Built in shadersを選択

私の環境では毎回ダウンロード先を選択するようにしていますが、デフォルトでは C:\Users\<ユーザ名>\Downloads とかに保存されるんですかね。

zipファイルを適当な場所に保存する。私はE:\zepeto\workに保存した。

保存したzipファイルの中身から、Standardシェーダーのファイルを探します。Windowsならzipファイルをダブルクリックで進んでいけばよいです。

builtin_shaders-2020.3.9.f1.zipを開いていく

Standard シェーダーのファイルは Standard.shader という名前で builtin_shaders-2020.3.9f1.zip\DefaultResourcesExtraの 配下にあります。これを適当な場所に取り出します。Windowsならファイルをドラッグ&ドロップすればよいです。

Standard.shaderを適当な場所にドラッグ&ドロップ。デスクトップとかでもいいです。
shaderファイルのアイコンは関連付けられているアプリケーションによって異なります。

次に、適当なテキストエディタ(メモ帳でよいです)を開いて、取り出したStandard.shaderをメモ帳にドラッグ&ドロップします。

Standard.shaderをドラッグ&ドロップ

メモ帳だったらファイル名を指定して実行で開くのが簡単ですかね…。

Windowsキー押しながらR
名前(O): に notepad.exe を入力して、メモ帳を起動できます。

Standard.shaderのコードが表示されます。

Standard.shaderのコードが表示される

Standard.shaderを編集する

テキストエディタ(メモ帳)を使ってStandard.shaderを編集していきます。変更箇所は2つです。

まずはStandardシェーダーの識別名を変更します。
3行目の Standard を別の文字列に変更してください。下記の例では、Custom/Standard-CullOffとしました。この文字列については、あとでUnityの作業をする際に説明します。

// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)

Shader "Custom/Standard-CullOff"
{
    Properties
    {
        _Color("Color", Color) = (1,1,1,1)
        _MainTex("Albedo", 2D) = "white" {}
:
:

次に、Stanadardシェーダーが裏側も描画するように変更します。58行目にCull Offを記述してください。

:
:
    SubShader
    {
        Tags { "RenderType"="Opaque" "PerformanceChecks"="False" }
        LOD 300
        Cull Off

        // ------------------------------------------------------------------
        //  Base forward pass (directional light, emission, lightmaps, ...)
        Pass
        {
:
:

2ヶ所の変更が完了したら、別名で保存します。メモ帳であれば、ファイル > 名前をつけて保存 です。下記の例では、Standard-culloff.shaderという名前にしています。拡張子が.txtではなく、shaderになるよう注意してください。

メモ帳であれば ファイルの種類を すべてのファイル にしておく

ファイル名に拡張子が表示されていない、等であれば以下。

Windows 10（ファイルの拡張子を表示する） | Windows入門ガイド | パナソニック パソコンサポート

これで改造済みの裏面も描画するシェーダーが完成しました。

シェーダー自作してるんだぜ！

Unityのプロジェクトにインポートする

シェーダーが作れたのでUnityに戻りましょう。先ほど作成したStandard-culloff.shaderのファイルをUnityのAssetフォルダ以下にドラッグ&ドロップして、インポートします。

いつものインポート作業。Assets/Contentsに入れました。

レインボーなアイコンで表示される

Standard-culloff.shaderの修正が誤っている場合、以下の様にエラーが出力されます。インポートしたStandard-culloffシェーダでエラーが出ている場合は、正しく修正してください。ありがちなミスとしては、以下ですかね。

• シェーダーの名前に一部の記号等の使用できない文字を入力した(L3)

• スペースを全角で入力した(L58)

スペースを全角にしてみた。
Stanadard-culloffのシェーダーにおいて line 58のsyntax error。

Materialに改造したシェーダーを設定して裏側の描画を確認する

冒頭、浣腸みたいになっていた金魚のメッシュに設定していたMaterialには、Stanadardシェーダを設定していました。Materialを選択してInspectorを開き、上部のShaderの部分で確認できます。

UnityでMaterialを作成するとStandardシェーダーが設定される

上記は、金魚のMaterialのシェーダーには、Unityに最初から入っているStandard.shaderが設定されている状態です。これを先ほど改造したStandard-culloff.shaderに変更します。

金魚のMaterialのシェーダーを、Standard.shaderからStandard-culloff.shaderに変更する

ここでUnity上に表示される名前は、先ほどStandard-culloff.shaderファイルで書き換えた名前になります。例ではCustom/Standard-CullOffとしたので、最初の一覧でCustomが表示され、次の一覧でStandard-CullOffが表示されます。複数のカスタムシェーダをプロジェクトに追加する際は、この仕組みを覚えておくと、管理がしやすくなります。はい伏線回収。

変更したら、表示を確認してみましょう。

こっちは表

ヒレの裏側も表示されている

なお、ZEPETOが3Dアイテムで推奨するシェーダはWit/Standard_jsという名前のカスタムシェーダですが、同様の手順で裏面を描画できるように変更できます。

Custom Shader

2023/11/28追記:
ZEPETOプラットフォームへのtoon shader追加に合わせて、ZEPETO Studio内のシェーダーの再編が行われました。現在ZEPETOのアイテムで推奨されているシェーダーは、ZEPETO/Standardとなります。ZEPETO/Standardシェーダーの裏面は同様の手順で裏面を描画できるようになりません。
2023/12/02追記:
ZEPETO/Standardシェーダーで裏面を描画する手順の記事を公開しました。下記のURLからご確認ください。

うまく行きましたね。俺シェーダーを自作してるんだぜ！とかイキりましょう。なお、CullingについてUnityの公式マニュアルは以下になります。

ShaderLab ：Culling と Depth Testing - Unity マニュアル

おまけの宣伝

なおこの金魚、ZEPETOの試着画面では確認しにくいですが、動くと軌跡が出るようになっています。アスレで風を切って進んだり、くるくる回ると映えるはず。お求めは以下の ZEPETOID: @king_loveless_のストアにて。

風を切って進め

Pharaoh♔🍀 in ZEPETO