How does the render work?

[demiculus]

When my game is played (colonist.io) it heats up the computer. Does it draw everything on the page every tick?

 

For example I have a lot of tiles https://prnt.sc/qpc4l6 after drawing them all once would it increase the performance if I made them cacheAsABitmap? Could this be the reason why it is using a lot of resources or is it something small?

There are around 110 sprites on the map (tile, dice, port etc.) and these do not change throughout the game. Are these using a lot of resources just staying the way they are. If I cache them as bitmap would the game use less resources? How can I track the resources they use?

Edited January 18, 2020 by demiculus

[demiculus]

Also I'm using PIXI.Text for most texts. Each time I use it, it creates a different canvas. Is this a good practice? When the views are removed are the canvas removed as well or are they still kept in the memory? If they are kept in the memory how can I remove the canvases from the memory?

https://prnt.sc/qponiq

[demiculus]

I'm putting all the tiles & ports to the same container then using `cacheAsBitmap = true` on the container but the resolution goes south why is that? How can I fix it?

Before resolution: https://prnt.sc/qppdw4

After resolution: https://prnt.sc/qppdzh

[ivan.popelyshev]

It is v4 or v5?

1. Remove all cacheAsBitmap
2. look at one frame in https://spector.babylonjs.com/

Count DC's, framebuffer changes, other stuff.

[demiculus]

Its v5 

1. Why remove all cacheAsBitmap? 
2. Spector.js looks cool but I can't make sense of whats going on, my understanding of all those calls and stuff aren't enough. Any resource you can recommend that'll increase my understanding of how things work and how I can debug to find where to optimize? 

[ivan.popelyshev]

1. Why remove all cacheAsBitmap? 

Because I have no guarantee about cacheAsBitmap behaviour, its trash. You either know how exactly it works inside, either you dont complain about it  I just dont accept any complaints about it without proper report, because that code is a mess and there were too many bugs in it.

>  Spector.js looks cool but I can't make sense of whats going on, my understanding of all those calls and stuff aren't enough. Any resource you can recommend that'll increase my understanding of how things work and how I can debug to find where to optimize?

There's a reason that ultimate book about pixijs doesn't exist. We are swimming in a very big ocean where such book or serie of articles will take huge number of hours to make. I can't just say "lower the number of drawcalls", or "". Its all about balance, you need to feel it. For that, you need to know

1. how pure WebGL works https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html

2. pixijs architecture, why it makes things easier https://github.com/pixijs/pixi.js/tree/dev/packages

It is not possible without learning the source code and debugging it. If you dont know how to place breakpoints, watch variables, use profiler, find bottlenecks - you wont be able to learn it.

In your case there are many Vector objects and that makes everything VERY difficult because there's no html5 engine that deals with vector properly like Flash did.

Flash cacheAsBitmap worked awesome, and our stuff has only two things in common : 1. it uses extra bitmap texture (RenderTexture) 2. it has a name `cacheAsBitmap`.

The best way to optimize your app is to ask me or t.me/ex_gd to seat down together with you and look at it, which, i think, we already did. We have a methodology of how to optimize apps but we can't just give you a set of instructions.

Edited January 20, 2020 by ivan.popelyshev

[ivan.popelyshev]

If only there were something like Kris Kasperski book about low-level optimizations - but, unfortunately, there is no such book for WebGL and PixiJS. We need time to make it. And just imagine it - all other books on pixijs and phaser cost money! Its a community problem. The topic is very difficult , requires huge number of hours to learn, and even more to describe it to other people.

I can only tell you where to start - find out what "batching" is: 

0. Debug BatchRenderer, "Graphics.render()" and "Sprite.render()"

1. count the number of draw calls and number of texture binds of your application per frame.

2. learn why tools like https://www.codeandweb.com/texturepacker are needed and if there are open-source or just free tools

Try profile your application. Find how many seconds it is idle per 10 seconds. Find whether its gpu-bound or cpu-bound. Find cpu js bottlenecks if you see it.

Do not use minified version of pixijs. Yes, it costs less network capacity but it ruins your debug.

===

Even if you do those things there is no guarantee that you will be able to fix your app, because to remove the bottleneck you need to know the algorithm where it happens. It might be not related to batching, it can be vector-related. It cant be something GPU-bound like fillrate - number of pixels drawn on screen. For example, if you use `resolution=2` or `resolution=1.5` to make things look better - that might be a problem.

Edited January 20, 2020 by ivan.popelyshev

[ivan.popelyshev]

Btw, i approved your post in hiring & freelance and posted a link in russian telegram html5 gamedev chats. I know that you're struggling with a problem for a long time, but come on - between your first post and this topic i helped so many people with performance problems  I don't know how did you manage not to solve all those things long time ago. There are several people around who can help with fixing it.

Also one of mistaeks you made - you didn't post exact specifications on which devices it is slow.

Edited January 20, 2020 by ivan.popelyshev

[ivan.popelyshev]

