WebGL experiment onto JavaScript STG

Introduction

Lately, I've studied WebGL to get used to GPU. I think I understand the basic knowledge, so I began to try to adopt it into the STG which I've been developing.

I've had the problem in the STGthat the canvas drawing leads the slowness, and it limits the the potential(e.g. the number of shots). I hope WebGL solves this problem.

Screenshot

I adopted WebGL to draw the background so far, since it's the heaviest in the STG.

Not sure well why, but the desktop capture soft I use makes the game very slow. So I put the pic here instead of a video. *SOB*

You see it reaches 60 fps even the background draws the heavy 3D graphics. (You can't see in the pic, but the background rotates and scales up/down.)

Of course, the current background is just temporal to know how WebGL works well. I'm going to replace it to the beautiful one.

Idea

I have two layers, one is main layer and the other one is background layer. The trick is to overlay the two layers.

The main layer consists of the all game related entities, like fighter, shots, enemies, and so on except for the background, while the background draws only background.

What I did is, I put main layer in HTML.

<div id="canvasdiv" style="position:relative; width:640px; height:480px">
<canvas id="mainCanvas" width="640" height="480"
 style="z-index: 2; position:absolute;left0px;top0px;"/>
</div>

Then, create the background layer in the game code and put it under the main layer.

  // Currently I use THREE as WebGL library.
  var renderer = new THREE.WebGLRenderer( ) ;
  var div = document.getElementById( 'canvasdiv' ) ;
  var element = renderer.domElement ;
  element.style.zIndex = 1 ;
  element.style.position = 'absolute' ;
  element.style.top = '0px' ;
  element.style.left = '0px' ;
  div.appendChild( element ) ;

Secret talk

To tell you the truth, I tried this idea months ago. But at that time I forgot to turn hardware acceleration on and I wrongly understood WebGL was slow! (When it turned off, software draws.)

Conclusion

I got the good performance to draw the heavy background. Since It broke the limit of drawing potential, finally I can increase the shots in a screen. (You like much many shots in a screen, right?)

I wonder if I should use WebGL to draw all entities. I wanna do it, but it requires not small changes, Hm....