Arm and PlayCanvas Open Source Seemore WebGL Demo

Cambridge/Santa Monica, August 1 2019 – Arm and PlayCanvas are announcing the open sourcing of the renowned Seemore WebGL demo. First published in 2016, the graphical technical demo has been completely rebuilt from the ground up to deliver even more incredible performance and visuals. With it, developers are empowered to build their projects in the most optimised way, as well as using it to incorporate some of its performant features and components into their own projects.

PLAY NOW

EXPLORE PROJECT

“I’m so excited to be relaunching the Seemore demo. Open sourcing it in partnership with Arm will bring a host of benefits to the WebGL development community,” said Will Eastcott, CEO of PlayCanvas. “It’s an incredible learning resource that provides many clean, easy to follow examples of some very advanced graphical techniques. Sharing this project publicly is going to help move web graphics forwards for everybody.”

“PlayCanvas and Arm have always strived to push the boundaries of graphics and the original demo is a testament to that,” said Pablo Fraile, Director of Developer Ecosystems at Arm. “It’s encouraging to see how PlayCanvas have advanced mobile web rendering performance since the original demo. This re-release provides a unique resource into graphics for the mobile web that is both easy to follow and incorporate into your own projects.”

The Seemore demo was originally created as a graphical showcase for the mobile browser and takes full advantage of Arm Mali GPUs. It has been upgraded to utilize the full capabilities of WebGL 2, the latest iteration of the web graphics API. Some of the main features of the demo include:

  • Physical shading with image based lighting and box-projected cube maps.
  • Stunning refraction effects.
  • HDR lightmaps.
  • Interpolated pre-baked shadow maps as a fast substitute for real time shadow-mapping.
  • ETC2 texture compression to ensure that highly detailed textures occupy only a small amount of system memory.
  • Draw call batching.
  • Asynchronous streaming of assets to ensure the demo loads in mere seconds (approximately 5x faster than the original version).
  • Fully GPU-driven mesh animation.

Version Control in PlayCanvas

One of our most requested features has always been for more advanced version control features. We’re very pleased to announce that from today we now have built in version control throughout the PlayCanvas Editor. Integrated support for branches, merging and checkpoints brings a host of new workflow options for your team and we’re confident that it’s going to be a huge productivity multiplier for your HTML5 games and 3D applications.

How does it work?

Checkpoints

Checkpoints take a snapshot of your project at a moment in time. This lets you restore previous versions or just see a timeline of what changes are being made by each member of your team.

Branches

Like other version control systems with PlayCanvas you can create independent lines of development by creating branches. Branches let you or your team work on changes and features that don’t affect your main product development.

 

Merging

Once you’ve finished work in your branch, you’ll want to merge you branch back into your production development. We’ve got a sophisticated merging interface that let’s you merge your code, scenes and assets and resolve any conflicting changes in your scenes and code.

We’ve been testing the version control features over the last few months and we know you’re going to love them. Read more about how you can use branches in your project in our developer docs.

What’s next?

We know that our users have specific needs and want to customize their workflows. With branches now available to isolate development, we’ve unlocked a host of new opportunities that you can try via our API. For starters it’s now possible to synchronize your script assets from your PlayCanvas branch into an external source control system like Github. Try this yourself via our Asset REST API, but we’ll be building on these features in the future.

Scene Launching Supercharged!

Iterating on your PlayCanvas game just got a whole lot faster!

When you launch a scene from the PlayCanvas Editor, a set of assets has to be loaded. Non-script assets are loaded from the browser’s memory cache. However, script assets each generate a round trip request to the server. For projects with a lot of scripts, the load time can be long and your ability to iterate is going to suffer.

Today, we’re pleased to announce that we have deployed an update that introduces a lightning fast build step when you launch your scene that concatenates scripts into a single file. This means that only one HTTP request is made for scripts regardless of how many you have.

How To Enable The Concatenation Goodness

In the Launch button sub-menu, there is a new options called ‘Concatenate Scripts’. Check this to enable the feature:

