I can't replicate this with Firefox on Windows using the Terrain demo. Does it only happen on a particular platform or browser?
The sky box itself is a careful mix of an inverted sphere, a gradient texture, a shader, and some unusual setup parameters, but in theory you could replicate it using standard AppGameKit commands. The shader is as follows.
Vertex Shader
attribute vec3 position;
varying highp vec2 uvVarying;
varying highp vec2 uvVarying2;
varying highp vec2 horizonVarying;
uniform highp mat4 agk_World;
uniform highp mat4 agk_ViewProj;
uniform highp vec2 sunSize; // default = vec2( 20.0, 2.0 )
uniform highp float horizonHeight; // default = 0
uniform highp float objectScale; // default = 1.0 / ( CameraFarRange * -1.9 )
void main()
{
highp vec4 pos = agk_World * vec4(position,1);
gl_Position = agk_ViewProj * pos;
horizonVarying.x = (pos.y-horizonHeight)*objectScale;
horizonVarying.y = step(position.y,0.0);
uvVarying = position.xz*sunSize.x + 0.5;
uvVarying2 = position.xz*sunSize.y + 0.5;
}
Pixel Shader
uniform sampler2D texture0;
uniform mediump vec3 skyColor; // default = vec3( 0.63, 0.72, 0.82 )
uniform mediump vec3 horizonColor; // default = vec3( 1.0, 1.0, 1.0 )
uniform mediump vec3 sunColor; // default= vec3( 1.0, 0.9, 0.7 )
uniform highp float horizonSize; // default = -6.0
varying highp vec2 uvVarying;
varying highp vec2 uvVarying2;
varying highp vec2 horizonVarying;
void main()
{
highp float horizon = 1.0 - min( horizonSize*horizonVarying.x, 1.0 );
horizon *= horizon;
mediump vec3 color = mix( skyColor, horizonColor, horizon );
mediump vec3 sunColor2 = sunColor*1.5 - color;
sunColor2 *= horizonVarying.y;
highp float sunPoint = texture2D(texture0,uvVarying).r;
color += sunColor2 * sunPoint*sunPoint;
sunPoint = texture2D(texture0,uvVarying2).r;
color += 0.2 * sunColor2 * sunPoint;
gl_FragColor = vec4(color,1.0);
}
The sphere object is setup as follows
scale# = CameraFarRange# * -1.9
CreateObjectSphere( objID, 1, 50, 50 )
SetObjectScale( objID, scale#, scale#, scale# )
SetObjectLightMode( objID, 0 )
SetObjectCollisionMode( objID, 0 )
SetObjectImage( objID, g_pGradientImage, 0 )
SetObjectScreenCulling( objID, 0 )
SetObjectDepthReadMode( objID, 2 ) // depth equal, will only draw where the depth buffer equals object depth
SetObjectDepthWrite( objID, 0 )
SetObjectDepthRange( objID, 1, 1 ) // object depth always equal to 1, so will only draw where the depth buffer equals 1
The texture is generated at runtime and is just a 256x256 image which is bright in the middle and fades towards the edges, the exact code is in C++ but it might help
for( int y = 0; y < 256; y++ )
{
for( int x = 0; x < 256; x++ )
{
float diffX = x - 127.0f;
float diffY = y - 127.0f;
float dist = agk::Sqrt( diffX*diffX + diffY*diffY );
dist *= 2.0078125f;
if ( dist > 255 ) dist = 255;
int color = 255 - agk::Round(dist);
int index = y*256 + x;
data[ index*4 + 0 ] = color;
data[ index*4 + 1 ] = color;
data[ index*4 + 2 ] = color;
data[ index*4 + 3 ] = color;
}
}
The object is rotated to place the sun at a certain position, and positioned on the camera position every frame.
The most likely cause for it to fail would be the SetObjectDepthReadMode( objID, 2 ) command, since if the depth buffer value doesn't match exactly with the object depth then it won't draw.