Köra Unity WebGL med ASP.NET Core

Sidan uppdaterad : fredag 29 september 2023

Datum för skapande av sida : torsdag 24 mars 2022

Verifiering miljö

Windows

Fönster 11

Unity-redaktör

2020.3.25F1

Visuell studio

Visual Studio 2022

ASP.NET Kärna

ASP.NET Core 6.0

Internet Information Services (IIS)

IIS 10.0

Först

Lär dig hur du kör en spelutdata som WebGL i Unity på en webbserver som kör ASP.NET Core. För spelprogram, använd de som matas ut i tipsstegen nedan. Spelexemplet använder 2D Platformer Microgame, som kan skapas från Unity Hub.

Skapa ett webboptimerat (WebGL) spel

Jag kommer att förklara hur man ställer in "Okomprimerad WebGL", "WebGL komprimerad med Gzip" och "WebGL komprimerad med Brotli" för att köra WebGL-spel. Förfarandet är detsamma för dem alla.

Vi använder Visual Studio 2022, ASP.NET Core 6.0, men äldre versioner kommer förmodligen att fungera. Strukturen för den ursprungliga koden är dock olika för varje version, så vänligen förstå skillnaderna själv.

Skapa ett ASP.NET kärnprojekt

Starta "Visual Studio 2022" från startmenyn.

Välj Skapa nytt projekt.

Den här gången väljer du "ASP.NET Core Web App" som exempel. Om du kör på ASP.NET Core kan du köra andra mallar, men du måste följa varje mall om hur du skapar den.

Ange projektnamn och plats godtyckligt.

Lämna den ytterligare informationen som den är.

Projektet har skapats.

Kör okomprimerad WebGL

Förbered ett WebGL-program skapat utan komprimering.

Se till att spelet fungerar snabbt

ASP.NET Prova att köra ett WebGL-spel med färre inställningar utan att följa kärnetiketten.

I ASP.NET Core kan du inte komma åt vissa WebGL-filer som genereras av Unity i standardläget. Gör detta tillgängligt.

Program.cs

Öppna från ditt Program.cs projekt. Gäller tidigare ASP.NET Core-versioner Startup.cs .

Lägg till ett namnutrymme överst i koden och ersätt följande i koden app.UseStaticFiles(); :

// ここから追加
using Microsoft.AspNetCore.StaticFiles;
// ここまで追加

var builder = WebApplication.CreateBuilder(args);

// --- 省略 ---

app.UseHttpsRedirection();

//app.UseStaticFiles();
// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
});
// ここまで追加

app.UseRouting();

// --- 省略 ---

.data, så att när en fil öppnas .wasm kan den returneras till klienten med den angivna Content-Type .

WebGL-distribution

Placera följande filmappar från Unity i projektet wwwroot .

Index.html
Bygga
Malldata

Index.cshtmlindex.html Öppna länken så att du kan komma åt den.

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<a href="index.html">index.html</a>

Kör programmet och se till att spelet fungerar.

Kör ett WebGL-program på en Razor-sida

Det tidigare spelet kördes på en statisk HTML-fil, så det körs på en plats som inte har något att göra med ASP.NET Core. Det är inte särskilt önskvärt för programmets enhetlighet, så vi flyttar HTML-filens beteende till Razor Pages.

Högerklicka på mappen Sidor i projektet för att lägga till ett nytt objekt.

Välj Razor Page - Empty. Det finns inget särskilt namn angivet, men det läggs till här WebGL.cshtml .

Koden visas.

index.html Se innehållet i filen och porten till WebGL.cshtml . link Det finns några konstiga punkter, till exempel hur man placerar taggen, men jag lämnar den som den är för enkelhetens skull.

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/WebGL.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL.data",
      frameworkUrl: buildUrl + "/WebGL.framework.js",
      codeUrl: buildUrl + "/WebGL.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Index.cshtmlWebGL Lägg till en länk till .

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
</ul>

Försök att köra programmet. Du kan se att sidhuvudet och sidfoten _Layout.cshtml visas på WebGL-sidan enligt .

Ändra platsen för WebGL-filer

Jag placerade WebGL-filen direkt under , men den här metoden skriver över den när du placerar två eller flera WebGL-filer wwwroot . Jag ska förklara hur man lägger detta i separata mappar och flyttar det.

Först och främst skapa en ny mapp som heter "webgl" och flytta den dit. De två mappar som ska Buildflyttas är , TemplateData . index.html Jag har redan portat den till Razor Pages och kan säkert ta bort den.

Eftersom WebGL.cshtml vi har fördjupat mapphierarkin kommer vi också att fördjupa sökvägen som beskrivs i . Korrigeringen är 3 rader.

Före korrigering

<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">

    var buildUrl = "Build";

Efter korrigering

<link rel="shortcut icon" href="webgl/TemplateData/favicon.ico">
<link rel="stylesheet" href="webgl/TemplateData/style.css">

    var buildUrl = "webgl/Build";

Kör programmet för att se om det fungerar korrekt.

Kör WebGL komprimerad med Gzip

Förlängningen av filen komprimerad av Gzip är , och det är .gz en fil som kan hanteras av ASP.NET Core, Unity WebGL Content-Type och hanteras annorlunda och kräver konvertering.

Skapa först en WebGL-fildistribution och -sida.

WebGL-filplacering

wwwrootwebgl-gzip Skapa en mapp under Gzip och kopiera mappen , från WebGL-filen BuildTemplateData du skapade med Gzip.

