Which has better performance between Canvas and WebGL?

Which has better performance between Canvas and WebGL?
0.0 0
#1

I wonder that which has better performance between Canvas and WebGL.
I tried some researches but can’t find answer, so asking help here.

  • Using Cocos Creator 1.70
  • 2D Action RPG type game. Want to have high frame rate.
  • HTML5 based mobile game, will published through Facebook instant messenger browser (Instant game)
  • Texture size will around 1024x1024 x 3. A lot of 32x32 size pixel art style sprite animations.
  • Using own collision system and character moving system. (not using physics and etc)

I thought WebGL is faster, but Canvas is faster (higher frame rate) on my development environment, even there is more draw call than WebGL.
(MacBook Pro 2013, 2.4 GHz Intel Core i5, High Sierra 10.13.2, Google Chrome 63.0.3239.84)

Please share me any suggestion, information or web link, to understand which is faster. I want to understand the reason, so that I can care about coding approach.
Thanks.

-Hiroki

#2

emmm,I have the same question,so I try to find out if there anyone else have tried to solve this problem.
Maybe,it is because your game are in 2D,so it doesn’t fit WebGL cause WebGL are used for Render 3D graphics.
Three.js are created for use webGL more easier. There are 3 different type of renderer: CSS,Canvas and WebGL.
Canvas Renderer and WebGL Renderer were both use canvas element. but canvas for 2D and WebGL for 3D.
there are two different example that can show the different between Canvas renderer and WebGL renderer:
https://threejs.org/examples/?q=bird#webgl_gpgpu_birds
https://threejs.org/examples/?q=bird#canvas_geometry_birds
i cant tell any difference between them while there are only 200 birds on screen. the FPS is around 60,
i tried to change the number of birds.the difference between them appeared,
512birds
Canvas Renderer FPS :31-44;
WebGL Renderer FPS:58-60;
1024 birds
Canvas Renderer FPS:10-13;
WebGL Renderer FPS:59-60;
when birds are more than 1024,Canvas Renderer ccccrashed I think ,oh my eyes(XAX) I feel a little bit dizzy;
but WebGL Renderer work fine;
4096 birds
WebGL Renderer FPS:60(stable)
16384birds
WebGL Renderer FPS:35-52(at around 48) emm it’s just fine.
65536birds
WebGL Renderer FPS:0-4(cant hold it)
device: i5-4590 750Ti windows

maybe the device difference is a important reason.i don’t know ,why dont u try to build ur game in different device/plateform
im sure in 3D game building WebGL is much better(technically).
BTW sorry for my poooooor English hahaha hope u dont have any trouble reading MY English.oh and i Love game in pixel style too.
oh and i love ur name too pa pi pu pa pi pi pu pi pa pa pu pi
is that a game studio’s name ?seems great

#3

Its a freaking tongue twister you got there lol

#4

WebGL is faster. I suggest you use texture packer or something similar to reduce draw calls. something between 10 and 20 draw calls should be ok.

I did experience some performance hit when using many animations (using the build in CC timeline). Can you try to disable those and see what the performance looks like?

#5

WebGL will perform faster unless you are using DOM Text instead of BitmapFont text but Cocos Creator automatically bitmaps all fonts so I’m not sure that applies here.

Canvas2D was the first web api iteration on having an ‘intractable surface’ and WebGL came after so it’s safe to say WebGL does things better as well as more things in general like shading/blending.

#6

WebGL is a lot faster than Canvas because it uses hardware designed specifically for rendering (your GPU). If it is slower on your system make sure “hardware acceleration” or something like that is enabled in your browser

#7

In version 1.7.2, Canvas is sometimes faster than webGL. (on web browser)

#8

Thank you everyone for responding me.
Actually, canvas seems faster than WebGL at my environment, since Canvas is also hardware accelerated.
(I checked with typing “chrome://gpu/” on my Chrome, and see “Canvas: Hardware accelerated”)
But it will depend on devices and browser. I’ll check with actual build and device at before launch.

Yes, PaPiPuGames is my studio name. I’m happy that some people likes the name :slight_smile: