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.

Development Update: Tags, New Script Attributes

Hi everyone! It’s time for another Development Update. So without further ado…

Editor Tags and Engine Tag API

The feedback we’ve been getting is that your projects are continuing to grow. More assets, more entities, more complexity. It makes it hard to find and organize things, right? To help you out, we’ve introduced Tags to the Editor interface. We’re starting out with Assets. Check out how you tag your assets:

tags

To search for Assets, we have introduced a new pc.Tags API. Let’s quickly look at some examples:

// Return all assets tagged by 'level-1'
var assets = app.assets.findByTag("level-1");

// Return all assets tagged by 'level-1' OR 'level-2' 
var assets = app.assets.findByTag("level-1", "level-2");

// Return all assets tagged by 'level-1' AND 'monster' 
var assets = app.assets.findByTag(["level-1", "monster"]);

// Return all assets tagged by ('level-1' AND 'monster') OR ('level-2' AND 'monster')
var assets = app.assets.findByTag(["level-1", "monster"], ["level-2", "monster"]);

Next up is to support tagging of entities. Look out for this feature landing sometime soon.

Curve and Entity Script Attributes

We have added a couple of new script attribute types for you to expose to the Editor UI: curves and entities.

Curve attributes can be used to define how a value or values change over time. Consider it a simple keyframing tool. To define a curve script attribute, use the following notation:

// Specify a single curve
pc.script.attribute('singleCurve', 'curve');

// Specify a set of 3 curves labelled x, y, z
pc.script.attribute('xyzCurve', 'curve', null, {
    curves: ['x', 'y', 'z']
});

// Specify a set of 3 curves labelled r, g, b with a color preview
pc.script.attribute('rgbCurve', 'colorcurve');

// Specify a set of 4 curves labelled r, g, b, a with a color preview 
pc.script.attribute('rgbaCurve', 'colorcurve', null, {
    curves: ['r', 'g', 'b', 'a'],
    type: 'rgba'
});

Check out the colorcurve control’s functionality below:

colorcurve

To define an entity script attribute, use the following notation:

pc.script.attribute('target', 'entity');

This exposes an entity picker to your script UI. Even cooler is that you can drag entities from the Hierarchy panel directly onto the picker, as shown below:
entitydrag

 

That’s it for this update, friends. Now get back to making cool stuff! 😀

Development Update: Major Improvements Ahoy!

Have you noticed that everybody seems to go on vacation in August? Not PlayCanvas! We’ve been burning the midnight oil to bring you a raft of new features and improvements to your favourite browser-based 3D engine. Want the deets? Read on!

Editor Improvements

  • User cameras are now back and improved with interpolation for smoother animation. You can also hover on the semi-transparent rectangle of the camera to see a username tooltip to find out who’s keeping you company.
    usercamera
  • Most assets are now triggering previews when dragged: drag a material to a material asset slot without dropping it and it will swap temporarily in the 3D view for preview. This applies to: textures, materials and cubemaps.
  • Materials are now draggable into the 3D view. Just drag them right onto the model.
    switchmaterial
  • Cubemaps are now draggable into the 3D view. Drag onto materials to apply as an environment map, or onto the background in the 3D view to apply as a scene skybox.
  • Tooltips are now shown when hovering on entities in the 3D view (after a short delay).
  • Read-only collaborators are now able to click on the “View” button of code-based assets to open a read-only view of the script in the Script Editor.

Asset System Improvements

  • Asset loading has been heavily refactored.
  • Assets now manage their own reloads way more efficiently.
  • The Model Component processes any asset updates far faster.
  • Reduced number of re-uploads to GPU of texture assets.
  • A cube map now uploads to the GPU only if it has valid data and only if one or more faces have changed.

Graphics Engine Improvements

  • Shaders are no longer linked on creation, but only when used to avoid blocking on completion of shader compilation. This generally improves load time.
  • Texture state setting is now far more optimal leading to major rendering speedups.

Fixes

  • Asset thumbnails should now refresh in the assets panel on a re-upload.
  • Gizmos are now not draggable outside of viewport.
  • For the opacity map of a material, the “RGB” option has been removed, because it led to shadows disappearing.

That’s it for this week. We hope you like the improvements. Anything we’re not working on that you want to see added to PlayCanvas? Tell us on the forum!

Have a great weekend!

Autocomplete and Realtime API Reference added to Code Editor

PlayCanvas scripters rejoice! The Code Editor has just received a major upgrade. We have just deployed two new related features:

  1. Autocompletion
  2. Realtime API reference documentation

