Changes to the WebGL loader and templates introduced in Unity 2020.1

so you're saying that inside the function I should send messages to unityInstance rather than window.unityInstance?

unityInstance.SendMessage('Player', 'Stop');

 

Thanks very much for all your help...I've currently changed my whole function to this:

Code (JavaScript):

1. function predictUnityClass(classIDValue) {
2.  
3. console.log(classIDValue);
4.  
5. window.unityInstance = unityInstance;
6.  
7. if (classIDValue === 0) {
8. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'Stop');
9. } else if (classIDValue === 1) {
10. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveUp');
11. } else if (classIDValue === 2) {
12. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveDown');
13. } else if (classIDValue === 3) {
14. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveLeft');
15. } else if (classIDValue === 4) {
16. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveRight');
17. } else if (classIDValue === 5) {
18. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveUpLeft');
19. } else if (classIDValue === 6) {
20. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveUpRight');
21. } else if (classIDValue === 7) {
22. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveDownRight');
23. } else if (classIDValue === 8) {
24. window.unityInstance .SendMessage('SpherePlayer_HD(clone)', 'MoveDownLeft');
25. }
26. }

Now the problem seems to be that (judging from the console when I try to directly send a message) JS and Unity CANNOT seem to communicate... I either get an "Uncaught ReferenceError: unityInstance is not defined" or an "Uncaught TypeError: Cannot read property "SendMessage" of undefined"

How do I address this?

 

@jukka_j

When you say script.onload. What script is it pointing to ?
Is it UnityProgress.js or UnityLoader.js ?

When I try to do it with either of the above script I get an error: CreateUnityInstance is not a function

Code (JavaScript):

1.  
2.  
3.  
4.  
5.      var script = document.createElement('script');
6.      script.src = "TemplateData/UnityProgress.js";//"Build/UnityLoader.js";
7.      document.head.append(script);
8.     script.onload = () => {
9.        
10.         window.createUnityInstance(window.canvas, window.config, (progress) => {
11.        
12.           progressBarFull.style.width = 100 * progress + "%";
13.         }).then((unityInstance) => {
14.           // (*)            
15.       var unityInstance = UnityLoader.instantiate("unityContainer", "Build/New folder.json", {onProgress: UnityProgress});
16.           loadingBar.style.display = "none";
17.           fullscreenButton.onclick = () => {
18.             unityInstance.SetFullscreen(1);
19.           };
20.         }).catch((message) => {
21.           alert(message);
22.         });
23.       };
24.  
25.  

 

There is a problem with the Unity Loader (2020.1.17f1) on Chrome & Firefox on iPhone. It is a problem with reading the UserAgent string. The loader fails because the loader is not getting the browser version or browser from the UA string.

I am pretty sure it will happen to all games using the loader. I have logged a bug about it - Case 1314984

See more info here - https://bugs.chromium.org/p/chromium/issues/detail?id=1177708

 

I think this is different to that one. We were applying that fix ourselves for Big Sur before we upgraded to Unity 2020.1.17f1. This issue breaks in a different place/way and only on iPhones and iPads running Chrome or Firefox.

Its very easy to reproduce. On my laptop I can see it if I change my UA string in Chrome in Network Conditions to "Chrome - iPhone" and go to smashkarts.io It breaks in the exact same way as it does on the phone.

 

