Time for another dev update, WebGL lovers! We've deployed a ton of new features, optimizations and fixes. Here's a run-down of what's new.

Camera Preview​

A Camera Preview is now shown in the top left corner of Viewport when an entity with a camera component is selected.

Interactive Asset Previews​

New Material, Model and Cubemap Previews are now available in the Inspector. They are interactive and clickable.

Antialiasing Control​

It is now possible to control antialiasing in Scene Settings.

Model Placement​

When dragging a model to the Viewport from the Assets panel, if CTRL is held (CMD on Mac) it will put the model in front of the camera rather than at the origin.

Assets Panel Enhancements​

Added toggle button to Assets panel to switch between small and large thumbnails.

Added Folder Up button to navigate to parent folder.

Hovering on asset in Assets panel will show a tooltip with the full asset name.

Asset Replace feature is available under the context menu of an asset. It activates the asset picker so the developer can choose another asset of the same type. It will replace references with new asset in Entities and Assets.

GIF files are no longer translated to PNG. They are now treated as another valid runtime format with parity to JPEG and PNG runtime texture formats.

Code Editor Enhancements​

• Highlight current line of cursor.
• Highlight errors.
• Made cursor more visible.
• Fewer disconnection messages.

Optimizations​

Huge speedups achieved for both loading and rendering of scenes!

• New thumbnail rendering system reduces VRAM usage in the Editor by up to a factor of two. This makes the Editor more stable and faster to load, especially for larger scenes.
• Major optimizations for loading and Editor rendering process so projects with thousands of entities and assets can load and render now up to 10 times faster in extreme cases.
• Asset load operations are now batched rather than performed one by one.
• All engine assets are loaded only when they are required (when they are enabled), leading to reduced traffic and loading times.
• Optimizations in internal API of Editor and UI leading to reduced garbage collection (and therefore GC stalls) and speeds up UI templating for Hierarchy and Assets panels.
• Enabled GZIP on WebSocket traffic, which reduces data transfers for initial loading.

Fixes​

• Fixed up arrow while navigating in the Hierarchy tree.
• Fixed sorting of folders in the Assets panel tree.
• Fixed material overrides on the Model Component if the model asset wasn't loaded.
• Cubemap faces now update in the Inspector (in the Faces section) if a face texture file is changed.
• Read-only users can now select text/number field values.
• Double click or right mouse click on number fields now will select whole content of the field and not just part of number separated by a dot or minus sign.
• Networking improvements have been made to reduce disconnects.

Phew! We hope you like these latest additions. Got any feedback? Comment on the forum! We'd love to hear what you think.

You may have seen the news about Facebook launching Instant Games in Messenger. If not here's the launch video

Instant Games is a totally new mobile gaming platform and it's entirely built on HTML5 games. This is tremendous news for the PlayCanvas game development community.

Games that are built using PlayCanvas will work with no modification as an Instant Game. Those games are ready to be played in the Facebook News Feed and in Messenger.

Developing Instant Games​

Instant Games are playable today in the News Feed and in Messenger. However, the development platform is currently in closed beta. If you've started developing a game that would be suitable as an Instant Game visit Facebook to sign up for the closed beta.

PlayCanvas Instant Games​

PlayCanvas is already being used to build Instant Games. The launch title Shuffle Cats Mini by King was built using PlayCanvas. Look out for more titles built using PlayCanvas in the future.

A New Gaming Platform​

We're tremendously excited to see Facebook launching the Instant Games platform and it is a perfect platform for PlayCanvas games. HTML games that are fast and lightweight, mobile and shareable. We hope you share our excitement and if you want to get started building your Instant Game, sign up to PlayCanvas for free today.

We have just revamped the tutorials page to include many more code samples of functionality with PlayCanvas. These include common use cases such as creating an Orbit Camera around an Object, Load Assets with a Progress Bar and more.

To make it even easier to find the what you need, we have also added a filter to help narrow down the search. So if you are looking at moving a camera via user input? We have it covered!

