اجرای Unity WebGL با هسته ASP.NET

صفحه به روز شده : 1402 مهر 7, جمعه

تاریخ ایجاد صفحه : 1401 فروردین 4, پنجشنبه

محیط تایید

ویندوز

ویندوز 11

ویرایشگر یونیتی

دانلود: 2020.3.25f1

ویژوال استودیو

ویژوال استودیو 2022

ASP.NET هسته

ASP.NET هسته 6.0

خدمات اطلاعات اینترنت (IIS)

دانلود IIS 10.0

در ابتدا

یاد بگیرید که چگونه یک خروجی بازی را به عنوان WebGL در Unity در یک سرور وب که ASP.NET Core اجرا می شود، اجرا کنید. برای برنامه های بازی، از خروجی های موجود در مراحل زیر استفاده کنید. مثال بازی از 2D Platformer Microgame استفاده می کند که می تواند از Unity Hub ایجاد شود.

خروجی یک وب بهینه سازی شده (WebGL) بازی

من توضیح خواهم داد که چگونه "Uncompressed WebGL"، "WebGL فشرده شده با Gzip" و "WebGL فشرده شده با Brotli" را برای اجرای بازی های WebGL تنظیم کنید. این روش برای همه انها یکسان است.

ما از Visual Studio 2022 ASP.NET Core 6.0 استفاده می کنیم، اما نسخه های قدیمی تر احتمالا کار خواهند کرد. با این حال، ساختار کد اولیه برای هر نسخه متفاوت است، بنابراین لطفا تفاوت ها را خودتان درک کنید.

ایجاد یک پروژه هسته ای ASP.NET

"Visual Studio 2022" را از منوی شروع راه اندازی کنید.

گزینه Create New Project را انتخاب کنید.

این بار، "ASP.NET Core Web App" را به عنوان نمونه انتخاب کنید. اگر شما در ASP.NET Core اجرا می کنید، می توانید قالب های دیگر را اجرا کنید، اما باید هر قالب را در مورد چگونگی ساخت ان دنبال کنید.

نام و مکان پروژه را به صورت دلخواه تنظیم کنید.

اطلاعات اضافی را همانطور که هست بگذارید.

پروژه ایجاد شده است.

اجرای WebGL غیر فشرده

اماده سازی یک برنامه WebGL ایجاد شده بدون فشرده سازی.

اطمینان حاصل کنید که بازی به سرعت کار می کند

ASP.NET سعی کنید یک بازی WebGL را با تنظیمات کمتر بدون پیروی از اداب اصلی اجرا کنید.

در ASP.NET Core، شما نمی توانید به برخی از فایل های WebGL منتشر شده توسط Unity در حالت پیش فرض دسترسی داشته باشید. این را در دسترس قرار دهید.

برنامه.cs

از پروژه خود باز کنید Program.cs . به نسخه های قبلی ASP.NET Core اعمال می شود Startup.cs .

یک فضای نام را به بالای کد اضافه کنید و موارد زیر را در کد 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، به طوری که هنگامی که یک فایل قابل دسترسی است، .wasm می توان ان را به مشتری با مشخص شده Content-Type بازگشت.

استقرار WebGL

پوشه های فایل زیر را از Unity در پروژه wwwroot خود قرار دهید.

Index.html
ساخت
قالبData

Index.cshtmlindex.html لینک را باز کنید تا بتوانید به ان دسترسی داشته باشید.

<!-- 省略 -->

<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>

برنامه را اجرا کنید و مطمئن شوید که بازی کار می کند.

اجرای برنامه WebGL روی صفحه Razor

بازی قبلی بر روی یک فایل HTML استاتیک اجرا شد، بنابراین در جایی اجرا می شود که هیچ ارتباطی با هسته ASP.NET ندارد. این برای یکنواختی برنامه بسیار مطلوب نیست، بنابراین ما رفتار فایل HTML را به Razor Pages منتقل می کنیم.

روی پوشه Pages از پروژه خود کلیک راست کنید تا یک مورد جدید اضافه شود.

Razor Page - Empty را انتخاب کنید. نام خاصی مشخص نشده است، اما در اینجا WebGL.cshtml اضافه شده است.

کد نمایش داده می شود.

index.html به محتویات فایل و پورت به WebGL.cshtml . link برخی از نکات عجیب و غریب وجود دارد، مانند چگونگی قرار دادن برچسب، اما من ان را به خاطر سادگی توضیح می گذارم.

@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 اضافه کردن یک لینک به .

<!-- 省略 -->

<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>

سعی کنید برنامه را اجرا کنید. شما می توانید ببینید که هدر و پاورقی _Layout.cshtml در صفحه WebGL با توجه به نمایش داده می شود.

تغییر مکان پروندههای WebGL

من فایل WebGL را مستقیما در زیر قرار دادم، اما این روش زمانی که دو یا چند فایل WebGL wwwroot را قرار می دهید، ان را بازنویسی می کند. من توضیح خواهم داد که چگونه این را در پوشه های جداگانه قرار دهید و ان را حرکت دهید.

اول از همه، یک پوشه جدید به نام "webgl" ایجاد کنید و ان را به انجا منتقل کنید. دو پوشه ای که باید Buildمنتقل شوند عبارتند از TemplateData : index.html من قبلا ان را به Razor Pages منتقل کرده ام و می توانم با خیال راحت ان را حذف کنم.

