title: OpenGL/Libgdx : Square grid rendering optimization
body: <p>My game background rendering takes 1/4 of all the rendering duration I've been trying to improve it, but still I don't think it's normal that it takes so long knowing how simple it is :</p>
  
  <p>The background is a square grid (like a chessboard) where every square has its own color, which changes every frame, The squares y position changes every frame too, but not the x position</p>
  
  <p>Here is my main render function</p>
  
  <pre><code>public void main.render() {
      Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
  
      final float deltaS = Gdx.graphics.getDeltaTime();
  
      background.update(deltaS);
      updateTheGame(deltaS);
  
      background.render();
  
      spriteBatch.setProjectionMatrix(uiCamera.combined);
      spriteBatch.begin();
      renderTheGame(spriteBatch);
      spriteBatch.end();
  
  }
  </code></pre>
  
  <p>Here is the background's mesh declaration</p>
  
  <pre><code>mesh = new Mesh(true, nbVertices, nbIndices,
                  new VertexAttribute(VertexAttributes.Usage.Position, 2, ShaderProgram.POSITION_ATTRIBUTE),
                  new VertexAttribute(VertexAttributes.Usage.ColorUnpacked, 3, GL20.GL_FLOAT, false, ShaderProgram.COLOR_ATTRIBUTE));
  </code></pre>
  
  <p>Here is the background update function (Called every frame, before render())
   (This is not the one I want to optimize)</p>
  
  <pre><code>void background.update(float deltaS) {
      for (BGSquareRow row : squareRows)
          row.update(deltaS);
      setupVerticesArray();
      mesh.updateVertices(0, verticesArray);
  }
  
  
  private final Color tmpColor = new Color();
  
  private void setupVerticesArray() {
      int index = 0;
      for (BGSquareRow row : squareRows) {
          final float y0 = row.y;
          final float y1 = row.y + squareSize;
          for (int i=0; i&lt;nbSquareX; i++) {
              row.getSquareColor(i, tmpColor);
              final float x0 = squareXs[i];
              final float x1 = squareXs[i+1];
              verticesArray[index++] = x0;
              verticesArray[index++] = y0;
              verticesArray[index++] = tmpColor.r;
              verticesArray[index++] = tmpColor.g;
              verticesArray[index++] = tmpColor.b;
              verticesArray[index++] = x1;
              verticesArray[index++] = y0;
              verticesArray[index++] = tmpColor.r;
              verticesArray[index++] = tmpColor.g;
              verticesArray[index++] = tmpColor.b;
              verticesArray[index++] = x1;
              verticesArray[index++] = y1;
              verticesArray[index++] = tmpColor.r;
              verticesArray[index++] = tmpColor.g;
              verticesArray[index++] = tmpColor.b;
              verticesArray[index++] = x0;
              verticesArray[index++] = y1;
              verticesArray[index++] = tmpColor.r;
              verticesArray[index++] = tmpColor.g;
              verticesArray[index++] = tmpColor.b;
          }
      }
  }
  </code></pre>
  
  <p>Here is the background rendering function, called every frame after background.update() (This is the way too costy one)</p>
  
  <pre><code> void background.render() {
        shaderProgram.begin();
        shaderProgram.setUniformMatrix("u_projTrans", parent.uiCamera.combined);
        mesh.render(shaderProgram, GL20.GL_TRIANGLES);
        shaderProgram.end();
   }
  </code></pre>
  
  <p>I tried to put only the minimum required to understand my issue, so if I forgot something important, please tell me</p>
  
  <p>I have some ideas of optimization, but I don't know how to do it :</p>
  
  <ul>
  <li><p>Would it be possible to draw the background's mesh on the main spriteBatch? This would lead to 1 draw call in the main.render() function instead of 2 if I am right</p></li>
  <li><p>Is it possible to update only the y, red, blue and green values in the mesh vertice buffer? I found ways to update a part of the vertice buffer, but only if it's a continuous part</p></li>
  <li><p>Is there any possible optimization for the verticesArray setup?</p></li>
  </ul>
  
  <p>(I also tried to use ColorPacked for the vertice buffer, but it wasn't better)</p>