FPS Drop when drawing large amount of shapes

Programming Questions

ecluley

FPS Drop when drawing large amount of shapes

in Programming Questions • 2 years ago

I am using processing to draw terrain for a simple game. It is a hexagonal grid and I have got it to draw 2d hexagons correctly and then I setup a camera in 3d space. I am using OpenGl.

The grid draws with 30 fps quite nicely at 50 x 50 hexagons but when i up this to 100x100 it slows down greatly, to about 15-20fps.

I assume this is because I am drawing many more hexagons but some of them appear off screen.

Is there a way to calculate which hexagons will be on the screen, draw these, and those that are not going to be onscreen, it skips over?

Also, will backface cullling have any effect towards improving performance?

import processing.core.*;
import processing.opengl.*;
public class Test extends PApplet {
Hexagon gametile;
float xTrans;
float yTrans;
float mouseWheel;
float cameraHeight;
float cameraEyeX;
float cameraEyeY;
float mouseXOffset;
float mouseYOffset;
static final float MIN_CAMERA_HEIGHT = 70;
static final float MAX_CAMERA_HEIGHT = 800;
static final float MIN_X_BOUND = 30;
static final float MAX_X_BOUND = 570;
static final float MIN_Y_BOUND = 30;
static final float MAX_Y_BOUND = 570;
PFont font;
public void setup(){
size(600,600, OPENGL);
background(0);
frameRate(30);
//smooth();
font = createFont("Arial Bold",48);
cameraEyeX = mouseX;
cameraEyeY = mouseY;
mouseXOffset =0;
mouseYOffset=0;
//START: MATH FOR CALCULATING THE TESSELATION OF THE HEXAGONS
final int SIDELENGTH =10;
xTrans = (float) (SIDELENGTH * Math.sin(Math.toRadians(30)))+SIDELENGTH;
yTrans = (float) (SIDELENGTH * Math.cos(Math.toRadians(30)));
//END: MATH FOR CALCULATING THE TESSELATION OF THE HEXAGONS
cameraHeight = 120;
gametile = new Hexagon(this, 10, 10, SIDELENGTH);
setupScrollWheel();
}
private void setupScrollWheel() {
addMouseWheelListener(new java.awt.event.MouseWheelListener() {
public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) {
mouseWheelZoom(evt.getWheelRotation());
}
});
}
public void draw(){
background(0);
//FPS BEGIN
textFont(font,36);
text(frameRate,0,-50);
//FPS END
int rows = 140;
int cols = 140;
moveCamera();
fill(255);
for(int j=1; j<= rows;j++){
int flip = 1;
for(int i=1; i<= cols; i++){
gametile.drawTranslatedHex();
translate(xTrans,flip*yTrans);
if(flip == 1){
flip =-1;
}else{
flip =1;
}
}
if(cols%2 > 0){
translate(-(cols)* xTrans, yTrans);
}else{
translate(-(cols)* xTrans, 2*yTrans);
}
}
// gray int frameRate display:
//fill(200);
// text(int(frameRate),20,60);
//box(0,0,0);
}
private void moveCamera()
{
checkMousePosition();
camera((float)cameraEyeX, (float)cameraEyeY, (float)cameraHeight, (float)cameraEyeX, (float)cameraEyeY-150, (float)0.0, (float)0.0, (float)0.0, (float)-1.0);
}
private void mouseWheelZoom(int rotation) {
float ZOOM_SPEED = 1/(25/cameraHeight);
mouseWheel = rotation;
float newCameraHeight=cameraHeight + (mouseWheel*ZOOM_SPEED);
if(newCameraHeight>MIN_CAMERA_HEIGHT && newCameraHeight<MAX_CAMERA_HEIGHT){
cameraHeight = newCameraHeight;
}
mouseWheel = 0;
}
private void checkMousePosition()
{
if(mouseX > MAX_X_BOUND){
//System.out.println("mouse outside MaxXBound");
mouseXOffset+=10;
}else if(mouseX < MIN_X_BOUND){
//System.out.println("mouse outside MinXBound");
mouseXOffset-=10;
}
cameraEyeX = mouseX + mouseXOffset;
if(mouseY > MAX_Y_BOUND){
mouseYOffset+=10;
}else if(mouseY < MIN_Y_BOUND){
mouseYOffset-=10;
}
cameraEyeY = mouseY + mouseYOffset;
}
public static void main(String arg[]) {
new Test();
}
}

