Background Layer Gradients without using the image method

Questions
1

Is there a way to set the background layer to a gradient material?

Only way I was able to get a background gradient of any type was the image method found here:
https://www.babylonjs-playground.com/#27QHMX#1

I rather avoid the need to create gradient images and would love the flexibility a procedural option would offer, if anyone done that already.

2

Here is a lean way to create a background from custom shaders:

https://www.babylonjs-playground.com/#J3FUED#8

3

I can’t actually grasp what I am looking at here? The background seems to be the exact same background as elsewhere?

4

Here you are, the api changed a bit during preview: https://www.babylonjs-playground.com/#J3FUED#9

2 Likes
5

Thanks, the pg works great now!

using render targets in this way, what’d the perfomance impact be in your estimate? In three, we’d draw a screen quad behind the scene, basically. Impact next to none.

6

Also, I get a WebGL error:

[.WebGL-000001A9ABF17630] GL_INVALID_OPERATION: Must have element array buffer bound.

When using the simplest fragmentShader

void main(void) {
  gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);  
}
7

About perf it has no additional cost as we render the background texture only once and then it will only be one draw at the begining of each frame to blit it full screen.

The warning might come from the fact the varying are not aligned with the default vertex shader you could override.

1 Like
8

The warning might come from the fact the varying are not aligned with the default vertex shader you could override.

I am sorry I don’t understand what that means :slight_smile: I haven’t included any custom vertexShader or anything for now, just attempted a straight port.

Since the fixed PG you linked to doesn’t work in 4.1 if I step down versions, I’ll assume this won’t work below the later beta versions? We are running on 4.1

(the old PG doesn’t work in 4.1. either using old API, haha)

9

I am not able to repro your error on:

https://www.babylonjs-playground.com/#J3FUED#10

I am not seeing any warnings :frowning:

1 Like
10

Yeah, we’re on 4.1 unfortunately. Seems to be an in-between version, as the OLD playground’s code using onCompileObservable doesn’t work, and neither does the new executeWhenCompiled, haha (if you step down to 4.1 in https://www.babylonjs-playground.com/#J3FUED#10 it won’t either)

Thank you for the patience though!

11

No problem, the best way to “solve it” is definitely using our beta :slight_smile:

1 Like