はじめに

先週開催されたCEDEC2024にて、リリース間近！Unity 6 のすべてという講演がありました。

現在はYouTubeにて無料で公開されています。

こちらの講演にてUnity公式の方がWebGPUを使えばVFXGraphが使えるようになり、Browser上で共有ができるようになったというようなことをおっしゃっていたので、今回はこれを実際に試してみたいと思います。

ということで今回は最新のUnity 6でWebGPU&VFXGraphをGitHub ActionsでPagesにDeployしてgithub.io上で公開するところまで紹介したいと思います。

公式デモ

環境

OS - Windows 11 Pro
Browser - Microsoft Edge 128
Unity - Unity 6 Preview (6000.0.18f1) Personal License
Module - Visual Effect Graph 17.0.3

Unity 6

インストール

何はともあれまずUnityのインストールから始めます。

WebGPUのビルドにWebGL Build SuppoertのModuleが必要なのでこちらをインストールします。

(Moduleでは名前にWebGLとありますが、WebGPUも実験的機能としてこちらに入っています。)

プロジェクトを作成

Universal 3Dを選択します。プロジェクト名は適当にunity6-webgpu-testcodesとしました。

HDRPではWebGPUが利用できないので注意してください。

メジャーバージョンが更新される毎にUnityのロード画面の画像が変わりますが、Unity 6からはロード画面自体が変更されていました。新しい感じがしてとても良いですね！

VFXはデフォルトでは利用できないので、UPMからPackageを追加する必要があります。

Window→Package Managerを選択してPackage Managerを開き、Unity Registryの中のVisual Effect GraphをInstallします。

ここからはAssetを用意していきます。初めに専用のSceneを作成します。名前はVFX_Dogとしました。

また、テスト用Meshとして、私が学生時代に勉強用で作成した犬のような3DModelを使います。

VFX GraphでMeshを利用するには、pCacheで点群データに変換する必要があります。

Window→Visual Effects→Utilities→Point Cache Back Toolを選択してpCache Toolを開き、Export UVsにチェックしSave to pCache file...で生成します。名前はP_Dogとしました。

次に簡単なVFX Graphを作成していきます。

右クリック→Create→Visual Effects→Visual Effect Graphで新しく作成します。今回はSimple Loopというテンプレートから作成していきました。名前はV_Dogとしました。

ここまで追加したAssetです。

Prefabの中身はMeshとVFXになります。

VFX Graphで作成していきます。先ほど作成したAssetをダブルクリックすることでEditorが表示されます。今回外部変数は利用しないので、右上のBlackboardボタンをクリックして非表示にします。

VFX Graphの全体像です。詳しくは説明しませんが、点群データをもとにParticleを生成し、テクスチャからサンプリングした色をそのまま色として、Turbulenceでいい感じに動かすようにしています。

Editor上でのレンダリング結果です。飛沫シミュレーションみたいになってしまいましたが、私はこういったセンスがないのでとりあえずこれで進めます。

Buildに向けた準備を行っていきます。まず、Unity 6で新しくなったBuild Profilesで変更していきます。SceneLiseから右クリックでSample Sceneを削除しAdd Open Scenesで現在のSceneを追加します。

Webでは特に編集する項目はありませんが、実はまだWebGPUが有効化されていません。現状まだUI上で有効化するオプションが追加されていないため、TextEditorでProject Settingsを直接変更する必要があります。

ProjectSettings/ProjectSettings.assetを適当なTextEditorで開き、以下のように変更します。

  webGLMemoryLinearGrowthStep: 16
  webGLMemoryGeometricGrowthStep: 0.2
  webGLMemoryGeometricGrowthCap: 96
- webGLEnableWebGPU: 0
+ webGLEnableWebGPU: 1
  webGLPowerPreference: 2
  webGLWebAssemblyTable: 0
  webGLWebAssemblyBigInt: 0

これでWebGPUが利用できるようになりした。Player Settingsへ移動します。

Auto Graphics APIのチェックを外し、Graphics APIsをWebGPU (Experimental)に置き換えます。

このようになっていればOKです。

また、GitHub Pagesで公開する場合は圧縮関係がデフォルトのまま以下のようなエラーがでるので、Decomporession Fallbackのチェックを入れます。

