Merge pull request #14856 from aardgoose/background-texture

ShaderMaterial background texture

src/renderers/shaders/ShaderChunk.js

@@ -88,6 +88,8 @@ import uv2_pars_vertex from './ShaderChunk/uv2_pars_vertex.glsl';
 import uv2_vertex from './ShaderChunk/uv2_vertex.glsl';
 import worldpos_vertex from './ShaderChunk/worldpos_vertex.glsl';
 
+import background_frag from './ShaderLib/background_frag.glsl';
+import background_vert from './ShaderLib/background_vert.glsl';
 import cube_frag from './ShaderLib/cube_frag.glsl';
 import cube_vert from './ShaderLib/cube_vert.glsl';
 import depth_frag from './ShaderLib/depth_frag.glsl';
@@ -208,6 +210,8 @@ export var ShaderChunk = {
 	uv2_vertex: uv2_vertex,
 	worldpos_vertex: worldpos_vertex,
 
+	background_frag: background_frag,
+	background_vert: background_vert,
 	cube_frag: cube_frag,
 	cube_vert: cube_vert,
 	depth_frag: depth_frag,

src/renderers/shaders/ShaderLib.js

@@ -192,6 +192,16 @@ var ShaderLib = {
 
 	},
 
+	background: {
+
+		uniforms: {
+			t2D: { value: null },
+		},
+
+		vertexShader: ShaderChunk.background_vert,
+		fragmentShader: ShaderChunk.background_frag
+
+	},
 	/* -------------------------------------------------------------------------
 	//	Cube map shader
 	 ------------------------------------------------------------------------- */

src/renderers/shaders/ShaderLib/background_frag.glsl

@@ -0,0 +1,10 @@
+
+uniform sampler2D t2D;
+
+varying vec2 vUv;
+
+void main() {
+
+	gl_FragColor = texture2D( t2D, vUv );
+
+}

src/renderers/shaders/ShaderLib/background_vert.glsl

@@ -0,0 +1,11 @@
+
+varying vec2 vUv;
+
+void main() {
+
+	vUv = uv;
+
+	gl_Position = vec4( position, 1.0 );
+	gl_Position.z = 1.0;
+
+}

src/renderers/webgl/WebGLBackground.js

@@ -2,11 +2,9 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import { BackSide } from '../../constants.js';
-import { OrthographicCamera } from '../../cameras/OrthographicCamera.js';
+import { BackSide, FrontSide } from '../../constants.js';
 import { BoxBufferGeometry } from '../../geometries/BoxGeometry.js';
 import { PlaneBufferGeometry } from '../../geometries/PlaneGeometry.js';
-import { MeshBasicMaterial } from '../../materials/MeshBasicMaterial.js';
 import { ShaderMaterial } from '../../materials/ShaderMaterial.js';
 import { Color } from '../../math/Color.js';
 import { Mesh } from '../../objects/Mesh.js';
@@ -17,7 +15,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 	var clearColor = new Color( 0x000000 );
 	var clearAlpha = 0;
 
-	var planeCamera, planeMesh;
+	var planeMesh;
 	var boxMesh;
 
 	function render( renderList, scene, camera, forceClear ) {
@@ -77,24 +75,30 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
 
 		} else if ( background && background.isTexture ) {
 
-			if ( planeCamera === undefined ) {
-
-				planeCamera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+			if ( planeMesh === undefined ) {
 
 				planeMesh = new Mesh(
 					new PlaneBufferGeometry( 2, 2 ),
-					new MeshBasicMaterial( { depthTest: false, depthWrite: false, fog: false } )
+					new ShaderMaterial( {
+						uniforms: ShaderLib.background.uniforms,
+						vertexShader: ShaderLib.background.vertexShader,
+						fragmentShader: ShaderLib.background.fragmentShader,
+						side: FrontSide,
+						depthTest: true,
+						depthWrite: false,
+						fog: false
+					} )
 				);
 
+				planeMesh.geometry.removeAttribute( 'normal' );
+
 				objects.update( planeMesh );
 
 			}
 
-			planeMesh.material.map = background;
-
-			// TODO Push this to renderList
+			planeMesh.material.uniforms.t2D.value = background;
 
-			renderer.renderBufferDirect( planeCamera, null, planeMesh.geometry, planeMesh.material, planeMesh, null );
+			renderList.push( planeMesh, planeMesh.geometry, planeMesh.material, 0, null );
 
 		}