Skip to main content

5 posts tagged with "open-source"

View All Tags

Using Visual Studio Code with PlayCanvas

· 2 min read

Visual Studio Code is massively popular. In the Stack Overflow 2023 Developer Survey, Visual Studio Code was ranked the most popular developer environment tool among 86,544 respondents, with 73.71% reporting that they use it.

Any PlayCanvas developer building directly on top of the Engine will very likely opt to use VS Code. But if you use the PlayCanvas Editor, you will normally rely on the built-in, browser-based Code Editor. Today, we're excited to give you another option by launching an open-source Visual Studio Code Extension for PlayCanvas.

VS Code Extension


The PlayCanvas Code Editor is actually built on the Monaco Editor, the beating heart of VS Code. So why use VS Code instead of the PlayCanvas Code Editor?

  • GitHub Copilot - leverage AI to help you write PlayCanvas code faster.
  • Powerful IntelliSense tools (code completion, parameter info, quick info, and member lists).
  • Leverage a huge library of other extensions to accelerate your development.

We ❤️ Open Source

As you might expect, we have open sourced the VS Code extension under a liberal MIT license!

So if you find a bug or have a suggestion, please do log an issue. And for the more adventurous, consider making a code contribution!

We want you to feel empowered to make these tools your own. Let's make them awesome together! 🙌

Get Started Now

If this all sounds great to you, why not give it a try? Head over to the User Manual for instructions on how to get started:


Massive Upgrade for the PlayCanvas Developer Site

· 4 min read

Today, we are excited to announce the brand new PlayCanvas Developer Site and API Reference Manual!

Developer Site

Let's start by taking a look at the new Developer Site, home of the PlayCanvas User Manual and Tutorials.

Developer Site Landing Page

Migrating from Metalsmith to Docusaurus

Since PlayCanvas was born in 2011, the basic look of the Developer Site has changed little. The content was written in Markdown and converted to a static HTML site using a tool called Metalsmith. Customizing the site to our needs meant we had to write many Metalsmith plugins (for localization, navigation and more) and a lot of HTML and CSS to style the pages as we wanted.

13 years later, the world of static site generators has moved on with lots of exciting new options! We evaluated Docusaurus and decided to migrate over to it.

What's New

So what made Docusaurus so compelling? First up, the migration was going to be straightforward because, like Metalsmith, Docusaurus consumes Markdown and outputs a static site. And much of the customization we did for Metalsmith is supplied 'out-of-the-box' with Docusaurus. So that's all great. But the new site comes with lots of cool new features we known you're going to love:

The site now integrates Algolia for advanced searching of the documentation.

Developer Site Search

This is a quantum leap over what came before. Try it (by pressing CTRL + K) - you'll be amazed. 🤯

🌒 Light and Dark Modes

Easily switch between light and dark themes (by clicking on the sun/moon icon top-right).

Developer Site Light and Dark Modes

🌏 Language Selection

Switch language from the nav-bar. At the moment, we're shipping with Japanese translations.

Developer Site Localization

👩‍💻 Edit on GitHub

As you might expect, the Developer Site is Open Source (MIT). Every page now has a handy link to the content on GitHub. Spot a mistake? Now can you fix it yourself and improve the docs for the community!

🧭 Easier Navigation

At the top of each page, you'll find 'Sidebar Breadcrumbs' which allow you to click back up the page hierarchy.

Developer Site Breadcrumbs

To the right of each page, you'll find a table of contents which can be a big help, especially for long pages.

Developer Site Table of Contents

And at the bottom of each page, you'll find 'Previous' and 'Next' links that allow you to read through the User Manual sequentially.

Developer Site Previous and Next Links

API Reference

We are not just launching a new Developer Site today. We are also launching our brand new, upgraded API Reference Manual!

API Reference Site

Migrating from JSDoc to TypeDoc

Since the start, we have relied on JSDoc to generate our API reference manual. But since then, we have seen the introduction of TypeDoc which offers some major advantages over JSDoc.

