はじめに

『2077年の犯罪の定義とは、捕まる事さ。』

キアヌ・リーブスが悪びれもせずにこう言い放つ。

その瞬間、死んで冷たくなっていた<FLAT-LINED>俺の心臓は、AEDによるインパクトをもらった時のように飛び起きた。

そう、去る2.0.2.0.・・・

サイバーパンクの歴史を塗り替える伝説のサイバーパンク「Cyberpunk2077」がとうとう発売されたこの年、世界中の千葉シティが歓喜の渦に包まれたという。

www.spike-chunsoft.co.jp

(うろ覚えで内容不正確かもしれないが、)確か2.0.1.3.にティーザームービーが発表され、2.0.1.8.に発売するつもりが延期になり、2年後の9月に発売するつもりが延期になり、その顛末が散々インターネットでいじられ倒された後、ようやくローンチを迎えたこの作品を心待ちにしていたコンピュータ・カウボーイは数知れない。少なくとも両手では数えきれないほどはいたはずだ。

俺も当然そんな中の一人で、このような自家製のサイバーパンクを作っては、満たされない心のキアヌを慰めていた。

本日作ってみたサイバーパンクです。取り出した時に残高がパッと分かれば、改札で止められて気まずい思いをしなくてもすむよね#unity #vuforia pic.twitter.com/QyID1hpyqL
— ǝnouᴉ-ɐʇos (@inolalala) 2019年6月23日

しかし、Cyberpunk2077の発売は成し遂げられ、全世界が熱狂した・・・

そして俺が勤める弊コーポ、つまりカヤック・・・

そこの後輩FUJISAWAは、喜びのあまり古都鎌倉をロボットレストランみたいにギラギラさせるなどして、爆発寸前の感情をインターネットにぶつけていたらしい。

ならばこの俺も、この記念的な瞬間に、祝杯としてのサイバーパンクを捧げる必要がある・・・

だからここにウェブ=ログを残す事にした、というわけだ。

自己紹介

...おっと、自己紹介が遅れたな。

私、クライアントワーク事業部でUnityエンジニアとして働かせて頂いております、井上宗汰と申します。弊社では社員を紹介するサイトがありますが、ここでの情報を元に所在地を特定されると電脳を灼かれる危険性がある為載せておりません。

あ、この記事は Tech KAYAC Advent Calendar 2020 23日目の記事です。

さて。

俺は何者にも縛られないアウトローになりたいし、硬派なハードボイルドでありたいと常に考えているが、だからと言ってほんとに前科者になるのはとても良くないことも知っている。

そこで、逮捕された時の写真っぽい映像が取れるARアプリの試作品を試作した。

実装はARFoundationのPeopleOcclusionを用いてUnityで行った。

アメリカで逮捕された時に撮るやつを作りました#madewithunity pic.twitter.com/ILswQQiaEY
— ǝnouᴉ-ɐʇos (@inolalala) 2020年11月25日

こういうのはマグショットっていうらしい。

アメリカで捕まったらマグショットを撮る、ということをユージュアルサスペクツのDVDジャケで学び、最高にクールだと感じたので、コンソールを叩いてプログラミングした。(ちなみに背景画像は「いらすとや」さんでお借りした。いらすとやさんはなんでもあってとてもすごい。)

しかし、今のままだといささかサイバーパンクと呼ぶには物足りない。

そもそもサイバーパンクというものは、技術の発展は人類を明るい未来へ導くことはなく、

むしろ人間の退廃性を加速させ...

超絶圧倒的格差社会の闇が深まり...

そして何より必要なのは、赤とか青とかのライトで紫色に光る人間が鉄砲とか刀とかを持って大暴れする...

そういう合成調味料のようなアクの強さが、サイバーパンクと呼ばれるような作品に求められるのだ。

つまり、このアプリは『サイバーパンク色』に輝いていない...

今回のヤマは、この逮捕体験を赤とか青とかに光らせて、このコンテンツが持つサイバーパンク性を高める事に他ならない。

