Jump to content

Creating a convincing good environment.


Recommended Posts

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.

Link to comment
Share on other sites

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;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...