So what does this look like? An animated GIF is worth 1000 words, so behold:

autocomplete

As you can see, the Code Editor now displays the properties of a variable and can list them in a popup for quick selection. But even cooler is that the API reference description for the selected property is shown to the right of this. So what does this all mean? Fewer visits to the full API Reference Manual on the developer site, that’s what? So nice.

Let us know what you think. Anything else you would like us to add?

That’s all for now folks. Over and out.

 

DOOH and PlayCanvas debut Giant Space Invaders at Cannes Lions

Cannes Lions is the world’s biggest annual awards show and festival for professionals in the creative communications industry.

PEOPLE WATCHING SPACE INVADERS 2 LOW

Passers-by playing the world’s biggest space invaders on their smartphones

Dominating the sea-front is the Grand Cannes, a vast 18 meter wide LED screen that sits atop the Grand Hotel. DOOH, a world leader in Digital Out Of Home experiences, wanted to create a gaming experience people could play on that screen to wow the world of advertising.

“At DOOH, we’re constantly devising new and refreshing ways to engage consumers as they go about their lives.” said Andrew Newman, CEO of DOOH. “Gaming has a key role in that. So at Cannes Lions, we’re enabling passers by to play the world’s largest game of Space Invaders. And since everybody has a smartphone, everybody can play. Just visit a web link to load up the DOOHpad, our virtual controller. To build DOOH Invaders, we needed a partner who understands the intersection of gaming and advertising. The natural choice was PlayCanvas and they’ve built something truly special.”

doohinv

DOOH Invaders: Running on the 20m wide Grand Cannes

doohpad

The DOOHPad that runs on your smartphone

“We’re absolutely delighted to have worked with DOOH on this campaign.” says Will Eastcott, PlayCanvas’ CEO. “DOOH are the masters of high profile, head-turning marketing campaigns and this one marks a new high. PlayCanvas technology enables super-accessible, frictionless gaming experiences that are delivered over the web and can be played by all. No need to visit an app store. Just instant fun. PlayCanvas opens the door to a whole new world of interactive possibilities for advertisers.”

DOOH Invaders is playable throughout the Cannes Lions festival. So if you’re in the area, swing by the Grand Hotel and see if you can beat the latest high score and impress everybody on the beach!

PLAY CANVAS

PlayCanvas rules from on high! 😀

What’s New: Multi-selection, Gizmos and Faster Lighting

Greetings, PlayCanvians! It’s time to update you on all the cool things we’ve deployed recently. Let’s get started!

Multi-selection: Phase II

You may remember that, last month, we began work on implementing multi-selection in the Editor. First, we delivered asset multi-selection. And today, we’re happy to announce we deployed entity multi-selection. So now, you can CTRL+click multiple entities either in the Hierarchy panel or in the 3D view. This selection can then be manipulated, either via the gizmos or in the Inspector. Don’t believe me? Feast your eyes on this:

multiselection

(Ed: Can somebody get Will to stop using Doom3 characters in his screenshots??)

New Gizmos

On the subject of gizmos, you may notice they look marginally different. In fact, they’ve been completely rewritten from scratch. You use the gizmos constantly when building scenes in PlayCanvas, so they need to be absolutely rock solid and a joy to use. We think we’ve nailed it. Give them a try and let us know what you think.

Faster Lighting

By now, you’ll be familiar with PlayCanvas’ physically based renderer. Objects in a scene are lit based on cube maps that define environmental lighting on a per-pixel basis (this is Image Based Lighting). We’ve spent a few weeks speeding this up to make it absolutely sing on lower-end mobile devices. If you want to track our work on the engine, you need to be hitting the Watch button on our GitHub repo.

More Feedback Please

We hope you’re all enjoying the new Editor. The response has been phenomenal so far. But keep that feedback coming. Head over to the forum to join the conversation. Your opinion matters!

That’s all for now, folks. <3

 

PlayCanvas in the Spotlight at 3D Web Fest

On May 13th, San Francisco played host to 3D Web Fest.

folsom_st_foundry_panorama

