@motion-core/motion-gpu 0.5.0 → 0.7.0

package/src/lib/core/pointer.ts

@@ -0,0 +1,177 @@
+import type { RenderMode } from './types.js';
+
+/**
+ * Pointer kind normalized from DOM `PointerEvent.pointerType`.
+ */
+export type PointerKind = 'mouse' | 'pen' | 'touch';
+
+/**
+ * 2D tuple used by pointer coordinate payloads.
+ */
+export type PointerVec2 = [number, number];
+
+/**
+ * Normalized pointer coordinates exposed to runtime hooks.
+ */
+export interface PointerPoint {
+	/**
+	 * CSS pixel coordinates relative to canvas top-left corner.
+	 */
+	px: PointerVec2;
+	/**
+	 * UV coordinates in shader-friendly orientation (`y` grows upward).
+	 */
+	uv: PointerVec2;
+	/**
+	 * Normalized device coordinates (`-1..1`, `y` grows upward).
+	 */
+	ndc: PointerVec2;
+}
+
+/**
+ * Mutable pointer state snapshot exposed by `usePointer`.
+ */
+export interface PointerState extends PointerPoint {
+	inside: boolean;
+	pressed: boolean;
+	dragging: boolean;
+	pointerType: PointerKind | null;
+	pointerId: number | null;
+	button: number | null;
+	buttons: number;
+	time: number;
+	downPx: PointerVec2 | null;
+	downUv: PointerVec2 | null;
+	deltaPx: PointerVec2;
+	deltaUv: PointerVec2;
+	velocityPx: PointerVec2;
+	velocityUv: PointerVec2;
+}
+
+/**
+ * Modifier key snapshot attached to pointer click events.
+ */
+export interface PointerModifiers {
+	alt: boolean;
+	ctrl: boolean;
+	shift: boolean;
+	meta: boolean;
+}
+
+/**
+ * Click/tap payload produced by `usePointer`.
+ */
+export interface PointerClick extends PointerPoint {
+	id: number;
+	time: number;
+	pointerType: PointerKind;
+	pointerId: number;
+	button: number;
+	modifiers: PointerModifiers;
+}
+
+/**
+ * Frame wake-up strategy for pointer-driven interactions.
+ */
+export type PointerFrameRequestMode = 'advance' | 'auto' | 'invalidate' | 'none';
+
+/**
+ * Returns a monotonic timestamp in seconds.
+ */
+export function getPointerNowSeconds(): number {
+	if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
+		return performance.now() / 1000;
+	}
+
+	return Date.now() / 1000;
+}
+
+/**
+ * Creates the initial pointer state snapshot.
+ */
+export function createInitialPointerState(): PointerState {
+	return {
+		px: [0, 0],
+		uv: [0, 0],
+		ndc: [-1, -1],
+		inside: false,
+		pressed: false,
+		dragging: false,
+		pointerType: null,
+		pointerId: null,
+		button: null,
+		buttons: 0,
+		time: getPointerNowSeconds(),
+		downPx: null,
+		downUv: null,
+		deltaPx: [0, 0],
+		deltaUv: [0, 0],
+		velocityPx: [0, 0],
+		velocityUv: [0, 0]
+	};
+}
+
+/**
+ * Normalized coordinate payload for a pointer position against a canvas rect.
+ */
+export interface PointerCoordinates extends PointerPoint {
+	inside: boolean;
+}
+
+/**
+ * Converts client coordinates to canvas-relative pointer coordinates.
+ */
+export function getPointerCoordinates(
+	clientX: number,
+	clientY: number,
+	rect: Pick<DOMRectReadOnly, 'height' | 'left' | 'top' | 'width'>
+): PointerCoordinates {
+	const width = Math.max(rect.width, 1);
+	const height = Math.max(rect.height, 1);
+	const nx = (clientX - rect.left) / width;
+	const ny = (clientY - rect.top) / height;
+	const pxX = clientX - rect.left;
+	const pxY = clientY - rect.top;
+	const uvX = nx;
+	const uvY = 1 - ny;
+
+	return {
+		px: [pxX, pxY],
+		uv: [uvX, uvY],
+		ndc: [nx * 2 - 1, uvY * 2 - 1],
+		inside: nx >= 0 && nx <= 1 && ny >= 0 && ny <= 1
+	};
+}
+
+/**
+ * Resolves frame wake-up strategy for pointer-driven updates.
+ */
+export function resolvePointerFrameRequestMode(
+	mode: PointerFrameRequestMode,
+	renderMode: RenderMode
+): Exclude<PointerFrameRequestMode, 'auto'> {
+	if (mode !== 'auto') {
+		return mode;
+	}
+
+	if (renderMode === 'manual') {
+		return 'advance';
+	}
+
+	if (renderMode === 'on-demand') {
+		return 'invalidate';
+	}
+
+	return 'none';
+}
+
+/**
+ * Normalizes unknown pointer kind values to the public `PointerKind`.
+ */
+export function normalizePointerKind(pointerType: string): PointerKind {
+	if (pointerType === 'mouse' || pointerType === 'pen' || pointerType === 'touch') {
+		return pointerType;
+	}
+
+	return 'mouse';
+}

