Unity WebGL for beginner

Unity Engine
1

Hey,

My page is going to host hundreds or even thousands of projects and hosting /Release files seems like a bad idea. Im very disappointed in Google’s decision because a big part of my business model was built on Unity Web Player - that would have been a perfect solution.

I’ve searched for days a way to use only compressed files and I’ve only recieved errors and disappointment. Is this idea even possible?

I & probably many more could use a step-by-step guide for this - solutions for all kinds of builds and servers we could try out if one fails - because there is none I could find…

Im using Apache 2.4.10 server and Wordpress.
.htaccess in not included to any of following uploads, I copied Unity’s .htaccess to server’s .htaccess - screenshot attached!

Everything seems to work if I include Release files and leave everything as “default”, Chrome inspector shows, that files are compressed like they should be.

Things I’ve tried:
1) Delete /Release, rename /Compressed to /Release, delete “gz” from extensions - 404, Not Found
2) Delete /Release, move /Compressed files to index.html location, delete “gz” from extensions, remove /Release/ from every “scr=” in index.html - Uncaught SyntaxError: Unexpected token ILLEGAL
3) Leave extensions, files and .html as it is, upload everything but /Release folder - 404, Not Found
4) Leave files and index.html as it is, remove “gz” from /Compressed extensions, upload everything but /Release folder - Uncaught SyntaxError: Unexpected token ILLEGAL
5) /Compressed files in index.html location, “gz” added to extensions in index.html script - Uncaught SyntaxError: Unexpected number
Everything is tested in Chrome.
This is waaaay over my head. I’ve learned 4 programming languages, some HTML, PHP, CSS and using Unity all in past 9 months and Im stuck at this…

I welcome any opinion and advice.

Someone could also share the recommended settings for player, quality and build so that it would actually work ,files would be as small as possible and shorter loading time.

Personal experience: 3MB Unity Web Player file to 80MB /Release and 24MB /Compressed.

2086053--136408--htaccess.jpg
2086053--136408--htaccess.jpg402×707 102 KB

2

For people who doesn’t feel like reading:

1) Is it possible to run webGL without uploading /Release folder & files? How? (step-by-step please)

2) General setups for build, player and quality for max. performance, min. loading time and min. file size?

Your effort means world to me & others new to webGL, trust me. 404 Tutorials Not Found

2 Likes
3

That’s super weird - #3 sounds like the right course of action, and it’s the one that’s been working for me.
Even though you’ve copied the contents of the generated .htaccess to your root .htaccess, have you tried uploading the generated one alongside the #3 option? Just in case to see if it works?

Either way, if including the Release folder makes things work, this has to be an issue with either .htaccess or the server configuration.

As for min. file size, the things that worked for me are just:

  • Build Settings: Optimization Level → “Fastest (very slow builds)”
  • Player Settings: Other Settings: Stripping Level → “Use micro mscorlib” (anything other than “Disabled” should have an equal effect I believe)
  • Player Settings: Enable Exceptions: None.
4

Real WebGl Hosting: https://cpanel.hostinger.ru/. Without problem create http://www.myunity5.zz.mu/

5

PlatfromSix, thank you for urging me to try #3 one more time!

Super simple solution (that is so obvious, unless you know nothing about webGL, .htaccess etc):

  • Upload everything but /Release folder to server and GO!
  • That’s it.

Few other things…

  • Mousescroll is super sensitive in Chrome. It works well in Editor and Firefox. Im using “Input.GetAxis(“Mouse ScrollWheel”) * scrollSpeed;” for zooming in and out. This is super imortant feature for my build. Does anyone know wordaround or fix for this?

  • Buggy loading bar - appears and disappears randomly. Im thinking of hiding webGL canvas until it’s fully loaded and meanwhile play my own loading animation or movie. I know that this forum is the worst place to ask this but does anyone know a way for this setup and how to get the signal if webGL is fully loaded?

  • Red errors in inspector:

  • run() called, but dependencies remain, so not running.

  • pre-main prep time: 2683 ms.

  • A LOT of same type yellow warnings in inspector: Warning: rendering to mipmap levels, other than zero is not supported on this device.

  • For some reason resource interpreted as Script but transferred with MIME type text/plain. Is this normal?

