Tag Archives for mobile

WebGL – The Future Ain’t What It Used To Be!

webgl

This post was valid as of 1st October 2015

Web deployment with Unity has took a hit in recent months due to the deprecation of NPAPI plugins in Chrome, which mean’t the WebPlayer plugin has been disabled. All major browser vendors are moving away from plugins.

Current solution is to look at the WebGL build target which came in a Preview state with Unity’s 5.0 release. We know there’s some challenges with supporting WebGL right now, but let me detail what the future should look like.

Why Preview?

WebGL now, is in Preview, it’s a way of Unity saying that some functionality and development needs to happen before they consider it a fully released product. Missing functionality from Unity’s side includes:

  • Substance realtime generation of procedural textures
  • Precomputed Realtime GI – believe that actually requires a port from Enlighten
  • MovieTextures – but actually you can get a nicer video playback using: Simple MovieTextures for Unity WebGL
  • WebCam – coming in 5.3
  • Microphone

Development needed from the browser vendors include:

  • WebAssembly
  • Data compression
  • Shared array buffers
  • WebGL 2.0

How will these help for the Future?!

WebAssembly which allows for taking ASM.js and turning it into byte code, in turn this makes things faster as byte code is faster to parse than JavaScript as well as being faster to execute. This will solve slow load times and slow downloads, also fixing up some memory usage issues.

Data Compression; Slightly self-explanatory, will allow for data to be kept in a compressed format in memory. Currently you need to handle this yourself, but not for much longer. This will greatly help with build sizes.

Shared Array Buffers is a feature that will allow for memory to be shared across web workers, using this Unity can map their current multi-threaded code to JavaScript, so WebGL can benefit from multi-threaded features such as PhysX. No more colliding on the main thread!

WebGL 2.0 – WebGL to become a graphic powerhouse, no really it can. Currently WebGL is using OpenGLES 2.0, remember those good old smartphones?! With WebGL 2.0 Unity WebGL gets the much needed bump up to OpenGLES 3.0, allowing for Unity to lift it’s restrictions on shaders, so we can have image effects (all the bloom you need), deferred rendering, skinning on the GPU. Unity’s 5.2 release included support for WebGL 2.0 as an experimental option, reason; because no major browser vendor has shipped support for it yet as of the date of this post, but you can try with a Firefox nightly build.

Some WebGL tips ‘n’ tricks:

Need to ship projects now with WebGL? Be sure to have taken note of what features in Unity that isn’t supported right now (see above) and also make use of these:

  • Crunched Texture Compression

You can use this feature as a texture format for JPEG like compression ratio and quality, however unlike JPEG it will directly decompress into DXT, so you have compressed textures on the GPU, no loss in GPU memory, happy days! This feature helps with memory reduction and keeping the data size down.

  • AssetBundles

A must use for any Unity project really, but for WebGL it will greatly help with a reduction in memory and build size. Let’s reduce everything!

  • Unity Profiler

If you’re not making use of Unity’s Profiler then you’re doing it wrong, as with any Unity project profile away, it’s fun and a great way of finding your bottlenecks. You should be optimising for WebGL as you do for any other platform in Unity, there’s a lot of resources online for optimising.

  • WebGL Memory Size

Within Unity -> Player Settings -> Publishing Settings you can specify how much memory (in MB) the content should allocate for it’s heap. If it’s too low you will get out of memory errors, but if it’s too high your content might fail to load in some browsers or on some machines, because the browser might not have enough available memory to allocate the requested heap size. Test and find the correct solution for your app. Optimising your app as much as possible will help with memory reduction therefore the need for a high heap size decreases..

  • Multiplayer Gaming

Use UNET in 5.1+ as this will work out of the box as it’s using the WebSocket API – you can also write JavaScript code to directly use WebSockets yourself.

Helpful resources:

Benchmarking can help you test different areas of Unity Engine to see how it performs on the WebGL platform. Unity developed a app so benchmarking can be easily executed: http://beta.unity3d.com/jonas/WebGLBenchmark/

Watch a Unite Europe 2015 talk from Unity’s lead WebGL developer Jonas Echterhoff: https://www.youtube.com/watch?v=RufJDxm6Lq8

Unity WebGL Forums for reporting issues and learning from other developers: http://forum.unity3d.com/forums/webgl.84/

Update:

I recently did a talk about WebGL & il2cpp – you can download the slides here: WebGL & il2cpp

Improve your efficiency with MonoDevelop

Everyone has their own workflow and choice of Scripting IDE, but if you’re one of those using MonoDevelop with Unity this blog post should help with an increase in efficiency when working with it..

