Tag Archives for WebGL

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

Unity5 Announced!

Unity5http://unity3d.com/5

I’m getting straight to the point here, what is in included in Unity5:

Physically-based Shading:

There’s a new shader to setup great looking materials in a range of lighting environments, it’s one shader to rule them all, an uber-shader one might call it, you can use it for a range of different surfaces such as wood, metal, plastics, ceramics, cloth and many others.

Unity5_Teleporter

Realtime Global Illumination:

Built upon Geomerics Enlighten Technology, Unity5 has integrated realtime physically-based Global Illumination for cross-platform, runs super nice on mobile / tablet devices. You can animate lights, setup beautiful environments lighting and make use of emissive materials to create stunning effects and visuals. What’s really nice, as an added bonus, you now don’t need to be rebaking any lightmaps, which is especially painful when bake times are long for larger scenes, Global Illumination updates immediately upon making any changes to help dramatically increase iterative times.

WebGL:

The plugin-less browser technology is approaching fast and Unity5 will offer the option to deploy to WebGL without the need for a plugin download to playback content, with a one-click deploy system the building times are super fast and simular to what our WebPlayer plugin build system is like.

Audio Mixer:

New audio mixng technology enters Unity5 with simple workflows for setting up different sounds within your 2d / 3d games. Setup realtime mixing graphs, ability to edit tweak in play mode, create and blend between snapshots, insert effects into the mixers, implement ducking of sounds and many more..

UnityCloud:

This service offers the ability to integrate cross-promotion campaigns for acquiring players and help with retaining them

64-bit Editor:

64-bit editor brings massive improvements to Unity for handling demanding tasks 32-bit version might just crash on with out of memory, the runtime was ported a while back now, but getting the editor ported with all the dependencies took time.

PhysX 3.3:

The much requested update to PhysX has arrived, NVIDIA completely rewrote the system, bringing excellent performance boosts which is great for mobile / tablet devices. A new wheel collider is available amongst other things, more PhysX 3.3 features will be exposed later in the 5.x cycle.

There’s many more features in Unity5 which will just populate my blog, but here is more smaller but equally juicy feature set:

  • AI: NavMesh supports LoadLevelAdditive.
  • NavMeshObstacle supports two basic shapes – cylinder and box for both carving and avoidance.
  • Editor: The editor is now a 64-bit application.
  • Graphics: Improved ambient lighting.
  • Cubemaps support texture compression
  • Improved LODGroup. A “fade mode” can be set on each level and a value of “how current LOD be blended/faded to the next LOD” will be passed to shader program in unity_Scale.z.
  • Non-uniformly scaled meshes no longer incur any memory cost or performance hit.
  • PluginInspector: new plugin system.
  • Scripting: Introduced option to auto-update obsolete Unity API usage in scripts / assemblies.
  • Version Control: Scene and Prefab Merging.
  • Asset Store: The asset store window is now many times faster, more responsive, and looks better.
  • Model importing: Updated FBX SDK to 2015.1
  • Windows Store Apps: You can now use joysticks in addition to Xbox 360 controllers

For a more visual look at Unity5‘s new feature set, take a look at the official Unity Feature Preview video:

With such an exciting announcement I can’t wait for all you guys to get your hands on this awesome toolset!

Thanks!