[pull] dev from mrdoob:dev

examples/jsm/controls/TransformControls.js

@@ -214,6 +214,17 @@ class TransformControls extends Controls {
 		 */
 		defineProperty( 'size', 1 );
 
+		/**
+		 * The viewport rectangle, in logical (CSS) pixels with the origin at the lower-left
+		 * of the canvas. Set this when the renderer uses a sub-canvas viewport so pointer
+		 * coordinates map to the correct region. If `null`, the full canvas is used.
+		 *
+		 * @name TransformControls#viewport
+		 * @type {?Vector4}
+		 * @default null
+		 */
+		this.viewport = null;
+
 		/**
 		 * Whether dragging is currently performed or not.
 		 *
@@ -966,10 +977,29 @@ function getPointer( event ) {
 	} else {
 
 		const rect = this.domElement.getBoundingClientRect();
+		const viewport = this.viewport;
+
+		let originX, originY, regionWidth, regionHeight;
+
+		if ( viewport !== null ) {
+
+			originX = viewport.x;
+			originY = rect.height - viewport.y - viewport.w;
+			regionWidth = viewport.z;
+			regionHeight = viewport.w;
+
+		} else {
+
+			originX = 0;
+			originY = 0;
+			regionWidth = rect.width;
+			regionHeight = rect.height;
+
+		}
 
 		return {
-			x: ( event.clientX - rect.left ) / rect.width * 2 - 1,
-			y: - ( event.clientY - rect.top ) / rect.height * 2 + 1,
+			x: ( event.clientX - rect.left - originX ) / regionWidth * 2 - 1,
+			y: - ( event.clientY - rect.top - originY ) / regionHeight * 2 + 1,
 			button: event.button
 		};
 

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 );
 
 				//