How do I change the ground color of SkyMaterial

Questions
,
1

I’m using SkyMaterial for my skybox and environment lighting and I wanted to know how to change the ground color to a darker color.

ground-too-bright
ground-too-bright1342×872 45.4 KB

As you can see, the environment light looks brighter at the bottom of the car compared to the top. I’m guessing I have to modify the fragment shader, but I’m not sure what to change.

Thanks in advance :slight_smile:

3

Welcome aboard!

I’m not sure to understand what you mean by the ground color of the sky material? You can change the appearance of the sky material by modifying the different parameters of the material. This page can help you in this regard:

1 Like
4

I really liked your ground material, it looks like Unity’s default ground. Could you share a playground that has the same ground please?

5

I mean the color of the bottom part of the sky, during “daytime” it’s white while the top part is blue.

6

Do you mean the ground texture? I made that using Prototype Textures · Kenney, here’s the GLB. If you mean the whole setup, I can make a playground of that a bit later.

7

Yes, playground would be nice!

8

I think you will have to test different value for the sky material properties (see the doc page I linked) to try to find the ones that suit you the best.

9

I did try that, so unless I missed something, I don’t think that’s possible.

But I think I figured it out (will mark as solution when I test later). I’ll add another skybox with a dark color and a transparent top to get something like this.

image
image1553×832 47.4 KB

10

If you’re using the default skybox:

      let envColor = BABYLON.Color3.FromHexString([YOURHEX);
      //get BackgroundPlaneMaterial
      let backgroundPlaneMaterial = this.scene.getMaterialByName('BackgroundPlaneMaterial');
      //set BackgroundPlaneMaterial to color
      backgroundPlaneMaterial.primaryColor = envColor;
      //set BackgroundPlaneMaterial to 100% alpha
      backgroundPlaneMaterial.alpha = 1;

Here’s my usual constructor:

  StartBabylon.prototype.initSkybox = function (){
    this.mainColorboxHelper = this.scene.createDefaultEnvironment({
      enableGroundShadow: true,
      groundSize: 100,
      createSkybox: true
    });   
    this.mainColorboxHelper.setMainColor(BABYLON.Color3.White());
    
    let groundplane = this.mainColorboxHelper.ground;
    groundplane.isPickable = false; //otherwise objects get stuck under it
    groundplane.position.y = -.01;

    let skybox = this.mainColorboxHelper.skybox;
    skybox.scaling = new BABYLON.Vector3(20, 20, 20); //make it bigger so not clipping the ground
    skybox.isPickable = false;
    //set scaling of BackgroundPlane 
    let backgroundPlane = this.scene.getMeshByName('BackgroundPlane');
    backgroundPlane.scaling = new BABYLON.Vector3(3.2, 3.2, 3.2);
  }

Although maybe not relevant to SkyMaterial perse.

1 Like
11

image
image1633×792 48.3 KB

Here’s the playground (it’s a little post-process heavy and I couldn’t get the “groundbox” visible directly). The stuff relevant to this question is in the function setupSkybox. Control the sun’s position using 1 and 2.

2021 BMW M4 Competition by Ricy is licensed under Creative Commons Attribution.

2 Likes
12

@Evgeni_Popov is there something wrong with the camera navigation keys (Arrow Up/down etc.) camera goes under the ground and can’t move it…

13

cc @fazil47, as it is his PG. Maybe collisions have not been setup correctly?

14

I had that problem in my local setup, had to downgrade to 6.11 to fix it.

15

There’s a problem with some late changes regarding the free camera, we are going to fix that asap!

16

problem has been fixed on Friday :slight_smile: