Skybox

[Ats]

Hello. I want to rotate the sky while landing on planets in Omeganaut.
So I'm planning to replace the background rectangle by a skybox. But I don't know how to get rid of the visible edges and corners of the cube. Is this possible, or should I use a skysphere instead?

Here's my simple example:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" GLBase="1" CameraPosition="0 0 0" FileVersion="2">
  <OnLoaded>
    <SpawnModel Model="Model_Background" SpawnStyle="1"/>
  </OnLoaded>
  <Content>
    <Mesh Name="Mesh_Skybox">
      <Producers>
        <MeshBox Scale="10 10 10"/>
      </Producers>
    </Mesh>
    <Mesh Name="Mesh_Skysphere">
      <Producers>
        <MeshBox Scale="1 0.5 1" XCount="18" YCount="12" Grid2DOnly="255"/>
        <MeshExpression AutoNormals="0">
          <Expression>
<![CDATA[//

        float E, A, K, X, Y, Z;

        // Convert range to radians

        E = v.Y*PI; // Elevation
        A = v.X*PI; // Azimuth

        // Convert spherical coordinates into cartesian

        K = cos(E);

        X = sin(A)*K;
        Y = sin(E);
        Z = cos(A)*K;

        // Assign coordinates

        v.X = X;
        v.Y = Y;
        v.Z = Z;

        n.X = X;
        n.Y = Y;
        n.Z = Z;]]>
          </Expression>
        </MeshExpression>
        <MeshTransform Scale="10 10 10"/>
      </Producers>
    </Mesh>
    <Model Name="Model_Background" Comment="Sky, stars and space clouds" Rotation="33.7335 31.8522 0" RotationVelocity="0.02 0.02 0">
      <OnRender>
        <UseMaterial Material="Material_Clouds"/>
        <RenderMesh Mesh="Mesh_Skybox"/>
      </OnRender>
    </Model>
    <Material Name="Material_Clouds" Shading="1" Light="0" ZBuffer="0" DrawBackFace="255" Shader="TextureShader">
      <Textures>
        <MaterialTexture Texture="Bitmap_Clouds"/>
      </Textures>
    </Material>
    <Bitmap Name="Bitmap_Clouds" Height="32">
      <Producers>
        <BitmapNoise Name="BackgroundNoise" Offset="0.1159" Persistence="0.2" ZHeight="165.4777" Tile="255"/>
      </Producers>
    </Bitmap>
    <Shader Name="TextureShader">
      <VertexShaderSource>
<![CDATA[//
#ifdef GL_ES
  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
#endif

uniform mat4 modelViewProjectionMatrix;
attribute vec4 position; // vertex position
attribute vec2 texCoord; // texture coordinates
varying vec2 t;

void main()
{
  gl_Position = modelViewProjectionMatrix * position;
  t = texCoord;
}]]>
      </VertexShaderSource>
      <FragmentShaderSource>
<![CDATA[//
#ifdef GL_ES
  precision mediump float;
#endif

uniform sampler2D tex1;
varying vec2 t;

void main()
{
  gl_FragColor = vec4(texture2D(tex1, t).rgb, 1.0);
}]]>
      </FragmentShaderSource>
    </Shader>
  </Content>
</ZApplication>

[Kjell]

Hi Ats,

So I'm planning to replace the background rectangle by a skybox. But I don't know how to get rid of the visible edges and corners of the cube. Is this possible, or should I use a skysphere instead?

If you want to use a skybox .. you need a texture that has been projected onto a box. Similarly, if you want to use a skysphere .. you need a texture that has been projected onto a sphere. You can't just use a regular "flat" texture.

Anyway, attached is a simple example of a skybox in ZGE.

K

[Ats]

