WebGL Texture Compression Made Easy

Big news! PlayCanvas is excited to introduce easy texture compression, enabling you to build bigger and better WebGL apps.

Today, the vast majority of WebGL developers load textures from JPG and PNG images. Unfortunately, while these formats compress well for transmission (especially JPG), they occupy a great deal of video memory when passed to WebGL. For example, let’s consider this image of the Earth:

… 

Miniclip Launches Their First PlayCanvas Game

PlayCanvas is proud to announce that browser-gaming giant Miniclip has published their first PlayCanvas-powered game: Virtual Voodoo.

Virtual Voodoo is designed to get you in the mood for a spooky Halloween. Make the poor Voodoo doll’s life a misery with a dastardly selection of spells, curses and implements of pain! You can even customize the doll with different clothing and accessories.

Jamie Cason, Executive Producer at Miniclip said:

We’re really excited by PlayCanvas technology and the promise that it holds for the future of Open Web Games. It is currently the best toolchain and engine for WebGL that we’ve seen and Virtual Voodoo represents the first of, what we hope to be, a series of successful PlayCanvas-powered Miniclip titles.

Using PlayCanvas to create new games is a no-brainer for Miniclip. Browser plugins are gradually being phased out of the browser ecosystem and HTML5/WebGL are the technologies browser game developers are moving to. PlayCanvas is the only professional IDE for building lightweight HTML5/WebGL games that have incredibly short load times. Virtual Voodoo is playable after loading only 4MB and loads in seconds. This means more players end up playing the game and Miniclip achieves better retention.

Look out for more PlayCanvas-games from Miniclip in the future. But for now, why not embrace your dark side and PLAY VIRTUAL VOOODOO NOW!

PlayCanvas versus Unreal WebGL

Our previous article comparing PlayCanvas with Unity’s WebGL exporter certainly got folks talking. One of the questions that came up in the aftermath was “OK, but what about Unreal’s WebGL exporter?”. Unreal, like Unity, relies on Emscripten to port the native codebase to JavaScript. So it would be reasonable to expect Unreal to suffer from the same issues as Unity: large download sizes, long load times and poor runtime performance.

… 

Variance Shadow Maps for WebGL and More!

May is drawing to a close and it’s starting to feel like summer here in London. Let’s celebrate with a PlayCanvas Dev Update! We’ve been busy bees, so here’s a rundown of the main changes.

Variance Shadow Maps

The light component now allows you to select a shadow type. In addition to the current PCF Shadow Maps, there are new options for 8-bit, 16-bit and 32-bit Variance Shadow Maps. 8-bit VSM uses a small amount of GPU memory and is guaranteed to work on any device but is lower quality. 32-bit VSM uses a lot of GPU memory and relies on a device’s ability to render to floating point textures but the quality is very good. 32-bit VSM will gracefully fall back to 16-bit and then to 8-bit should the device not provide the required capabilities.

Let’s compare PCF with VSM. First, here’s PCF:

shadows-sm

And here is VSM:

shadows-vsm

The big advantage of VSM is the ability to apply large blur kernels, which would be prohibitively slow with PCF. As you can see, the results are most pleasing!

VSM is still work in progress so expect more updates to land in the engine in the coming weeks.

Reworked Editor Camera Controls

We’ve completely rewritten the controls for the Editor camera in the 3D view. It should be far more intuitive now and also enable you to be more productive. For example, we have changed the behavior of dollying the camera to be based on what the mouse cursor is pointing at. This makes it feel much more similar to Google Maps:

zoom

Easy Asset Inspection in Dev Tools

We’ve made it so your assets are displayed in your browser’s Dev Tools as they are in Editor’s Asset Panel. This makes it much easier to locate, inspect and debug when running your game launched from the Editor.

devtoolsassets

Engine Optimizations

We’ve performed a thorough round of engine optimizations, aimed at speeding up your games, but also to reduce memory allocations to avoid garbage collection stalls. Specifically, we have:

  • Created a special profile build of the engine which is now only used when you run the PlayCanvas Profiler from the Editor. The regular non-profile build has the code that collects all of the timing and statistical information stripped out.
  • Optimized many commonly used functions. Here is a good example.
  • Removed many allocations that used to happen at runtime. Here is a good example.

Other Changes

  • Editor tooltips have been refactored with any missing ones added.
  • Improved reporting of an asset’s references when right clicking it in the Asset Panel.

PlayCanvas Editor Improvements for March

Time for an update from the PlayCanvas development team! Throughout March, you may have noticed some updates to the PlayCanvas Editor. In case, you’ve missed any of them, here’s a run down of what’s new:

Hierarchy Improvements

Nestled at  the top of the hierarchy panel is the new ‘Fuzzy Search’ box. If you’re creating ever bigger projects, it used to be hard to track down specific entities. But now, with the new search functionality, it’s a breeze. Even if you mistype your search term, the Editor will return results which closely match it.

fuzzysearch

We’ve had a few requests for SHIFT-select of entities and also multi-selection reparenting. So both of these are now possible! We’re so good to you!

multiselectreparent
Orthographic Editor Cameras

More and more of you are making 2D games or games that are played out in a 2D arena. As a result, we’ve overhauled the Editor’s orthographic cameras to be far more useable. Camera controls are more intuitive and the gizmos now work as expected.

ortho
Miscellaneous Improvements

  • The profiler has a host of new stats on display to help you tune the performance of your application.
  • 32 and 64 pixel resolutions have been added for shadowmaps.
  • The ‘L’ hotkey has been added to switch between world and local gizmo space.
  • Multi-user editing of document type assets has been improved (HTML/CSS/JSON/Text).

