PCUI 1.1.0 Adds Tree Control and Array Control

Back in October, we launched PCUI, an easy to use framework for building web-based tools. It already powers the PlayCanvas Editor and glTF Viewer applications.

Today, we’re excited to announce our next major release for the library: PCUI 1.1.0. Check out the release notes for the details. But let’s take a look at some of the highlights.

TreeView – Tree Control

Many web tools display data in a hierarchical or tree-based representation. But building a tree control in HTML and CSS can be tricky. PCUI 1.1.0 introduces a very easy to use tree control. And it incorporates some useful features such as:

  • Drag and drop of tree view items
  • Built-in ‘double-click to rename’

ArrayInput – Array Control

Also arriving in PCUI is ArrayInput. It allows you to create input controls for arrays of numbers, strings, booleans or vectors.

Resizable TextAreaInput Control

The TextAreaInput control has been augmented with a new resizable property that can be set to ‘none’, ‘horizontal’, ‘vertical’ or ‘both’.

To get started making awesome web tools with PCUI, here are some useful links:

Introducing PCUI – An Open Source UI Framework for the Web 🚀

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

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.

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.

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!

PlayCanvas launches glTF 2.0 Viewer Tool

Today, the PlayCanvas team is excited to announce the release of a brand new browser-based glTF viewer application.

Try it now: https://playcanvas.com/viewer

Or click these links to preload some classic glTF models: Boom Box, Damaged Helmet and Fox.

The viewer is open sourced under an MIT license and the code can be found on GitHub.

Fork it now: https://github.com/playcanvas/playcanvas-viewer

The viewer allows you to drag-and-drop any glTF 2.0 file and inspect it in detail. We challenge you to find one that doesn’t work! The viewer has the following features:

  • Visualize wireframe, skeleton, bounds and normals
  • Adjust scene lighting and skybox
  • Drag and drop equirectagular images (including HDR files) or six cubemap face images.
  • See how a model performs on both the CPU and GPU via the viewer’s real-time metrics panel
  • Play animations (including skinned and morphed meshes) – unlimited morph targets are supported
  • Visualize animation curves in real-time as graphs in the 3D view
  • Load models via drag-and-drop or by passing a URL query parameter
  • Support for Draco mesh compression

The release of the PlayCanvas Viewer coincides with the engine reaching 100% glTF 2.0 spec compliance! PlayCanvas passes every single core test in cx20’s glTF Test suite. We are now turning our attention to supporting the full range of glTF 2.0 extensions. The engine already supports:

  • KHR_materials_pbrSpecularGlossiness
  • KHR_materials_unlit

The engine itself can parse and render glTF 2.0 files incredibly quickly. You can expect glTF parse time to be approximately one tenth of that loading the equivalent JSON model.

Give it a try today – you’ll be impressed!