All right, I get it
But the problem is that I'm taking advantage of ZGE BitmapNoise to make a moving background.
I'm trying with a SkyCylinder, that only rotates on its X axis. It should work, but the cylinder mesh ZGE Library.xml is made out of a sphere, without texture coordinates. So I made one in Sketchup. It works, but there is still one edge visible.

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" GLBase="1" CameraPosition="0 0 0" FileVersion="2">
  <OnLoaded>
    <SpawnModel Model="Model_Background" SpawnStyle="1"/>
  </OnLoaded>
  <Content>
    <Mesh Name="Mesh_SkyCylinder">
      <Producers>
        <MeshImport HasTextureCoords="1">
          <MeshData>
<![CDATA[789CAD924F6AC25018C4C7FCA1E02E37781BDD15AC17688E20B8363D8928B949DC7451046FF00E515A4836B9410E60D0E9372FB5D276518406260CF326BFEF7B90398019C2E3AFDA3E5ED416E4AEE70620DB0290A73DC8C9BA430ED4DD7A4296CD7A0294CD34B3A69F6656F1AB0470D52A215DA50103851BE56DA1BC2DD447AE3E7211D613D1CC19DFCE8C3FCDB4C32AD174FB726B4D5B4C3C572917DB585E7D7AF5CB4684B211CD76347EDD89BFEB35D76E4011450937D92A77957257A94FAF3EBD0865239AC9EBBEE2D79DE6EE7ACDBDBE95002344267284D85C843323F44C2CBB0BE989B18D8D431E2109DDA11DDFECF1C93F077EF2C51F21BDC16BE33490CE1465D8E91466A437F828307FEFF36EC91BEFF1CA195EC6FBE332DD1F9FC7C032FD7F3DD85FE19F160E38B4C0C21DDAC10FEEBB2EE73FF5575FE71FFF963149]]>
          </MeshData>
        </MeshImport>
        <MeshTransform Rotation="0 0 0.25"/>
      </Producers>
    </Mesh>
    <Model Name="Model_Background" Comment="Sky, stars and space clouds" Rotation="2.6561 0 0" RotationVelocity="0.04 0 0">
      <OnUpdate>
        <ZExpression>
          <Expression>
<![CDATA[BackgroundNoise.ZHeight += 0.001;
@RefreshContent(Component: BackgroundNoise);]]>
          </Expression>
        </ZExpression>
      </OnUpdate>
      <OnRender>
        <UseMaterial Material="Material_Clouds"/>
        <RenderMesh Mesh="Mesh_SkyCylinder"/>
      </OnRender>
    </Model>
    <Material Name="Material_Clouds" Light="0" ZBuffer="0" Shader="TextureShader">
      <Textures>
        <MaterialTexture Texture="Bitmap_Clouds" TextureWrapMode="1"/>
      </Textures>
    </Material>
    <Bitmap Name="Bitmap_Clouds">
      <Producers>
        <BitmapNoise Name="BackgroundNoise" Offset="0.1159" Persistence="0.2" ZHeight="780.6432" Tile="255"/>
      </Producers>
    </Bitmap>
    <Shader Name="TextureShader">
      <VertexShaderSource>
<![CDATA[//
#ifdef GL_ES
  #ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
  #else
    precision mediump float;
  #endif
#endif

uniform mat4 modelViewProjectionMatrix;
attribute vec4 position; // vertex position
attribute vec2 texCoord; // texture coordinates
varying vec2 t;

void main()
{
  gl_Position = modelViewProjectionMatrix * position;
  t = texCoord;
}]]>
      </VertexShaderSource>
      <FragmentShaderSource>
<![CDATA[//
#ifdef GL_ES
  precision mediump float;
#endif

uniform sampler2D tex1;
varying vec2 t;

void main()
{
  //gl_FragColor = vec4(texture2D(tex1, t).rgb, 1.0);

  vec2 repeatedCoords = t * 4.0; // Repeat the texture at least 4 times
  repeatedCoords = fract(repeatedCoords); // Take the fractional part to wrap the texture

  gl_FragColor = vec4(texture2D(tex1, repeatedCoords).rgb, 1.0);
}]]>
      </FragmentShaderSource>
    </Shader>
  </Content>
</ZApplication>