What Difference Does it Make?

Your mileage will vary depending on how many scripts your project has and what your network conditions are. But if you have a lot of scripts, and you are subject to an internet connection with high latency (ping), then the speed up will be much more noticeable.

Here are the launch times for a scene referencing 125 scripts on low-latency WiFi (150Mbps down with 7ms ping):

  • Concatenate off: 24 seconds
  • Concatenate on: 2 seconds (!)

Wait! Won’t this Screw Up My Debugging?

In a word: nope! We use source maps to refer back to your individual scripts. So you can find your scripts in the Sources tab and set breakpoints as usual instead of having to navigate the super-long concatenated script file.

So we hope you like this latest improvement and that it makes your iteration time faster than ever. Enjoy!

New Feature: 2D Sprites and 9-slicing

PlayCanvas is one of the most popular ways to build 3D interactive web content today. But before 3D graphics was a thing, there was 2D graphics!

Today we’re excited to launch the first part of our 2D graphics support. Great for building classic 2D games.

There are 5 great new features which will help you build 2D games using PlayCanvas.

Texture Atlas Asset

 

The new Texture Atlas asset is an enhanced texture asset which includes additional frame data for splitting your texture into multiple Sprites.

Sprite Asset

The Sprite Asset is a set of frames from a texture atlas. This can be a single button or a complete flip-book style animation.

Sprite Component

The Sprite Component is a new Component that you can add to your Entities. The Sprite Component let’s you play back sprite animation clips and build up your new 2D world.

Sprite Editor

The Sprite Editor is a new tool inside the PlayCanvas Editor to create and edit Texture Atlases. The Sprite Editor lets you quickly define frame regions in your texture and it’s also used to define the 9-slicing region.

9-Slicing

9-Slicing is a very useful technique for creating scalable user interface elements from 2D textures. Using the Sprite Editor to define a border on an image, you can now use Sprites in your Element components to build your UIs. Watch this space for more User Interface features coming soon.

All these features are available today inside the PlayCanvas Editor. Take a look at the documentation and let us know what you think on the forum.

Prehistoric graphics by Pixel-boy

PlayCanvas Engine reaches 1.0.0!

PlayCanvas was born 7 years ago, way back on 9th May 2011. In the early days, we were essentially prototyping, seeing what this amazing new WebGL API could do. By October 2011, we set up a source code repository and committed our first engine prototype. Right at the beginning, we adopted semantic versioning for naming our releases. Our initial commit generated engine v0.10.0. From that point onwards, we adopted a rapid release cadence, often publishing more than one release a week. The months and years passed, our team grew and feature after feature was integrated into the codebase. But through all that time, we never incremented the major version number. Why? Well, there were several reasons:

  1. Our rapid deployment meant we never delivered a monster release that seemed to warrant going to 1.0.0.
  2. We always made a huge effort to maintain backwards compatiblity. Projects like the inane Doom3: Gangnam Style created in December 2011 still work fine today! So we never (intentionally) broke your projects.
  3. We, uh, just never got around to it!

The semantic versioning site says:

How do I know when to release 1.0.0?
If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.

The PlayCanvas API is now very stable, mature and battle-hardened. Backwards compatibility is something we take very seriously indeed. And today, PlayCanvas is used in production by thousands of developers.

Indian Motorcycle’s PlayCanvas-powered configurator

And so, it gives me great pleasure to announce PlayCanvas Engine v1.0.0. I want to give my sincere thanks to all of the truly exceptional, hugely talented contributors who helped make this possible.

Here’s to the next 7 years!

PlayCanvas to Support Flash Devs as Adobe Kills its Player

Today, Adobe announced that it is to kill Flash by 2020.

Back in early 2011, we foresaw this event and started work on PlayCanvas. We knew that Flash would still be around for some years, but we also knew that building any replacement for content creators would be a titanic task. Over six years later, PlayCanvas has established itself as the go-to toolset for building WebGL-content. The browser-based Editor application is lightweight yet exceptionally powerful. The apps produced are super-lightweight and perform great even on older mobile devices. And our ‘modern’ cloud-based approach enables developers to collaborate and iterate like never before.

