diff --git a/examples/jsm/loaders/GLTFLoader.js b/examples/jsm/loaders/GLTFLoader.js index fff0816803bbd5..65c85b96290e83 100644 --- a/examples/jsm/loaders/GLTFLoader.js +++ b/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 ) { diff --git a/src/loaders/MaterialLoader.js b/src/loaders/MaterialLoader.js index 1a88bc44ed8e5b..5a83708ee521c8 100644 --- a/src/loaders/MaterialLoader.js +++ b/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; diff --git a/src/materials/Material.js b/src/materials/Material.js index 9a175ac115706a..e9a179c68ab771 100644 --- a/src/materials/Material.js +++ b/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; diff --git a/src/renderers/shaders/ShaderChunk/output_fragment.glsl.js b/src/renderers/shaders/ShaderChunk/output_fragment.glsl.js index b700b6a9ef0a40..68a0374da66a76 100644 --- a/src/renderers/shaders/ShaderChunk/output_fragment.glsl.js +++ b/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 `; diff --git a/src/renderers/shaders/ShaderChunk/transmission_fragment.glsl.js b/src/renderers/shaders/ShaderChunk/transmission_fragment.glsl.js index e45b9ea7138bad..11120eccab33dd 100644 --- a/src/renderers/shaders/ShaderChunk/transmission_fragment.glsl.js +++ b/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 `; diff --git a/src/renderers/shaders/ShaderChunk/transmission_pars_fragment.glsl.js b/src/renderers/shaders/ShaderChunk/transmission_pars_fragment.glsl.js index 5df0f1ff32ea0e..e0f229164c3cb5 100644 --- a/src/renderers/shaders/ShaderChunk/transmission_pars_fragment.glsl.js +++ b/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 diff --git a/src/renderers/webgl/WebGLProgram.js b/src/renderers/webgl/WebGLProgram.js index 6377eef9251dd9..df37d8849ab23f 100644 --- a/src/renderers/webgl/WebGLProgram.js +++ b/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 ) : '', diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js index bfcc1e621608bd..27e9ef78f8bb36 100644 --- a/src/renderers/webgl/WebGLPrograms.js +++ b/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,