Merge pull request #15138 from WestLangley/dev-background_offset_repeat

Background shader: support texture offset/repeat

src/renderers/shaders/ShaderLib.js

@@ -3,6 +3,7 @@ import { UniformsUtils } from './UniformsUtils.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { UniformsLib } from './UniformsLib.js';
 import { Color } from '../../math/Color.js';
+import { Matrix3 } from '../../math/Matrix3.js';
 
 /**
  * @author alteredq / http://alteredqualia.com/
@@ -195,6 +196,7 @@ var ShaderLib = {
 	background: {
 
 		uniforms: {
+			uvTransform: { value: new Matrix3() },
 			t2D: { value: null },
 		},
 

src/renderers/shaders/ShaderLib/background_vert.glsl

@@ -1,8 +1,9 @@
 varying vec2 vUv;
+uniform mat3 uvTransform;
 
 void main() {
 
-	vUv = uv;
+	vUv = ( uvTransform * vec3( uv, 1 ) ).xy;
 
 	gl_Position = vec4( position, 1.0 );
 	gl_Position.z = 1.0;

src/renderers/webgl/WebGLBackground.js

@@ -47,6 +47,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 				boxMesh = new Mesh(
 					new BoxBufferGeometry( 1, 1, 1 ),
 					new ShaderMaterial( {
+						type: 'BackgroundCubeMaterial',
 						uniforms: UniformsUtils.clone( ShaderLib.cube.uniforms ),
 						vertexShader: ShaderLib.cube.vertexShader,
 						fragmentShader: ShaderLib.cube.fragmentShader,
@@ -83,6 +84,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 				planeMesh = new Mesh(
 					new PlaneBufferGeometry( 2, 2 ),
 					new ShaderMaterial( {
+						type: 'BackgroundMaterial',
 						uniforms: UniformsUtils.clone( ShaderLib.background.uniforms ),
 						vertexShader: ShaderLib.background.vertexShader,
 						fragmentShader: ShaderLib.background.fragmentShader,
@@ -101,6 +103,14 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 
 			planeMesh.material.uniforms.t2D.value = background;
 
+			if ( background.matrixAutoUpdate === true ) {
+
+				background.updateMatrix();
+
+			}
+
+			planeMesh.material.uniforms.uvTransform.value.copy( background.matrix );
+
 			// push to the pre-sorted opaque render list
 			renderList.push( planeMesh, planeMesh.geometry, planeMesh.material, 0, null );