I’m using a Mac and so the workflow improvements will be based on using MonoDevelop on a Mac.

Syntax Highlighting is important for writing and reading code, MonoDevelop makes it easy to change this, simply click on MonoDevelop-Unity menu item and then click Preferences, the Preferences window will open, there’s a menu on the left hand side, under Text Editor -> Select Syntax Highlighting there will appear eight options for you to chose from. My preference is called Oblivion but pick and test one for yourself which suits you best. You can also enable semantic highlighting which helps with reading code. Use cmd + / –  to zoom in and out, so you can see the code you are writing.

Keyboard shortcuts:

Who doesn’t like a good keyboard shortcut, yes there’s many to remember from many different software packages we use, but I think it’s important to have a few for each package that are your most important to your workflow. So here’s a few I feel worth highlighting for an increased workflow:

Saving scripts:

  • cmd + S = Save Script – Unity picks up this save and recompiles to reflect the changes
  • cmd + shift + S = Save all scripts open, useful if you’re manipulating multiple scripts when coding public / public static functions etc

Scripting layout :

  • cmd +[ and cmd + ] = Indents code, allowing to quickly indent lines of code without having to use the tab key
  • cmd + / = Quickly comment out some code or  comment your comments
  • shift + arrow keys = Select lines of code or symbols real fast
  • cmd + shift + Y = Finds references to that code snippet and displays the info in a window below
  • alt / option + arrow keys = Move lines of code or the cursor through lines of code

Debugging:

  • cmd + return / enter = This starts debugging mode from the Run menu item, no need to go through menu items
  • cmd + \ = Toggles breakpoint, no need to go through the Run menu item
  • cmd + shift + I = Step Into, no need to go through the Run menu item
  • cmd + shift + O = Step Over
  • cmd + shift + U = Step Out

Other useful actions, “Attach to Process” and “Detach” when debugging Unity, these don’t have any default keyboard shortcuts, but if you enter MonoDevelop-Unity menu item and reopen Preferences window, you can add your own under “Key Bindings”. This also shows everything I just highlighted and more.

Hope this all helps and please share your workflow improvements!

Modelling a Sports Stadium

Rugby Skills Challenge 2013

I’ve had a great month and half or so developing a 3d model and beta testing on a recently released iOS title by game developer Russ Morris.

We got talking about his Rugby game at the Unity UK Christmas party and Russ mentioned about needing a Stadium model for his game, naturally I said “hey, I’ll give it a go” and after a lengthy conversation in which I actually remember the day after, I nagged him for a bit to send over the details, thankfully Russ obliged and the creative development began.

So I wanted to blog about the development of the stadium model and some of the techniques I used, trying to keep it as low poly as possible for mobile development.

Starting point:

My starting point is the centre piece, the field of play, I needed to research the typical dimensions for a Rugby pitch. Modelling the basic rectangular shape then expanding out from there, having the focus point in place gave me a good start in terms of thinking and planning the architecture of the model. Using reference images taken from Cardiff’s Millennium stadium and the Aviva stadium in Ireland, the important thing was to ensure the shape and architecture of the model was directed at the main focus point (the field).

Pitch

The design is to have the curved corners in the tiers, so the stadium is a full oval curved shape like most modern day stadiums have. From here I started building up the second tier and adding some basic roof structure just to get an idea and feel for the model.

Adding details:

I quickly moved on to adding details to the tiers, adding steps and entrance points for isles, the challenging area was creating the corner tiers, I used the technique of extruding and rotating each time by hand, but I could of used the bridge tool and add the correct amount of segments, then reposition each set of poly’s, either technique would of worked fine.

Adding Detail

I finished the lower tier, so I had a fully completed lower tier with steps and isle details added, the good thing is, for the top tier, I can duplicate the lower tier and make adjustments to the positions of some poly’s and up scale when needed, no need to fully model the top tier from the start again. Here’s both tiers fully completed:

Fully completed stands.

I needed to close the gaps up and model some outer geometry, I modelled a bunch of cubes and joined the verts together at each adjacent point, It was just about getting the right positions and joining the correct verts together.

Creating the roof:

The roof structure design is to be based on the Millennium stadium in Cardiff, the corners needed to have gaps, the support structures needed to be added as well.

The Millennium Stadium
Adding roof structure
Support structure

Combining all this together gives me something nearly complete, all the rest of the tweaks were added by Russ in the game project, such as texturing and advertising boards etc.. Here’s the final model in Modo:

Rugby Stadium

Download and install the game now, you can download it by searching for Rugby Skills Challenge 2013 on the app store or by clicking the image below which redirects you to the app store:

appstoreThanks!