Shader Refactoring (#24805)

* Refactoring

* Introduce backgroundCube shader

* Update cube shader uniforms

* More decoupling

* Remove opacity uniform

examples/jsm/postprocessing/CubeTexturePass.js

@@ -12,7 +12,7 @@ import { Pass } from './Pass.js';
 
 class CubeTexturePass extends Pass {
 
-	constructor( camera, envMap, opacity = 1 ) {
+	constructor( camera, tCube, opacity = 1 ) {
 
 		super();
 
@@ -37,13 +37,13 @@ class CubeTexturePass extends Pass {
 
 			get: function () {
 
-				return this.uniforms.envMap.value;
+				return this.uniforms.tCube.value;
 
 			}
 
 		} );
 
-		this.envMap = envMap;
+		this.tCube = tCube;
 		this.opacity = opacity;
 
 		this.cubeScene = new Scene();
@@ -60,8 +60,8 @@ class CubeTexturePass extends Pass {
 		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
 		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
 
-		this.cubeMesh.material.uniforms.envMap.value = this.envMap;
-		this.cubeMesh.material.uniforms.flipEnvMap.value = ( this.envMap.isCubeTexture && this.envMap.isRenderTargetTexture === false ) ? - 1 : 1;
+		this.cubeMesh.material.uniforms.tCube.value = this.tCube;
+		this.cubeMesh.material.uniforms.tFlip.value = ( this.tCube.isCubeTexture && this.tCube.isRenderTargetTexture === false ) ? - 1 : 1;
 		this.cubeMesh.material.uniforms.opacity.value = this.opacity;
 		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
 

src/renderers/shaders/ShaderChunk.js

@@ -106,6 +106,7 @@ import uv2_vertex from './ShaderChunk/uv2_vertex.glsl.js';
 import worldpos_vertex from './ShaderChunk/worldpos_vertex.glsl.js';
 
 import * as background from './ShaderLib/background.glsl.js';
+import * as backgroundCube from './ShaderLib/backgroundCube.glsl.js';
 import * as cube from './ShaderLib/cube.glsl.js';
 import * as depth from './ShaderLib/depth.glsl.js';
 import * as distanceRGBA from './ShaderLib/distanceRGBA.glsl.js';
@@ -232,6 +233,8 @@ export const ShaderChunk = {
 
 	background_vert: background.vertex,
 	background_frag: background.fragment,
+	backgroundCube_vert: backgroundCube.vertex,
+	backgroundCube_frag: backgroundCube.fragment,
 	cube_vert: cube.vertex,
 	cube_frag: cube.fragment,
 	depth_vert: depth.vertex,

src/renderers/shaders/ShaderChunk/envmap_common_pars_fragment.glsl.js

@@ -1,7 +1,6 @@
 export default /* glsl */`
 #ifdef USE_ENVMAP
 
-	uniform float backgroundBlurriness;
 	uniform float envMapIntensity;
 	uniform float flipEnvMap;
 

src/renderers/shaders/ShaderChunk/envmap_fragment.glsl.js

@@ -38,10 +38,6 @@ export default /* glsl */`
 
 		vec4 envColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) );
 
-	#elif defined( ENVMAP_TYPE_CUBE_UV )
-
-		vec4 envColor = textureCubeUV( envMap, reflectVec, backgroundBlurriness );
-
 	#else
 
 		vec4 envColor = vec4( 0.0 );

src/renderers/shaders/ShaderLib.js

@@ -225,14 +225,26 @@ const ShaderLib = {
 
 	},
 
+	backgroundCube: {
+
+		uniforms: {
+			envMap: { value: null },
+			flipEnvMap: { value: - 1 },
+			backgroundBlurriness: { value: 0 }
+		},
+
+		vertexShader: ShaderChunk.backgroundCube_vert,
+		fragmentShader: ShaderChunk.backgroundCube_frag
+
+	},
+
 	cube: {
 
-		uniforms: /*@__PURE__*/ mergeUniforms( [
-			UniformsLib.envmap,
-			{
-				opacity: { value: 1.0 }
-			}
-		] ),
+		uniforms: {
+			tCube: { value: null },
+			tFlip: { value: - 1 },
+			opacity: { value: 1.0 }
+		},
 
 		vertexShader: ShaderChunk.cube_vert,
 		fragmentShader: ShaderChunk.cube_frag

src/renderers/shaders/ShaderLib/backgroundCube.glsl.js

@@ -0,0 +1,59 @@
+export const vertex = /* glsl */`
+varying vec3 vWorldDirection;
+
+#include <common>
+
+void main() {
+
+	vWorldDirection = transformDirection( position, modelMatrix );
+
+	#include <begin_vertex>
+	#include <project_vertex>
+
+	gl_Position.z = gl_Position.w; // set z to camera.far
+
+}
+`;
+
+export const fragment = /* glsl */`
+
+#ifdef ENVMAP_TYPE_CUBE
+
+	uniform samplerCube envMap;
+
+#elif defined( ENVMAP_TYPE_CUBE_UV )
+
+	uniform sampler2D envMap;
+
+#endif
+
+uniform float flipEnvMap;
+uniform float backgroundBlurriness;
+
+varying vec3 vWorldDirection;
+
+#include <cube_uv_reflection_fragment>
+
+void main() {
+
+	#ifdef ENVMAP_TYPE_CUBE
+
+		vec4 texColor = textureCube( envMap, vec3( flipEnvMap * vWorldDirection.x, vWorldDirection.yz ) );
+
+	#elif defined( ENVMAP_TYPE_CUBE_UV )
+
+		vec4 texColor = textureCubeUV( envMap, vWorldDirection, backgroundBlurriness );
+
+	#else
+
+		vec4 texColor = vec4( 0.0, 0.0, 0.0, 1.0 );
+
+	#endif
+
+	gl_FragColor = texColor;
+
+	#include <tonemapping_fragment>
+	#include <encodings_fragment>
+
+}
+`;

src/renderers/shaders/ShaderLib/cube.glsl.js

@@ -16,19 +16,17 @@ void main() {
 `;
 
 export const fragment = /* glsl */`
-#include <envmap_common_pars_fragment>
+uniform samplerCube tCube;
+uniform float tFlip;
 uniform float opacity;
 
 varying vec3 vWorldDirection;
 
-#include <cube_uv_reflection_fragment>
-
 void main() {
 
-	vec3 vReflect = vWorldDirection;
-	#include <envmap_fragment>
+	vec4 texColor = textureCube( tCube, vec3( tFlip * vWorldDirection.x, vWorldDirection.yz ) );
 
-	gl_FragColor = envColor;
+	gl_FragColor = texColor;
 	gl_FragColor.a *= opacity;
 
 	#include <tonemapping_fragment>

src/renderers/shaders/UniformsLib.js

@@ -35,7 +35,6 @@ const UniformsLib = {
 		reflectivity: { value: 1.0 }, // basic, lambert, phong
 		ior: { value: 1.5 }, // physical
 		refractionRatio: { value: 0.98 }, // basic, lambert, phong
-		backgroundBlurriness: { value: 0 } // background
 
 	},
 

src/renderers/webgl/WebGLBackground.js

@@ -68,9 +68,9 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 					new BoxGeometry( 1, 1, 1 ),
 					new ShaderMaterial( {
 						name: 'BackgroundCubeMaterial',
-						uniforms: cloneUniforms( ShaderLib.cube.uniforms ),
-						vertexShader: ShaderLib.cube.vertexShader,
-						fragmentShader: ShaderLib.cube.fragmentShader,
+						uniforms: cloneUniforms( ShaderLib.backgroundCube.uniforms ),
+						vertexShader: ShaderLib.backgroundCube.vertexShader,
+						fragmentShader: ShaderLib.backgroundCube.fragmentShader,
 						side: BackSide,
 						depthTest: false,
 						depthWrite: false,