super-three 0.141.0 → 0.144.0

package/examples/jsm/nodes/shadernode/ShaderNode.js

@@ -187,17 +187,17 @@ const ints = [ - 1, - 2 ];
 const floats = [ 0.5, 1.5, 1 / 3, 1e-6, 1e6, Math.PI, Math.PI * 2, 1 / Math.PI, 2 / Math.PI, 1 / ( Math.PI * 2 ), Math.PI / 2 ];
 
 const boolsCacheMap = new Map();
-for ( let bool of bools ) boolsCacheMap.set( bool, new ConstNode( bool ) );
+for ( const bool of bools ) boolsCacheMap.set( bool, new ConstNode( bool ) );
 
 const uintsCacheMap = new Map();
-for ( let uint of uints ) uintsCacheMap.set( uint, new ConstNode( uint, 'uint' ) );
+for ( const uint of uints ) uintsCacheMap.set( uint, new ConstNode( uint, 'uint' ) );
 
 const intsCacheMap = new Map( [ ...uintsCacheMap ].map( el => new ConstNode( el.value, 'int' ) ) );
-for ( let int of ints ) intsCacheMap.set( int, new ConstNode( int, 'int' ) );
+for ( const int of ints ) intsCacheMap.set( int, new ConstNode( int, 'int' ) );
 
 const floatsCacheMap = new Map( [ ...intsCacheMap ].map( el => new ConstNode( el.value ) ) );
-for ( let float of floats ) floatsCacheMap.set( float, new ConstNode( float ) );
-for ( let float of floats ) floatsCacheMap.set( - float, new ConstNode( - float ) );
+for ( const float of floats ) floatsCacheMap.set( float, new ConstNode( float ) );
+for ( const float of floats ) floatsCacheMap.set( - float, new ConstNode( - float ) );
 
 export const cacheMaps = { bool: boolsCacheMap, uint: uintsCacheMap, ints: intsCacheMap, float: floatsCacheMap };
 

package/examples/jsm/nodes/shadernode/ShaderNodeBaseElements.js

@@ -11,7 +11,7 @@ import InstanceIndexNode from '../core/InstanceIndexNode.js';
 import PropertyNode from '../core/PropertyNode.js';
 import UniformNode from '../core/UniformNode.js';
 import VarNode from '../core/VarNode.js';
-import VaryNode from '../core/VaryNode.js';
+import VaryingNode from '../core/VaryingNode.js';
 
 // accessors
 import BufferNode from '../accessors/BufferNode.js';
@@ -87,12 +87,12 @@ export const bmat4 = new ConvertType( 'bmat4' );
 
 // @TODO: ArrayUniformNode
 