The event was designed to showcase websites that represent the best of the best of the 3D Web. The content on show – presented as Live Performance Art – was amazing, delightful, surprising and at times disturbing. There were creations by artists and developers of all kinds showing off their best 3D web sites live with musical accompaniment. The running order was as follows:

  • Tone Pong – A audio rich Pong experience
  • Character Study for WebGL Games – Rag doll physics
  • Gravity – Trippy gravity playground
  • A Particle Dream – Trippy particle playground
  • Maratropa – Twitter visualizer
  • MTV EMA 2012 Opener – A Zoetrope, a fast-moving carousel which evokes the illusion of motion
  • Seemore – Enter PlayCanvas and ARM’s sinister realm of a monstrous man-eating plant
  • Mountains of Mouthness – Mountains that read tweets aloud
  • Rainbow Membrane – A VR demo where you are inside a box you can pull and push, performed with an OculusVR and LeapMotion
  • Arterys – Visualizations of CT data of arteries, including flow
  • Just a Reflektor – Control some effects in a music video using a webcam
  • Lights – Music video flying over a procedural landscape
  • (out)Looking Glass – A man contemplating himself in the mirror
  • Nyumblies – Hand-made organic shapes swimming around
  • Skazka – Dream-like landscape with dancing silhouettes
  • VR Data Landscape – Fly through a landscape of abstract shapes, presented using a LeapMotion camera and a balance-board controller

Check out our Seemore demo up on the dual big screens:

seemore

 

The man behind the controls was Brad Grantham of ARM. He selected some superb music to accompany the visuals. Check ‘Hush’ out here. Kudos to Brad for doing an incredible job!

It’s very exciting to see WebGL content being recognised as an artform and even more exciting to see PlayCanvas content representing the best of the web. We’re looking forward to a follow up event at some point in the future!

What’s New: HDR Cubemaps, Multi-selection and more

It’s been another busy week for the PlayCanvas team. Here’s a quick run down of the coolness we’ve deployed for you:

HDR Cubemaps

We’ve taken lighting to a whole new level of realism in PlayCanvas. The Editor now supports the import of HDR images to build HDR cubemaps.

hdr

CLICK HERE TO RUN DEMO

HDR image formats supported are .hdr and .exr. When a texture is selected in the Inspector, there is now a property called HDR which is either true or false. So the workflow to construct an HDR cubemap for image based lighting is now:

  1. Upload 6 HDR images
  2. Create a new cubemap asset and select it so that it is shown in Inspector
  3. Assign the six images as cubemap faces
  4. Hit the Prefilter button in Inspector
  5. Open the Scene Settings (the cog in the bottom left of the Editor UI)
  6. Assign the HDR cubemap asset to the Skybox property in Scene Settings

Now, physical materials will use the HDR cubemap as the source for image based lighting.

Multi-selection: Phase 1

We’ve deployed the first phase of a really useful new feature: multi-selection. Initially, this works for texture and cubemap assets. In the Assets panel, you can now SHIFT or CTRL click multiple textures or cubemaps. This allows you to do several things:

  • Delete multiple assets simultaneously
  • Change shared properties once for all assets in the selection
  • Display the summed size all assets in the selection

Stay tuned for multi-selection support for other asset types and entities too!

Material Duplication

If you right click a material asset, you can now duplicate it via the context menu:

duplicate

Audio Preview

Now you can play back your audio assets directly from the Editor. Select the audio asset in the Assets panel and the Inspector now shows a play button:

audio

That’s all for this week, folks. Now get back to making great games!

The Making of Seemore WebGL

At GDC 2015, ARM and PlayCanvas unveiled the Seemore WebGL demo. If you haven’t seen it yet, it takes WebGL graphics to a whole new level.

seemore
CLICK HERE
TO LAUNCH SEEMORE

So why did we build this demo? We had two key goals:

Put amazing demo content in the hands of you, the developer

Seemore WebGL is the first conference demo that has been developed to run specifically in the web browser. This is great, because you can run it for yourself and do so on any device. Nothing to download and install – hit a link, and you’re immediately dropped into a stunning 3D experience. And better yet, you can learn from the demo and use that knowledge in your own creations.

Demonstrate console quality graphics on mobile

ARM Mali GPUs pack a serious graphical punch and Seemore is designed to fully demonstrate this power. We have taken advanced graphical features seen in the latest generation of console titles and optimized them to be completely mobile friendly. And best of all, all of this technology is open sourced on GitHub.

It’s not practical to examine all of the engine updates we made to bring Seemore to life. So instead, let’s examine three of the more interesting engine features that were developed for the project.

Prefiltered Cubemaps

This is the generation and usage of prefiltered cubemaps. Each mipmap level stores environment reflection at different level of surface roughness – from mirror-like to diffuse.

prefilter

How did we do it?
First, we added a cubemap filtering utility to the engine (GPU-based importance sampling). The next step was to expose this functionality in the PlayCanvas Editor. This technique uses Phong lobes of different sizes to pre-blur each mip level. Runtime shaders use either the EXT_shader_texture_lod extension (where supported) or reference mip levels stored as individual textures that are interpolated manually.

