# Set gradient background in a 3d sketch

**URL:** <https://discourse.processing.org/t/set-gradient-background-in-a-3d-sketch/34889>\
**Category:** Coding Questions\
**Created:** [January 29, 2022, 7:06pm UTC](https://discourse.processing.org/t/set-gradient-background-in-a-3d-sketch/34889 "2022-01-29T19:06:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [January 29, 2022, 7:06pm UTC](https://discourse.processing.org/t/set-gradient-background-in-a-3d-sketch/34889/1 "2022-01-29T19:06:25Z")

</div>

Hello everyone,  
I am trying to make a 3d game in processing, but I want to set a gradient as a background. In order to do this, I made a function that creates a linear gradient and just draws it onto the screen in 2d before rendering the 3d geometry. However, despite drawing the gradient before rendering the geometry, it covers up all of the 3d geometry, making the screen a blank gradient.

```auto
public void gradient(int col1, int col2) {
	pushStyle();
	for(int y = 0; y < height; y++) {
		int curColor = lerpColor(col1, col2, map(y, 0, height, 0, 1));
		stroke(curColor);
		line(0, y, width, y);
	}
	popStyle();
}
public void draw() {
	if(isLoaded) {
		pushMatrix();
		resetMatrix();
		ortho();
		translate(-width/2, -height/2);
		gradient(sky.dayColor, sky.sunsetColor);
		popMatrix();
  noCursor();
  pgl = (PJOGL) beginPGL();
  pgl.frontFace(PGL.CCW);
  perspective(radians(90), (float)width/(float)height, 0.01f, 1000000f);
  pgl.enable(PGL.CULL_FACE);
	  for(int i = 0; i < wid; i++) {
		  for(int j = 0; j < len; j++) {
			  chunks.get(new PVector(i, 0, j)).render(this);
		  }
	  }
	  for(int i = 0; i < wid; i++) {
		  for(int j = 0; j < len; j++) {
			  chunks.get(new PVector(i, 0, j)).render2(this);
		  }
	  }
  pgl.disable(PGL.CULL_FACE);
endPGL();
  }
}

```

I tried using PGraphics and also setting it as the background via the background() function, but this didn’t work. The only solution that worked for me was drawing to a pgraphics variable and then using get() to save the image, then set that as the background, but this cuts my FPS from a stable 60 FPS to 5-11.

---

<div class="post-metadata">

**Author:** ![SNICKRS](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@SNICKRS](https://discourse.processing.org/u/SNICKRS)\
**Post date:** [January 29, 2022, 11:53pm UTC](https://discourse.processing.org/t/set-gradient-background-in-a-3d-sketch/34889/2 "2022-01-29T23:53:45Z")

</div>

It turns out that all I had to do was add a parameter specifying which PGraphics object to draw to and render that before the 2d geometry. Making another pgraphics object to render to doesn’t work, but it you use getGraphics() to draw to, then it works.