🎨 High Quality Default Theme

While it's not perfect, the default TypeDoc theme is gorgeous and a big improvement over our custom JSDoc theme. It provides:

  • Light and dark modes (like the main developer site)
  • Links to the source code on GitHub
  • Grouping of API into related categories
  • Powerful search (press / to activate it)
  • ...and much more!

It's a great foundation for us to begin with and we can customize the default theme to our requirements as needed.

🔗 Easy Combining of APIs

Did you know that PlayCanvas develops frameworks and libraries other than the PlayCanvas Engine? There's PCUI, a front-end framework for web-based tools. There's the PlayCanvas Editor API for automating the interface. And more! The new API reference collects all of the PlayCanvas APIs into a single manual.

API Reference Site APIs

Open Source FTW

Everything we are announcing today is 100% open source.

We want to empower to community to get involved and make PlayCanvas better for everybody. It's never been easier to submit your first pull request on GitHub. So why wait - get started today! ❤️

Introducing PCUI - An Open Source UI Framework for the Web

· 2 min read

Today, PlayCanvas is launching PCUI: a new, open source front-end framework for the web.

PCUI Banner

PCUI is designed with tools developers in mind. It is particularly well suited to building viewer and editor applications, providing a rich set of beautiful and consistent controls. It already powers the PlayCanvas Editor - the world's most powerful WebGL production tool.

PlayCanvas Editor

Here you can see tree controls, panels, buttons, checkboxes, toolbars, menus and more. The Editor also relies on PCUI's observer system, that makes it easy to synchronize the state of your application's UI with that of the underlying data. Plus, it has a built-in support for history to make implementing redo/undo a breeze.

Also built on PCUI is the PlayCanvas glTF Viewer, a tool for inspecting glTF 2.0 scenes.

Flight Helmet in glTF Viewer

Check out the viewer's GitHub repo to see how a TypeScript-based web application leverages PCUI.

If these applications inspire you to build your own browser-based tools, why not get started with PCUI today? Here are some useful links:

PCUI works great with vanilla JS projects, TypeScript projects and React-based projects. It's open source so we encourage you to get involved and help us advance PCUI.

If you're building any kind of browser-based tool application - definitely check it out today and share your thoughts on the forum!

Arm and PlayCanvas Open Source Seemore WebGL Demo

· 2 min read

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 optimized way, as well as using it to incorporate some of its performant features and components into their own projects.

Seemore Demo



“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.

Seemore Demo

PlayCanvas goes open source

· 6 min read

When we first started PlayCanvas (over 2,716 commits ago) WebGL was just beginning to make it's way from Chrome and Firefox Nightlies into stable releases. Fast-forward to 3 years and WebGL is everywhere, Firefox and Chrome have strong support both on desktop and on mobile. And just this week the final player Apple have joined us with WebGL support for both Safari and iOS.

SWOOOP background

Today, we have some more great news for WebGL fans, game developers and web developers alike.

PlayCanvas Engine is now open source.

The entire runtime engine is available right now on GitHub under the lovely MIT license. Which means you can download it, fork it, and generally use it for anything you like.

Why open source, why now?

Ever since we started the engine open source was always on our mind. We've never hidden the source code from developers. Minified versions are available for performance reasons, but during development users always have had full access to the un-mangled engine. This is critical for debugging and fulfilling our mantra to make game development easier.

In reality the engine has been open source since the get go. Officially open sourcing the project was just a matter of time, and the time is now. The engine is mature enough that we've established the basic structure, style and functionality but contributors will still be able to make a meaningful contributions to the engine. And of course we've now found the time to lay down the foundations of the developer documentation, the API reference, the samples and all the other stuff that makes game development a joy not a chore.

For developers who just want to hack on the code with the overhead of the tools this news is great. Simply download the engine, open up your text editor and get cracking. For those of you who want more structure, and higher level tools, the PlayCanvas platform is a perfect addition to accelerate your game production.

