diff --git a/examples/js/postprocessing/CubeTexturePass.js b/examples/js/postprocessing/CubeTexturePass.js
index 0f16e2f20fc211..31447c03e12397 100644
--- a/examples/js/postprocessing/CubeTexturePass.js
+++ b/examples/js/postprocessing/CubeTexturePass.js
@@ -10,21 +10,17 @@ THREE.CubeTexturePass = function ( camera, envMap, opacity ) {
 
 	this.needsSwap = false;
 
-	this.cubeShader = THREE.ShaderLib[ 'cube' ];
+	this.cubeMaterial = new THREE.SkyboxMaterial();
+
 	this.cubeMesh = new THREE.Mesh(
 		new THREE.BoxBufferGeometry( 10, 10, 10 ),
-		new THREE.ShaderMaterial( {
-			uniforms: this.cubeShader.uniforms,
-			vertexShader: this.cubeShader.vertexShader,
-			fragmentShader: this.cubeShader.fragmentShader,
-			depthTest: false,
-			depthWrite: false,
-			side: THREE.BackSide
-		} )
+		this.cubeMaterial
 	);
 
 	this.envMap = envMap;
+	this.envMapIntensity = 1.0;
 	this.opacity = ( opacity !== undefined ) ? opacity : 1.0;
+	this.roughness = 0.0;
 
 	this.cubeScene = new THREE.Scene();
 	this.cubeCamera = new THREE.PerspectiveCamera();
@@ -38,18 +34,28 @@ THREE.CubeTexturePass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 	render: function ( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
 
+		var camera = this.camera;
+
 		var oldAutoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
-		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
-		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
-
-		this.cubeMesh.material.uniforms[ "tCube" ].value = this.envMap;
-		this.cubeMesh.material.uniforms[ "opacity" ].value = this.opacity;
-		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
+		this.cubeCamera.copy( camera );
+		this.cubeCamera.near = 0.01;
+		this.cubeCamera.far = 20;
+		this.cubeCamera.position.set(0, 0, 0);
+		this.cubeCamera.quaternion.setFromRotationMatrix( camera.matrixWorld );
+		this.cubeCamera.updateProjectionMatrix();
+		if( this.cubeMaterial.envMap != this.envMap ) {
+			this.cubeMaterial.envMap = this.envMap;
+			this.cubeMaterial.needsUpdate = true;
+		}
+		this.cubeMaterial.envMapIntensity = this.envMapIntensity;
+		this.cubeMaterial.roughness = this.roughness;
+		this.cubeMaterial.opacity = this.opacity;
+		this.cubeMaterial.transparent = ( this.opacity < 1.0 );
 
 		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
-		if ( this.clear ) renderer.clear();
+		if( this.clear ) renderer.clear();
 		renderer.render( this.cubeScene, this.cubeCamera );
 
 		renderer.autoClear = oldAutoClear;
diff --git a/examples/jsm/postprocessing/CubeTexturePass.js b/examples/jsm/postprocessing/CubeTexturePass.js
index 7857b608f743e0..ca2a676c93ea9d 100644
--- a/examples/jsm/postprocessing/CubeTexturePass.js
+++ b/examples/jsm/postprocessing/CubeTexturePass.js
@@ -3,13 +3,11 @@
  */
 
 import {
-	BackSide,
 	BoxBufferGeometry,
 	Mesh,
 	PerspectiveCamera,
 	Scene,
-	ShaderLib,
-	ShaderMaterial
+	SkyboxMaterial
 } from "../../../build/three.module.js";
 import { Pass } from "../postprocessing/Pass.js";
 
@@ -21,21 +19,17 @@ var CubeTexturePass = function ( camera, envMap, opacity ) {
 
 	this.needsSwap = false;
 
-	this.cubeShader = ShaderLib[ 'cube' ];
+	this.cubeMaterial = new SkyboxMaterial();
+
 	this.cubeMesh = new Mesh(
 		new BoxBufferGeometry( 10, 10, 10 ),
-		new ShaderMaterial( {
-			uniforms: this.cubeShader.uniforms,
-			vertexShader: this.cubeShader.vertexShader,
-			fragmentShader: this.cubeShader.fragmentShader,
-			depthTest: false,
-			depthWrite: false,
-			side: BackSide
-		} )
+		this.cubeMaterial
 	);
 
 	this.envMap = envMap;
+	this.envMapIntensity = 1.0;
 	this.opacity = ( opacity !== undefined ) ? opacity : 1.0;
+	this.roughness = 0.0;
 
 	this.cubeScene = new Scene();
 	this.cubeCamera = new PerspectiveCamera();
@@ -49,18 +43,28 @@ CubeTexturePass.prototype = Object.assign( Object.create( Pass.prototype ), {
 
 	render: function ( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
 
+		var camera = this.camera;
+
 		var oldAutoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
-		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
-		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
-
-		this.cubeMesh.material.uniforms[ "tCube" ].value = this.envMap;
-		this.cubeMesh.material.uniforms[ "opacity" ].value = this.opacity;
-		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
+		this.cubeCamera.copy( camera );
+		this.cubeCamera.near = 0.01;
+		this.cubeCamera.far = 20;
+		this.cubeCamera.position.set(0, 0, 0);
+		this.cubeCamera.quaternion.setFromRotationMatrix( camera.matrixWorld );
+		this.cubeCamera.updateProjectionMatrix();
+		if( this.cubeMaterial.envMap != this.envMap ) {
+			this.cubeMaterial.envMap = this.envMap;
+			this.cubeMaterial.needsUpdate = true;
+		}
+		this.cubeMaterial.envMapIntensity = this.envMapIntensity;
+		this.cubeMaterial.roughness = this.roughness;
+		this.cubeMaterial.opacity = this.opacity;
+		this.cubeMaterial.transparent = ( this.opacity < 1.0 );
 
 		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
-		if ( this.clear ) renderer.clear();
+		if( this.clear ) renderer.clear();
 		renderer.render( this.cubeScene, this.cubeCamera );
 
 		renderer.autoClear = oldAutoClear;
diff --git a/examples/webgl_postprocessing_backgrounds.html b/examples/webgl_postprocessing_backgrounds.html
index 9e417bbe129ec5..63d19c3422d00c 100644
--- a/examples/webgl_postprocessing_backgrounds.html
+++ b/examples/webgl_postprocessing_backgrounds.html
@@ -15,8 +15,7 @@
 		<div id="container"></div>
 
 		<script type="module">
-
-			import * as THREE from '../build/three.module.js';
+			import * as THREE from "../build/three.module.js";
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -29,10 +28,14 @@
 			import { ClearPass } from './jsm/postprocessing/ClearPass.js';
 			import { CopyShader } from './jsm/shaders/CopyShader.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 
 			var scene, renderer, composer;
 			var clearPass, texturePass, renderPass;
 			var cameraP, cubeTexturePassP;
+			var material;
+			var ldrCubeMap, hdrCubeMap;
+			//var cameraO, cubeTexturePassO;
 			var gui, stats;
 
 			var params = {
@@ -47,7 +50,12 @@
 				cubeTexturePass: true,
 				cubeTexturePassOpacity: 1.0,
 
-				renderPass: true
+				renderPass: true,
+
+				exposure: 1,
+
+				hdr: false
+
 			};
 
 			init();
@@ -73,6 +81,10 @@
 
 				gui.add( params, "renderPass" );
 
+				gui.add( params, "exposure", 0, 2 );
+
+				gui.add( params, "hdr" );
+
 				gui.open();
 
 			}
@@ -90,6 +102,7 @@
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
 				document.body.appendChild( renderer.domElement );
+				renderer.gammaOutput = true;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -124,7 +137,7 @@
 
 				var geometry = new THREE.SphereBufferGeometry( 1, 48, 24 );
 
-				var material = new THREE.MeshStandardMaterial();
+				material = new THREE.MeshStandardMaterial();
 				material.roughness = 0.5 * Math.random() + 0.25;
 				material.metalness = 0;
 				material.color.setHSL( Math.random(), 1.0, 0.3 );
@@ -163,11 +176,23 @@
 				composer.addPass( cubeTexturePassP );
 
 				var ldrUrls = genCubeUrls( "textures/cube/pisa/", ".png" );
-				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
+				ldrCubeMap = new THREE.CubeTextureLoader().load( ldrUrls, function ( ) {
 
-					cubeTexturePassP.envMap = ldrCubeMap;
+					console.log( "loaded ldr envmap" );
 
 				} );
+				ldrCubeMap.encoding = THREE.sRGBEncoding;
+
+				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
+				hdrCubeMap = new HDRCubeTextureLoader()
+					.setPath( './textures/cube/pisaHDR/' )
+					.setDataType( THREE.UnsignedByteType )
+					.load( hdrUrls, function () {
+
+						hdrCubeMap.magFilter = THREE.LinearFilter;
+						console.log( "loaded hdr envmap" );
+
+					} );
 
 				renderPass = new RenderPass( scene, cameraP );
 				renderPass.clear = false;
@@ -227,6 +252,9 @@
 
 				renderPass.enabled = params.renderPass;
 
+				renderer.toneMappingExposure = params.exposure;
+				cubeTexturePassP.envMap = params.hdr ? hdrCubeMap : ldrCubeMap;
+
 				composer.render();
 
 				stats.end();
diff --git a/src/materials/Materials.d.ts b/src/materials/Materials.d.ts
index ff7faa9d47a5fa..4b32a5896704f4 100644
--- a/src/materials/Materials.d.ts
+++ b/src/materials/Materials.d.ts
@@ -15,4 +15,5 @@ export * from './MeshBasicMaterial';
 export * from './MeshMatcapMaterial';
 export * from './LineDashedMaterial';
 export * from './LineBasicMaterial';
+export * from './SkyboxMaterial';
 export * from './Material';
diff --git a/src/materials/Materials.js b/src/materials/Materials.js
index 28844e95884fc5..eb2101e02655ae 100644
--- a/src/materials/Materials.js
+++ b/src/materials/Materials.js
@@ -15,4 +15,5 @@ export { MeshBasicMaterial } from './MeshBasicMaterial.js';
 export { MeshMatcapMaterial } from './MeshMatcapMaterial.js';
 export { LineDashedMaterial } from './LineDashedMaterial.js';
 export { LineBasicMaterial } from './LineBasicMaterial.js';
+export { SkyboxMaterial } from './SkyboxMaterial.js';
 export { Material } from './Material.js';
diff --git a/src/materials/SkyboxMaterial.d.ts b/src/materials/SkyboxMaterial.d.ts
new file mode 100644
index 00000000000000..327ffdb8f43355
--- /dev/null
+++ b/src/materials/SkyboxMaterial.d.ts
@@ -0,0 +1,23 @@
+import { Texture } from './../textures/Texture';
+import { MaterialParameters, Material } from './Material';
+/**
+ * parameters is an object with one or more properties defining the material's appearance.
+ */
+export interface SkyboxMaterialParameters extends MaterialParameters {
+	envMap?: Texture;
+	envMapIntensity?: number;
+	opacity: number;
+}
+
+export class SkyboxMaterial extends Material {
+
+	constructor( parameters?: SkyboxMaterialParameters );
+
+	envMap?: Texture;
+	envMapIntensity?: number;
+	opacity: number;
+	roughness: number;
+
+	setValues( parameters: SkyboxMaterialParameters ): void;
+
+}
diff --git a/src/materials/SkyboxMaterial.js b/src/materials/SkyboxMaterial.js
new file mode 100644
index 00000000000000..96464742b0dfe3
--- /dev/null
+++ b/src/materials/SkyboxMaterial.js
@@ -0,0 +1,51 @@
+import { Material } from './Material';
+import { BackSide } from '../constants';
+
+/**
+ * @author bhouston / https://clara.io
+ *
+ * parameters = {
+ *
+ * }
+ */
+
+function SkyboxMaterial( parameters ) {
+
+	Material.call( this );
+
+	this.type = 'SkyboxMaterial';
+
+	this.envMap = null;
+	this.envMapIntensity = 1.0;
+
+	this.roughness = 0.0;
+
+	this.depthTest = false;
+	this.depthWrite = false;
+	this.side = BackSide;
+
+	this.lights = false;
+
+	this.setValues( parameters );
+
+}
+
+SkyboxMaterial.prototype = Object.create( Material.prototype );
+SkyboxMaterial.prototype.constructor = SkyboxMaterial;
+
+SkyboxMaterial.prototype.isSkyboxMaterial = true;
+
+SkyboxMaterial.prototype.copy = function ( source ) {
+
+	Material.prototype.copy.call( this, source );
+
+	this.envMap = source.envMap;
+	this.envMapIntensity = source.envMapIntensity;
+
+	this.roughness = source.roughness;
+
+	return this;
+
+};
+
+export { SkyboxMaterial };
diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index accb337f9206e3..7081e85dbbf52b 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1897,6 +1897,11 @@ function WebGLRenderer( parameters ) {
 
 				refreshUniformsPoints( m_uniforms, material );
 
+			} else if ( material.isSkyboxMaterial ) {
+
+				refreshUniformsCommon( m_uniforms, material );
+				refreshUniformsSkybox( m_uniforms, material );
+
 			} else if ( material.isSpriteMaterial ) {
 
 				refreshUniformsSprites( m_uniforms, material );
@@ -2077,6 +2082,15 @@ function WebGLRenderer( parameters ) {
 
 	}
 
+	function refreshUniformsSkybox( uniforms, material ) {
+
+		uniforms.roughness.value = material.roughness;
+		uniforms.opacity.value = material.opacity;
+		uniforms.envMapIntensity.value = material.envMapIntensity;
+		uniforms.tFlip.value = material.envMap.isCubeTexture ? - 1 : 1;
+
+	}
+
 	function refreshUniformsLine( uniforms, material ) {
 
 		uniforms.diffuse.value.copy( material.color );
diff --git a/src/renderers/shaders/ShaderChunk.d.ts b/src/renderers/shaders/ShaderChunk.d.ts
index c7845ef7a3ce0a..49fd633f05c273 100644
--- a/src/renderers/shaders/ShaderChunk.d.ts
+++ b/src/renderers/shaders/ShaderChunk.d.ts
@@ -22,6 +22,8 @@ export let ShaderChunk: {
 	common: string;
 	cube_frag: string;
 	cube_vert: string;
+	skybox_frag: string;
+	skybox_vert: string;
 	cube_uv_reflection_fragment: string;
 	defaultnormal_vertex: string;
 	depth_frag: string;
diff --git a/src/renderers/shaders/ShaderChunk.js b/src/renderers/shaders/ShaderChunk.js
index 2adf87807dac15..0f854dfbbb75c6 100644
--- a/src/renderers/shaders/ShaderChunk.js
+++ b/src/renderers/shaders/ShaderChunk.js
@@ -92,6 +92,8 @@ import background_frag from './ShaderLib/background_frag.glsl.js';
 import background_vert from './ShaderLib/background_vert.glsl.js';
 import cube_frag from './ShaderLib/cube_frag.glsl.js';
 import cube_vert from './ShaderLib/cube_vert.glsl.js';
+import skybox_frag from './ShaderLib/skybox_frag.glsl.js';
+import skybox_vert from './ShaderLib/skybox_vert.glsl.js';
 import depth_frag from './ShaderLib/depth_frag.glsl.js';
 import depth_vert from './ShaderLib/depth_vert.glsl.js';
 import distanceRGBA_frag from './ShaderLib/distanceRGBA_frag.glsl.js';
@@ -214,6 +216,8 @@ export var ShaderChunk = {
 	background_vert: background_vert,
 	cube_frag: cube_frag,
 	cube_vert: cube_vert,
+	skybox_frag: skybox_frag,
+	skybox_vert: skybox_vert,
 	depth_frag: depth_frag,
 	depth_vert: depth_vert,
 	distanceRGBA_frag: distanceRGBA_frag,
diff --git a/src/renderers/shaders/ShaderLib.d.ts b/src/renderers/shaders/ShaderLib.d.ts
index e2c31b942391f1..07495f67fa71c4 100644
--- a/src/renderers/shaders/ShaderLib.d.ts
+++ b/src/renderers/shaders/ShaderLib.d.ts
@@ -22,6 +22,7 @@ export let ShaderLib: {
 	cube: Shader;
 	equirect: Shader;
 	distanceRGBA: Shader;
+	cubeEnv: Shader;
 	shadow: Shader;
 	physical: Shader;
 };
diff --git a/src/renderers/shaders/ShaderLib.js b/src/renderers/shaders/ShaderLib.js
index 76f0c50cc50b78..127712f6024080 100644
--- a/src/renderers/shaders/ShaderLib.js
+++ b/src/renderers/shaders/ShaderLib.js
@@ -267,6 +267,25 @@ var ShaderLib = {
 
 };
 
+ShaderLib.skybox = {
+
+	uniforms: mergeUniforms( [
+		UniformsLib.common,
+		ShaderLib.standard.uniforms,
+		{
+			envMap: { value: null },
+			envMapIntensity: { value: 1.0 },
+			tFlip: { value: - 1 },
+			opacity: { value: 1.0 },
+			roughness: { value: 0.0 }
+		}
+	] ),
+
+	vertexShader: ShaderChunk.skybox_vert,
+	fragmentShader: ShaderChunk.skybox_frag
+
+};
+
 ShaderLib.physical = {
 
 	uniforms: mergeUniforms( [
diff --git a/src/renderers/shaders/ShaderLib/skybox_frag.glsl.js b/src/renderers/shaders/ShaderLib/skybox_frag.glsl.js
new file mode 100644
index 00000000000000..18a3642a427abd
--- /dev/null
+++ b/src/renderers/shaders/ShaderLib/skybox_frag.glsl.js
@@ -0,0 +1,47 @@
+export default /* glsl */`
+uniform float tFlip;
+uniform float opacity;
+uniform float roughness;
+
+varying vec3 vWorldPosition;
+
+#include <common>
+#include <envmap_pars_fragment>
+#include <cube_uv_reflection_fragment>
+
+void main() {
+
+	vec3 queryVec = vec3( tFlip * vWorldPosition.x, vWorldPosition.yz );
+
+	vec4 envMapColor = vec4( 0.0 );
+
+	#if defined( ENVMAP_TYPE_CUBE )
+
+		#ifdef TEXTURE_LOD_EXT
+
+			envMapColor = textureCubeLodEXT( envMap, queryVec, roughness * 8.0 );
+
+		#else
+
+			envMapColor = textureCube( envMap, queryVec, roughness * 8.0 );
+
+		#endif
+
+		envMapColor.rgb = envMapTexelToLinear( envMapColor ).rgb;
+		envMapColor.rgb *= envMapIntensity;
+
+	#elif defined( ENVMAP_TYPE_CUBE_UV )
+
+		envMapColor = textureCubeUV( queryVec, queryVec, roughness );
+		envMapColor.rgb *= envMapIntensity;
+
+	#endif
+
+	gl_FragColor = envMapColor;
+	gl_FragColor.a = opacity;
+
+	#include <tonemapping_fragment>
+	#include <encodings_fragment>
+
+}
+`;
diff --git a/src/renderers/shaders/ShaderLib/skybox_vert.glsl.js b/src/renderers/shaders/ShaderLib/skybox_vert.glsl.js
new file mode 100644
index 00000000000000..28767add8b3782
--- /dev/null
+++ b/src/renderers/shaders/ShaderLib/skybox_vert.glsl.js
@@ -0,0 +1,18 @@
+export default /* glsl */`
+varying vec3 vWorldPosition;
+
+#include <common>
+
+void main() {
+
+	vWorldPosition = transformDirection( position, modelMatrix );
+
+	#include <begin_vertex>
+	#include <project_vertex>
+
+	gl_Position.z = gl_Position.w; // set z to camera.far
+	// important because otherwise the cube used for rendering the cubeMap might
+	// get clipped
+
+}
+`;
diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js
index d790e453a53c04..1272142226d169 100644
--- a/src/renderers/webgl/WebGLPrograms.js
+++ b/src/renderers/webgl/WebGLPrograms.js
@@ -24,7 +24,8 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 		LineDashedMaterial: 'dashed',
 		PointsMaterial: 'points',
 		ShadowMaterial: 'shadow',
-		SpriteMaterial: 'sprite'
+		SpriteMaterial: 'sprite',
+		SkyboxMaterial: 'skybox',
 	};
 
 	var parameterNames = [