Added HDR (arbitrary encoding) support to CubeTexturePass

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;

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;

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();

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';

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';

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;
+
+}

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 };

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 );

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;

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,

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;
 };