/**
* Hexagon class by Grant Muller
* from
* http://grantmuller.com/drawing-a-hexagon-in-processing-java/
*/
import processing.core.PApplet;
import processing.core.PGraphics;
class Hexagon {
protected PApplet parent;
protected PGraphics buffer;
protected float a;
protected float b;
protected float c;
private int startX;
private int startY;
public Hexagon(Object p, int newStartX, int newStartY, int sideLength){
if (p instanceof PGraphics)
buffer = (PGraphics) p;
if (p instanceof PApplet)
parent = (PApplet) p;
setStartX(newStartX);
setStartY(newStartY);
c = sideLength;
a = c/2;
b = parent.sin(parent.radians(60))*c;
}
public void drawTranslatedHex(){
parent.pushMatrix();
parent.translate(getStartX(), getStartY());
//draw hex shape
drawHex();
parent.popMatrix();
}
public void drawHex(){
//draw hex shape
//parent.fill(200,20,20);
//parent.strokeWeight(5);
parent.beginShape();
parent.vertex(0,b);
parent.vertex(a,0);
parent.vertex(a+c,0);
parent.vertex(2*c,b);
parent.vertex(a+c,2*b);
parent.vertex(a+c,2*b);
parent.vertex(a,2*b);
parent.vertex(0,b);
parent.endShape();
}
public void setStartX(int startX) {
this.startX = startX;
}
public int getStartX() {
return startX;
}
public void setStartY(int startY) {
this.startY = startY;
}
public int getStartY() {
return startY;
}
}

Replies(4)

calsign

Re: FPS Drop when drawing large amount of shapes

2 years ago

To get the coordinates of a 3D point as they appear on the screen, use the following functions:

screenX()
screenY()
screenZ()

I would assume that backface culling would help, but I don't do much with 3D...

ecluley

Re: Re: FPS Drop when drawing large amount of shapes

2 years ago

Thanks for the swift reply, this seams like it may work for me, however I am having a little trouble

i have

if(screenX(currentTransX,currentTransY,0)<600 && screenY(currentTransX,currentTransY,0)<600){
drawHexagon();
}

currentTransX and Y keep a track of the x and y of the current hexagon being drawn & my screen is 600 by 600.

for some reason this doesn't display hexagons within quite a bit of the edge of the screen. Ive tried upping the number but to no avail.

Am I along the correct lines?

Thanks again

Ewen

calsign

Re: FPS Drop when drawing large amount of shapes

2 years ago

It might have something to do with the fact that you're using OpenGL, I don't know...
As I said, I don't do much with 3D

The only thing that I can think of is that currentTransX and currentTransY are the center of your hexagons and therefor you need to add the width of the hexagon divided by two to the parameters for screenX and screenY (I hope that makes sense).

Give it a try...
I hope this helped

sansumbre..

Re: FPS Drop when drawing large amount of shapes

2 years ago

To really speed this up, you'll probably need to look into using a structure like a Quadtree. Doing your check on every tile will likely slow you down overall as much as it helps. Quadtrees let you check groups of tiles and dismiss large amounts of draw calls with a single check.

http://en.wikipedia.org/wiki/Quadtree

http://archive.gamedev.net/reference/programming/features/quadtrees/

Also, when you go from 50x50 to 100x100, you are quadrupling the number of shapes drawn to screen (to 10k from 2.5k). That's a big jump, and it makes sense that your application is slowing down. Consider whether you really need that much resolution for the terrain in your game. You might be able to generate upcoming terrain on the fly and discard the past terrain.

Top Reply