Flash never did quite manage to establish Stage3D as a standard. WebGL, on the other hand, has cemented itself as the dominant force for web-based 3D, and has now reached version 2.0. In fact, PlayCanvas partnered with Mozilla back in January to launch the new standard. Flash has always been more popular for 2D based content and the remaining Flash developers must now find a path to migrate away. Spoiler alert: we’re working hard on improving our support for 2D. While it’s possible to make superb 2D content with PlayCanvas today (check out Master Archer, one of the top titles on Facebook Instant Games), we recognize there’s still more to be done in both the engine and the tools. We have some exciting announcements in the works regarding this so keep your eyes peeled.

Bottom line: Flash devs – we’ve got your back and we’ll be working hard to ensure you’ve got the tools and run-time you need.

Maintenance Saturday June 10, 9am UTC

The PlayCanvas website and editor will be unavailable intermittently from 9am UTC tomorrow (Saturday 10th June) while we perform server maintenance. We will endeavor to keep downtime to a minimum but the period of downtime may be several hours. Stay informed with updates via this blog post and on our Twitter Account..

We apologies for any inconvenience this may cause.

Update: Maintenance is complete at 2.30pm UTC. Thanks for you patience.

 

Mozilla Launches WebGL 2 with PlayCanvas

Today is a huge milestone for real-time graphics on the web. Mozilla has launched Firefox 51, the first browser to bring WebGL 2 to the masses. WebGL has been around since 2011, the year when PlayCanvas was founded. 6 years on, the open standard for web graphics has taken a huge leap forwards, exposing far more GPU capabilities to developers, making for ever richer, more beautiful experiences.

To mark the launch of WebGL 2, Mozilla and PlayCanvas have teamed up to build ‘After the Flood’.

EXPERIENCE ‘AFTER THE FLOOD’ NOW

‘After the Flood’ illustrates many of the key, new aspects of WebGL 2.

  • Transform feedback: to animate leaf particles on the GPU.
  • 3D Textures: used to create procedural clouds.
  • HDR rendering with MSAA: for correct blending of antialiased HDR surfaces.
  • Hardware PCF: for better shadow filtering at a lower cost.
  • Alpha to coverage: to render antialiased foliage.
  • …and much more.

So how was all of this done? As you know, PlayCanvas is an open source game engine. All of the work to integrate WebGL 2 into the engine can be found on Github.

Other key demo features are:

  • Compressed textures: DXT, PVR and ETC1 are used to reduce VRAM usage.
  • Asynchronous asset streaming: to get the demo loading faster.
  • Runtime lightmap baking: to generate realistic shadows that render fast.
  • Procedural water ripples
  • Planar mirrors

As you can see, PlayCanvas is all about squeezing the full potential from the browser. PlayCanvas apps, like ‘After the Flood’, look beautiful, load fast and perform great.

So what’s next? First, we will refactor and merge our WebGL 2 work into PlayCanvas’ mainline codebase. Then we will enable ‘After the Flood’ on mobile. And finally, we will make the demo project public so you can see exactly how we made it:

flood_editor

Want to get creative with WebGL yourself?  Why not get started with PlayCanvas today?

Master Archer lands on Facebook Instant Games

We’re excited to announce the launch of Master Archer, our new Instant Game for Facebook Messenger. Shoot the fruit from Bob’s head and challenge your friends with your high score!

Only a week on from release and Master Archer has already cracked 1,000,000 players!

instant-game-chart

This shows the incredible viral power of Facebook’s new gaming platform.

Many developers make 3D apps with PlayCanvas, but as you can see, PlayCanvas can also be used to create beautiful 2D games as well.

To play, open Facebook Messenger, select a friend and hit the joypad icon:

play-archer

And select Master Archer from the game list!

Or you can play on facebook.com if you are using a desktop browser.

What's your high score?

Let us know your high score in the comments!