Revision control
Copy as Markdown
{
"QEN": {
"description": "Draws animated sky by rendering tiled clouds texture with a perspective",
"fragmentCode": [
"@main",
"{",
" vec4 texclouds = texture(cloudsTexture, fract(tc));",
" texclouds.r = smoothstep(thresholds.s, thresholds.t, texclouds.r) * cloudsBrightness;",
" texclouds = mix(cloudsSkyColor, cloudsColor, texclouds.r);",
" texclouds = mix(cloudsHorizonColor, texclouds, glowFactor);",
"",
" fragColor = texclouds;",
"}"
],
"name": "Clouds",
"properties": [
{
"defaultValue": "../images/clouds.png",
"description": "Repeating couds texture. The default image is 512x512 pixels and created using the GIMP tool by the following steps:\n1. Filters -> Render -> Noise -> Difference Clouds\n2. Filters -> Map -> Tile Seamless\n\nThe effect only uses the r channel of the texture.",
"name": "cloudsTexture",
"type": "image"
},
{
"defaultValue": "0.8",
"description": "This property defines the perspective for the clouds which makes the horizon appear further away. ",
"maxValue": "1",
"minValue": "0",
"name": "cloudsPerspective",
"type": "float"
},
{
"defaultValue": "1",
"description": "Amount of texture scale horizontally.",
"maxValue": "3",
"minValue": "0",
"name": "cloudsXScale",
"type": "float"
},
{
"defaultValue": "1",
"description": "Amount of texture scale vertically.",
"maxValue": "3",
"minValue": "0",
"name": "cloudsYScale",
"type": "float"
},
{
"defaultValue": "1, 0.4, 0.2, 1",
"description": "Color fading used in clouds horizon.",
"name": "cloudsHorizonColor",
"type": "color"
},
{
"defaultValue": "0.5",
"description": "The size of cloud horizon glow.",
"maxValue": "1",
"minValue": "0",
"name": "cloudsHorizonGlowSize",
"type": "float"
},
{
"defaultValue": "1, 1, 1, 1",
"description": "The color for clouds.",
"name": "cloudsColor",
"type": "color"
},
{
"defaultValue": "0.2, 0.4, 0.8, 1",
"description": "The base color of sky behind the clouds.",
"name": "cloudsSkyColor",
"type": "color"
},
{
"defaultValue": "0.5",
"description": "This property adjusts the thickness/amount of the clouds",
"maxValue": "1",
"minValue": "0",
"name": "cloudsThickness",
"type": "float"
},
{
"defaultValue": "1",
"description": "This property adjusts the brightness of the clouds",
"maxValue": "3",
"minValue": "0",
"name": "cloudsBrightness",
"type": "float"
},
{
"defaultValue": "0.2",
"description": "This property defines how sharp or smooth the edges of the clouds are.",
"maxValue": "1",
"minValue": "0",
"name": "cloudsSharpness",
"type": "float"
},
{
"defaultValue": "0",
"description": "This property affects the angle of the movement of the clouds if iTime is animated. This is a helper property that results in correctly calculated cloudsXSpeed and cloudsYSpeed values. The angle is in degrees and 0 is vertically aligned movement from bottom to top.",
"maxValue": "360",
"minValue": "0",
"name": "cloudsMovementAngle",
"type": "float"
},
{
"defaultValue": "0.2",
"maxValue": "1",
"minValue": "0",
"name": "cloudsSpeed",
"type": "float"
},
{
"customValue": "Math.sin(cloudsMovementAngle / 180 * Math.PI) * cloudsSpeed",
"defaultValue": "0",
"maxValue": "1",
"minValue": "0",
"name": "cloudsXSpeed",
"type": "float",
"useCustomValue": true
},
{
"customValue": "Math.cos(cloudsMovementAngle / 180 * Math.PI) * cloudsSpeed",
"defaultValue": "0",
"maxValue": "1",
"minValue": "0",
"name": "cloudsYSpeed",
"type": "float",
"useCustomValue": true
}
],
"version": 1,
"vertexCode": [
"@mesh 20,20",
"",
"out float glowFactor;",
"out float z;",
"out vec2 tc;",
"out vec2 thresholds;",
"",
"@main",
"{",
" const float invY = 1. - texCoord.y;",
" z = 1. / (1. - cloudsPerspective + cloudsPerspective * invY);",
"",
" tc = texCoord;",
"",
" tc.x -= 0.5;",
" tc.x *= z * cloudsXScale;",
" tc.y -= 0.5;",
" tc.y *= z * cloudsYScale;",
"",
" tc.x += iTime * cloudsXSpeed;",
" tc.y += iTime * cloudsYSpeed;",
"",
" thresholds.s = 1. - cloudsThickness;",
" const float d = (1. - thresholds.s) * (5. - 5 * cloudsSharpness);",
" thresholds.s -= cloudsThickness * d;",
" thresholds.t = thresholds.s + d;",
"",
" glowFactor = min(1., invY+ 1. - cloudsHorizonGlowSize);",
"}"
]
}
}