Jump to content

WebGL batching draw calls


mcolman
 Share

Recommended Posts

Hi, I've just done a quick experiement.

Using Phaser WebGL.

Test 1:

1. Add 2 images to the stage from the same texture.

- as expected this only incurs a single draw call. Great!

Test 2:

1. Add 1 image to the stage 

2. Add a red square using Graphics

3. Add another image to the stage using the same texture as step 1.

- this incurs 3 draw calls. 

So, the question is, would you include a flat red square into your texture to make sure your draw calls are batched? This seems a bit crazy, especially as larger textures cause slower performance.

In my experiment I also tried using a TileSprite which also stopped batching, so I'd actually have to include the entire red square into my texture.

How does three.js draw primitives so fast? 

Any help would be appreciated. 

Cheers.

Link to comment
Share on other sites

7 minutes ago, mcolman said:

So, the question is, would you include a flat red square into your texture to make sure your draw calls are batched? This seems a bit crazy, especially as larger textures cause slower performance.

You don't need a large texture for solid red rectangle, you just need 1 red pixel(+small red padding around it to avoid blending with transparency at the edges).

Link to comment
Share on other sites

36 minutes ago, mcolman said:

What about a large red circle?

According to my testing, for large objects the number of draw calls does not matter because fillrate (actually drawing the pixels) is the bottleneck, so it won't matter much whether you use texture or Graphics.

One problem with Graphics circles is that each of them has 40 vertices, so if you have a large number of small circles, it's very inefficient, especially if they are moving. Also their edges are not well-antialiased. I made a special circle shader because of that: http://pixi.netlify.com/circles/

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...