unexpected poor performance
krumza

Hi all!

another my project - is a "program" for draw blueprints for  for the production of stretch ceilings.
By design the app should allow the installer of the ceilings to draw the drawing on the logic:
1. the installer applies a contour points
2. the app connects points with lines.
3. the installer can move the points if they are unevenly set
4. the installer clicks on the line and can specify their size in metres
5. the program clears all points of the agreement with the data and calculates the area...
and so on

I'm not asking for the logic - I can deal with counting the squares and other things (I hope).

But I ran into terrible performance, even by implementing a few steps - namely, drawing the outline of the ceiling

here link http://shop2.krumza.com/

I would be very grateful if you tell me where I have error

All 4 Comments
Gio

Hi

I've just tried it and I get a consistent 60fps on that page (and no, I'm not using a super computer, it's a few years old mid-range PC). How many points do I need to add to notice a slow-down?

One thing you could try that might help a bit, would be moving the background and buttons to a separate layer.

krumza

Yes, Ui will be on another layer.

about code

in the amount of time before your reply I deleted something in code^

           // create text and add it to the scene
        this.textSprite = new TextSprite('(0, 0)', '32px Arial', 'red', 'center');
        this.textObject = new SceneObject(this.textSprite);
        wade.addSceneObject(this.textObject);

in init and 

        // change text
        var x = eventData.screenPosition.x;
        var y = eventData.screenPosition.y;
        wade.app.textSprite.setText('(' + x + ',' + y +')');
        // change color
        var color = wade.isMouseDown()? 'blue' : 'red';
        wade.app.textSprite.setColor(color);

in the onMouseMove

With this problems started ~at third point

Now i back this fragment in code and you can see on previous link (server strongly cached reload with clean cache)

How can 1 text object shut down all?

Gio

Text that changes very often is something that you have to be careful with.

This is what happens under the hood (under normal circumstances) when you change the text on a text sprite:

1. WADE needs to update the bounding box of the text sprite, so it needs to know how big it is. You may be using any font or drawing style, so there is really only one way to know, and this is what WADE has to do

    1a. create a div

    1b. add the div to the document (outside the screen area)

    1c. add your text (with your font settings) to that div

    1d. measure the div

    1e. remove the div

    1f. update the sprite's bounding box

2. If you are using a WebGL layer, you cannot draw text directly into it. The text needs to be in a texture in GPU memory, so

    2a. create a new texture (can't reuse the existing one as size may be different)

    2b. draw text into a canvas

    2c. draw canvas into the texture

    2d. upload texture into GPU memory

Now imagine doing that every frame and you can see why it would slow things down.

So what to do if you do need text that changes very often:

1. Tell WADE that you don't really care about the bounding box of the sprite being accurate. Just tell it that it's very big (bigger than you need) and that it is a fixed size.

textSprite.setText('0, 0');       // set some initial text
textSprite.scaleBounds(100, 1);   // use a bounding box that is 100x wider than it is now
textSprite.setFixedSize();        // do not update the bounding box when size changes

2. Put your text on a 2d canvas layer, not WebGL

 

krumza

very clear , thank you

Post a reply
Add Attachment
Submit Reply
Login to Reply