-export const func = ( code ) => {
+export const func = ( code, includes ) => {
 
-	const node = nodeObject( new FunctionNode( code ) );
+	const node = nodeObject( new FunctionNode( code, includes ) );
 
 	const call = node.call.bind( node );
-	node.call = ( params ) => nodeObject( call( params ) );
+	node.call = ( ...params ) => nodeObject( call( params.length > 1 || params[ 0 ]?.isNode === true ? nodeArray( params ) : nodeObjects( params[ 0 ] ) ) );
 
 	return node;
 
@@ -109,6 +109,8 @@ export const uniform = ( nodeOrType ) => {
 
 };
 
+export const fn = ( code, includes ) => func( code, includes ).call;
+
 export const attribute = ( name, nodeType ) => nodeObject( new AttributeNode( name, nodeType ) );
 export const property = ( name, nodeOrType ) => nodeObject( new PropertyNode( name, getConstNodeType( nodeOrType ) ) );
 
@@ -120,7 +122,7 @@ export const call = nodeProxy( FunctionCallNode );
 export const instanceIndex = nodeImmutable( InstanceIndexNode );
 export const label = nodeProxy( VarNode );
 export const temp = label;
-export const vary = nodeProxy( VaryNode );
+export const varying = nodeProxy( VaryingNode );
 
 // accesors
 
@@ -236,6 +238,7 @@ export const dFdy = nodeProxy( MathNode, MathNode.DFDY );
 export const saturate = nodeProxy( MathNode, MathNode.SATURATE );
 export const round = nodeProxy( MathNode, MathNode.ROUND );
 
+export const atan2 = nodeProxy( MathNode, MathNode.ATAN2 );
 export const min = nodeProxy( MathNode, MathNode.MIN );
 export const max = nodeProxy( MathNode, MathNode.MAX );
 export const mod = nodeProxy( MathNode, MathNode.MOD );

package/examples/jsm/nodes/shadernode/ShaderNodeElements.js

@@ -1,10 +1,11 @@
 // accessors
 import CubeTextureNode from '../accessors/CubeTextureNode.js';
 import InstanceNode from '../accessors/InstanceNode.js';
-import ReflectNode from '../accessors/ReflectNode.js';
+import ReflectVectorNode from '../accessors/ReflectVectorNode.js';
 import SkinningNode from '../accessors/SkinningNode.js';
 
 // display
+import ColorAdjustmentNode from '../display/ColorAdjustmentNode.js';
 import ColorSpaceNode from '../display/ColorSpaceNode.js';
 import NormalMapNode from '../display/NormalMapNode.js';
 import ToneMappingNode from '../display/ToneMappingNode.js';
@@ -18,9 +19,13 @@ import LightingContextNode from '../lighting/LightingContextNode.js';
 import MatcapUVNode from '../utils/MatcapUVNode.js';
 import MaxMipLevelNode from '../utils/MaxMipLevelNode.js';
 import OscNode from '../utils/OscNode.js';
+import RotateUVNode from '../utils/RotateUVNode.js';
 import SpriteSheetUVNode from '../utils/SpriteSheetUVNode.js';
 import TimerNode from '../utils/TimerNode.js';
 
+// geometry
+import RangeNode from '../geometry/RangeNode.js';
+
 // procedural
 import CheckerNode from '../procedural/CheckerNode.js';
 
@@ -61,13 +66,16 @@ export const cubeTexture = nodeProxy( CubeTextureNode );
 
 export const instance = nodeProxy( InstanceNode );
 
-export const reflectVector = nodeImmutable( ReflectNode, ReflectNode.VECTOR );
-export const reflectCube = nodeImmutable( ReflectNode, ReflectNode.CUBE );
+export const reflectVector = nodeImmutable( ReflectVectorNode );
 
 export const skinning = nodeProxy( SkinningNode );
 
 // display
 
+export const saturation = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.SATURATION );
+export const vibrance = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.VIBRANCE );
+export const hue = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.HUE );
+
 export const colorSpace = ( node, encoding ) => nodeObject( new ColorSpaceNode( null, nodeObject( node ) ).fromEncoding( encoding ) );
 export const normalMap = nodeProxy( NormalMapNode );
 export const toneMapping = ( mapping, exposure, color ) => nodeObject( new ToneMappingNode( mapping, nodeObject( exposure ), nodeObject( color ) ) );
@@ -89,12 +97,18 @@ export const oscSquare = nodeProxy( OscNode, OscNode.SQUARE );
 export const oscTriangle = nodeProxy( OscNode, OscNode.TRIANGLE );
 export const oscSawtooth = nodeProxy( OscNode, OscNode.SAWTOOTH );
 
+export const rotateUV = nodeProxy( RotateUVNode );
+
 export const spritesheetUV = nodeProxy( SpriteSheetUVNode );
 
 // @TODO: add supports to use node in timeScale
-export const timerLocal = ( timeScale ) => nodeObject( new TimerNode( TimerNode.LOCAL, timeScale ) );
-export const timerGlobal = ( timeScale ) => nodeObject( new TimerNode( TimerNode.GLOBAL, timeScale ) );
-export const timerDelta = ( timeScale ) => nodeObject( new TimerNode( TimerNode.DELTA, timeScale ) );
+export const timerLocal = ( timeScale, value = 0 ) => nodeObject( new TimerNode( TimerNode.LOCAL, timeScale, value ) );
+export const timerGlobal = ( timeScale, value = 0 ) => nodeObject( new TimerNode( TimerNode.GLOBAL, timeScale, value ) );
+export const timerDelta = ( timeScale, value = 0 ) => nodeObject( new TimerNode( TimerNode.DELTA, timeScale, value ) );
+
+// geometry
+
+export const range = ( min, max ) => nodeObject( new RangeNode( min, max ) );
 
 // procedural
 

package/examples/jsm/nodes/utils/ConvertNode.js

@@ -17,23 +17,28 @@ class ConvertNode extends Node {
 
 	}
 
-	generate( builder ) {
+	generate( builder, output ) {
 
 		const convertTo = this.convertTo;
 		const node = this.node;
+		const type = this.getNodeType( builder );
+
+		let snippet = null;
 
 		if ( builder.isReference( convertTo ) === false ) {
 
 			const nodeSnippet = node.build( builder, convertTo );
 
-			return builder.format( nodeSnippet, this.getNodeType( builder ), convertTo );
+			snippet = builder.format( nodeSnippet, type, convertTo );
 
 		} else {
 
-			return node.build( builder, convertTo );
+			snippet = node.build( builder, convertTo );
 
 		}
 
+		return builder.format( snippet, type, output );
+
 	}
 
 }