از انجا WebGL.cshtml که ما سلسله مراتب پوشه را عمیق تر کرده ایم، مسیر توصیف شده در ان را نیز عمیق تر خواهیم کرد. اصلاح 3 خط است.

قبل از اصلاح

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

    var buildUrl = "Build";

پس از اصلاح

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

    var buildUrl = "webgl/Build";

برنامه را اجرا کنید تا ببینید ایا به درستی کار می کند.

در حال اجرا WebGL فشرده با Gzip

فرمت فایل فشرده شده توسط Gzip است ، و این یک فایل است .gz که می تواند توسط ASP.NET Core اداره شود. Unity WebGL Content-Type و به طور متفاوتی اداره می شوند و نیاز به تبدیل دارند.

اول، یک استقرار فایل WebGL و صفحه ایجاد کنید.

قرار دادن فایل WebGL

wwwrootwebgl-gzip یک پوشه در زیر Gzip ایجاد کنید و پوشه ، را از فایل BuildTemplateData WebGL که با Gzip ایجاد کرده اید کپی کنید.

ایجاد یک صفحه تیغ

این بار WebGLGzip.cshtml ایجاد فایل با استفاده از همان روش به عنوان زمانی که uncompressed.

کد به شرح زیر است با اشاره به خروجی در index.html وحدت. این مسیر با پوشه ای که قبلا برای فایل های WebGL ایجاد webgl-gzip کرده اید مطابقت دارد.

@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>
}

تغییر دهید تا ناوبری به این صفحه اجازه داده شود Index.cshtml .

<!-- 省略 -->

<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>

برنامه رفع.cs

app.UseStaticFiles بخشی را که روش را پردازش می کند به شرح زیر تغییر دهید.

قبل از اصلاح

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

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

پس از اصلاح

// ここから追加
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");
      }
    }
  },
});
// ここまで追加

در هسته ASP.NET .gz ، فایل Content-Type application/x-gzip با بازگشت. همانطور که هست، Unity WebGL در مشتری نمی تواند ان را تعیین کند، بنابراین .gz من ان را بازنویسی می کنم و با توجه به Content-Type گسترش فایل که حذف می شود، باز می گردانم. Content-Encoding من هم ان را تنظیم کردم چون gzip لازم است.

به هر حال، من همچنین کد Brotli را با هم قرار می دهم، بنابراین شما می توانید از این کد استفاده کنید، همانطور که در مکاتبات Brotli مورد بعدی است. Brotli همچنین .br rewrite Content-Encoding br را برای مطابقت با Content-Type فرمت فایل بدون تنظیم می کند. با این حال، فایل به طور پیش فرض در هسته ASP.NET غیر قابل دسترس است،.br بنابراین provider.Mappings من ان را با .br .

پس از ان، اشکال زدایی را اجرا کنید و بررسی کنید که ایا بازی به درستی کار می کند.

اگر ان را به درستی تنظیم کرده اید و بازی هنوز نمایش داده نمی شود، سعی کنید کش مرورگر وب خود را پاک کنید تا کوکی های خود را پاک کنید.

در حال اجرا WebGL فشرده با Brotli

این روش تقریبا مشابه Gzip است و بخش Gzip را با Brotli جایگزین می کند. با این حال، فایل های Brotli (.br) به طور پیش فرض در هسته ASP.NET قابل دسترسی نیستند. شما باید ان را پیکربندی کنید تا بتوانید به ان دسترسی داشته باشید، اما اگر در زمان Gzip از کد استفاده می کنید، پشتیبانی می شود.

اول، یک استقرار فایل WebGL و صفحه ایجاد کنید.

قرار دادن فایل WebGL

wwwrootwebgl-brotli در قسمت Create a folder، پوشه ، را از فایل WebGL که BuildTemplateData با Brotli ایجاد کرده اید کپی کنید.

ایجاد یک صفحه تیغ

ایجاد فایل با استفاده از WebGLBrotli.cshtml مراحل مشابه برای Gzip.

کد به شرح زیر است با اشاره به خروجی در index.html وحدت. این مسیر با پوشه ای که قبلا برای فایل های WebGL ایجاد webgl-brotli کرده اید مطابقت دارد.

@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>
}

تغییر دهید تا ناوبری به این صفحه اجازه داده شود Index.cshtml .

<!-- 省略 -->

<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>

برنامه رفع.cs

اگر هنگام پشتیبانی از Gzip ان را تغییر دهید، می توانید از همان کد استفاده کنید.

پس از رفع ان، اشکال زدایی را اجرا کنید و بررسی کنید که ایا بازی کار می کند.

درک علائم دسترسی به فایل های Brotli در یک وب سرور IIS

Brotli به طور پیش فرض توسط IIS پشتیبانی نمی شود، بنابراین پیکربندی در سمت IIS مورد نیاز است. به نظر می رسد که می توان ان را با ایجاد تنظیمات پیشرفته انجام داد، اما من ان را در این نکته توضیح نمی دهم. لطفا به اطلاعات مرتبط زیر مراجعه کنید.

پیام خطا

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)

خروجی یک وب بهینه سازی شده (WebGL) بازی

تغییر وضوح بازی