Tessellation like the Professionals


Are you planning on allowing developers to integrate code into the editor as you have done with the vertex/fragment shaders but specifically for the tesselation part of the GPU pipeline? My video game I’ve developed using Playcanvas editor is aimed for users with a low-end mobile & tablets. Compared to actually apps I download from the app store such as Subway Surf or Mickey Mouse Castle of Illusion, my own Playcanvas app just doesn’t seem to be able to handle complex meshes, it just crashes. I keep trying but can’t seem to get a game with a decent detailed level.

Any plans for tesselation for the future of Playcanvas? I’d even pay for the Organization plan for this integration. If I can’t do this with Playcanvas I’d have to begin using another editor like Lumberyard


I’ve spent one-year full-time working on my game, about 5-8 hours a day. I’m a professional web-based video game maker and have enjoyed working with Playcanvas, but it would be sad to have to switch since my game requires great visuals, beautifully smooth, soft, visuals for little kids. Sharp edges can’t be in the final product released.

  • Thanks,
    Anton G

You are more limited by what you can do in the browser. If you are developing a mobile game not for the web and want the highest fedlity, you are best going native and using an engine such as Unity, Unreal etc.

If you are building a game for web, I would caution using engines that aren’t native as their web export is optimal (at the moment) compared to PlayCanvas, three.js etc .

For your actual problem:

I would look at LODing your complex meshes and downloading the right detail level at runtime pending on the device it’s been run on.

I believe a forum member has written a LOD plugin. Released: Hera LOD Manager

1 Like

The other thing that could be crashing the browser would be running out of VRAM.

The ORG plan allows for compression of textures to ETC, PVR which use up considerably less memory in VRAM. See last subject here: https://developer.playcanvas.com/en/user-manual/assets/textures/

Also consider the dimensions of your textures. Do they need to be as large as they are?

Can you also show a screen shot of how complex some of these models are to get some context?

I just looked at the demo video for Subway Surfers and that game is very low poly. But the artists who created the elements are very skilled at making the low poly meshes look good by the use of gradients in the textures and probably well designed normal maps.

There was no demo video for Mickey Mouse Castle of Illusion on Google Play, but I saw lots of low poly assets in the stills that they showed.

I assume that each of these games was developed using a team of 10 or more highly skilled artists and coders.

As yauster suggests, if your target isn’t to run the game in a browser, then maybe Unity or Unreal are better platforms? The PlayCanvas strength is that it runs native Javascript that is fairly optimal for browsers.

For anyone to help you diagnose performance problems, you really need to share a link to a scene.

Hi Guys,

Sorry for the late reply. I’m going to give you the link But please understand that this project is specifically designed for 3rd world countries, specifically for missionaries who educate poor kids who are either victims of poverty, war & terrorism. With regards to the current build of the video game, I am in the planning stages of working with a distant cousin of mine (second generation), Father Joy, who is the Parish priest of the Sri Lanka Easter bombing that happened this year. I’m trying to make this game work on really cheap tablets, phones that anyone would donate. That’s why I’m asking for the Tessellation functionality to be integrated into the editor. The game is designed for people in well off countries to communicate via angel avatars, to victim kids & teens that they are not at fault for being victims. Anyway, take a look at the level of detail when you play, it’s not much but this is as much as I can get out of it at this stage and there’s so much more of the stage that needs to be done:


In conclusion, all I’m asking is that in the future you allow for developers to code the program in the tessellation pipeline just like how you have allowed developers to code for the vertex/fragment shader part of the pipeline

  • Thanks,
    Anton G

Your game is loading the PlayCanvas Engine twice. Once by the normal mechanism of the application and the second by a script you have in your game:

var PlayCanvasEngineInitialization = pc.createScript("playCanvasEngineInitialization")
  , PCEI_scripts = ["https://code.playcanvas.com/playcanvas-stable.min.js"]
  , PCEI_styles = []
  , PCEI_filesloaded = 0
  , PCEI_filestoload = PCEI_scripts.length + PCEI_styles.length;
PlayCanvasEngineInitialization.prototype.initialize = function() {
    for (var t = 0; t < PCEI_scripts.length; t++) {
        console.log("Loading PCEI_script " + PCEI_scripts[t]);
        var a = document.createElement("script");
        a.type = "text/javascript",
        a.src = PCEI_scripts[t],
        a.onload = function() {
            console.log("Loaded PLAYCANVAS ENGINE script"),
            ++PCEI_filesloaded === PCEI_filestoload && console.log("PLAYCANVAS LOADED")

Why are you doing this?

Also, you have a huge model asset in your project named ‘Praying (1).json’. This is 20MB of JSON. I suspect that this model is not suitable for low end mobile. But I’d have to examine the source artwork to know for sure.

Also, I notice you’re using PlayCanvas’ Spine plugin:

Are you using the latest version? When did you last get the source code? There have been lots of optimizations to the plugin in the last 6 months.

WebGL has no support for tessellation on the GPU. That said, I seriously doubt that has anything to do with any performance problems you’re seeing. In fact, I guarantee it.

So, yes, I have just confirmed…if you update your version of the Spine library to the latest version, the character with the sword will render in a single draw call. So far, far faster than in your game currently, where the character is rendered with 20 draw calls(!).

1 Like