The tutorial section will grow as we write more samples so if there is anything you would like to see, let us know on our developer forums!

On Friday, 18th November, PlayCanvas HQ was visited by BBC News, the world's largest broadcast news organization. Our CEO Will was interviewed live on the 6 o'clock evening news which has viewing figures of around 1 million people.

It was a great opportunity to promote London as a great place for young tech companies to do business. Will describes the benefits for finding great talent, but London has so much more to offer. Outside of the US, London has the most active venture capital scene. Most international companies chose to locate an office in London. Transport links are superb. Government tax breaks are in place to assist tech startups, particularly in the gaming space. And on top of that, it's an incredible place to live.

We can't imagine being anywhere else!

One of the most popular WebGL games today is TANX, our online tank battle game. WebGL brings developers amazing new possibilities: lightning fast load times, cross-platform play, easy sharing, incredible performance. It all adds up to instant, pure fun.

But as good as TANX is, we've been working hard on a major upgrade. And we're happy to announce that it's live today! So what's new?

We've added a brand new level. We've moved away from the 'TRON' style graphics and adopted a more realistic style. Beautiful, I hope you'll agree.

All power ups have been lovingly remodeled.

We've added a very sexy shield effect. See it crackle with energy as it kicks in. All done in a special custom GLSL shader.

To turn up the mayhem, we've added camera shake and punchy explosions, built with PlayCanvas' particle system component.

The game even has a new URL. Play now at:

https://tanx.io​

⚠️ Public Service Announcement: TANX is highly addictive. Please take occasional breaks!

Can you believe this game is playable after loading just 2.8MB of data? Massive fun delivered to your browser in seconds.

We hope you love this update. But what do we have planned for the future? Is there more to come? You'd better believe it! Our games team is now working full-time on TANX so expect continual updates over the coming months. Send us your feature requests and suggestions in the comments below!

You probably saw this week's big announcement about our seamless integration with WebVR. But while WebVR is getting a lot of attention, we still care about the small details that can make you even more productive. We've spent the week adding some simple yet useful tweaks to the Editor.

Previous Selection Button​

We've added a button to the top right of the Inspector panel that allows you to step back through the selection history. There's also a tooltip that shows clearly what the previous selection was. So if you've selected a model, then a material, and then a texture, you can now bubble back up to the model quickly and easily.

Updated Physics Engine​

We have updated PlayCanvas' build of Ammo.js to the very latest version. This update benefits from 2 years of Emscripten improvements and exposes much more of the Bullet API. So if you are feeling adventurous, you can delve into the parts of Ammo that PlayCanvas does not expose and try some more advanced physics effects. For example, soft body physics. Or maybe utilize constraints for things like ragdolls, as shown below:

Want to check out the project above? It's here.

Miscellaneous Improvements​

• You can search for an asset by ID in the Assets panel
• Edit boxes in the Inspector panel now lose focus on hitting ENTER
• Read-only collaborators can now download assets from projects
• CTRL-A now correctly 'selects all' in the Assets panel
• A material's 'reflectivity' property can now exceed 1
• F2 (or 'n') now renames a selected asset or entity
• Page Up/Down move the Editor camera up and down

We hope you like these little tweaks. We do love to make your lives easier!

Today we're really excited to announce support for WebVR into the PlayCanvas Editor.

This week Google announced that WebVR 1.1 (the latest current version of the spec) should be released in Chrome for Android in January 2017. But for a feature as complex as virtual reality, browser support is only one piece of the puzzle. At PlayCanvas, we know how important great tools are to making high quality experiences so today we're launching our WebVR engine integration to make sure that you can create applications right now.

PlayCanvas WebVR​

Optimized Engine Support​

The PlayCanvas graphics engine is an advanced WebGL graphics engine. We've worked hard to make sure our renderer is optimized specifically for stereo rendering. Unlike most engines we don't simply render the scene twice for each eye. Instead, our renderer knows that a lot of the main render loop is the same for each eye. So, for example, expensive operations like culling, sorting draw calls and setting uniforms and render states only have to be done once before we draw the scene for each eye. This can lead to a significant performance increase, particularly on mobile.