俺はコンソールを開き、プログラミングを頑張る事にした。

実装について

Unityを触ったことがある人なら恐らく知っていると思うが、UnityにはPostProcessingStackという、お手軽にブルームエフェクトや色調調整をかけることができるライブラリが存在している。大抵のことはデフォルトのColorGradingで事足りると思うが、今回はせっかくなので自作のエフェクトを作って使えるような手順を踏んで、実際に使ってみる。

PPSそのものの基本的な使い方に関してはスコープ外とするので割愛する。マニュアルで紹介されてるGrayscale.csとGrayscale.shaderを踏襲しつつ、

docs.unity3d.com

作成した用意したのはこの２つのファイル。

//Cyberpunk.cs(PostProcessEffectSettingsを継承している方の名前を使わないといけないので注意！！)

using System;
using UnityEngine;
using UnityEngine.Rendering.PostProcessing;


[Serializable]
[PostProcess(typeof(CyberpunkRenderer), PostProcessEvent.AfterStack, "Custom/Cyberpunk")]
public sealed class Cyberpunk : PostProcessEffectSettings
{
    [Range(1f, 10f), Tooltip("Cyberpunk Effect Intensity")]
    public FloatParameter speed = new FloatParameter { value = 1f };
}

public sealed class CyberpunkRenderer : PostProcessEffectRenderer<Cyberpunk>
{
    public override void Render(PostProcessRenderContext context)
    {
        var sheet = context.propertySheets.Get(Shader.Find("Hidden/Custom/Cyberpunk"));
        sheet.properties.SetFloat("_Speed", settings.speed);
        context.command.BlitFullscreenTriangle(context.source, context.destination, sheet, 0);
    }
}

//Cyberpunk.shader

Shader "Hidden/Custom/Cyberpunk"
{
    HLSLINCLUDE

        #include "Packages/com.unity.postprocessing/PostProcessing/Shaders/StdLib.hlsl"

        TEXTURE2D_SAMPLER2D(_MainTex, sampler_MainTex);
        float _Speed;

        float4 Frag(VaryingsDefault i) : SV_Target
        {
            float4 color = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, i.texcoord);

            float displacementAmount = _SinTime.x * _CosTime.y * 0.3;
            color.rgb = color.rgb * float3(i.texcoord.x + displacementAmount, 0, i.texcoord.y + displacementAmount) * 1.2;
            return color;   
        }

    ENDHLSL

    SubShader
    {
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            HLSLPROGRAM

                #pragma vertex VertDefault
                #pragma fragment Frag

            ENDHLSL
        }
    }
}

Cyberpunk.csはPPSで自作シェーダーを使う為に必要なやつで、Cyberpunk.shaderは実際に赤とか青とかに光らせる為に必要な自作シェーダーだ。とりあえず、uv座標をRGBのRとBにぶち込むと画面がサイバーパンクになる事を俺は知っていたので、適当にゆらゆら揺れそうな変数(displacementAmount)を混ぜて適用してみた。

ここで注意点が2つある。

(参考にさせて頂いたのはこの記事様です。ありがとうございます。)

ssr-maguro.hatenablog.com

１つは、PPSの設定用csファイルを作成する時にはPostProcessEffectSettingsを継承した方のクラス名を使う必要があるという事。なんかマニュアルにそう書いてたので、俺はそうした。パンクな姿勢そのものはクールかもしれないが、無意味な逆張りは時間をいたずらに浪費するだけの愚策だ。

f:id:xabutoon:20201223082941p:plain

もう一つの注意点は、自作シェーダーをPlayerSettings/Graphics/AlwaysIncludedShaderに含めないと、ビルド時に反映されない、という事だ。もしくはResourcesフォルダを作ってそこに入れておく、という方法もあるが、俺は今回使ってないので実際動作がどうなるかはわからない。

f:id:xabutoon:20201223083336p:plain