package/src/lib/core/renderer.ts

@@ -18,11 +18,12 @@ import {
 } from './textures.js';
 import { packUniformsInto } from './uniforms.js';
 import {
-	buildComputeShaderSource,
-	buildPingPongComputeShaderSource,
+	buildComputeShaderSourceWithMap,
+	buildPingPongComputeShaderSourceWithMap,
 	extractWorkgroupSize,
 	storageTextureSampleScalarType
 } from './compute-shader.js';
+import { createComputeStorageBindGroupCache } from './compute-bindgroup-cache.js';
 import { normalizeStorageBufferDefinition } from './storage-buffers.js';
 import type {
 	AnyPass,
@@ -62,6 +63,7 @@ interface RuntimeTextureBinding {
 	key: string;
 	samplerBinding: number;
 	textureBinding: number;
+	fragmentVisible: boolean;
 	sampler: GPUSampler;
 	fallbackTexture: GPUTexture;
 	fallbackView: GPUTextureView;
@@ -109,6 +111,8 @@ interface PingPongTexturePair {
 	textureB: GPUTexture;
 	viewB: GPUTextureView;
 	bindGroupLayout: GPUBindGroupLayout;
+	readAWriteBBindGroup: GPUBindGroup | null;
+	readBWriteABindGroup: GPUBindGroup | null;
 }
 
 /**
@@ -187,6 +191,7 @@ async function assertCompilation(
 	options?: {
 		lineMap?: ShaderLineMap;
 		fragmentSource?: string;
+		computeSource?: string;
 		includeSources?: Record<string, string>;
 		defineBlockSource?: string;
 		materialSource?: {
@@ -197,6 +202,8 @@ async function assertCompilation(
 			functionName?: string;
 		} | null;
 		runtimeContext?: ShaderCompilationRuntimeContext;
+		errorPrefix?: string;
+		shaderStage?: 'fragment' | 'compute';
 	}
 ): Promise<void> {
 	const info = await module.getCompilationInfo();
@@ -227,11 +234,14 @@ async function assertCompilation(
 			return `[${contextLabel.join(' | ')}] ${diagnostic.message}`;
 		})
 		.join('\n');
-	const error = new Error(`WGSL compilation failed:\n${summary}`);
+	const prefix = options?.errorPrefix ?? 'WGSL compilation failed';
+	const error = new Error(`${prefix}:\n${summary}`);
 	throw attachShaderCompilationDiagnostics(error, {
 		kind: 'shader-compilation',
+		...(options?.shaderStage !== undefined ? { shaderStage: options.shaderStage } : {}),
 		diagnostics,
 		fragmentSource: options?.fragmentSource ?? '',
+		...(options?.computeSource !== undefined ? { computeSource: options.computeSource } : {}),
 		includeSources: options?.includeSources ?? {},
 		...(options?.defineBlockSource !== undefined
 			? { defineBlockSource: options.defineBlockSource }
@@ -245,6 +255,64 @@ function toSortedUniqueStrings(values: string[]): string[] {
 	return Array.from(new Set(values)).sort((a, b) => a.localeCompare(b));
 }
 
+function extractGeneratedLineFromComputeError(message: string): number | null {
+	const lineMatch = message.match(/\bline\s+(\d+)\b/i);
+	if (lineMatch) {
+		const parsed = Number.parseInt(lineMatch[1] ?? '', 10);
+		if (Number.isFinite(parsed) && parsed > 0) {
+			return parsed;
+		}
+	}
+
+	const colonMatch = message.match(/:(\d+):\d+/);
+	if (colonMatch) {
+		const parsed = Number.parseInt(colonMatch[1] ?? '', 10);
+		if (Number.isFinite(parsed) && parsed > 0) {
+			return parsed;
+		}
+	}
+
+	return null;
+}
+
+function toComputeCompilationError(input: {
+	error: unknown;
+	lineMap: ShaderLineMap;
+	computeSource: string;
+	runtimeContext: ShaderCompilationRuntimeContext;
+}): Error {
+	const baseError =
+		input.error instanceof Error ? input.error : new Error(String(input.error ?? 'Unknown error'));
+	const generatedLine = extractGeneratedLineFromComputeError(baseError.message) ?? 0;
+	const sourceLocation = generatedLine > 0 ? (input.lineMap[generatedLine] ?? null) : null;
+	const diagnostics = [
+		{
+			generatedLine,
+			message: baseError.message,
+			sourceLocation
+		}
+	];
+	const sourceLabel = formatShaderSourceLocation(sourceLocation);
+	const generatedLineLabel = generatedLine > 0 ? `generated WGSL line ${generatedLine}` : null;
+	const contextLabel = [sourceLabel, generatedLineLabel].filter((value) => Boolean(value));
+	const summary =
+		contextLabel.length > 0
+			? `[${contextLabel.join(' | ')}] ${baseError.message}`
+			: baseError.message;
+	const wrapped = new Error(`Compute shader compilation failed:\n${summary}`);
+
+	return attachShaderCompilationDiagnostics(wrapped, {
+		kind: 'shader-compilation',
+		shaderStage: 'compute',
+		diagnostics,
+		fragmentSource: '',
+		computeSource: input.computeSource,
+		includeSources: {},
+		materialSource: null,
+		runtimeContext: input.runtimeContext
+	});
+}
+
 function buildPassGraphSnapshot(
 	passes: AnyPass[] | undefined
 ): NonNullable<ShaderCompilationRuntimeContext['passGraph']> {
@@ -667,10 +735,13 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 	try {
 		const runtimeContext = buildShaderCompilationRuntimeContext(options);
 		const convertLinearToSrgb = shouldConvertLinearToSrgb(options.outputColorSpace, format);
+		const fragmentTextureKeys = options.textureKeys.filter(
+			(key) => options.textureDefinitions[key]?.fragmentVisible !== false
+		);
 		const builtShader = buildShaderSourceWithMap(
 			options.fragmentWgsl,
 			options.uniformLayout,
-			options.textureKeys,
+			fragmentTextureKeys,
 			{
 				convertLinearToSrgb,
 				fragmentLineMap: options.fragmentLineMap,
@@ -702,13 +773,18 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 		const storageBufferDefinitions = options.storageBufferDefinitions ?? {};
 		const storageTextureKeys = options.storageTextureKeys ?? [];
 		const storageTextureKeySet = new Set(storageTextureKeys);
-		const textureBindings = options.textureKeys.map((key, index): RuntimeTextureBinding => {
+		const fragmentTextureIndexByKey = new Map(
+			fragmentTextureKeys.map((key, index) => [key, index] as const)
+		);
+		const textureBindings = options.textureKeys.map((key): RuntimeTextureBinding => {
 			const config = normalizedTextureDefinitions[key];
 			if (!config) {
 				throw new Error(`Missing texture definition for "${key}"`);
 			}
 
-			const { samplerBinding, textureBinding } = getTextureBindings(index);
+			const fragmentTextureIndex = fragmentTextureIndexByKey.get(key);
+			const fragmentVisible = fragmentTextureIndex !== undefined;
+			const { samplerBinding, textureBinding } = getTextureBindings(fragmentTextureIndex ?? 0);
 			const sampler = device.createSampler({
 				magFilter: config.filter,
 				minFilter: config.filter,
@@ -731,6 +807,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				key,
 				samplerBinding,
 				textureBinding,
+				fragmentVisible,
 				sampler,
 				fallbackTexture,
 				fallbackView,
@@ -779,9 +856,49 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 
 			return runtimeBinding;
 		});
+		const textureBindingByKey = new Map(textureBindings.map((binding) => [binding.key, binding]));
+		const fragmentTextureBindings = textureBindings.filter((binding) => binding.fragmentVisible);
+
+		const computeStorageBufferLayoutEntries: GPUBindGroupLayoutEntry[] = storageBufferKeys.map(
+			(key, index) => {
+				const def = storageBufferDefinitions[key];
+				const access = def?.access ?? 'read-write';
+				const bufferType: GPUBufferBindingType =
+					access === 'read' ? 'read-only-storage' : 'storage';
+				return {
+					binding: index,
+					visibility: GPUShaderStage.COMPUTE,
+					buffer: { type: bufferType }
+				};
+			}
+		);
+		const computeStorageBufferTopologyKey = storageBufferKeys
+			.map((key) => `${key}:${storageBufferDefinitions[key]?.access ?? 'read-write'}`)
+			.join('|');
+
+		const computeStorageTextureLayoutEntries: GPUBindGroupLayoutEntry[] = storageTextureKeys.map(
+			(key, index) => {
+				const config = normalizedTextureDefinitions[key];
+				return {
+					binding: index,
+					visibility: GPUShaderStage.COMPUTE,
+					storageTexture: {
+						access: 'write-only' as GPUStorageTextureAccess,
+						format: (config?.format ?? 'rgba8unorm') as GPUTextureFormat,
+						viewDimension: '2d'
+					}
+				};
+			}
+		);
+		const computeStorageTextureTopologyKey = storageTextureKeys
+			.map((key) => `${key}:${normalizedTextureDefinitions[key]?.format ?? 'rgba8unorm'}`)
+			.join('|');
+
+		const computeStorageBufferBindGroupCache = createComputeStorageBindGroupCache(device);
+		const computeStorageTextureBindGroupCache = createComputeStorageBindGroupCache(device);
 
 		const bindGroupLayout = device.createBindGroupLayout({
-			entries: createBindGroupLayoutEntries(textureBindings)
+			entries: createBindGroupLayoutEntries(fragmentTextureBindings)
 		});
 		const fragmentStorageBindGroupLayout =
 			storageBufferKeys.length > 0
@@ -977,7 +1094,9 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				viewA: textureA.createView(),
 				textureB,
 				viewB: textureB.createView(),
-				bindGroupLayout
+				bindGroupLayout,
+				readAWriteBBindGroup: null,
+				readBWriteABindGroup: null
 			};
 			pingPongTexturePairs.set(target, pair);
 			return pair;
@@ -1028,8 +1147,8 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 			const isPingPongPipeline = Boolean(
 				buildOptions.pingPongTarget && buildOptions.pingPongFormat
 			);
-			const shaderCode = isPingPongPipeline
-				? buildPingPongComputeShaderSource({
+			const builtComputeShader = isPingPongPipeline
+				? buildPingPongComputeShaderSourceWithMap({
 						compute: buildOptions.computeSource,
 						uniformLayout: options.uniformLayout,
 						storageBufferKeys,
@@ -1037,7 +1156,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 						target: buildOptions.pingPongTarget!,
 						targetFormat: buildOptions.pingPongFormat!
 					})
-				: buildComputeShaderSource({
+				: buildComputeShaderSourceWithMap({
 						compute: buildOptions.computeSource,
 						uniformLayout: options.uniformLayout,
 						storageBufferKeys,
@@ -1046,7 +1165,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 						storageTextureDefinitions: storageTextureDefs
 					});
 
-			const computeShaderModule = device.createShaderModule({ code: shaderCode });
+			const computeShaderModule = device.createShaderModule({ code: builtComputeShader.code });
 			const workgroupSize = extractWorkgroupSize(buildOptions.computeSource);
 
 			// Compute bind group layout: group(0)=uniforms, group(1)=storage buffers, group(2)=storage textures
@@ -1065,20 +1184,9 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				]
 			});
 
-			const storageBGLEntries: GPUBindGroupLayoutEntry[] = storageBufferKeys.map((key, index) => {
-				const def = storageBufferDefinitions[key];
-				const access = def?.access ?? 'read-write';
-				const bufferType: GPUBufferBindingType =
-					access === 'read' ? 'read-only-storage' : 'storage';
-				return {
-					binding: index,
-					visibility: GPUShaderStage.COMPUTE,
-					buffer: { type: bufferType }
-				};
-			});
 			const storageBGL =
-				storageBGLEntries.length > 0
-					? device.createBindGroupLayout({ entries: storageBGLEntries })
+				computeStorageBufferLayoutEntries.length > 0
+					? device.createBindGroupLayout({ entries: computeStorageBufferLayoutEntries })
 					: null;
 
 			const storageTextureBGLEntries: GPUBindGroupLayoutEntry[] = isPingPongPipeline
@@ -1104,18 +1212,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 							}
 						}
 					]
-				: storageTextureKeys.map((key, index) => {
-						const texDef = options.textureDefinitions[key];
-						return {
-							binding: index,
-							visibility: GPUShaderStage.COMPUTE,
-							storageTexture: {
-								access: 'write-only' as GPUStorageTextureAccess,
-								format: (texDef?.format ?? 'rgba8unorm') as GPUTextureFormat,
-								viewDimension: '2d'
-							}
-						};
-					});
+				: computeStorageTextureLayoutEntries;
 			const storageTextureBGL =
 				storageTextureBGLEntries.length > 0
 					? device.createBindGroupLayout({ entries: storageTextureBGLEntries })
@@ -1133,13 +1230,23 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 			}
 
 			const computePipelineLayout = device.createPipelineLayout({ bindGroupLayouts });
-			const pipeline = device.createComputePipeline({
-				layout: computePipelineLayout,
-				compute: {
-					module: computeShaderModule,
-					entryPoint: 'compute'
-				}
-			});
+			let pipeline: GPUComputePipeline;
+			try {
+				pipeline = device.createComputePipeline({
+					layout: computePipelineLayout,
+					compute: {
+						module: computeShaderModule,
+						entryPoint: 'compute'
+					}
+				});
+			} catch (error) {
+				throw toComputeCompilationError({
+					error,
+					lineMap: builtComputeShader.lineMap,
+					computeSource: buildOptions.computeSource,
+					runtimeContext
+				});
+			}
 
 			// Build uniform bind group for compute (group 0)
 			const computeUniformBindGroup = device.createBindGroup({
@@ -1162,63 +1269,49 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 
 		// Helper to get the storage bind group for dispatch
 		const getComputeStorageBindGroup = (): GPUBindGroup | null => {
-			if (storageBufferKeys.length === 0) {
+			if (computeStorageBufferLayoutEntries.length === 0) {
 				return null;
 			}
-			// Rebuild bind group with current storage buffers
-			const storageBGLEntries: GPUBindGroupLayoutEntry[] = storageBufferKeys.map((key, index) => {
-				const def = storageBufferDefinitions[key];
-				const access = def?.access ?? 'read-write';
-				const bufferType: GPUBufferBindingType =
-					access === 'read' ? 'read-only-storage' : 'storage';
-				return {
-					binding: index,
-					visibility: GPUShaderStage.COMPUTE,
-					buffer: { type: bufferType }
-				};
-			});
-			const storageBGL = device.createBindGroupLayout({ entries: storageBGLEntries });
-			const storageEntries: GPUBindGroupEntry[] = storageBufferKeys.map((key, index) => {
+			const resources: GPUBuffer[] = storageBufferKeys.map((key) => {
 				const buffer = storageBufferMap.get(key);
 				if (!buffer) {
 					throw new Error(`Storage buffer "${key}" not allocated.`);
 				}
+				return buffer;
+			});
+			const storageEntries: GPUBindGroupEntry[] = resources.map((buffer, index) => {
 				return { binding: index, resource: { buffer } };
 			});
-			return device.createBindGroup({
-				layout: storageBGL,
-				entries: storageEntries
+			return computeStorageBufferBindGroupCache.getOrCreate({
+				topologyKey: computeStorageBufferTopologyKey,
+				layoutEntries: computeStorageBufferLayoutEntries,
+				bindGroupEntries: storageEntries,
+				resourceRefs: resources
 			});
 		};
 
 		// Helper to get the storage texture bind group for compute dispatch (group 2)
 		const getComputeStorageTextureBindGroup = (): GPUBindGroup | null => {
-			if (storageTextureKeys.length === 0) {
+			if (computeStorageTextureLayoutEntries.length === 0) {
 				return null;
 			}
-			const entries: GPUBindGroupLayoutEntry[] = storageTextureKeys.map((key, index) => {
-				const texDef = options.textureDefinitions[key];
-				return {
-					binding: index,
-					visibility: GPUShaderStage.COMPUTE,
-					storageTexture: {
-						access: 'write-only' as GPUStorageTextureAccess,
-						format: (texDef?.format ?? 'rgba8unorm') as GPUTextureFormat,
-						viewDimension: '2d' as GPUTextureViewDimension
-					}
-				};
-			});
-			const bgl = device.createBindGroupLayout({ entries });
-
-			const bgEntries: GPUBindGroupEntry[] = storageTextureKeys.map((key, index) => {
-				const binding = textureBindings.find((b) => b.key === key);
+			const resources: GPUTextureView[] = storageTextureKeys.map((key) => {
+				const binding = textureBindingByKey.get(key);
 				if (!binding || !binding.texture) {
 					throw new Error(`Storage texture "${key}" not allocated.`);
 				}
-				return { binding: index, resource: binding.view };
+				return binding.view;
+			});
+			const bgEntries: GPUBindGroupEntry[] = resources.map((view, index) => {
+				return { binding: index, resource: view };
 			});
 
-			return device.createBindGroup({ layout: bgl, entries: bgEntries });
+			return computeStorageTextureBindGroupCache.getOrCreate({
+				topologyKey: computeStorageTextureTopologyKey,
+				layoutEntries: computeStorageTextureLayoutEntries,
+				bindGroupEntries: bgEntries,
+				resourceRefs: resources
+			});
 		};
 
 		// Helper to get ping-pong storage texture bind group for compute dispatch (group 2)
@@ -1227,15 +1320,28 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 			readFromA: boolean
 		): GPUBindGroup => {
 			const pair = ensurePingPongTexturePair(target);
-			const readView = readFromA ? pair.viewA : pair.viewB;
-			const writeView = readFromA ? pair.viewB : pair.viewA;
-			return device.createBindGroup({
-				layout: pair.bindGroupLayout,
-				entries: [
-					{ binding: 0, resource: readView },
-					{ binding: 1, resource: writeView }
-				]
-			});
+			if (readFromA) {
+				if (!pair.readAWriteBBindGroup) {
+					pair.readAWriteBBindGroup = device.createBindGroup({
+						layout: pair.bindGroupLayout,
+						entries: [
+							{ binding: 0, resource: pair.viewA },
+							{ binding: 1, resource: pair.viewB }
+						]
+					});
+				}
+				return pair.readAWriteBBindGroup;
+			}
+			if (!pair.readBWriteABindGroup) {
+				pair.readBWriteABindGroup = device.createBindGroup({
+					layout: pair.bindGroupLayout,
+					entries: [
+						{ binding: 0, resource: pair.viewB },
+						{ binding: 1, resource: pair.viewA }
+					]
+				});
+			}
+			return pair.readBWriteABindGroup;
 		};
 
 		const frameBuffer = device.createBuffer({
@@ -1267,7 +1373,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				{ binding: UNIFORM_BINDING, resource: { buffer: uniformBuffer } }
 			];
 
-			for (const binding of textureBindings) {
+			for (const binding of fragmentTextureBindings) {
 				entries.push({
 					binding: binding.samplerBinding,
 					resource: binding.sampler
@@ -1839,7 +1945,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				if (storageTextureKeySet.has(binding.key)) continue;
 				const nextTexture =
 					textures[binding.key] ?? normalizedTextureDefinitions[binding.key]?.source ?? null;
-				if (updateTextureBinding(binding, nextTexture, renderMode)) {
+				if (updateTextureBinding(binding, nextTexture, renderMode) && binding.fragmentVisible) {
 					bindGroupDirty = true;
 				}
 			}