WebGLRenderer: Explicitly specify precision for all sampler types

[StrandedKitty]

Description

Most of the code written using Three.js (and Three.js itself in the case of shadow mapping) doesn't use depth textures to store depth values — RGBA8 textures are used instead by storing depth in an encoded format. However, there are cases when you want to render scene depth into a depth texture directly and subsequently sample depth values from this texture.

It seems like on some Android devices if you sample a depth texture without specifing a precision qualifier in the shader code then the precision ends up to be very low. It leads to noticable artifacts which can be described as banding.

This PR adds precision qualifiers for all possible sampler types to make sure that the precision value specified when creating a WebGLRenderer gets applied to all samplers.

WebGL1 sampler types are listed here: https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf
And WebGL2 sampler types are listed in this card: https://www.khronos.org/files/webgl20-reference-guide.pdf

See screenshots below from webgl_depth_texture example taken on Google Pixel 7a. Note much smoother depth rendering on the second screenshot.

Before (no precision highp sampler2D;)	After (with precision highp sampler2D;)

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

Filesize dev	Filesize PR	Diff
671 kB (166.8 kB)	671.7 kB (166.9 kB)	+690 B

🌳 Bundle size after tree-shaking

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

Filesize dev	Filesize PR	Diff
451.9 kB (109.8 kB)	452.6 kB (109.9 kB)	+690 B

[Mugen87]

I agree it makes sense to do this. In the past, it was the task of the developer to ensure enough precision but this can easily be missed (see #27320). The resulting errors are also hard to debug.