Answer for https://colonist.featureupvote.com/suggestions/55589/cpugpu-usage-optimisation  -  macbooks videocards + retina are a big problem. Don't enable antialias and make sure "resolution:" param is configurable by player. If someone wants it to not eat battery - they have to reduce the resolution. If a system has two videoadapters it is even worse - you have to choose correct one with "powerPreference" setting. That has to be added to game settings too!

I remember that you have all those cards and I dont remember how exactly they are animated - maybe there's a problem in your tweens, you cant just put 100 setInterval-s , its affecting event loop, need to handle them in the same RAF cycle. Its another problem that exists but it is not mentioned in forums and articles.

Edited January 20, 2020 by ivan.popelyshev

[ivan.popelyshev]

45 drawElements, and 28 stencilFunc - that means 14 or 28 masks, i dont remember exactly. Where do you use masks?

I looked in profile on my slow computer (GeForce GT 620) and its .. ideal. I dont see any slowdowns. If those macbook owners have problems - well, resolution and powerPerformance might help, but if they complain more - how many of them do you have? Are they 10% of userbase or how many?

However, i still cant find where do you handle all the animations. Really, debugging hexs.io is trash - so many frames, loaded resources, i dont even know where is your code  At least its very fast.

Edited January 20, 2020 by ivan.popelyshev

[ivan.popelyshev]

Hm, your masks for buttons at the bottom of screen - maybe removing them might help a bit. Can you "bake" it to one texture and use just one sprite instead of masking that stuff?

bindTexture:106 - if we make better batching maybe we can remove that. How do you store textures? Oh, now I remember, its SVG stuff. Right, Vector resources, its difficult. Its possible to make them in runtime atlas but it needs a specialist.

It might be that your only problem is apple computers. You can spend extra time with a specialist on optimizing that stuff but I dont know whether it really helps. Maybe resolution+powerPreference should help, just give those controls to users and they can set them depends on their hardware.

The problem is - im not sure that its possible to fix without actually owning the device. Imagine we spend 20 or 40 hours on optimizing it, how exactly will we measure the result?

User complaints about things that dont work on their computers with their internet provider ruined my nerve system and destroyed all my enthusiasm towards my game. Maybe my case is like yours - 5% of people are complaining about bad configurations and think that its very easy to fix because, well, they bought computer for more than 1.5k$ that was advertised everywhere as the best thing in the world and your free web-app should work on it of course, without draining battery.

[ivan.popelyshev]

OK, i really should stop flooding here. contact me in t.me/hackerham , i remember we had a chat about your problems before.

[demiculus]

Result: 

1. I've removed the masks changing the code below from

import * as PIXI from 'pixi.js-legacy'

export class RoundedBgView extends PIXI.Container {

    private readonly sprite: PIXI.Sprite
    private readonly roundMask: PIXI.Graphics

    constructor(w: number, h: number, container: PIXI.Container, texture: PIXI.Texture) {
        super()
        container.addChildAt(this, 0)

        this.sprite = new PIXI.Sprite()
        this.sprite.width = w
        this.sprite.height = h
        this.sprite.texture = texture
        this.addChild(this.sprite)

        const round = 5
        this.roundMask = new PIXI.Graphics()
        this.roundMask.beginFill(0x000000)
        this.roundMask.drawRoundedRect(0, 0, this.width, this.height, round)
        this.addChildAt(this.roundMask, 1)
        this.sprite.mask = this.roundMask
    }

    isSameBg(texture: PIXI.Texture): boolean {
        if(texture == this.sprite.texture) return true
        return false
    }
}

to

import * as PIXI from 'pixi.js-legacy'

export class RoundedBgView extends PIXI.Graphics {

    private readonly texture: PIXI.Texture

    constructor(w: number, h: number, container: PIXI.Container, texture: PIXI.Texture) {
        super()
        this.texture = texture
        const matrix = new PIXI.Matrix()
        matrix.scale(w/texture.width, h/texture.height)

        this.beginTextureFill(texture, 0xFFFFFF, 1, matrix)
        this.drawRoundedRect(0,0, w, h,5)
        this.endFill()
        container.addChildAt(this, 0)
    }

    isSameBg(texture: PIXI.Texture): boolean {
        return texture == this.texture
    }
}

2. I've made default powerPreference low-power

this.app = new PIXI.Application({
            antialias: antialias, // default value is window.devicePixelRatio * window.innerWidth <= 2000
            resolution: resolution, // default value is window.devicePixelRatio
            backgroundColor: GameColor.getColorHexValue(GameColor.Color.Sea),
            powerPreference: powerPref, // default value is 'low-power'
        })

 

3. I've added buttons for antialias, resolution & powerPreference, so players can change it: https://prnt.sc/qqoc4k

 

The game seems to be more optimized. But it still heats up my mac while playing. The problem is most other games also heat it up. I think macs have an internal problem with webGL. Plain HTML games never heat it up. I also checked "two videoadapters" things and my mac only has one. I hope after this update windows users won't have any problems and mac users will be okay with it. 15% of our players are from mac. 

Lets see how the community reacts to it.