Show me the code!

https://github.com/playcanvas/engine/pull/202

Further reading:

http://http.developer.nvidia.com/GPUGems3/gpugems3_ch20.html
https://seblagarde.wordpress.com/2012/06/10/amd-cubemapgen-for-physically-based-rendering/

Box-projected cubemaps

This feature makes cubemaps work as if projected onto the insides of a box, instead of being infinitely far away (as with a regular skybox cubemap). This technique is widely used in games for interior reflection and refraction.

bpcem34

How did we do it?

This effect is implemented using a world-space AABB projection. Refraction uses the same code as reflection but with a different ray direction, so the projection automatically applies to it as well.

Show me the code!

https://github.com/playcanvas/engine/pull/183

Further reading:

http://www.gamedev.net/topic/568829-box-projected-cubemap-environment-mapping/

Custom shader chunks

Standard material shaders in PlayCanvas are assembled from multiple code ‘chunks’. Often, you don’t want to replace the whole shader, but you’d like to only change some parts of it, like adding some procedural ambient occlusion or changing the way a surface reflects light.

This feature was required in Seemore to achieve the following:

  • Dual baked ambient occlusion. The main plant uses 2 AO maps for open and closed mouth states which are interpolated dynamically.
    AO
  • Fake foliage translucency. This attenuates emission to make it appear as though light is scattered on the back-faces of leaves in a hemispherically lit room. The plant’s head uses a more complex version of the effect, calculating per-vertex procedural light occlusion.
    fol
  • Plant/tentacle animation. Procedural code that drives vertex positions/normals/tangents.

How did we do it?

Shader chunks are stored in the engine sourcebase as .vert and .frag files that contain snippets of GLSL. You can find all of these files here. Here’s an example chunk that applies exponential squared fog to a fragment:

  uniform vec3 fog_color;
  uniform float fog_density;

  vec3 addFog(inout psInternalData data, vec3 color) {
      float depth = gl_FragCoord.z / gl_FragCoord.w;
      float fogFactor = exp(-depth * depth * fog_density * fog_density);
      fogFactor = clamp(fogFactor, 0.0, 1.0);
      return mix(fog_color, color, fogFactor);
  }

Each chunk file’s name becomes its name at runtime, with PS or VS appended, depending on whether the chunk forms part of a vertex or pixel shader. In the case above, the filename is fogExp2.frag. It’s a simple matter to replace this fragment on a material. Simply do:

  material.chunks.fogExp2PS = myCustomShaderString;

Show me the code!

https://github.com/playcanvas/engine/pull/172

So there you have it. A brief insight into some of the latest technology in the PlayCanvas Engine. Want to find out more? Head over to GitHub, watch, star and fork the codebase – get involved today!

ENTI Brings you VideoGame Day in Mallorca

PlayCanvas is passionate about education and many universities throughout the world are already using PlayCanvas to teach videogame development skills. One such school is ENTI, which is attached to the University of Barcelona in Catalonia, Spain.

videogameday
On 21st March, ENTI is holding VideoGame Day in Manacor on the beautiful Balearic island of Mallorca. It is their first workshop on videogame design and programming, where they are going to teach how to make robot dance using PlayCanvas! The workshop starts at 10AM and last for 4 hours.

The address:

Espai Na Camel•la, Manacor – Carrer d’en Tià de Sa Real s/n (see here for a map).

VideoGame Day is brought to you by two videogame experts. First, we have Josep Francesc Cortés Fullana from Manacor, who has been working in the field of video games for Kerad Games in Barcelona for many years. And there is Jordi Targa, the professor of the Upper Grade Educational Cycle in 3D, Games and Interactive Environments at ENTI, offering to the participants a course of programming and design of video games based on PlayCanvas!

The conference consists of two parts. The first part is the conference related to the video games world, constantly growing market, and the job opportunities it offers.

The second part is a practical course where the participants have an opportunity to create a video game online and thanks using PlayCanvas and also have a chance to win a powerful Chromebook-2 by entering our PlayHack event.

VideoGame Day is free of charge and welcomes everybody interested in videogame development.

You can apply for participation sending an e-mail to: info@enti.cat or confirm it personally in Education Department or Manacor Council (c/Muntaner 12)

It is recommended that all attendees bring a notebook for the practical part of the workshop.

So what are you waiting for? Why not enjoy some Mediterranean sun and learn some great new development skills at the same time?