package/examples/jsm/nodes/utils/JoinNode.js

@@ -1,6 +1,6 @@
-import Node from '../core/Node.js';
+import TempNode from '../core/Node.js';
 
-class JoinNode extends Node {
+class JoinNode extends TempNode {
 
 	constructor( nodes = [] ) {
 
@@ -16,16 +16,14 @@ class JoinNode extends Node {
 
 	}
 
-	generate( builder ) {
+	generate( builder, output ) {
 
 		const type = this.getNodeType( builder );
 		const nodes = this.nodes;
 
 		const snippetValues = [];
 
-		for ( let i = 0; i < nodes.length; i ++ ) {
-
-			const input = nodes[ i ];
+		for ( const input of nodes ) {
 
 			const inputSnippet = input.build( builder );
 
@@ -33,7 +31,9 @@ class JoinNode extends Node {
 
 		}
 
-		return `${ builder.getType( type ) }( ${ snippetValues.join( ', ' ) } )`;
+		const snippet = `${ builder.getType( type ) }( ${ snippetValues.join( ', ' ) } )`;
+
+		return builder.format( snippet, type, output );
 
 	}
 

package/examples/jsm/nodes/utils/MaxMipLevelNode.js

@@ -15,7 +15,8 @@ class MaxMipLevelNode extends UniformNode {
 
 	update() {
 
-		const image = this.texture.images ? this.texture.images[ 0 ].image || this.texture.images[ 0 ] : this.texture.image;
+		const images = this.texture.images;
+		const image = ( images && images.length > 0 ) ? ( images[ 0 ]?.image || images[ 0 ] ) : this.texture.image;
 
 		if ( image?.width !== undefined ) {
 

package/examples/jsm/nodes/utils/RotateUVNode.js

@@ -0,0 +1,32 @@
+import TempNode from '../core/TempNode.js';
+import { vec2, add, sub, mul, cos, sin } from '../shadernode/ShaderNodeBaseElements.js';
+
+class RotateUVNode extends TempNode {
+
+	constructor( uvNode, rotationNode, centerNode = vec2( .5 ) ) {
+
+		super( 'vec2' );
+
+		this.uvNode = uvNode;
+		this.rotationNode = rotationNode;
+		this.centerNode = centerNode;
+
+	}
+
+	construct() {
+
+		const { uvNode, rotationNode, centerNode } = this;
+
+		const cosAngle = cos( rotationNode );
+		const sinAngle = sin( rotationNode );
+
+		return vec2(
+			add( add( mul( cosAngle, sub( uvNode.x, centerNode.x ) ), mul( sinAngle, sub( uvNode.y, centerNode.y ) ) ), centerNode.x ),
+			add( sub( mul( cosAngle, sub( uvNode.y, centerNode.y ) ), mul( sinAngle, sub( uvNode.x, centerNode.x ) ) ), centerNode.y )
+		);
+
+	}
+
+}
+
+export default RotateUVNode;

package/examples/jsm/nodes/utils/SplitNode.js

@@ -1,6 +1,8 @@
 import Node from '../core/Node.js';
 import { vector } from '../core/NodeBuilder.js';
 
+const vectorComponents = 'xyzw';
+
 class SplitNode extends Node {
 
 	constructor( node, components = 'x' ) {
@@ -32,11 +34,13 @@ class SplitNode extends Node {
 
 	}
 
-	generate( builder ) {
+	generate( builder, output ) {
 
 		const node = this.node;
 		const nodeTypeLength = builder.getTypeLength( node.getNodeType( builder ) );
 
+		let snippet = null;
+
 		if ( nodeTypeLength > 1 ) {
 
 			let type = null;
@@ -45,7 +49,7 @@ class SplitNode extends Node {
 
 			if ( componentsLength >= nodeTypeLength ) {
 
-				// need expand the input node
+				// needed expand the input node
 
 				type = builder.getTypeFromLength( this.getVectorLength() );
 
@@ -53,16 +57,28 @@ class SplitNode extends Node {
 
 			const nodeSnippet = node.build( builder, type );
 
-			return `${nodeSnippet}.${this.components}`;
+			if ( this.components.length === nodeTypeLength && this.components === vectorComponents.slice( 0, this.components.length ) ) {
+
+				// unecessary swizzle
+
+				snippet = builder.format( nodeSnippet, type, output );
+
+			} else {
+
+				snippet = builder.format( `${nodeSnippet}.${this.components}`, this.getNodeType( builder ), output );
+
+			}
 
 		} else {
 
-			// ignore components if node is a float
+			// ignore .components if .node returns float/integer
 
-			return node.build( builder );
+			snippet = node.build( builder, output );
 
 		}
 
+		return snippet;
+
 	}
 
 	serialize( data ) {

package/examples/jsm/nodes/utils/TimerNode.js

@@ -7,9 +7,9 @@ class TimerNode extends UniformNode {
 	static GLOBAL = 'global';
 	static DELTA = 'delta';
 
-	constructor( scope = TimerNode.LOCAL, scale = 1 ) {
+	constructor( scope = TimerNode.LOCAL, scale = 1, value = 0 ) {
 
-		super( 0 );
+		super( value );
 
 		this.scope = scope;
 		this.scale = scale;

package/examples/jsm/objects/GroundProjectedEnv.js

@@ -0,0 +1,186 @@
+import { Mesh, IcosahedronGeometry, ShaderMaterial, DoubleSide } from 'three';
+
+/**
+ * Ground projected env map adapted from @react-three/drei.
+ * https://github.com/pmndrs/drei/blob/master/src/core/Environment.tsx
+ */
+export class GroundProjectedEnv extends Mesh {
+
+	constructor( texture, options ) {
+
+		const isCubeMap = texture.isCubeTexture;
+		const w =
+			( isCubeMap ? texture.image[ 0 ]?.width : texture.image.width ) ?? 1024;
+		const cubeSize = w / 4;
+		const _lodMax = Math.floor( Math.log2( cubeSize ) );
+		const _cubeSize = Math.pow( 2, _lodMax );
+		const width = 3 * Math.max( _cubeSize, 16 * 7 );
+		const height = 4 * _cubeSize;
+
+		const defines = [
+			isCubeMap ? '#define ENVMAP_TYPE_CUBE' : '',
+			`#define CUBEUV_TEXEL_WIDTH ${1.0 / width}`,
+			`#define CUBEUV_TEXEL_HEIGHT ${1.0 / height}`,
+			`#define CUBEUV_MAX_MIP ${_lodMax}.0`,
+		];
+
+		const vertexShader = /* glsl */ `
+        varying vec3 vWorldPosition;
+
+        void main() 
+        {
+
+            vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );
+            vWorldPosition = worldPosition.xyz;
+            
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+        }
+        `;
+		const fragmentShader = defines.join( '\n' ) + /* glsl */ `
+        #define ENVMAP_TYPE_CUBE_UV
+
+        varying vec3 vWorldPosition;
+
+        uniform float radius;
+        uniform float height;
+        uniform float angle;
+
+        #ifdef ENVMAP_TYPE_CUBE
+
+            uniform samplerCube map;
+
+        #else
+
+            uniform sampler2D map;
+
+        #endif
+
+        // From: https://www.shadertoy.com/view/4tsBD7
+        float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r ) 
+        {
+
+            float d = dot ( rd, n );
+            
+            if( d > 0.0 ) { return 1e6; }
+            
+            vec3  o = ro - c;
+            float t = - dot( n, o ) / d;
+            vec3  q = o + rd * t;
+            
+            return ( dot( q, q ) < r * r ) ? t : 1e6;
+
+        }
+
+        // From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm
+        float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra ) 
+        {
+
+            vec3 oc = ro - ce;
+            float b = dot( oc, rd );
+            float c = dot( oc, oc ) - ra * ra;
+            float h = b * b - c;
+            
+            if( h < 0.0 ) { return -1.0; }
+            
+            h = sqrt( h );
+            
+            return - b + h;
+
+        }
+
+        vec3 project() 
+        {
+
+            vec3 p = normalize( vWorldPosition );
+            vec3 camPos = cameraPosition;
+            camPos.y -= height;
+
+            float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );
+            if( intersection > 0.0 ) {
+                
+                vec3 h = vec3( 0.0, - height, 0.0 );
+                float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );
+                p = ( camPos + min( intersection, intersection2 ) * p ) / radius;
+
+            } else {
+
+                p = vec3( 0.0, 1.0, 0.0 );
+
+            }
+
+            return p;
+
+        }
+
+        #include <common>
+        #include <cube_uv_reflection_fragment>
+
+        void main() 
+        {
+
+            vec3 projectedWorldPosition = project();
+            
+            #ifdef ENVMAP_TYPE_CUBE
+
+                vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;
+
+            #else
+
+                vec3 direction = normalize( projectedWorldPosition );
+                vec2 uv = equirectUv( direction );
+                vec3 outcolor = texture2D( map, uv ).rgb;
+
+            #endif
+
+            gl_FragColor = vec4( outcolor, 1.0 );
+
+            #include <tonemapping_fragment>
+            #include <encodings_fragment>
+
+        }
+        `;
+
+		const uniforms = {
+			map: { value: texture },
+			height: { value: options?.height || 15 },
+			radius: { value: options?.radius || 100 },
+		};
+
+		const geometry = new IcosahedronGeometry( 1, 16 );
+		const material = new ShaderMaterial( {
+			uniforms,
+			fragmentShader,
+			vertexShader,
+			side: DoubleSide,
+		} );
+
+		super( geometry, material );
+
+	}
+
+	set radius( radius ) {
+
+		this.material.uniforms.radius.value = radius;
+
+	}
+
+	get radius() {
+
+		return this.material.uniforms.radius.value;
+
+	}
+
+	set height( height ) {
+
+		this.material.uniforms.height.value = height;
+
+	}
+
+	get height() {
+
+		return this.material.uniforms.height.value;
+
+	}
+
+}

package/examples/jsm/objects/Reflector.js

@@ -8,7 +8,10 @@ import {
 	UniformsUtils,
 	Vector3,
 	Vector4,
-	WebGLRenderTarget
+	WebGLRenderTarget,
+	HalfFloatType,
+	NoToneMapping,
+	LinearEncoding
 } from 'three';
 
 class Reflector extends Mesh {
@@ -48,7 +51,7 @@ class Reflector extends Mesh {
 		const textureMatrix = new Matrix4();
 		const virtualCamera = this.camera;
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample } );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
 		const material = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( shader.uniforms ),
@@ -137,18 +140,19 @@ class Reflector extends Mesh {
 			projectionMatrix.elements[ 14 ] = clipPlane.w;
 
 			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			scope.visible = false;
 
 			const currentRenderTarget = renderer.getRenderTarget();
 
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+			const currentOutputEncoding = renderer.outputEncoding;
+			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // Avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+			renderer.outputEncoding = LinearEncoding;
+			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 
@@ -159,6 +163,8 @@ class Reflector extends Mesh {
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+			renderer.outputEncoding = currentOutputEncoding;
+			renderer.toneMapping = currentToneMapping;
 
 			renderer.setRenderTarget( currentRenderTarget );
 
@@ -254,6 +260,7 @@ Reflector.ReflectorShader = {
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`

package/examples/jsm/objects/ReflectorForSSRPass.js

@@ -11,7 +11,8 @@ import {
 	DepthTexture,
 	UnsignedShortType,
 	NearestFilter,
-	Plane
+	Plane,
+	HalfFloatType
 } from 'three';
 
 class ReflectorForSSRPass extends Mesh {
@@ -104,6 +105,7 @@ class ReflectorForSSRPass extends Mesh {
 
 		const parameters = {
 			depthTexture: useDepthTexture ? depthTexture : null,
+			type: HalfFloatType
 		};
 
 		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
@@ -198,10 +200,6 @@ class ReflectorForSSRPass extends Mesh {
 			textureMatrix.multiply( virtualCamera.matrixWorldInverse );
 			textureMatrix.multiply( scope.matrixWorld );
 
-			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			// scope.visible = false;
 
 			const currentRenderTarget = renderer.getRenderTarget();

package/examples/jsm/objects/Refractor.js

@@ -9,7 +9,10 @@ import {
 	UniformsUtils,
 	Vector3,
 	Vector4,
-	WebGLRenderTarget
+	WebGLRenderTarget,
+	LinearEncoding,
+	NoToneMapping,
+	HalfFloatType
 } from 'three';
 
 class Refractor extends Mesh {
@@ -45,7 +48,7 @@ class Refractor extends Mesh {
 
 		// render target
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample } );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
 		// material
 
@@ -191,9 +194,13 @@ class Refractor extends Mesh {
 			const currentRenderTarget = renderer.getRenderTarget();
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+			const currentOutputEncoding = renderer.outputEncoding;
+			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // avoid re-computing shadows
+			renderer.outputEncoding = LinearEncoding;
+			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 			if ( renderer.autoClear === false ) renderer.clear();
@@ -201,6 +208,8 @@ class Refractor extends Mesh {
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+			renderer.outputEncoding = currentOutputEncoding;
+			renderer.toneMapping = currentToneMapping;
 			renderer.setRenderTarget( currentRenderTarget );
 
 			// restore viewport
@@ -221,10 +230,6 @@ class Refractor extends Mesh {
 
 		this.onBeforeRender = function ( renderer, scene, camera ) {
 
-			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			// ensure refractors are rendered only once per frame
 
 			if ( camera.userData.refractor === true ) return;
@@ -317,6 +322,7 @@ Refractor.RefractorShader = {
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`