I appreciate if someone takes those few minutes to explain errors with few words, even if they are appearing for everybody. I just like to know what’s it about.

Let this thread be the lighthouse for those who are uploading their first build… I looked for a week a post like this all over the web. :smile:

1 Like
6

Awesome! Glad it’s working! :smile: I’m going to collect some useful info on how to upload Unity WebGL stuff here.

Mousescroll: I saw a post about the issue a few days ago… The fastest solution seems to be to clamp the value. Otherwise you could in theory detect the browser using javascript then send an event to your game, but that sounds like a huge hassle. A third solution is maybe put a scroll sensitivity slider in your games’ options?

Progress bar: Yes, the default one is rubbish. Everything you need is in the unityprogress.js file in TemplateData. At least edit it to make the progress text visible - it makes things lots more transparent (adding tweens and a spinner helps too): Here’s how my progress bar is working… I can make a package of my template at some point if people are keen.

Red warnings: Irritating but they don’t seem to cause any harm - they’re just saying that it’s trying to run before everything has been downloaded/unpacked, so it has to wait.

Yellow warnings: go through every texture in your game and disable mip-maps, those warnings indicate it just uses up memory for no benefit on webGL it seems.

MIME type: no idea!

1 Like
7

Thank you for help and tips! I would appriciate if you shared your code for progress bar I could use as an example.

8

I added zoom in and zoom out UI buttons - it’s not as comfortable as scrollwheel but at this point I can’t see a simple way to get scrollwheel zoom right on all browsers.

I’ve covered the progressbar appearance but it still seems to load on junks (usually 0%, 50% and 100%), not smoothly like yours. Did you alter something in progress script or does it just look different on different hardware? I would love to hear how to accomplished smooth progress and how you put download text under the progress bar.

I disabled mip-maps and it’s out of the question - every texture is grainy like a sandpaper if you’re more than ~10 units away and it gets worse with every unit from there on.

9

@PlatformSix Absolutely love your progress bar setup! How can I replicate this?

FYI - your demo is awesome, but I can’t get the camera to tilt down far enough to see everything. We are doing a similar thing with PreVis here: http://www.thehalseygroupllc.com/FRBoothDemo

10

Ah I’m putting together a guide on it this week, I just finished a guide for the very first step of the set-up, but basically it’s just gutting the unityProgress.js file, putting the dom elements into the html file, then using TweenJS to smooth everything out.

Thanks for pointing out the camera thing too, I’ll look into it! :smile:

1 Like
11

@PlatformSix Awesome. Will you post here when you have your guide finished. I’m a slow learner and appreciate step by step instructions from overly kind experts like yourself.

Cheers,

Troy

12

I confirm the mousescroll hyper sensitive under chrome.
I’ll try using a clamp as suggested above

13

@troy_halsey1 I’ve completed the tutorial series, here are the steps:

Part 3 covers how to get smooth loading + the spinner.

3 Likes
14

@PlatformSix You are awesome! I can’t wait to try them all out. Thank you so so much. Major karma points for you!

15

@PlatformSix Your Yearning Tree demo…is that built in Unity? If so…AMAZING! I want to produce something very similar. Can you tell me what webhost you use? We are using Bluehost, but are having issues with some clients…issues we don’t have when we host on dropbox.

Thanks again - awesome work!

Troy

16

@troy_halsey1 Thanks mate, yep! The Yearning Tree is all just Unity.

I’m on Dreamhost and have never had any problems. The code “UNITY” should give you a small discount if you end up signing up with them.

17

Hi @PlatformSix ,
I am trying to upload the webGL build to Amazon server. Do we need to do any specific setting to get this working. I would like to upload the game to amazon server and use the public link in facebook canvas app. Please help to get this working.
I followed your tutorial as is but it not working in amazon sever. Did not try in other servers though.