Polyfill for unsupported platforms​

It's still early days for WebVR which means it's not yet supported on all platforms. When you enable WebVR in your PlayCanvas project, we make sure your browser can support it using the WebVR polyfill library from Google. PlayCanvas is smart enough to load the library only if you need it.

Tutorials and Documentation​

PlayCanvas is renowned for its extensive documentation and VR is no different. Basic instructions, API reference and specific optimization tips, we've got it all.

Samples and Starter Kits​

These sample projects show you how to construct a VR scene and give you sample code to start from.

Hello World - A very simple 3D scene

360 Image - Just drop in your own 360 panorama

360 Video - Add a link to your own video

Room Scale VR - A more complex scene designed for HTC Vive and other Room Scale VR

The Future​

We believe the future for WebVR is very bright and we're committed to making PlayCanvas the best tool for creating WebVR applications. Sign up for free today, we'd love to see what you build!

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:

The image is 4096 by 2048 but compresses well to a 1.81MB JPG file. Under the hood, WebGL expands this image to uncompressed 24-bit RGB, using 33.6MB of VRAM! Now imagine a single material with diffuse, normal, metalness, gloss, emissive and opacity maps. 6 of these images will occupy over 200MB of VRAM. Now imagine having 10 or more unique materials in your app. Get ready for crashed browser tabs and unhappy end users!

WebGL solves this problem by providing support for a number of compressed texture formats supported in hardware on the GPU. Each GPU tends to support at least one of these formats. Today, WebGL has fairly widespread support for:

• DXT: supported by all desktop devices and some Android devices
• PVR: supported by all iOS devices and some Android devices
• ETC1: supported by most Android devices

PlayCanvas exposes these formats through a simple inspector panel on a texture asset. For the Earth image, it gives the following results:

The first number is the GZIPed file size and the second number denotes how much VRAM is occupied by the texture. Notice how the compressed images occupy one sixth of the VRAM when compared to the original JPG. This is a stunning reduction!

Let's turn out attention to the demo iframed at the top of this article. VRAM usage is as follows:

Texture Set	VRAM Usage (MB)
JPG + PNG	528.0
DXT	87.7
PVR	66.8
ETC1	87.7

Texture compression suddenly makes the demo mobile friendly. But notice how it loads incredibly quickly after loading a mere 4MB of data. How is this possible? The textures are using a technique called level of detail, where low resolution versions are loaded up front allowing the application to start, while the high resolution versions asynchronously stream in the background. Also note that the app doesn't have to load any lightmaps because they are created procedurally on application start using PlayCanvas' runtime lightmap generation.

PlayCanvas' approach ensures that the most optimal texture format is selected for the device on which your application is running. In contrast, the Unity WebGL solution loads DDS files and decompresses as necessary on platforms that don't support it. This means that mobile devices do not benefit despite mobile devices having the greatest need for compression.

Summary​

• One-click texture compression for DXT, PVR and ETC1
• Achieve at least 6 times compression of all texture data in your WebGL apps
• Most optimal image format selected for device running a PlayCanvas app

PlayCanvas Texture Compression is available from today for Organization and Personal account holders (see the manual for more info). It will be rolled out to all users following a short beta period. So go forth, compress your textures and take your WebGL apps to a whole new level. And if you're new to PlayCanvas, why not sign up today. We can't wait to see what you make!

DIRECT LINK TO RUN FULLSCREEN

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!

Today we're launching the first version of the PlayCanvas REST API.

The REST API is available to all Organization account holders and allows developers to automate processes to help them with their development. For example, you can use the API to create a daily build of your application and download it via a build server. In the future we'll be expanding the API with additional features like access to assets and more.

You can read more details about the API in the documentation.

We'd love to hear your thoughts on how you are using the API and what you'd like to see in the future. Let us know on our forum.