demiculus

How does the render work?

Recommended Posts

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 by demiculus

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

2020-01-20-14-49-23-jojg0.png

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.