So I was thinking of going back to a simple rectangle for the background, and using ZGE MaterialTexture's TextureX and TextureY to make it move like I do with the cylinder. I need to see how to handle that with the shader.

Also, from the sound of my computer fan, updating the 64x64 texture each and every frame seems pretty heavy to process...?
So instead of using and updating ZGE BitmapNoise, I should use the shader to create the clouds. I'll have to search a bit, as Unity seems to have monopolized all shader related results on Google

[Kjell]

Hi Ats,

I'm trying with a SkyCylinder, that only rotates on its X axis. It should work, but the cylinder mesh ZGE Library.xml is made out of a sphere, without texture coordinates.

For your purpose you want to generate a cylinder from a 2D-grid. The normals aren't necessary ( for sky-cylinder use ) .. but in case you would need them, it's this easy:

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="ZGameEditor application" FileVersion="2">
  <OnLoaded>
    <SpawnModel Model="Demo"/>
  </OnLoaded>
  <Content>
    <Mesh Name="CylinderMesh">
      <Producers>
        <MeshBox XCount="15" Grid2DOnly="255"/>
        <MeshExpression AutoNormals="0">
          <Expression>
<![CDATA[//

float a = V.X*PI;

N.X = -sin(a);
N.Y = 0;
N.Z = cos(a);

V.X = -N.X;
V.Z = -N.Z;]]>
          </Expression>
        </MeshExpression>
      </Producers>
    </Mesh>
    <Model Name="Demo" RotationVelocity="0.07 0 0.03">
      <OnRender>
        <UseMaterial Material="DemoMaterial"/>
        <RenderMesh Mesh="CylinderMesh"/>
      </OnRender>
    </Model>
    <Bitmap Name="DemoBitmap" Width="128" Height="32" Filter="1">
      <Producers>
        <BitmapCells BorderPixels="0"/>
      </Producers>
    </Bitmap>
    <Material Name="DemoMaterial" Shading="1" DrawBackFace="255">
      <Textures>
        <MaterialTexture Texture="DemoBitmap" TexCoords="1"/>
      </Textures>
    </Material>
  </Content>
</ZApplication>

So I made one in Sketchup. It works, but there is still one edge visible.

You mean this edge?



That doesn't really matter since you want to disable lights for your sky-object anyway, at which point you don't see it anymore.

Also, from the sound of my computer fan, updating the 64x64 texture each and every frame seems pretty heavy to process...?

Yeah, refreshing a bitmap each frame is generally not recommended unless you absolutely have to.

So instead of using and updating ZGE BitmapNoise, I should use the shader to create the clouds.

Do you want / need your clouds to animate over time? Not just scrolling?

I'll have to search a bit, as Unity seems to have monopolized all shader related results on Google

It's not that difficult to convert HLSL into GLSL.

K

[Ats]

Oh right, I had to start from a 2D rectangle to make the cylinder!!! That's why the one I was trying to make would look like an old pillow. Thanks

Do you want / need your clouds to animate over time? Not just scrolling?

Yes. But the clouds are only animated during the stage transitions. It changes shape and colors.

skyclouds.gif (3.76 MiB) Viewed 21078 times

Right now, I'm rendering the clouds, and then the stars. So it's not regenerating the stars each time I update the clouds. Then there is the sky gradient if we are on a planet. It may be not optimized at all, but I'm pretty happy with the result.

Code: Select all

// Space Clouds
@UseMaterial(Material:CloudsMaterial);
@RenderMesh(Mesh:Mesh_Background);

// Stars
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE);
@UseMaterial(Material:StarsMaterial);
@RenderMesh(Mesh:Mesh_Background);

// Sky gradient
if (onPlanet)
{
  glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
  @UseMaterial(Material:SkyMaterial);
  @RenderMesh(Mesh:Mesh_Background);
}

glDisable(GL_BLEND);

// Clear the depth buffer after rendering the background so thing can appear over it
glClear(GL_DEPTH_BUFFER_BIT);