Problem building WebGL - Githubissues

HDClark94 commented 3 years ago

Hi,

I've been trying to make a webGL build of a task. My tasks builds when I reconfigure the datasaver settings however doesn't run when I host the game on a local server. Building a webGL version of SpaceShuttleExample also causes this failure to run on a local server. When opening the index.html in chrome and firefox the example freezes on "the experiment is loading" loading bar.

WebGL builds and runs fine in firefox and chrome with a simple cube and camera scene without UXF

Have you had any experience of this happening?

I am hosting a local server with servez. Server traceback:

server started on ::8080 for path: C:\Users\44756\Documents\Run2WebGL.2\b4
available on:
   https://localhost:8080
   https://192.168.0.46:8080
   https://127.0.0.1:8080
GET /
GET /Template/style.css
GET /%UNITY_WEBGL_LOADER_URL%
ERROR: GET /%UNITY_WEBGL_LOADER_URL% URIError: URI malformed
GET /
GET /Template/style.css
GET /%UNITY_WEBGL_LOADER_URL%
ERROR: GET /%UNITY_WEBGL_LOADER_URL% URIError: URI malformed
GET /favicon.ico
ERROR: GET /favicon.ico [404: does not exist]

Thanks

jackbrookes commented 3 years ago

Hi, which version of Unity are you using? I will try to replicate this issue

jackbrookes commented 3 years ago

I am confused as to where %UNITY_WEBGL_LOADER_URL% comes from? This is not contained in any of the templates as far as I can see. Could you find this in your index.html file when opened in notepad as paste it here?

HDClark94 commented 3 years ago

I'm using Unity 2020, this also happens in 2021, I'm trying in 2019 as well now. index.html below:

!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>%UNITY_WEB_NAME% | UXF WebGL Experiment</title>
    <link rel="stylesheet" href="./Template/style.css" />
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>

    <!-- AWS SDK required for DynamoDB -->
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.776.0.min.js"></script>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>

<body>
    <h1>%UNITY_WEB_NAME%</h1>

    <div class="centered" style="width: %UNITY_WIDTH%px;">
        <!-- Edit the description field in Unity WebGL Player Settings -->
        <p>%UNITY_CUSTOM_DESCRIPTION%</p>
    </div>

    <div class="centered" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;">

        <!-- Unity content -->
        <div id="unity-container" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px;">
        </div>

        <!-- progress bar & load message -->
        <div id="loader" class="loader">
            <p>The experiment is loading...</p>
            <div class="progressbar">
                <div id="fill" class="fill" style="width: 0%;"></div>
            </div>
        </div>

        <!-- If you do not care about fullscreen, delete the below div -->
        <div id="fullscreen-message" style="display: none;">
            <div class="fullscreen-message-inner">
                <p>
                    You must run the experiment in Fullscreen. Please press the button below to play.
                </p>
                <p>
                    <button class="action" onclick="openFullscreen();">
                        <div class="text">
                            Fullscreen
                        </div>
                        <svg id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" stroke-width="2" stroke="currentColor" fill="none" style="vertical-align:middle">
                            <path d="M3 11V3H11M21 3H29V11 M29 21V29H21 M11 29H3V21" />
                        </svg>
                    </button>
                </p>
            </div>
        </div>
    </div>

    <!-- Unity Container -->
    <p>Experiment developed with
        <a href="http://immersivecognition.com/unity-experiment-framework/">UXF</a>
    </p>

    <script>
        // Custom progressbar function
        function customProgress(unityInstance, progress) {
            // Change fill of the progress bar
            const fill = document.getElementById("fill");
            fill.style.width = progress * 100 + "%";

            // If loaded, remove loader
            if (progress === 1) {
                const loader = document.getElementById("loader");
                loader.remove();

                const fsMessage = document.getElementById("fullscreen-message");
                fsMessage.style.display = "block";
            }
        }

        // Unity Initialization
        var unityInstance = UnityLoader.instantiate(
            "unity-container",
            "%UNITY_WEBGL_BUILD_URL%", {
                onProgress: customProgress
            }
        );

        /* Get the element you want displayed in fullscreen mode */
        var elem = document.getElementById("unity-container");

        /* When the openFullscreen() function is executed, open the video in fullscreen.
        Note that we must include prefixes for different browsers, as they don't support the requestFullscreen method yet */
        function openFullscreen() {
            if (elem.requestFullscreen) {
                elem.requestFullscreen();
            } else if (elem.webkitRequestFullscreen) { /* Safari */
                elem.webkitRequestFullscreen();
            } else if (elem.msRequestFullscreen) { /* IE11 */
                elem.msRequestFullscreen();
            }
        }
    </script>

</body>

</html>

BrainonSilicon commented 3 years ago

Hi @HDClark94

I’ll also dig into this over the weekend. But as general advice - try to roll back to Unity 2019.4 as it’s the last good stable build. 2020 has a lot of well documented issues.

If there’s a LTS version that you feel familiar with then also go with that one.

On Thu, 21 Jan 2021 at 16:06 HDClark94 notifications@github.com wrote:

I'm using Unity 2020, this also happens in 2021, I'm trying in 2019 as well now. index.html below:

!DOCTYPE html>
%UNITY_WEB_NAME% | UXF WebGL Experiment
%UNITY_WEB_NAME%

%UNITY_CUSTOM_DESCRIPTION%

The experiment is loading...

You must run the experiment in Fullscreen. Please press the button below to play.

Experiment developed with UXF

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/immersivecognition/unity-experiment-framework/issues/59#issuecomment-764749469, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKGUOSZA5RFV3R27AISB7RLS3BGITANCNFSM4WNBWACA .

-- Sophia Batchelor

University of California Berkeley Class of 2019 ssmbatchelor@gmail.com | 510 990 5868 | Build a Brighter World

HDClark94 commented 3 years ago

This also seems to occur while opening the index.html of the WebGl template (firefox, chrome hosted from a local server)

jackbrookes commented 3 years ago

Ah, I see, you should not be serving the template folder - point Servez or other web server to the folder where you build to (the folder you select when building).

HDClark94 commented 3 years ago

Oh I am hosting this folder. For the WebGL template I host "UXF WebGL"

jackbrookes commented 3 years ago

You should build your application using the Build menu, and select a folder (e.g. on desktop), then select that same folder in Servez. Right now you are serving the template directory, which is just a template for what the web page should look like. The build process fills in the template strings for you (e.g. %UNITY_WEB_NAME%).

HDClark94 commented 3 years ago

Oh right my apologies, I thought UXF WebGL was the example for a web GL build, I can build the spaceship example from Unity 2019 now. I'll stick to this release. Thank you for your swift responses!

immersivecognition / unity-experiment-framework

Problem building WebGL #59

%UNITY_WEB_NAME%