That it for now, but keep on the look out for our next feature update announcement, coming by the end of the week. It’s going to be a big one!

 

PlayCanvas brings WebGL Tools that Work to GDC 2016

We’re heading to San Francisco for GDC 2016!

gdc16_logo-color

Actually, we fly out a week early to tour PlayCanvas users on the West Coast. But we’re really excited about attending the conference because we have a lot of coolness in store. Here’s a quick run-down of what we’ll be up to:

  • Monday 14th – Tuesday 15th: Available for meetings to discuss all things WebGL – get in touch if you want to talk. We’d love to meet you!
  • Wednesday 16th – Friday 18th: PlayCanvas will be demoing our latest and greatest tools, demos and games on the ARM booth (#1624) in the Moscone Center’s South Hall.
  • Wednesday 16th – Friday 18th: Mozilla will be showcasing our phenomenally popular game TANX on booth #936. Think you’ve seen TANX before and know the story? Think again! Head to Mozilla’s booth for some surprises!
  • Wednesday 16th: PlayCanvas will be announcing an amazing new feature in the PlayCanvas Editor at the Khronos WebGL session at midday at SF Green Space. We won’t ruin the surprise but wow, you need to attend this and check out what we’ve built. It’ll light up your life! (There’s a hint right there) 😀
  • Thursday 17th: PlayCanvas will be presenting on Facebook‘s booth (#1416) at 2PM in the Moscone Center’s South Hall: “Building WebGL Games That Work”.

And we’ll be partying hard in the evenings! Come share a beer with us!

Don’t worry if you can’t make it to GDC though. We’ll be tweeting and blogging like crazy, keeping you in the loop.

PlayCanvas in 2015 – WebGL Goes Mainstream

And so we bid a fond farewell to 2015, our biggest year yet! In just 12 short months, we’ve taken the engine to new technical heights, published some incredible PlayCanvas-powered apps and helped some big-name companies make the jump from Flash to HTML5 and WebGL.

Let’s cast our minds back and recall some of the key highlights.

To wow the crowds at GDC 2015, ARM called on PlayCanvas to show the world what WebGL can really do. We built Seemore.

seemore

Also at GDC, Mozilla and PlayCanvas jointly announced TANX, our multiplayer, online tank battle game (with over 2,000,000 plays to date).

tanx

One of the most memorable WebGL apps of 2015 was the BMW i8 Configurator. It even won The FWA Site of the Day and ruled on high at Hacker News!

bmw

2015 was the year WebGL developers cried out for tools that actually work. In response, we launched our new Editor! A realtime-colloborative development environment that’s only 650KB? You bet!

editort800

PlayCanvas’ open source PBR renderer hit its first birthday with support for HDR cubemaps, box-projected cubemaps and much more. Find out more on GitHub.

orangeroom

Some eye-popping content was released by our fantastic clients and partners. In August, Hutch Games released the world’s first 3D WebGL playable ads.

mmxwwe

PlayCanvas became the leading tech provider for Digital Out of Home. DOOH.com brought the world’s largest game of Space Invaders to the Cannes Lions Festival.

doohinvaders

Cheil, Samsung’s Marketing arm, used PlayCanvas to launch their Rugby World Cup game on the giant Samsung screen in Piccadilly Circus.

Cheil Rugby

Hot on the heels of that, Cheil launched their Christmas campaign for the Samsung Galaxy S6 on the very same screen.

Cheil Christmas

And this is just the stuff we can talk about! You wouldn’t believe some of the projects that are in development as I type! But hey, you’ll get to find out all about them in 2016. Hold onto your hats, true believers. It’s going to be an amazing year. 😀

Performance Matters: Introducing the PlayCanvas Profiler

Time to take the wraps off the latest awesome feature in PlayCanvas. We’re super-excited to unveil the PlayCanvas Profiler.

profiler

The Profiler is a panel that overlays your app, displaying lots of useful timing information and performance stats. So whenever you’re wondering why your app isn’t hitting 60 frames per second, simply launch the Profiler and you should be able to figure out exactly what the problem is.

To launch the Profiler, there are new options available from the Launch button:

profiler_launch

Depending on whether your scripts are served from PlayCanvas or locally, select the relevant option that enables the Profiler. The Editor will remember the option you select for the next time you hit the Launch icon.

There is also a hot-key to toggle the Profiler: CTRL (CMD) + ALT + T.

Profiler Overview

profiler_stats

The left-hand panel of the Profiler displays statistics related to the currently rendered scene. It displays frame rate, the number of cameras enabled (normally, you will want this to be 1), the number of shaders, materials, triangles and so on. Also, frame time is broken down into update (the time to run all component updates), physics (simulation time) and render time (the time to pass all of the graphics commands to WebGL). At a glance, you can quickly see where there might be problems.

profiler_timeline

The right-hand panel is the Profiler Timeline. It displays a number of key events in your app’s life from launch:

  • dom (DOM interactive):  event when the browser finishes parsing html document, and able to render first frame of a page to a screen
  • preload: event when PlayCanvas initiates preloading of all assets that are required before the app can start.
  • start: event when PlayCanvas begins the main application loop and rendering begins.

Green bars represent individual asynchronous asset loads. Orange bars are blocking shader compilations.

The Future’s Bright

So we hope you enjoy using the new Profiler. But remember, true believers, more goodness is yet to come. This is our initial beta version but we have plenty of improvements coming down the pipe.

Any comments? Join the Forum thread.