ASP.NET कोर के साथ एकता वेबजीएल चला रहा है

सत्यापन वातावरण

विंडोज़

• विंडोज 11

एकता संपादक

• 2020.3.25f1

Visual Studio

• Visual Studio 2022

ASP.NET कोर

• ASP.NET कोर 6.0

इंटरनेट सूचना सेवा (IIS)

• IIS 10.0

पहले

कोर ASP.NET चल रहे वेब सर्वर पर WebGL in Unity के रूप में गेम आउटपुट चलाने का तरीका जानें. गेम प्रोग्राम के लिए, नीचे दिए गए टिप्स चरणों में आउटपुट का उपयोग करें। गेम उदाहरण 2 डी प्लेटफ़ॉर्मर माइक्रोगेम का उपयोग करता है, जिसे यूनिटी हब से बनाया जा सकता है।

• एक वेब-अनुकूलित (वेबजीएल) गेम आउटपुट करें

मैं वेबजीएल गेम चलाने के लिए "अनकंप्रेस्ड वेबजीएल", "वेबजीएल कंप्रेस्ड विद ग्ज़िप" और "वेबजीएल कंप्रेस्ड विद ब्रोटली" सेट अप करने का तरीका बताऊंगा। प्रक्रिया उन सभी के लिए समान है।

हम Visual Studio 2022, ASP.NET कोर 6.0 का उपयोग कर रहे हैं, लेकिन पुराने संस्करण शायद काम करेंगे। हालांकि, प्रारंभिक कोड की संरचना प्रत्येक संस्करण के लिए अलग है, इसलिए कृपया मतभेदों को स्वयं समझें।

एक ASP.NET कोर प्रोजेक्ट बनाना

प्रारंभ मेनू से "Visual Studio 2022" लॉन्च करें।

नया प्रोजेक्ट बनाएँ का चयन करें.

इस बार, नमूने के रूप में "ASP.NET कोर वेब ऐप" का चयन करें। यदि आप ASP.NET कोर पर चल रहे हैं, तो आप अन्य टेम्प्लेट चला सकते हैं, लेकिन आपको इसे बनाने के तरीके पर प्रत्येक टेम्पलेट का पालन करना होगा।

प्रोजेक्ट का नाम और स्थान मनमाने ढंग से सेट करें।

अतिरिक्त जानकारी को वैसे ही छोड़ दें।

परियोजना बनाई गई है।

अनकंप्रेस्ड WebGL चलाएँ

संपीड़न के बिना बनाया गया एक वेबजीएल प्रोग्राम तैयार करें।

सुनिश्चित करें कि खेल जल्दी से काम करता है

ASP.NET कोर शिष्टाचार का पालन किए बिना कम सेटिंग्स के साथ वेबजीएल गेम चलाने का प्रयास करें।

ASP.NET कोर में, आप डिफ़ॉल्ट स्थिति में एकता द्वारा उत्सर्जित कुछ WebGL फ़ाइलों तक नहीं पहुँच सकते। इसे सुलभ बनाएं।

कार्यक्रम.cs

अपने Program.cs प्रोजेक्ट से खोलें। पुराने ASP.NET कोर संस्करणों 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 परिनियोजन

अपने प्रोजेक्ट 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>

कार्यक्रम चलाएं और सुनिश्चित करें कि खेल काम करता है।

रेज़र पृष्ठ पर कोई वेबजीएल प्रोग्राम चलाएँ

पिछला गेम एक स्थिर एचटीएमएल फ़ाइल पर चलता था, इसलिए यह एक ऐसी जगह पर चलता है जिसका ASP.NET कोर से कोई लेना-देना नहीं है। यह प्रोग्राम एकरूपता के लिए बहुत वांछनीय नहीं है, इसलिए हम HTML फ़ाइल के व्यवहार को रेज़र पृष्ठों पर ले जाएंगे।

कोई नया आइटम जोड़ने के लिए अपने प्रोजेक्ट से पेज फ़ोल्डर राइट-क्लिक करें.

रेज़र पृष्ठ का चयन करें - खाली. कोई विशेष नाम निर्दिष्ट नहीं है, लेकिन यह यहां 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 फ़ाइलों का स्थान परिवर्तित करें

मैंने वेबजीएल फ़ाइल को सीधे नीचे रखा है, लेकिन जब आप दो या अधिक वेबजीएल wwwroot फाइलें रखते हैं तो यह विधि इसे अधिलेखित करेगी। मैं समझाऊंगा कि इसे अलग-अलग फ़ोल्डरों में कैसे रखा जाए और इसे स्थानांतरित किया जाए।

सबसे पहले, "वेबजीएल" नामक एक नया फ़ोल्डर बनाएं और इसे वहां ले जाएं। स्थानांतरित किए जाने Buildवाले दो फ़ोल्डर हैं, TemplateData । index.html मैंने पहले ही इसे रेज़र पेज पर पोर्ट कर लिया है और इसे सुरक्षित रूप से हटा सकता हूं।

चूंकि हमने फ़ोल्डर पदानुक्रम को गहरा कर दिया है, इसलिए 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";

