diff --git a/src/scene/shader-lib/chunks/skybox/frag/skyboxEnv.js b/src/scene/shader-lib/chunks/skybox/frag/skyboxEnv.js
index 15b4567377b..345fad63115 100644
--- a/src/scene/shader-lib/chunks/skybox/frag/skyboxEnv.js
+++ b/src/scene/shader-lib/chunks/skybox/frag/skyboxEnv.js
@@ -8,7 +8,7 @@ void main(void) {
     vec3 dir = vViewDir * vec3(-1.0, 1.0, 1.0);
     vec2 uv = toSphericalUv(normalize(dir));
 
-    vec3 linear = $DECODE(texture2D(texture_envAtlas, mapRoughnessUv(uv, mipLevel)));
+    vec3 linear = SKYBOX_DECODE_FNC(texture2D(texture_envAtlas, mapRoughnessUv(uv, mipLevel)));
 
     gl_FragColor = vec4(gammaCorrectOutput(toneMap(processEnvironment(linear))), 1.0);
 }
diff --git a/src/scene/shader-lib/chunks/skybox/frag/skyboxHDR.js b/src/scene/shader-lib/chunks/skybox/frag/skyboxHDR.js
index 13e9f9a363c..a08c59c46a6 100644
--- a/src/scene/shader-lib/chunks/skybox/frag/skyboxHDR.js
+++ b/src/scene/shader-lib/chunks/skybox/frag/skyboxHDR.js
@@ -26,7 +26,7 @@ void main(void) {
     #endif
 
     dir.x *= -1.0;
-    vec3 linear = $DECODE(textureCube(texture_cubeMap, fixSeamsStatic(dir, SKYBOX_MIP)));
+    vec3 linear = SKYBOX_DECODE_FNC(textureCube(texture_cubeMap, fixSeamsStatic(dir, SKYBOX_MIP)));
     gl_FragColor = vec4(gammaCorrectOutput(toneMap(processEnvironment(linear))), 1.0);
 }
 `;
diff --git a/src/scene/shader-lib/program-library.js b/src/scene/shader-lib/program-library.js
index 2ab260e4909..be2eca0eaf7 100644
--- a/src/scene/shader-lib/program-library.js
+++ b/src/scene/shader-lib/program-library.js
@@ -172,9 +172,7 @@ class ProgramLibrary {
                 name: `${generatedShaderDef.name}${passName}-proc`,
                 attributes: generatedShaderDef.attributes,
                 vshader: generatedShaderDef.vshader,
-                vdefines: generatedShaderDef.vdefines,
                 vincludes: generatedShaderDef.vincludes,
-                fdefines: generatedShaderDef.fdefines,
                 fincludes: generatedShaderDef.fincludes,
                 fshader: generatedShaderDef.fshader,
                 processingOptions: processingOptions,
diff --git a/src/scene/shader-lib/programs/skybox.js b/src/scene/shader-lib/programs/skybox.js
index 0fc37dcf396..fbe7141b035 100644
--- a/src/scene/shader-lib/programs/skybox.js
+++ b/src/scene/shader-lib/programs/skybox.js
@@ -6,6 +6,24 @@ import { ShaderUtils } from '../../../platform/graphics/shader-utils.js';
 import { ShaderGenerator } from './shader-generator.js';
 import { SKYTYPE_INFINITE } from '../../constants.js';
 
+const mip2size = [128, 64, /* 32 */ 16, 8, 4, 2];
+
+const fShader = `
+    #include "decodePS"
+    #include "gamma"
+    #include "tonemapping"
+    #include "envMultiplyPS"
+
+    #ifdef SKY_CUBEMAP
+        #include "cubemapSeams"
+        #include "skyboxHDRPS"
+    #else
+        #include "sphericalPS"
+        #include "envAtlasPS"
+        #include "skyboxEnvPS"
+    #endif
+`;
+
 class ShaderGeneratorSkybox extends ShaderGenerator {
     generateKey(options) {
         const sharedKey = `skybox-${options.type}-${options.encoding}-${options.gamma}-${options.toneMapping}-${options.skymesh}`;
@@ -14,33 +32,29 @@ class ShaderGeneratorSkybox extends ShaderGenerator {
 
     createShaderDefinition(device, options) {
 
-        // shared defines
+        // defines
         const defines = new Map();
+        defines.set('SKYBOX_DECODE_FNC', ChunkUtils.decodeFunc(options.encoding));
         if (options.skymesh !== SKYTYPE_INFINITE) defines.set('SKYMESH', '');
-        if (options.type === 'cubemap') defines.set('SKY_CUBEMAP', '');
-
-        // fragment shader
-        let fshader = '';
         if (options.type === 'cubemap') {
-
-            // mip level
-            const mip2size = [128, 64, /* 32 */ 16, 8, 4, 2];
+            defines.set('SKY_CUBEMAP', '');
             defines.set('SKYBOX_MIP', (1 - 1 / mip2size[options.mip]).toString());
+        }
 
-            fshader += options.mip ? shaderChunks.fixCubemapSeamsStretchPS : shaderChunks.fixCubemapSeamsNonePS;
-            fshader += shaderChunks.envMultiplyPS;
-            fshader += shaderChunks.decodePS;
-            fshader += ShaderGenerator.gammaCode(options.gamma);
-            fshader += ShaderGenerator.tonemapCode(options.toneMapping);
-            fshader += shaderChunks.skyboxHDRPS.replace(/\$DECODE/g, ChunkUtils.decodeFunc(options.encoding));
+        // includes
+        const includes = new Map();
+        includes.set('decodePS', shaderChunks.decodePS);
+        includes.set('gamma', ShaderGenerator.gammaCode(options.gamma));
+        includes.set('tonemapping', ShaderGenerator.tonemapCode(options.toneMapping));
+        includes.set('envMultiplyPS', shaderChunks.envMultiplyPS);
+
+        if (options.type === 'cubemap') {
+            includes.set('cubemapSeams', options.mip ? shaderChunks.fixCubemapSeamsStretchPS : shaderChunks.fixCubemapSeamsNonePS);
+            includes.set('skyboxHDRPS', shaderChunks.skyboxHDRPS);
         } else {
-            fshader += shaderChunks.envMultiplyPS;
-            fshader += shaderChunks.decodePS;
-            fshader += ShaderGenerator.gammaCode(options.gamma);
-            fshader += ShaderGenerator.tonemapCode(options.toneMapping);
-            fshader += shaderChunks.sphericalPS;
-            fshader += shaderChunks.envAtlasPS;
-            fshader += shaderChunks.skyboxEnvPS.replace(/\$DECODE/g, ChunkUtils.decodeFunc(options.encoding));
+            includes.set('sphericalPS', shaderChunks.sphericalPS);
+            includes.set('envAtlasPS', shaderChunks.envAtlasPS);
+            includes.set('skyboxEnvPS', shaderChunks.skyboxEnvPS);
         }
 
         return ShaderUtils.createDefinition(device, {
@@ -50,8 +64,9 @@ class ShaderGeneratorSkybox extends ShaderGenerator {
             },
             vertexCode: shaderChunks.skyboxVS,
             vertexDefines: defines,
-            fragmentCode: fshader,
-            fragmentDefines: defines
+            fragmentCode: fShader,
+            fragmentDefines: defines,
+            fragmentIncludes: includes
         });
     }
 }