WebGPURenderer: Fix stencilBack not matching stencilFront in pipeline

[jpt]

Related issue: N/A

Description

WebGPUPipelineUtils sets stencilBack = {} when creating render pipelines, which means back-facing fragments use default stencil ops (all keep). this doesn't match the WebGL backend, where gl.stencilOp() applies to both faces

any stencil technique using DoubleSide breaks on the WebGPU backend when geometry contains back-facing triangles -e.g. stencil XOR parity fill for font rendering, where holes have opposite winding - noticed this while working on adding infinitely scalable vector text to three-text with TSL :)

fix: stencilBack = stencilFront

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	359.14 85.24	359.14 85.24	+0 B +0 B
WebGPU	623.22 173.39	623.22 173.39	-1 B -2 B
WebGPU Nodes	621.8 173.14	621.8 173.14	-1 B -2 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	490.87 119.65	490.87 119.65	+0 B +0 B
WebGPU	696.79 188.39	696.79 188.39	-1 B -1 B
WebGPU Nodes	645.99 175.78	645.99 175.78	-1 B -2 B

[Mugen87]

Thanks for fixing this!

You are right, the WebGL backend only uses gl.stencilOp() and not gl.stencilOpSeparate() meaning the state is applied to both front and back faces.