Line2NodeMaterial: Avoid performance degradation with `viewportSharedTexture()`. (#32639)

Co-authored-by: sunag <sunagbrasil@gmail.com>

src/Three.TSL.js

@@ -611,6 +611,7 @@ export const viewportCoordinate = TSL.viewportCoordinate;
 export const viewportDepthTexture = TSL.viewportDepthTexture;
 export const viewportLinearDepth = TSL.viewportLinearDepth;
 export const viewportMipTexture = TSL.viewportMipTexture;
+export const viewportOpaqueMipTexture = TSL.viewportOpaqueMipTexture;
 export const viewportResolution = TSL.viewportResolution;
 export const viewportSafeUV = TSL.viewportSafeUV;
 export const viewportSharedTexture = TSL.viewportSharedTexture;

src/materials/nodes/Line2NodeMaterial.js

@@ -9,7 +9,7 @@ import { mix, smoothstep } from '../../nodes/math/MathNode.js';
 import { Fn, float, vec2, vec3, vec4, If } from '../../nodes/tsl/TSLBase.js';
 import { uv } from '../../nodes/accessors/UV.js';
 import { screenDPR, viewport } from '../../nodes/display/ScreenNode.js';
-import { viewportSharedTexture } from '../../nodes/display/ViewportSharedTextureNode.js';
+import { viewportOpaqueMipTexture } from '../../nodes/display/ViewportTextureNode.js';
 
 import { LineDashedMaterial } from '../LineDashedMaterial.js';
 import { NoBlending } from '../../constants.js';
@@ -459,7 +459,7 @@ class Line2NodeMaterial extends NodeMaterial {
 
 			const opacityNode = this.opacityNode ? float( this.opacityNode ) : materialOpacity;
 
-			this.outputNode = vec4( this.colorNode.rgb.mul( opacityNode ).add( viewportSharedTexture().rgb.mul( opacityNode.oneMinus() ) ), this.colorNode.a );
+			this.outputNode = vec4( this.colorNode.rgb.mul( opacityNode ).add( viewportOpaqueMipTexture().rgb.mul( opacityNode.oneMinus() ) ), this.colorNode.a );
 
 		}
 

src/nodes/display/ViewportTextureNode.js

@@ -226,3 +226,20 @@ export const viewportTexture = /*@__PURE__*/ nodeProxy( ViewportTextureNode ).se
  * @returns {ViewportTextureNode}
  */
 export const viewportMipTexture = /*@__PURE__*/ nodeProxy( ViewportTextureNode, null, null, { generateMipmaps: true } ).setParameterLength( 0, 3 );
+
+// Singleton instances for common usage
+const _singletonOpaqueViewportTextureNode = /*@__PURE__*/ viewportMipTexture();
+
+/**
+ * TSL function for creating a viewport texture node with enabled mipmap generation.
+ * The texture should only contain the opaque rendering objects.
+ *
+ * This should be used just in transparent or transmissive materials.
+ *
+ * @tsl
+ * @function
+ * @param {?Node} [uv=screenUV] - The uv node.
+ * @param {?Node} [level=null] - The level node.
+ * @returns {ViewportTextureNode}
+ */
+export const viewportOpaqueMipTexture = ( uv = screenUV, level = null ) => _singletonOpaqueViewportTextureNode.sample( uv, level ); // TODO: Use once() when sample() supports it

src/nodes/functions/PhysicalLightingModel.js

@@ -17,7 +17,7 @@ import { div } from '../math/OperatorNode.js';
 import { cameraPosition, cameraProjectionMatrix, cameraViewMatrix } from '../accessors/Camera.js';
 import { modelWorldMatrix } from '../accessors/ModelNode.js';
 import { screenSize } from '../display/ScreenNode.js';
-import { viewportMipTexture } from '../display/ViewportTextureNode.js';
+import { viewportMipTexture, viewportOpaqueMipTexture } from '../display/ViewportTextureNode.js';
 import { textureBicubicLevel } from '../accessors/TextureBicubic.js';
 import { Loop } from '../utils/LoopNode.js';
 import { BackSide } from '../../constants.js';
@@ -69,7 +69,7 @@ const applyIorToRoughness = /*@__PURE__*/ Fn( ( [ roughness, ior ] ) => {
 } );
 
 const viewportBackSideTexture = /*@__PURE__*/ viewportMipTexture();
-const viewportFrontSideTexture = /*@__PURE__*/ viewportMipTexture();
+const viewportFrontSideTexture = /*@__PURE__*/ viewportOpaqueMipTexture();
 
 const getTransmissionSample = /*@__PURE__*/ Fn( ( [ fragCoord, roughness, ior ], { material } ) => {