Skapa en rakhyvelsida

Den här gången WebGLGzip.cshtml skapar du filen med samma procedur som när den är okomprimerad.

Koden är som följer med hänvisning till Output in index.html Unity. Sökvägen matchar mappen du skapade webgl-gzip tidigare för WebGL-filerna.

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLGzipModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="webgl-gzip/TemplateData/favicon.ico">
  <link rel="stylesheet" href="webgl-gzip/TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "webgl-gzip/Build";
    var loaderUrl = buildUrl + "/WebGL_Gzip.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL_Gzip.data.gz",
      frameworkUrl: buildUrl + "/WebGL_Gzip.framework.js.gz",
      codeUrl: buildUrl + "/WebGL_Gzip.wasm.gz",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Ändra för att tillåta navigering till Index.cshtml den här sidan.

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
  <li><a href="WebGLGzip">WebGLGzip</a></li>
</ul>

Fixa programmet.cs

app.UseStaticFiles Ändra den del som bearbetar metoden enligt följande.

Före korrigering

// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
});
// ここまで追加

Efter korrigering

// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";
provider.Mappings[".br"] = "application/octet-stream";   // .br ファイルにアクセスできるように追加
provider.Mappings[".js"] = "application/javascript";     // 後の変換の為に追加

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
  OnPrepareResponse = context =>
  {
    var path = context.Context.Request.Path.Value;
    var extension = Path.GetExtension(path);

    // 「.gz」「.br」ファイルにアクセスした場合は Content-Type と Content-Encoding を設定する
    if (extension == ".gz" || extension == ".br")
    {
      var fileNameWithoutExtension = Path.GetFileNameWithoutExtension(path) ?? "";
      if (provider.TryGetContentType(fileNameWithoutExtension, out string? contentType))
      {
        context.Context.Response.ContentType = contentType;
        context.Context.Response.Headers.Add("Content-Encoding", extension == ".gz" ? "gzip" : "br");
      }
    }
  },
});
// ここまで追加

I ASP.NET Core .gz returneras filen Content-Type application/x-gzip med . Som det är kan Unity WebGL på klienten inte bestämma det, så .gz jag skriver om och returnerar det enligt Content-Type förlängningen av filen som utesluter . Content-Encoding Jag ställer också in det eftersom det gzip är nödvändigt.

Förresten, jag satte också ihop Brotli-koden, så att du kan använda den här koden som den är i Brotli-korrespondensen i nästa punkt. Brotli ställer också .br in omskrivning Content-Encoding br för att matcha Content-Type filtillägget utan . Filen är dock otillgänglig som standard i ASP.NET Core,.br så provider.Mappings jag lade till den med .br .

Därefter kör felsökningen och kontrollera om spelet fungerar korrekt.

Om du har konfigurerat det korrekt och spelet fortfarande inte visas kan du prova att rensa webbläsarens cacheminne för att rensa dina cookies.

Kör WebGL komprimerad med Brotli

Förfarandet är nästan detsamma som Gzip, ersätter Gzip-delen med Brotli. Brotli-filer (.br) är dock inte tillgängliga som standard i ASP.NET Core. Du måste konfigurera den så att du kan komma åt den, men om du använder koden vid tidpunkten för Gzip stöds den.

Skapa först en WebGL-fildistribution och -sida.

WebGL-filplacering

wwwrootwebgl-brotli Under Skapa en mapp kopierar du mappen , från WebGL-filen BuildTemplateData som du skapade med Brotli.

Skapa en rakhyvelsida

Skapa filen med WebGLBrotli.cshtml samma steg som för Gzip.

Koden är som följer med hänvisning till Output in index.html Unity. Sökvägen matchar mappen du skapade webgl-brotli tidigare för WebGL-filerna.

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLBrotliModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="webgl-brotli/TemplateData/favicon.ico">
  <link rel="stylesheet" href="webgl-brotli/TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "webgl-brotli/Build";
    var loaderUrl = buildUrl + "/WebGL_Brotli.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL_Brotli.data.br",
      frameworkUrl: buildUrl + "/WebGL_Brotli.framework.js.br",
      codeUrl: buildUrl + "/WebGL_Brotli.wasm.br",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Ändra för att tillåta navigering till Index.cshtml den här sidan.

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
  <li><a href="WebGLGzip">WebGLGzip</a></li>
  <li><a href="WebGLBrotli">WebGLBrotli</a></li>
</ul>

Fixa programmet.cs

Om du ändrar det när Gzip stöds kan du använda samma kod.

När du har fixat det, kör felsökning och kontrollera om spelet fungerar.

Om du har konfigurerat det korrekt och spelet fortfarande inte visas kan du prova att rensa webbläsarens cacheminne för att rensa dina cookies.

Förstå symptomen vid åtkomst till Brotli-filer på en IIS-webbserver

Brotli stöds inte av IIS som standard, så konfiguration på IIS-sidan krävs. Det verkar som om det kan hanteras genom att göra avancerade inställningar, men jag kommer inte att förklara det i det här tipset. Se informationen länkad nedan.

felmeddelande

Unable to load file webgl-brotli/Build/WebGL_Brotli.framework.js.br! Check that the file exists on the remote server. (also check browser Console and Devtools Network tab to debug)

Skapa ett webboptimerat (WebGL) spel

Ändra spelupplösningen