تشغيل Unity WebGL مع نواة ASP.NET

بيئة التحقق

نوافذ

• ويندوز ١١

محرر الوحدة

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

سأشرح كيفية إعداد "WebGL غير مضغوط" و "WebGL مضغوط باستخدام Gzip" و "WebGL مضغوط باستخدام Brotli" لتشغيل ألعاب WebGL. الإجراء هو نفسه بالنسبة لهم جميعا.

نحن نستخدم Visual Studio 2022 ، ASP.NET Core 6.0 ، ولكن من المحتمل أن تعمل الإصدارات القديمة. ومع ذلك ، يختلف هيكل الكود الأولي لكل إصدار ، لذا يرجى فهم الاختلافات بنفسك.

إنشاء مشروع أساسي ASP.NET

قم بتشغيل "Visual Studio 2022" من قائمة ابدأ.

حدد إنشاء مشروع جديد.

هذه المرة ، حدد "ASP.NET Core Web App" كعينة. إذا كنت تعمل على ASP.NET Core ، فيمكنك تشغيل قوالب أخرى ، ولكنك ستحتاج إلى اتباع كل قالب حول كيفية إنشائه.

قم بتعيين اسم المشروع وموقعه بشكل تعسفي.

اترك المعلومات الإضافية كما هي.

تم إنشاء المشروع.

تشغيل WebGL غير مضغوط

قم بإعداد برنامج WebGL تم إنشاؤه بدون ضغط.

تأكد من أن اللعبة تعمل بسرعة

ASP.NET حاول تشغيل لعبة WebGL بإعدادات أقل دون اتباع آداب السلوك الأساسية.

في ASP.NET Core ، لا يمكنك الوصول إلى بعض ملفات WebGL المنبعثة من Unity في الحالة الافتراضية. اجعل هذا متاحا.

البرنامج.cs

افتح من مشروعك Program.cs . ينطبق على الإصدارات Startup.cs الأساسية ASP.NET السابقة.

أضف مساحة اسم إلى أعلى التعليمة البرمجية واستبدل ما يلي في التعليمة البرمجية 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 .

• الفهرس.html
• بنى
• بيانات القالب

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 Core. ليس من المرغوب فيه جدا توحيد البرنامج ، لذلك سننقل سلوك ملف HTML إلى Razor Pages.

انقر بزر الماوس الأيمن فوق مجلد Pages من مشروعك لإضافة عنصر جديد.

حدد صفحة Razor - فارغة. لا يوجد اسم معين محدد ، ولكن يتم إضافته هنا 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 ، الوحدة WebGL Content-Type ويتم التعامل معها بشكل مختلف وتتطلب التحويل.

أولا ، قم بإنشاء نشر ملف WebGL وصفحة.

موضع ملف WebGL

wwwrootwebgl-gzip قم بإنشاء مجلد ضمن Gzip وانسخ المجلد ، من ملف BuildTemplateData WebGL الذي أنشأته باستخدام Gzip.

إنشاء صفحة Razor

هذه المرة WebGLGzip.cshtml قم بإنشاء الملف باستخدام نفس الإجراء كما هو الحال عند فك الضغط.

الكود كما يلي بالإشارة إلى الإخراج في index.html الوحدة. يطابق المسار المجلد الذي قمت بإنشائه webgl-gzip مسبقا لملفات WebGL.

@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 Core .gz ، يتم إرجاع الملف Content-Type application/x-gzip ب . كما هو ، لا يمكن ل Unity WebGL على العميل تحديده ، لذلك .gz أعيد كتابته وإعادته حسب Content-Type امتداد الملف الذي يستثني . Content-Encoding أنا أيضا ضبطه لأنه gzip ضروري.

بالمناسبة ، قمت أيضا بوضع رمز Brotli معا ، بحيث يمكنك استخدام هذا الرمز كما هو في مراسلات Brotli للعنصر التالي. يقوم Brotli أيضا .br بتعيين إعادة الكتابة Content-Encoding br لمطابقة Content-Type امتداد الملف بدون . ومع ذلك ، لا يمكن الوصول إلى الملف افتراضيا في ASP.NET Core ،.br لذلك provider.Mappings أضفته ب .br .

بعد ذلك ، قم بتشغيل التصحيح وتحقق مما إذا كانت اللعبة تعمل بشكل صحيح.

إذا قمت بإعداده بشكل صحيح ولا تزال اللعبة لا يتم عرضها ، فحاول مسح ذاكرة التخزين المؤقت لمتصفح الويب لمسح ملفات تعريف الارتباط الخاصة بك.

تشغيل WebGL مضغوط مع Brotli

الإجراء هو نفسه تقريبا مثل Gzip ، حيث يتم استبدال جزء Gzip ب Brotli. ومع ذلك ، لا يمكن الوصول إلى ملفات Brotli (.br) بشكل افتراضي في ASP.NET Core. تحتاج إلى تكوينه حتى تتمكن من الوصول إليه ، ولكن إذا كنت تستخدم الكود في وقت Gzip ، فهو مدعوم.

أولا ، قم بإنشاء نشر ملف WebGL وصفحة.

موضع ملف WebGL

wwwrootwebgl-brotli ضمن إنشاء مجلد، انسخ المجلد , من ملف WebGL الذي BuildTemplateData أنشأته باستخدام Brotli.

إنشاء صفحة Razor

قم بإنشاء الملف باستخدام WebGLBrotli.cshtml نفس الخطوات الخاصة ب Gzip.

الكود كما يلي بالإشارة إلى الإخراج في index.html الوحدة. يطابق المسار المجلد الذي قمت بإنشائه webgl-brotli مسبقا لملفات WebGL.

@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. يبدو أنه يمكن التعامل معها عن طريق إجراء إعدادات متقدمة ، لكنني لن أشرحها في هذه النصيحة. يرجى الرجوع إلى المعلومات المرتبطة أدناه.

• asp.net ضغط brotli الأساسي 2.2 لا يعمل على IIS؟
• نظرة عامة على ضغط IIS
• WebGL: نموذج التعليمات البرمجية لتكوين الخادم
• WebGL - نشر البنيات المضغوطة

رسالة خطأ

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)