WebGPURenderer ColorNode: test adding color clamp before premultiply

[gkjohnson]

In parallel with #33329
Related to #33329 (comment)

Description

Submission of #33329 with additional alpha clamp before un-premultiply to test how many tests continue to fail.

34 failing tests in #33329

E2E 3

• webgpu_compute_particles
• webgpu_compute_particles_rain
• webgpu_compute_particles_snow
• webgpu_instance_points
• webgpu_lensflares
• webgpu_lights_custom
• webgpu_lines_fat
• webgpu_lines_fat_raycasting
• webgpu_loader_gltf_dispersion
• webgpu_materials_alphahash
• webgpu_mesh_batch
• webgpu_mrt_mask
• webgpu_ocean

E2E 4

• webgpu_postprocessing
• webgpu_postprocessing_3dlut
• webgpu_postprocessing_afterimage
• webgpu_postprocessing_anamorphic
• webgpu_postprocessing_bloom
• webgpu_postprocessing_bloom_emissive
• webgpu_postprocessing_bloom_selective
• webgpu_postprocessing_lensflare
• webgpu_postprocessing_motion_blur
• webgpu_postprocessing_outline
• webgpu_postprocessing_pixel
• webgpu_postprocessing_radial_blur
• webgpu_postprocessing_sobel
• webgpu_postprocessing_ssr
• webgpu_tsl_compute_attractors_particles
• webgpu_tsl_earth
• webgpu_tsl_galaxy
• webgpu_tsl_vfx_tornado
• webgpu_volume_caustics
• webgpu_volume_lighting
• webgpu_volume_lighting_rectarea

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	365.31 86.78	365.31 86.78	+0 B +0 B
WebGPU	639.09 177.44	639.22 177.49	+131 B +54 B
WebGPU Nodes	637.21 177.15	637.34 177.2	+131 B +56 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	497.82 121.45	497.82 121.45	+0 B +0 B
WebGPU	710.94 192.29	711.07 192.35	+131 B +59 B
WebGPU Nodes	660.16 179.61	660.29 179.67	+131 B +55 B

[gkjohnson]

Here are the failing WebGPU tests compared to #33329:

22 failing tests

E2E 3

• *webgpu_camera_logarithmicdepthbuffer
• webgpu_compute_particles
• webgpu_compute_particles_rain
• webgpu_compute_particles_snow
• webgpu_instance_points
• webgpu_lights_custom
• *webgpu_lights_pointlights
• webgpu_lines_fat
• webgpu_lines_fat_raycasting
• *webgpu_lines_fat_wireframe
• *webgpu_materials
• webgpu_materials_alphahash
• webgpu_mesh_batch
• *webgpu_mirror

E2E 4

• webgpu_postprocessing
• webgpu_postprocessing_3dlut
• webgpu_postprocessing_afterimage
• webgpu_postprocessing_motion_blur
• webgpu_postprocessing_pixel
• webgpu_postprocessing_sobel
• *webgpu_sprites
• webgpu_tsl_earth

So it's down 34 to 22 (12 tests fixed). However it seems there are some new tests failing, too, (marked with an asterisk above) though it's not clear to me how reliable the tests are at the moment since WebGLRenderer tests are now also failing. @Mugen87 do you have any thoughts on what might be causing these webgl renderer test failures? I've rerun the E2E 0 test batch several times now.

[Mugen87]

do you have any thoughts on what might be causing these webgl renderer test failures? I

Some of the "misc" examples already use WebGPURenderer. This is true for the failing ones misc_controls_fly and misc_raycaster_helper.

[gkjohnson]

Some of the "misc" examples already use WebGPURenderer.

Thanks - I didn't realize that.

I've gone through all the 22 above failing examples and aside from the following four I'm seeing that they all use transparent background so the CSS background color should show through and failures are expected. We'll need to replace those screenshots.

The following examples have other issues that seem to be indicative of some other blending or multiplication issues elsewhere in WebGPURenderer. I'll have to leave this to someone else who's more familiar with these demos and material definitions. Aside from the following 4 it seems that the other examples fall into a failure case of the final image having an alpha value outside of [0, 1] (as outlined in #33329 (comment)) or they are valid failures because the examples are deliberately using a transparent background on the canvas.

webgpu_mesh_batch

This example sets a clear color with 1.0 alpha but for some reason the CSS background color shows through some shaded areas of the objects.

#000 css background	#f00 css background

webgpu_postprocessing_sobel

The failure in this case is not clear to me since the sobel effect seems to be displayed as 1.0 alpha across the image so this needs more investigation.

webgpu_postprocessing_pixel

The accented edges of the effect seem to be returned with a < 1.0 alpha resulting in the css background showing through.

#000 css background	#f00 css background

webgpu_postprocessing_motion_blur

The vignette effect applied to the demo seems to multiply into the alpha channel, as well, resulting in the CSS color affecting the image (and will also therefore be impacted by the blending color space).

#000 css background	#f00 css background

cc @WestLangley