Creating a convincing good environment.

[alanz2223]

Hello I am struggling to create a nice, convincing environment for a scene. I am using the skybox method and loading JPG images for the sky as described in David's blog post. Even though tiling the sky works as a way to create the environment my game feels enclosed and not really like its open range and if you look at the sky you start to notice the artifacts. So far the skies don't even come close to that of commercial games, and I am not talking about recent games. I am talking games like the first Halo or Red Dead Redemption. Are there alternative ways to the skybox for simulating realistic skies? I am doing it wrong? perhaps I don't have the best images? if so, is there a place to obtain them? To give you an idea of what I am looking for take a look at these images.

[Flomotion]

You can look here: http://cgskies.com

the skybox should work. Maybe you need to increase the size of it?

[alanz2223]

Thanks, new site for me. What size of box do you recommend around 100? 1000?

[Dad72]

You can also create a sky with a sphere and apply a shaderMaterial that create a degradation. You can then add cloud with sprites which gives a more realistic sky and cloud with a volumetric effect.

 

var sky = BABYLON.Mesh.CreateSphere("skyBox", 12.0, 500, scene);
sky.isPickable = false;

BABYLON.Effect.ShadersStore.gradientVertexShader = "precision mediump float;attribute vec3 position;attribute vec3 normal;attribute vec2 uv;uniform mat4 worldViewProjection;varying vec4 vPosition;varying vec3 vNormal;void main(){vec4 p = vec4(position,1.);vPosition = p;vNormal = normal;gl_Position = worldViewProjection * p;}";
BABYLON.Effect.ShadersStore.gradientPixelShader = "precision mediump float;uniform mat4 worldView;varying vec4 vPosition;varying vec3 vNormal;uniform float offset;uniform vec3 topColor;uniform vec3 bottomColor;void main(void){float h = normalize(vPosition+offset).y;gl_FragColor = vec4(mix(bottomColor,topColor,max(pow(max(h,0.0),0.6),0.0)),1.0);}";

var skyGradient = new BABYLON.ShaderMaterial("gradient", scene, "gradient", {});
var colorRgbTop = new BABYLON.Color3(0, 0.51, 0.67);
var colorRgbBottom =  new BABYLON.Color3(0.70, 0.92, 1);
skyGradient.setFloat("offset", 10);
skyGradient.setColor3("topColor", colorRgbTop);
skyGradient.setColor3("bottomColor", colorRgbBottom);
skyGradient.backFaceCulling = false;

sky.material = skyGradient;

 

[OMAR]

31 minutes ago, Dad72 said:

cloud with sprites

Is it possible to create kind of moving animations for these?

[Dad72]

Yes.

[alanz2223]

@Dad72 yes something like having a gradient across a sphere will prob get rid of the artifacts on images. Do you think it has good performance though?

[Dad72]

Yes there is a good performance.