Unable to parse Build/WebGL.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header "Content-Encoding: gzip" present. Check browser Console and Devtools Network tab to debug.

動作確認

これで一度WebにPlatformを切り替えて、Build And Runをクリックします。Buildが完了すると、ブラウザが自動で起動し、ページが表示されます。

飛沫犬が表示されるようになりました。

現在、私もメインで利用しているFirefox(Version 130)では、StableバージョンではまだWebGPUがサポートされていないためこのように表示されません。(Experimental(Nightly)ではフラグで有効化可能)

現在どのBrowserがWebGPUをサポートしているかは以下のサイトで確認することができます。

https://caniuse.com/webgpu

これでUnity側の必要最低限の対応は終わりです。次はこのUnityプロジェクトをGitHub Actionsを利用してBuild&Deployしていきます。

GitHub

今回のGitHub Repositoryはこちらになります。

CC0なので、好きに使ってください。

GameCI用の準備

GitHub ActionsではGameCIを利用してBuildしていきますが、Personal Licenseを利用している場合、従来の方法では認証できなくなったため注意が必要です(回避策もありましたが、塞がれました)。ここではPersonal Licenseを利用する場合の手順を説明します。

https://github.com/game-ci/documentation/issues/408

まず、UnityのPersonal Licenseを取得する必要があります。

歯車→License→Add→Get a free personal licenseで新しいLicenseを取得します。

Windowsの場合は以下に保存されています。

C:\ProgramData\Unity\Unity_lic.ulf

また、Unity Accountを3rd party(Googleとか)で作成した場合はパスワードを再設定する必要があります。(3rd party認証でのログインではなく、メールアドレスとパスワードでもログインできる状態にする必要があります。)

RepositoryのSettings→Security/Secrets and variables→ActionsのRepository secretsで先ほどの情報をそれぞれUNITY_EMAIL、UNITY_PASSWORD、UNITY_LICENSEとして追加します。(LicenseはUnity_lic.ulfファイルをTextEditorで開き、中身をそのままコピペする。)

また、Pagesの設定で、Build and deploymentのSourceをGitHub Actionsに変更します。これを変更しておかないと、Deploy時にエラーがでます。

最後にGitHub Actionsを定義する構成ファイルを作成します。

GitHub Actions

ファイルは.github/workflows/main.yamlに作成します。

name: Build and deploy WebGPU

on:
  workflow_dispatch:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  ubuntu-build:
    runs-on: ubuntu-latest

    permissions:
      checks: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Cache library
        uses: actions/cache@v4
        with:
          path: Library
          key: Library-${{ hashFiles('Assets/**', 'Packages/**', 'ProjectSettings/**') }}
          restore-keys: |
            Library-

      - name: Build project
        uses: game-ci/unity-builder@v4
        env:
          UNITY_LICENSE: ${{ secrets.UNITY_LICENSE }}
          UNITY_EMAIL: ${{ secrets.UNITY_EMAIL }}
          UNITY_PASSWORD: ${{ secrets.UNITY_PASSWORD }}
        with:
          allowDirtyBuild: true
          targetPlatform: WebGL

      - name: Upload artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: build/WebGL/WebGL

  ubuntu-deploy:
    runs-on: ubuntu-latest

    needs: ubuntu-build

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

内容としては簡単に

なにかPushされたら実行する
LibraryフォルダはAsset関連が変更されない場合はCacheする
GameCIを利用してWebGL Platformとしてビルド
ArtifactをGitHub PagesにDeploy

となります。

最終確認

成果物はUser名.github.io/Repository名/にDeployされます。

私の場合は以下のURLにDeployされました。

GitHub Pages上でも飛沫犬を確認することができました🎉

おわりに

WebGPUは前々から触ってみたいとは思っていたのですが、今までは実行確認まで敷居が少し高いものとなっているイメージでした。(以下の記事は私の先輩が書いた素晴らしい記事)

しかし今はUnityで実験的機能とは言え簡単にビルドするところまでできるようになっていました。個人的にBrowserで実行するApplicationの構想があったので、Unity 6正式Release時には開発に着手したいです。