c4c07f153778d8abf1842ac44b3ff052.loader.js:1 exception thrown: TypeError: Cannot read property 'length' of null,TypeError: Cannot read property 'length' of null
at lengthBytesUTF8 (https://smashkartsgc.b-cdn.net/Build2020New/27730cfe250ac9d39b3691273e381a77.framework.js.br:2:15509)
at _JS_SystemInfo_GetBrowserVersionString (https://smashkartsgc.b-cdn.net/Build2020New/27730cfe250ac9d39b3691273e381a77.framework.js.br:2:52881)

I had a look into it yesterday. The problem is specifically to do with the loader.js SystemInfo function. It sets "browser" and "browserVersion" to null for the iOS browsers. I did a quick test where I hardcoded those values in the loader and the game ran on iOS Chrome and Firefox. Unfortunately I didn't have time to pursue a proper fix.

 

hello
Ihave a project where i use my website to open an Iframe and play unity content through the Iframe.
in the attached code

Code (JavaScript):

1. <!DOCTYPE html>
2. <html lang="en-us">
3.  
4. <head>
5.   <meta charset="utf-8">
6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7.   <title>Unity WebGL Player | UnityReciever</title>
8.   <link rel="shortcut icon" href="TemplateData/favicon.ico">
9.   <link rel="stylesheet" href="TemplateData/style.css">
10. </head>
11.  
12. <body>
13.   <div id="unity-container" class="unity-desktop">
14.     <canvas id="unity-canvas"></canvas>
15.     <div id="unity-loading-bar">
16.       <div id="unity-logo"></div>
17.       <div id="unity-progress-bar-empty">
18.         <div id="unity-progress-bar-full"></div>
19.       </div>
20.     </div>
21.     <div id="unity-footer">
22.       <div id="unity-webgl-logo"></div>
23.       <div id="unity-fullscreen-button"></div>
24.       <div id="unity-build-title">UnityReciever</div>
25.     </div>
26.     <div>
27.       <input placeholder="Enter text..." id="htmlinput"><button onclick="SendMessage()">Send to Unity</button>
28.     </div>
29.   </div>
30.   <script>
31.     var buildUrl = "Build";
32.     var loaderUrl = buildUrl + "/UnityReciever_Build4.loader.js";
33.     var config = {
34.       dataUrl: buildUrl + "/UnityReciever_Build4.data.unityweb",
35.       frameworkUrl: buildUrl + "/UnityReciever_Build4.framework.js.unityweb",
36.       codeUrl: buildUrl + "/UnityReciever_Build4.wasm.unityweb",
37.       streamingAssetsUrl: "StreamingAssets",
38.       companyName: "DefaultCompany",
39.       productName: "UnityReciever",
40.       productVersion: "0.1",
41.     };
42.  
43.     var container = document.querySelector("#unity-container");
44.     var canvas = document.querySelector("#unity-canvas");
45.     var loadingBar = document.querySelector("#unity-loading-bar");
46.     var progressBarFull = document.querySelector("#unity-progress-bar-full");
47.     var fullscreenButton = document.querySelector("#unity-fullscreen-button");
48.  
49.     if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
50.       container.className = "unity-mobile";
51.       config.devicePixelRatio = 1;
52.     } else {
53.       canvas.style.width = "960px";
54.       canvas.style.height = "600px";
55.     }
56.     loadingBar.style.display = "block";
57.  
58.     var script = document.createElement("script");
59.     script.src = loaderUrl;
60.     script.onload = () => {
61.       createUnityInstance(canvas, config, (progress) => {
62.         progressBarFull.style.width = 100 * progress + "%";
63.       }).then((unityInstance) => {
64.         console.log('unityInstance', unityInstance);
65.         window.unityInstance = unityInstance
66.         loadingBar.style.display = "none";
67.         fullscreenButton.onclick = () => {
68.           unityInstance.SetFullscreen(1);
69.         };
70.       }).catch((message) => {
71.         alert(message);
72.       });
73.     };
74.     function SendMessage() {
75.  
76.       unityInstance.SendMessage('DataInjector', 'SetUserID', 'check');
77.     }
78.     document.body.appendChild(script);
79.   </script>
80. </body>
81.  
82. </html>

we've already managed to inject a string into the project successfully (line 76).
However I don't want to inject it through an embedded element (like the div in line 27) but through the JS file of the hosting web page.
(for instance, inject the userID or updated stats) and this so far We've failed to do.

How can I, through the link that leads to the index.html call the "SendMessege" from the web page?
https://nir-webgl.s3.eu-central-1.amazonaws.com/RemoteInjection/Injection2020/index.html

 

I was just wondering about what files of a build can be reused by other builds displayed on the same website. So I understand the build.loader.js is now build-specific and cannot be shared, what about build.framework.js, can it be shared by different builds provided they rely on the same set of packages?

 

I have a nginx server in AWS and i have exactly the same problem! Where should i place this code? And should i change any name in the code? Thanks!

 

Hello Alex! So even though i place the appropriate .htaccess file into the Build , i don't see any change at all. I have tried both with apache2 and nginx webservers but without any luck. I have also contacted with aws premium support too many times but without any luck either. ( here is a gzip example https://www.instahome360.com/gzip/index.html )

 

is it possible to get an option in the publishing settings which build it like the old way with unityweb files which was working well and now everything is complicated and not working for me?

 

go to version 2019

 

thats what i actually do but i would prefer to use the newest bild and features of unity

now i can get it work without any compression but have problems with gzip compression.

i use razor pages.
i add services.AddResponseCompression();
i also add app.UseResponseCompression();

in firefox console i get:
Uncaught SyntaxError: illegal character U+001F Build.framework.js.gz:1
Uncaught ReferenceError: unityFramework is not defined onload https://localhost:5001/Build/Build.loader.js:1 Build.loader.js:1:3167
[UnityCache] 'https://localhost:5001/Build/Build.data.gz' successfully revalidated and served from the indexedDB cache

but application is not loading

in chrome :

Build.framework.js.gz:1 Uncaught SyntaxError: Invalid or unexpected token
Build.loader.js:1 Uncaught ReferenceError: unityFramework is not defined
at HTMLScriptElement.r.onload (Build.loader.js:1)

Build.loader.js:1 [UnityCache] 'https://localhost:5001/Build/Build.data.gz' successfully downloaded and stored in the indexedDB cache

but also no application loading


even if i add
contentTypeProvider.Mappings.Add(".data.gz", "application/octet-stream");
contentTypeProvider.Mappings.Add(".js.gz", "application/javascript");
contentTypeProvider.Mappings.Add(".wasm.gz", "application/wasm");

nothing changes
any idea what i do wrong?

 

I wish Unity would stop dicking around with the WebGL publishing format it changes every time they do a new release and we have to go back through all the pain of trying to get it to work all over again. But of course they don't bother to publish any help on this for all the different server setups, you're just left to try and figure it all out for yourself.

 

If there was a place to rate quality of Unity Editor I would put 4/10... Finishing learning C++ to switch to other engine.

 

Hi @jukka_j . In the project i'm working on we have a big JS codebase that is hooked to the loader, so we need a not-minified loader to be able to hook on the loader's errorHandler, and other minor tweaks. I found out that the preprocessing is made by the Preprocess.js file inside the unity installation folder. I tried to comment out the uglify-js hook but the build system is still outputting the minified loader. The obvious answer is to make a development build. However, the development build doesn't work with the decompression fallback, and I need this in order to support localhost debugging. Tearing my hair out on this. Can you give me any hints please?

 

I have an issue with the new WebGL Template System and Custom User Variables, when creating a duplicate of a customized template.

Description:
I customized the "Default" Template as described in the Unity Documentation, and created a variable called CORPORATE_BACKGROUND_LOGO_PATH inside style.css, so I can easily set the logo of my app in the Editor. This works well.

But, when I create a second template folder, with the same settings as the first one - by simply duplicating it - I noticed, that my CORPORATE_BACKGROUND_LOGO_PATH is emptied, whenever I select one of the two templates.


How can I use one Custom User Variable for multiple Templates?
Thank you in advance

UPDATE:
I found out, this bug is reproducable by simply switching the Templates (see attached gif)

 

The custom vars are emptied whenever you change template... always has been like that, even before WebGL during the NPAPI plugin-era.

I -think- you might be able to bypass this issue by creating your own editor build script:
https://docs.unity3d.com/ScriptReference/PlayerSettings.WebGL.html

Set which template to use by script. But then not sure how to get the custom vars :\

 

Sorry maybe I did not write the question properly: we need to make modifications to the loader/wrap some stuff from outside. For this, we need a loader that contains the non-minified named functions. The issue is that there's no option to output a loader that's not minified in release mode.

I tried to hack my way around making a development build so just I can extract the un-minified loader and put it in release builds, but this doesn't work because the development builds never include the decompression fallback. In the end I had to manually preprocess the original source of the loader, a very painful task.

 

Unity webgl in mobile browser is now possible!!!
https://forma.dl.it.unity3d.com/

What unity version is needed to build a webgl project that can works on mobile browsers?

 

I think this link is related to that one: https://unity.com/products/unity-forma

 

Yes indeed, but if I remember right Unity-Forma is placed inside unity3D editor.

 

Well, yeah, but

 

Yes, some months ago I had downloaded Forma and it was just a project package that you download and use inside Unity Editor...

 

Thank you very much this is a great news!!

 

how do we set these variables now that we can't set them in the Builds.json file:

CachedXMLHttpRequestDisable = true;
webglContextAttributes.preserveDrawingBuffer = false;

 

thanks

 

Hello,

I am hoping to get some help here. Updated project 2021 from 2019 and this throws an error now in the webconsole now in line 1:

Code (CSharp):

1. ReferenceError: Can't find variable: UnityLoader

Code (CSharp):

1. const unityInstance = UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%");
2. let isCameraReady = false;
3. let isDetectionManagerReady = false;
4. let gl = null;
5.  
6. function cameraReady(){
7.     isCameraReady = true;
8.     gl = unityInstance.Module.ctx;
9. }
10.  
11. function detectionManagerReady(){
12.     isDetectionManagerReady = true;
13. }
14.  
15. function createUnityMatrix(el){
16.     const m = el.matrix.clone();
17.     const zFlipped = new THREE.Matrix4().makeScale(1, 1, -1).multiply(m);
18.     const rotated = zFlipped.multiply(new THREE.Matrix4().makeRotationX(-Math.PI/2));
19.     return rotated;
20. }
21.  
22. AFRAME.registerComponent('markercontroller', {
23.     schema: {
24.         name : {type: 'string'}
25.     },
26.     tock: function(time, timeDelta){
27.  
28.         let position = new THREE.Vector3();
29.         let rotation = new THREE.Quaternion();
30.         let scale = new THREE.Vector3();
31.  
32.         createUnityMatrix(this.el.object3D).decompose(position, rotation, scale);
33.  
34.         const serializedInfos = `${this.data.name},${this.el.object3D.visible},${position.toArray()},${rotation.toArray()},${scale.toArray()}`;
35.  
36.         if(isDetectionManagerReady){
37.           unityInstance.SendMessage("DetectionManager", "markerInfos", serializedInfos);
38.         }
39.     }
40. });
41.  
42. AFRAME.registerComponent('cameratransform', {
43.     tock: function(time, timeDelta){
44.  
45.         let camtr = new THREE.Vector3();
46.         let camro = new THREE.Quaternion();
47.         let camsc = new THREE.Vector3();
48.  
49.         this.el.object3D.matrix.clone().decompose(camtr, camro, camsc);
50.  
51.         const projection = this.el.components.camera.camera.projectionMatrix.clone();
52.         const serializedProj = `${[...projection.elements]}`
53.  
54.         const posCam = `${[...camtr.toArray()]}`
55.         const rotCam = `${[...camro.toArray()]}`
56.         if(isCameraReady){
57.             unityInstance.SendMessage("Main Camera", "setProjection", serializedProj);
58.             unityInstance.SendMessage("Main Camera", "setPosition", posCam);
59.             unityInstance.SendMessage("Main Camera", "setRotation", rotCam);
60.  
61.             let w = window.innerWidth;
62.             let h = window.innerHeight;
63.  
64.             const unityCanvas = document.getElementsByTagName('canvas')[0];
65.  
66.             const ratio = unityCanvas.height / h;
67.  
68.             w *= ratio
69.             h *= ratio
70.  
71.             const size = `${w},${h}`
72.  
73.             unityInstance.SendMessage("Canvas", "setSize", size);
74.         }
75.  
76.         if(gl != null){
77.             gl.dontClearOnFrameStart = true;
78.         }
79.     }
80. });
81.  
82. AFRAME.registerComponent('copycanvas', {
83.     tick: function(time, timeDelta){
84.         const unityCanvas = document.getElementsByTagName('canvas')[0];
85.         unityCanvas.width = this.el.canvas.width
86.         unityCanvas.height = this.el.canvas.height
87.     }
88. });
89.  

I'm hoping it is related and someone can pass on some help!

EDIT: I did some more reading in the thread and found this:

This works thanks!

Thanks,
jrDev

 

What changed? Visual Scripting does not work now! I get this error:


This line seems to be a problem:


Please check this out ASAP!

Thanks,
jrDev

 

=(

/WebGL.framework.js.gz” was loaded even though its MIME type (“application/octet-stream”) is not a valid JavaScript MIME type.

 

Hello,

What can we expect fix to be live?

Thanks,
jrDev

 

Has the Web Assets folder changed? After updating from 2019 to 2020.3, none of the files in my Web Assets folder are included in the build. Do files to be included in the build (HTML, graphics) now go in a different folder, or is there a different process for including these files?

 

The Web Assets folder? I'm confused, whats the web assets folder, I don't have one of those in my project?

Edit: Did you mean "WebGL Templates"?

Thanks,
jrDev

 

The Web Assets folder is (used to be) where you put files to be copied "as is" to the WebGL Build folder. You'd only have such a folder in your project if you had external files to include in your build. I have a Web Assets folder in every one of my WebGL projects. We have a header (a couple of graphics) that goes at the top of the page. The links to those images, which are supposed to be in the Build folder, are included in the WebGL Template. Since updating to 2020.3, those files are NOT included in the build folder.

There is also the StreamingAssets folder, which I've used to include files in iOS builds. That works, but it puts the files into a StreamingAssets folder inside the Build folder. I can, if necessary, use that as a workaround, but I'll need to change the template and rearrange some things. I have a lot of projects to update, so ideally, I'd like to get it working as it did before.

 

I've only known of the Streaming Assets and WebGL Templates folders, which is what adds those folders to the builds. I have also just been paying attention to the folders since they changed the way the UnityLoader works though in 2020+, so maybe it was different in 2019.

Thanks,
jrDev

 

Hello,

I am not sure, but I am currently using files in my "streaming assets" and folders in "webgl templates" and those show up in the project build folder.

Thanks,
jrDev