TSL: Rename premult to premultiplyAlpha (#31240)

* rename `premult`-> `premultiplyAlpha`

* use native function

* Update GaussianBlurNode.js

* Update Three.TSL.js

* Update SSAAPassNode.js

Author: sunag

examples/jsm/tsl/display/GaussianBlurNode.js

@@ -1,5 +1,5 @@
 import { RenderTarget, Vector2, NodeMaterial, RendererUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
-import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, mul, premult, unpremult } from 'three/tsl';
+import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, mul, premultiplyAlpha, unpremultiplyAlpha } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
 
@@ -249,8 +249,8 @@ class GaussianBlurNode extends TempNode {
 
 			// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html
 
-			sampleTexture = ( uv ) => premult( textureNode.sample( uv ) );
-			output = ( color ) => unpremult( color );
+			sampleTexture = ( uv ) => premultiplyAlpha( textureNode.sample( uv ) );
+			output = ( color ) => unpremultiplyAlpha( color );
 
 		} else {
 

examples/jsm/tsl/display/SSAAPassNode.js

@@ -1,5 +1,5 @@
 import { AdditiveBlending, Color, Vector2, RendererUtils, PassNode, QuadMesh, NodeMaterial } from 'three/webgpu';
-import { nodeObject, uniform, mrt, texture, getTextureIndex } from 'three/tsl';
+import { nodeObject, uniform, mrt, texture, getTextureIndex, unpremultiplyAlpha } from 'three/tsl';
 
 const _size = /*@__PURE__*/ new Vector2();
 
@@ -277,11 +277,11 @@ class SSAAPassNode extends PassNode {
 		}
 
 		this._quadMesh.material = new NodeMaterial();
-		this._quadMesh.material.fragmentNode = sampleTexture;
+		this._quadMesh.material.fragmentNode = unpremultiplyAlpha( sampleTexture );
 		this._quadMesh.material.transparent = true;
 		this._quadMesh.material.depthTest = false;
 		this._quadMesh.material.depthWrite = false;
-		//this._quadMesh.material.premultipliedAlpha = true;
+		this._quadMesh.material.premultipliedAlpha = true;
 		this._quadMesh.material.blending = AdditiveBlending;
 		this._quadMesh.material.name = 'SSAA';
 

examples/jsm/tsl/display/hashBlur.js

@@ -1,4 +1,4 @@
-import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premult, unpremult } from 'three/tsl';
+import { float, Fn, vec2, uv, sin, rand, degrees, cos, Loop, vec4, premultiplyAlpha, unpremultiplyAlpha } from 'three/tsl';
 
 /**
  * Applies a hash blur effect to the given texture node.
@@ -34,7 +34,7 @@ export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0
 
 		}
 
-		return premultipliedAlpha ? premult( sample ) : sample;
+		return premultipliedAlpha ? premultiplyAlpha( sample ) : sample;
 
 	};
 
@@ -51,6 +51,6 @@ export const hashBlur = /*#__PURE__*/ Fn( ( [ textureNode, bluramount = float( 0
 
 	blurred_image.divAssign( repeats );
 
-	return premultipliedAlpha ? unpremult( blurred_image ) : blurred_image;
+	return premultipliedAlpha ? unpremultiplyAlpha( blurred_image ) : blurred_image;
 
 } );

src/Three.TSL.js

@@ -386,7 +386,7 @@ export const pow = TSL.pow;
 export const pow2 = TSL.pow2;
 export const pow3 = TSL.pow3;
 export const pow4 = TSL.pow4;
-export const premult = TSL.premult;
+export const premultiplyAlpha = TSL.premultiplyAlpha;
 export const property = TSL.property;
 export const radians = TSL.radians;
 export const rand = TSL.rand;
@@ -511,7 +511,7 @@ export const uniformArray = TSL.uniformArray;
 export const uniformGroup = TSL.uniformGroup;
 export const uniformTexture = TSL.uniformTexture;
 export const uniforms = TSL.uniforms;
-export const unpremult = TSL.unpremult;
+export const unpremultiplyAlpha = TSL.unpremultiplyAlpha;
 export const userData = TSL.userData;
 export const uv = TSL.uv;
 export const uvec2 = TSL.uvec2;

src/materials/nodes/NodeMaterial.js

@@ -24,6 +24,7 @@ import NodeMaterialObserver from './manager/NodeMaterialObserver.js';
 import getAlphaHashThreshold from '../../nodes/functions/material/getAlphaHashThreshold.js';
 import { modelViewMatrix } from '../../nodes/accessors/ModelNode.js';
 import { vertexColor } from '../../nodes/accessors/VertexColorNode.js';
+import { premultiplyAlpha } from '../../nodes/display/BlendModes.js';
 
 /**
  * Base class for all node materials.
@@ -1086,9 +1087,7 @@ class NodeMaterial extends Material {
 	 */
 	setupPremultipliedAlpha( builder, outputNode ) {
 
-		outputNode = vec4( outputNode.rgb.mul( outputNode.a ), outputNode.a );
-
-		return outputNode;
+		return premultiplyAlpha( outputNode );
 
 	}
 

src/nodes/display/BlendModes.js

@@ -143,7 +143,7 @@ export const blendColor = /*@__PURE__*/ Fn( ( [ base, blend ] ) => {
  * @param {Node<vec4>} color - The input color with non-premultiplied alpha.
  * @return {Node<vec4>} The color with premultiplied alpha.
  */
-export const premult = /*@__PURE__*/ Fn( ( [ color ] ) => {
+export const premultiplyAlpha = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 	return vec4( color.rgb.mul( color.a ), color.a );
 
@@ -162,7 +162,7 @@ export const premult = /*@__PURE__*/ Fn( ( [ color ] ) => {
  * @param {Node<vec4>} color - The input color with premultiplied alpha.
  * @return {Node<vec4>} The color with non-premultiplied alpha.
  */
-export const unpremult = /*@__PURE__*/ Fn( ( [ color ] ) => {
+export const unpremultiplyAlpha = /*@__PURE__*/ Fn( ( [ color ] ) => {
 
 	If( color.a.equal( 0.0 ), () => vec4( 0.0 ) );