ShaderChunk: Added transmission alpha support

examples/jsm/loaders/GLTFLoader.js

@@ -37,7 +37,6 @@ import {
 	NearestFilter,
 	NearestMipmapLinearFilter,
 	NearestMipmapNearestFilter,
-	NoBlending,
 	NumberKeyframeTrack,
 	Object3D,
 	OrthographicCamera,
@@ -3119,7 +3118,7 @@ class GLTFParser {
 
 		} else {
 
-			materialParams.blending = NoBlending;
+			materialParams.format = RGBFormat;
 			materialParams.transparent = false;
 
 			if ( alphaMode === ALPHA_MODES.MASK ) {

src/loaders/MaterialLoader.js

@@ -93,6 +93,7 @@ class MaterialLoader extends Loader {
 		if ( json.side !== undefined ) material.side = json.side;
 		if ( json.shadowSide !== undefined ) material.shadowSide = json.shadowSide;
 		if ( json.opacity !== undefined ) material.opacity = json.opacity;
+		if ( json.format !== undefined ) material.format = json.format;
 		if ( json.transparent !== undefined ) material.transparent = json.transparent;
 		if ( json.alphaTest !== undefined ) material.alphaTest = json.alphaTest;
 		if ( json.depthTest !== undefined ) material.depthTest = json.depthTest;

src/materials/Material.js

@@ -1,5 +1,5 @@
 import { EventDispatcher } from '../core/EventDispatcher.js';
-import { FrontSide, FlatShading, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, AlwaysStencilFunc, KeepStencilOp } from '../constants.js';
+import { FrontSide, FlatShading, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor, AlwaysStencilFunc, KeepStencilOp, RGBAFormat } from '../constants.js';
 import * as MathUtils from '../math/MathUtils.js';
 
 let materialId = 0;
@@ -26,6 +26,7 @@ class Material extends EventDispatcher {
 		this.vertexColors = false;
 
 		this.opacity = 1;
+		this.format = RGBAFormat;
 		this.transparent = false;
 
 		this.blendSrc = SrcAlphaFactor;
@@ -301,6 +302,7 @@ class Material extends EventDispatcher {
 		if ( this.vertexColors ) data.vertexColors = true;
 
 		if ( this.opacity < 1 ) data.opacity = this.opacity;
+		if ( this.format !== RGBAFormat ) data.format = this.format;
 		if ( this.transparent === true ) data.transparent = this.transparent;
 
 		data.depthFunc = this.depthFunc;
@@ -397,6 +399,7 @@ class Material extends EventDispatcher {
 		this.vertexColors = source.vertexColors;
 
 		this.opacity = source.opacity;
+		this.format = source.format;
 		this.transparent = source.transparent;
 
 		this.blendSrc = source.blendSrc;

src/renderers/shaders/ShaderChunk/output_fragment.glsl.js

@@ -1,11 +1,12 @@
 export default /* glsl */`
 #ifdef OPAQUE
+diffuseColor.a = 1.0;
+#endif
 
-gl_FragColor = vec4( outgoingLight, 1.0 );
-
-#else
+// https://github.com/mrdoob/three.js/pull/22425
+#ifdef USE_TRANSMISSION
+diffuseColor.a *= transmissionAlpha + 0.1;
+#endif
 
 gl_FragColor = vec4( outgoingLight, diffuseColor.a );
-
-#endif
 `;

src/renderers/shaders/ShaderChunk/transmission_fragment.glsl.js

@@ -1,6 +1,7 @@
 export default /* glsl */`
 #ifdef USE_TRANSMISSION
 
+	float transmissionAlpha = 1.0;
 	float transmissionFactor = transmission;
 	float thicknessFactor = thickness;
 
@@ -20,11 +21,12 @@ export default /* glsl */`
 	vec3 v = normalize( cameraPosition - pos );
 	vec3 n = inverseTransformDirection( normal, viewMatrix );
 
-	vec3 transmission = getIBLVolumeRefraction(
+	vec4 transmission = getIBLVolumeRefraction(
 		n, v, roughnessFactor, material.diffuseColor, material.specularColor, material.specularF90,
 		pos, modelMatrix, viewMatrix, projectionMatrix, ior, thicknessFactor,
 		attenuationTint, attenuationDistance );
 
-	totalDiffuse = mix( totalDiffuse, transmission, transmissionFactor );
+	totalDiffuse = mix( totalDiffuse, transmission.rgb, transmissionFactor );
+	transmissionAlpha = transmission.a;
 #endif
 `;

src/renderers/shaders/ShaderChunk/transmission_pars_fragment.glsl.js

@@ -53,17 +53,17 @@ export default /* glsl */`
 
 	}
 
-	vec3 getTransmissionSample( vec2 fragCoord, float roughness, float ior ) {
+	vec4 getTransmissionSample( vec2 fragCoord, float roughness, float ior ) {
 
 		float framebufferLod = log2( transmissionSamplerSize.x ) * applyIorToRoughness( roughness, ior );
 
 		#ifdef TEXTURE_LOD_EXT
 
-			return texture2DLodEXT( transmissionSamplerMap, fragCoord.xy, framebufferLod ).rgb;
+			return texture2DLodEXT( transmissionSamplerMap, fragCoord.xy, framebufferLod );
 
 		#else
 
-			return texture2D( transmissionSamplerMap, fragCoord.xy, framebufferLod ).rgb;
+			return texture2D( transmissionSamplerMap, fragCoord.xy, framebufferLod );
 
 		#endif
 
@@ -87,7 +87,7 @@ export default /* glsl */`
 
 	}
 
-	vec3 getIBLVolumeRefraction( vec3 n, vec3 v, float roughness, vec3 diffuseColor, vec3 specularColor, float specularF90,
+	vec4 getIBLVolumeRefraction( vec3 n, vec3 v, float roughness, vec3 diffuseColor, vec3 specularColor, float specularF90,
 		vec3 position, mat4 modelMatrix, mat4 viewMatrix, mat4 projMatrix, float ior, float thickness,
 		vec3 attenuationColor, float attenuationDistance ) {
 
@@ -101,14 +101,14 @@ export default /* glsl */`
 		refractionCoords /= 2.0;
 
 		// Sample framebuffer to get pixel the refracted ray hits.
-		vec3 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );
+		vec4 transmittedLight = getTransmissionSample( refractionCoords, roughness, ior );
 
-		vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight, length( transmissionRay ), attenuationColor, attenuationDistance );
+		vec3 attenuatedColor = applyVolumeAttenuation( transmittedLight.rgb, length( transmissionRay ), attenuationColor, attenuationDistance );
 
 		// Get the specular component.
 		vec3 F = EnvironmentBRDF( n, v, specularColor, specularF90, roughness );
 
-		return ( 1.0 - F ) * attenuatedColor * diffuseColor;
+		return vec4( ( 1.0 - F ) * attenuatedColor * diffuseColor, transmittedLight.a );
 
 	}
 #endif

src/renderers/webgl/WebGLProgram.js

@@ -1,7 +1,7 @@
 import { WebGLUniforms } from './WebGLUniforms.js';
 import { WebGLShader } from './WebGLShader.js';
 import { ShaderChunk } from '../shaders/ShaderChunk.js';
-import { NoBlending, NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefractionMapping, CubeUVRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, ACESFilmicToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, LinearToneMapping, GammaEncoding, RGBDEncoding, RGBM16Encoding, RGBM7Encoding, RGBEEncoding, sRGBEncoding, LinearEncoding, LogLuvEncoding, GLSL3 } from '../../constants.js';
+import { RGBFormat, NoToneMapping, AddOperation, MixOperation, MultiplyOperation, CubeRefractionMapping, CubeUVRefractionMapping, CubeUVReflectionMapping, CubeReflectionMapping, PCFSoftShadowMap, PCFShadowMap, VSMShadowMap, ACESFilmicToneMapping, CineonToneMapping, CustomToneMapping, ReinhardToneMapping, LinearToneMapping, GammaEncoding, RGBDEncoding, RGBM16Encoding, RGBM7Encoding, RGBEEncoding, sRGBEncoding, LinearEncoding, LogLuvEncoding, GLSL3 } from '../../constants.js';
 
 let programIdCount = 0;
 
@@ -670,7 +670,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			( parameters.toneMapping !== NoToneMapping ) ? getToneMappingFunction( 'toneMapping', parameters.toneMapping ) : '',
 
 			parameters.dithering ? '#define DITHERING' : '',
-			parameters.blending === NoBlending ? '#define OPAQUE' : '',
+			parameters.format === RGBFormat ? '#define OPAQUE' : '',
 
 			ShaderChunk[ 'encodings_pars_fragment' ], // this code is required here because it is used by the various encoding/decoding function defined below
 			parameters.map ? getTexelDecodingFunction( 'mapTexelToLinear', parameters.mapEncoding ) : '',

src/renderers/webgl/WebGLPrograms.js

@@ -47,7 +47,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		'numDirLights', 'numPointLights', 'numSpotLights', 'numHemiLights', 'numRectAreaLights',
 		'numDirLightShadows', 'numPointLightShadows', 'numSpotLightShadows',
 		'shadowMapEnabled', 'shadowMapType', 'toneMapping', 'physicallyCorrectLights',
-		'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering', 'blending',
+		'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering', 'format',
 		'sheenTint', 'transmission', 'transmissionMap', 'thicknessMap'
 	];
 
@@ -257,7 +257,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			numClippingPlanes: clipping.numPlanes,
 			numClipIntersection: clipping.numIntersection,
 
-			blending: material.blending,
+			format: material.format,
 			dithering: material.dithering,
 
 			shadowMapEnabled: renderer.shadowMap.enabled && shadows.length > 0,