So, this engine? What is it?

In case you haven't come across the PlayCanvas Engine before, it's a JavaScript library engineered specifically for building video games. It implements all of the major components that you need to write high quality games:

  • Graphics: model loading, per-pixel lighting, shadow mapping, post effects
  • Physics: rigid body simulation, ray casting, joints, trigger volumes, vehicles
  • Animation: keyframing, skeletal blending, skinning
  • Audio engine: 2D and 3D audio sources
  • Input devices: mouse, keyboard, touch and gamepad support
  • Entity-component system: high level game object management

Design Goals

We had a couple of goals in mind when we originally designed the engine.

  1. It had to be easy to work with.

  2. It had to be blazingly fast.

Simple Yet Powerful

As a developer, you want well documented and well architected APIs. But you also want to be able to understand what’s going on under the hood and to debug when things go wrong. For this, there’s no substitute for a carefully hand-crafted, unminified, open source codebase.

Additionally, you need great graphics, physics and audio engines. But the PlayCanvas Engine takes things a step further. It exposes a game framework that implements an entity-component system, allowing you to build the objects in your games as if they were made of Lego-like blocks of functionality. So what does this look like? Let’s check out a simple example on CodePen


As you can see from the Pen’s JS panel, in just over 100 lines of code, you can create, light, simulate and view interesting 3D scenes. Try forking the CodePen and change some values for yourself.

Need For Speed

To ensure we get great performance, we’ve built PlayCanvas as a hybrid of hand-written JavaScript and machine generated asm.js. The most performance critical portion of the codebase is the physics engine. This is implemented as a thin, hand-written layer that wraps Ammo.js, the Emscripten-generated JavaScript port of the open source physics engine Bullet. If you haven’t heard of Bullet before, it powers amazing AAA games like Red Dead Redemption and GTAV. So all of this power is also exposed via the PlayCanvas engine. Ammo.js executes at approximately 1.5x native code speed in recent builds of Firefox so if you think that complex physics simulation is just not practical with JavaScript, think again.

But what about the non-asm.js parts of the codebase? Performance is clearly still super-important, especially for the graphics engine. The renderer is highly optimized to sort draw calls by material and eliminate redundant WebGL calls. It has also been carefully written to avoid making dynamic allocations to head off potential stalls due to garbage collection. So the code performs brilliantly but is also lightweight and human readable.

Powering Awesome Projects


The PlayCanvas Engine is already powering some great projects. By far and away, the biggest is the PlayCanvas web site: the world’s first cloud-hosted game development platform.

For years, we’ve been frustrated with the limitations of current generation game engines. So shortly after starting work on the PlayCanvas Engine, we began designing a new breed of game development environment that would be:

  • Accessible - Using any device with a web browser, plug in a URL and instantly access simple, intuitive yet powerful tools.
  • Collaborative - See what you teammates are working on in real-time or just sit back and watch a game as it’s built live before your eyes.
  • Social - Making games is easier with the help of others. Be part of an online community of developers like you.

PlayCanvas ticks all of these boxes beautifully. But don’t take our word for it – try it for yourself and discover a better way to make games.

Speaking of Games

It's all very well talking about engines and tools, but engines are only as good as the games they let you make. Fortunately we've got a doozy for you.

SWOOOP - mobile browser game built using the PlayCanvas Engine

SWOOOP is a great demonstration of what you can achieve with HTML5 and WebGL today. The game runs great in both mobile and desktop browsers and PlayCanvas also supports publishing to App Stores through third-party tools like Ludei's CocoonJS or the open source Ejecta project.

Get Involved

So you want to help us make the very best 3D engine on the web? Great! Head over to our GitHub page. Get cloning, starring and forking while it’s fresh!

Stay in the Loop

Lastly, stay in touch, we're a friendly bunch.

We’re super excited to see what the open source community will do with the PlayCanvas Engine. Get creative and be sure to let us know about your projects.

Toodle pip!