TSL: Add `blendNormal()` to `BlendMode`. (#29879)

* TSL: Add `normalBlend()` to `BlendMode`.

* Rename function.

examples/webgpu_postprocessing_ssr.html

@@ -28,7 +28,7 @@
 
 	<script type="module">
 		import * as THREE from 'three';
-		import { pass, mrt, output, transformedNormalView, metalness, vec4, screenUV, color } from 'three/tsl';
+		import { pass, mrt, output, transformedNormalView, metalness, blendNormal, screenUV, color } from 'three/tsl';
 		import { ssr } from 'three/addons/tsl/display/SSRNode.js';
 
 		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
@@ -107,7 +107,7 @@
 
 			// blend SSR over beauty
 		
-			const outputNode = vec4( scenePass.rgb.mul( ssrPass.a.oneMinus() ).add( ssrPass.rgb.mul( ssrPass.a ) ), scenePass.a );
+			const outputNode = blendNormal( scenePassColor, ssrPass );
 
 			postProcessing.outputNode = outputNode;
 

src/nodes/display/BlendMode.js

@@ -1,4 +1,4 @@
-import { Fn } from '../tsl/TSLBase.js';
+import { Fn, vec4 } from '../tsl/TSLBase.js';
 import { mix, min, step } from '../math/MathNode.js';
 
 export const burn = /*@__PURE__*/ Fn( ( [ base, blend ] ) => {
@@ -52,3 +52,16 @@ export const overlay = /*@__PURE__*/ Fn( ( [ base, blend ] ) => {
 		{ name: 'blend', type: 'vec3' }
 	]
 } );
+
+export const blendNormal = /*@__PURE__*/ Fn( ( [ base, blend ] ) => {
+
+	return vec4( base.rgb.mul( blend.a.oneMinus() ).add( blend.rgb.mul( blend.a ) ), base.a );
+
+} ).setLayout( {
+	name: 'blendNormal',
+	type: 'vec4',
+	inputs: [
+		{ name: 'base', type: 'vec4' },
+		{ name: 'blend', type: 'vec4' }
+	]
+} );