diff --git a/examples/misc_exporter_usdz.html b/examples/misc_exporter_usdz.html index 68ce134524de91..865fe26ef2a93d 100644 --- a/examples/misc_exporter_usdz.html +++ b/examples/misc_exporter_usdz.html @@ -145,7 +145,7 @@ const geometry = new THREE.PlaneGeometry(); const material = new THREE.MeshBasicMaterial( { - map: shadowTexture, blending: THREE.MultiplyBlending, toneMapped: false, premultipliedAlpha: true + map: shadowTexture, blending: THREE.MultiplyBlending, toneMapped: false } ); const mesh = new THREE.Mesh( geometry, material ); diff --git a/examples/webgl_materials_blending.html b/examples/webgl_materials_blending.html index ca5bf8c956aef3..9181e2a0d6a306 100644 --- a/examples/webgl_materials_blending.html +++ b/examples/webgl_materials_blending.html @@ -101,7 +101,6 @@ const material = new THREE.MeshBasicMaterial( { map: map } ); material.transparent = true; material.blending = blending.constant; - material.premultipliedAlpha = true; const x = ( i - blendings.length / 2 ) * 110; diff --git a/examples/webgl_materials_car.html b/examples/webgl_materials_car.html index 938b9cd154b01e..72411dc3df86d9 100644 --- a/examples/webgl_materials_car.html +++ b/examples/webgl_materials_car.html @@ -171,7 +171,7 @@ const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ), new THREE.MeshBasicMaterial( { - map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true, premultipliedAlpha: true + map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true } ) ); mesh.rotation.x = - Math.PI / 2; diff --git a/examples/webgl_materials_envmaps_groundprojected.html b/examples/webgl_materials_envmaps_groundprojected.html index 5bb296874c31d8..d475c798821b69 100644 --- a/examples/webgl_materials_envmaps_groundprojected.html +++ b/examples/webgl_materials_envmaps_groundprojected.html @@ -112,7 +112,7 @@ const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 0.655 * 4, 1.3 * 4 ), new THREE.MeshBasicMaterial( { - map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true, premultipliedAlpha: true + map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true } ) ); mesh.rotation.x = - Math.PI / 2; diff --git a/src/renderers/webgl-fallback/utils/WebGLState.js b/src/renderers/webgl-fallback/utils/WebGLState.js index d9e5d5bf820c8c..f28508b4670d1b 100644 --- a/src/renderers/webgl-fallback/utils/WebGLState.js +++ b/src/renderers/webgl-fallback/utils/WebGLState.js @@ -7,7 +7,7 @@ import { NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth } from '../../../constants.js'; import { Vector4 } from '../../../math/Vector4.js'; -import { error } from '../../../utils.js'; +import { error, warnOnce } from '../../../utils.js'; let equationToGL, factorToGL; @@ -376,14 +376,6 @@ class WebGLState { gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE ); break; - case SubtractiveBlending: - error( 'WebGLState: SubtractiveBlending requires material.premultipliedAlpha = true' ); - break; - - case MultiplyBlending: - error( 'WebGLState: MultiplyBlending requires material.premultipliedAlpha = true' ); - break; - default: error( 'WebGLState: Invalid blending: ', blending ); break; @@ -749,6 +741,17 @@ class WebGLState { this.setFlipSided( flipSided ); + if ( material.premultipliedAlpha === false ) { + + if ( material.blending === MultiplyBlending || material.blending === SubtractiveBlending ) { + + warnOnce( 'WebGLState: Material premultipliedAlpha was set to true because MultiplyBlending and SubtractiveBlending require it.' ); + material.premultipliedAlpha = true; + + } + + } + ( material.blending === NormalBlending && material.transparent === false ) ? this.setBlending( NoBlending ) : this.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.premultipliedAlpha ); diff --git a/src/renderers/webgl/WebGLState.js b/src/renderers/webgl/WebGLState.js index c49d48eff668be..78b6f0edd4eeb6 100644 --- a/src/renderers/webgl/WebGLState.js +++ b/src/renderers/webgl/WebGLState.js @@ -1,7 +1,7 @@ import { NotEqualDepth, GreaterDepth, GreaterEqualDepth, EqualDepth, LessEqualDepth, LessDepth, AlwaysDepth, NeverDepth, CullFaceFront, CullFaceBack, CullFaceNone, DoubleSide, BackSide, CustomBlending, MultiplyBlending, SubtractiveBlending, AdditiveBlending, NoBlending, NormalBlending, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, ZeroFactor, OneFactor, SrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, DstColorFactor, DstAlphaFactor, OneMinusSrcColorFactor, OneMinusSrcAlphaFactor, OneMinusDstColorFactor, OneMinusDstAlphaFactor, ConstantColorFactor, OneMinusConstantColorFactor, ConstantAlphaFactor, OneMinusConstantAlphaFactor } from '../../constants.js'; import { Color } from '../../math/Color.js'; import { Vector4 } from '../../math/Vector4.js'; -import { error } from '../../utils.js'; +import { error, warnOnce } from '../../utils.js'; const reversedFuncs = { [ NeverDepth ]: AlwaysDepth, @@ -689,14 +689,6 @@ function WebGLState( gl, extensions ) { gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE ); break; - case SubtractiveBlending: - error( 'WebGLState: SubtractiveBlending requires material.premultipliedAlpha = true' ); - break; - - case MultiplyBlending: - error( 'WebGLState: MultiplyBlending requires material.premultipliedAlpha = true' ); - break; - default: error( 'WebGLState: Invalid blending: ', blending ); break; @@ -772,6 +764,17 @@ function WebGLState( gl, extensions ) { setFlipSided( flipSided ); + if ( material.premultipliedAlpha === false ) { + + if ( material.blending === MultiplyBlending || material.blending === SubtractiveBlending ) { + + warnOnce( 'WebGLState: Material premultipliedAlpha was set to true because MultiplyBlending and SubtractiveBlending require it.' ); + material.premultipliedAlpha = true; + + } + + } + ( material.blending === NormalBlending && material.transparent === false ) ? setBlending( NoBlending ) : setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.blendColor, material.blendAlpha, material.premultipliedAlpha ); diff --git a/src/renderers/webgpu/utils/WebGPUPipelineUtils.js b/src/renderers/webgpu/utils/WebGPUPipelineUtils.js index 5b1a2e4c4da2ad..a84de1f610532a 100644 --- a/src/renderers/webgpu/utils/WebGPUPipelineUtils.js +++ b/src/renderers/webgpu/utils/WebGPUPipelineUtils.js @@ -15,7 +15,7 @@ import { NeverStencilFunc, AlwaysStencilFunc, LessStencilFunc, LessEqualStencilFunc, EqualStencilFunc, GreaterEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc } from '../../../constants.js'; -import { error } from '../../../utils.js'; +import { error, warnOnce } from '../../../utils.js'; /** * A WebGPU backend utility module for managing pipelines. @@ -120,6 +120,17 @@ class WebGPUPipelineUtils { let blending; + if ( material.premultipliedAlpha === false ) { + + if ( material.blending === MultiplyBlending || material.blending === SubtractiveBlending ) { + + warnOnce( 'WebGPURenderer: Material premultipliedAlpha was set to true because MultiplyBlending and SubtractiveBlending require it.' ); + material.premultipliedAlpha = true; + + } + + } + if ( material.blending !== NoBlending && ( material.blending !== NormalBlending || material.transparent !== false ) ) { blending = this._getBlending( material ); @@ -447,14 +458,6 @@ class WebGPUPipelineUtils { setBlend( GPUBlendFactor.SrcAlpha, GPUBlendFactor.One, GPUBlendFactor.One, GPUBlendFactor.One ); break; - case SubtractiveBlending: - error( 'WebGPURenderer: SubtractiveBlending requires material.premultipliedAlpha = true' ); - break; - - case MultiplyBlending: - error( 'WebGPURenderer: MultiplyBlending requires material.premultipliedAlpha = true' ); - break; - } }