यह देखने के लिए प्रोग्राम चलाएं कि यह ठीक से काम करता है या नहीं।

Gzip के साथ संपीड़ित वेबजीएल चलाना

Gzip द्वारा संपीड़ित फ़ाइल का विस्तार है, और यह एक फ़ाइल है जिसे ASP.NET कोर द्वारा नियंत्रित किया जा सकता है .gz , यूनिटी वेबजीएल Content-Type और इसे अलग तरह से संभाला जाता है और रूपांतरण की आवश्यकता होती है।

सबसे पहले, एक WebGL फ़ाइल परिनियोजन और पृष्ठ बनाएँ।

WebGL फ़ाइल प्लेसमेंट

wwwrootwebgl-gzip Gzip के तहत एक फ़ोल्डर बनाएँ और Gzip के साथ आपके द्वारा बनाई गई WebGL फ़ाइल BuildTemplateData से फ़ोल्डर की प्रतिलिपि बनाएँ।

कोई रेज़र पेज बनाएँ

इस बार WebGLGzip.cshtml फ़ाइल को उसी प्रक्रिया का उपयोग करके बनाएँ जब संपीड़ित न हो।

कोड एकता में आउटपुट के संदर्भ में 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 के साथ वापस आ जाती है। जैसा कि यह है, क्लाइंट पर यूनिटी वेबजीएल इसे निर्धारित नहीं कर सकता है, इसलिए .gz मैं इसे उस फ़ाइल के विस्तार के अनुसार Content-Type फिर से लिखता हूं और वापस करता हूं जिसमें शामिल नहीं है। Content-Encoding मैंने इसे भी सेट किया क्योंकि यह gzip आवश्यक है।

वैसे, मैंने ब्रोटली कोड को भी एक साथ रखा है, इसलिए आप इस कोड का उपयोग कर सकते हैं क्योंकि यह अगले आइटम के ब्रोटली पत्राचार में है। ब्रोटली फ़ाइल के विस्तार से मेल खाने Content-Type के लिए फिर से लिखना Content-Encoding br भी .br सेट करता है। हालांकि, फ़ाइल कोर में डिफ़ॉल्ट रूप से पहुंच योग्य नहीं है,.br इसलिए provider.Mappings मैंने इसे .br जोड़ा ASP.NET।

उसके बाद, डीबग चलाएं और जांचें कि गेम सही तरीके से काम करता है या नहीं।

यदि आपने इसे सही तरीके से सेट किया है और गेम अभी भी प्रदर्शित नहीं होगा, तो अपनी कुकीज़ को साफ़ करने के लिए अपने वेब ब्राउज़र के कैश को साफ़ करने का प्रयास करें।

Brotli के साथ संपीड़ित वेबजीएल चलाना

प्रक्रिया लगभग Gzip के समान है, Gzip भाग को Brotli के साथ बदल दिया जाता है। हालाँकि, Brotli (.br) फ़ाइलें डिफ़ॉल्ट रूप से ASP.NET कोर में पहुँच योग्य नहीं हैं। आपको इसे कॉन्फ़िगर करने की आवश्यकता है ताकि आप इसे एक्सेस कर सकें, लेकिन यदि आप Gzip के समय कोड का उपयोग कर रहे हैं, तो यह समर्थित है।

सबसे पहले, एक WebGL फ़ाइल परिनियोजन और पृष्ठ बनाएँ।

WebGL फ़ाइल प्लेसमेंट

wwwrootwebgl-brotli फ़ोल्डर बनाएँ के अंतर्गत, Brotli के साथ बनाई गई BuildTemplateData WebGL फ़ाइल से फ़ोल्डर की प्रतिलिपि बनाएँ.

कोई रेज़र पेज बनाएँ

Gzip के समान चरणों का उपयोग करके WebGLBrotli.cshtml फ़ाइल बनाएँ।

कोड एकता में आउटपुट के संदर्भ में 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 समर्थित होने पर इसे संशोधित करते हैं, तो आप उसी कोड का उपयोग कर सकते हैं।

इसे ठीक करने के बाद, डीबग चलाएं और जांचें कि गेम काम करता है या नहीं।

यदि आपने इसे सही तरीके से सेट किया है और गेम अभी भी प्रदर्शित नहीं होगा, तो अपनी कुकीज़ को साफ़ करने के लिए अपने वेब ब्राउज़र के कैश को साफ़ करने का प्रयास करें।

IIS वेब सर्वर पर Brotli फ़ाइलों तक पहुँचने के लक्षणों को समझना

Brotli डिफ़ॉल्ट रूप से IIS द्वारा समर्थित नहीं है, इसलिए IIS पक्ष पर कॉन्फ़िगरेशन की आवश्यकता है। ऐसा लगता है कि इसे उन्नत सेटिंग्स बनाकर नियंत्रित किया जा सकता है, लेकिन मैं इसे इस टिप में नहीं समझाऊंगा। कृपया नीचे दी गई जानकारी देखें।

• asp.net कोर 2.2 ब्रोटली संपीड़न 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)