WebGPUPathTracer: Use custom float texture filter for mobile

[gkjohnson]

Relies on #748
Replaces #749

• Add an ssl option to the start command to allow for testing on mobile (WebGPU requires https) - run npm start -- --mode=ssl --host
• Adjust the ProceduralEquirectTexture to use HalfFloatType to guarantee its filterable.
• Add custom linear filtering when rendering to the screen
• Switch the render target 2d array to use MeshBasicMaterial rather than render to screen material

There seem to be some issues in three.js regarding setting float textures to unfilterable so in practice this won't work on mobile until this is fixed: mrdoob/three.js#33147

cc @TheBlek

TODO

• Fix uv varying include
• Confirm mobile functionality

[gkjohnson]

@TheBlek - this is now working on my Pixel 10 after modifying the Turquin Texture to be HalfFloatType with one caveat: when loading and using the premade png texture I'm seeing it render incorrectly. Setting "calculateTurquinTexture" to "true" fixes the issue. This is only happening on my mobile device - it looks fine on my laptop. I'm not sure if you have any ideas about why this might be happening? Otherwise I think this is a better solution for us than #749.

calculateTurquinTexture = false

calculateTurquinTexture = true

[TheBlek]

one caveat: when loading and using the premade png texture I'm seeing it render incorrectly.

It works fine on all my devices (phone included - Nothing Phone 2a). Debugging three.js code it turns out that images are loaded here:

https://github.com/mrdoob/three.js/blob/c5ef44edd63faeef81dcd2c90d951de79f1a7a58/src/renderers/webgpu/utils/WebGPUTextureUtils.js#L849-L872

It uses a function copyExternalImageToTexture MDN that has a spotty availability on desktop yet on phones should work.

Perhaps this is a device-specific bug?

We could load image differently to avoid such complications. For example, it seems that EXR format supports 32 and 16 bit float, compression and has a configurable loader that loads exact data into buffers, parses it and then passes to three.js: https://threejs.org/docs/#EXRLoader. This would avoid copyExternalImageToTexture execution path.

[gkjohnson]

https://github.com/mrdoob/three.js/blob/c5ef44edd63faeef81dcd2c90d951de79f1a7a58/src/renderers/webgpu/utils/WebGPUTextureUtils.js#L849-L872
...
Perhaps this is a device-specific bug?

I'll take a deeper look to see what might be going on with my device before we look into different formats. That function seems to be silently hiding any errors for some reason so maybe there's something to that.

[gkjohnson]

Well it seems there's an issue with WebGPU on Chrome on Pixel 10 in general 🙄 Here's another three.js WebGPU example showing that loading textures aren't working in general:

So false alarm... This is otherwise ready if it looks good to you.