Fix examples to avoid fading alpha (#33450)

Author: gkjohnson

examples/jsm/tsl/display/PixelationPassNode.js

@@ -1,5 +1,5 @@
 import { NearestFilter, Vector4, TempNode, NodeUpdateType, PassNode } from 'three/webgpu';
-import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec3, clamp, floor, dot, smoothstep, If, sign, step, mrt, output, normalView, property } from 'three/tsl';
+import { nodeObject, Fn, float, uv, uniform, convertToTexture, vec2, vec3, clamp, floor, dot, smoothstep, If, sign, step, mrt, output, normalView, property, vec4 } from 'three/tsl';
 
 /**
  * A inner node definition that implements the actual pixelation TSL code.
@@ -202,7 +202,7 @@ class PixelationNode extends TempNode {
 
 			const strength = dei.greaterThan( 0 ).select( float( 1.0 ).sub( dei.mul( this.depthEdgeStrength ) ), nei.mul( this.normalEdgeStrength ).add( 1 ) );
 
-			return texel.mul( strength );
+			return vec4( texel.mul( strength ).rgb, texel.a );
 
 		} );
 

examples/webgpu_mesh_batch.html

@@ -38,7 +38,7 @@
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { radixSort } from 'three/addons/utils/SortUtils.js';
 
-		import { normalView, directionToColor, diffuseColor } from 'three/tsl';
+		import { normalView, directionToColor, diffuseColor, vec4 } from 'three/tsl';
 
 		let camera, scene, renderer;
 		let controls;
@@ -126,7 +126,10 @@
 			if ( ! material ) {
 
 				material = new THREE.MeshBasicNodeMaterial();
-				material.outputNode = diffuseColor.mul( directionToColor( normalView ).y.add( 0.5 ) );
+				material.outputNode = vec4(
+					diffuseColor.mul( directionToColor( normalView ).y.add( 0.5 ) ).rgb,
+					diffuseColor.a,
+				);
 
 	}
 

examples/webgpu_postprocessing_motion_blur.html

@@ -32,7 +32,7 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
-			import { pass, texture, uniform, output, mrt, velocity, uv, screenUV } from 'three/tsl';
+			import { pass, texture, uniform, output, mrt, velocity, uv, screenUV, vec4 } from 'three/tsl';
 			import { motionBlur } from 'three/addons/tsl/display/MotionBlur.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -194,7 +194,7 @@
 				const vignette = screenUV.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus();
 
 				renderPipeline = new THREE.RenderPipeline( renderer );
-				renderPipeline.outputNode = mBlur.mul( vignette );
+				renderPipeline.outputNode = vec4( mBlur.mul( vignette ).rgb, mBlur.a );
 
 				//