Examples: Adjust volume instances demo to write to depth

[gkjohnson]

Related issue: "How do you integrate Signed Distance Fields (SDF) into a basic three.js scene?"

Description

This forum post was asking how to adjust the depth of a shader when rendering via something like raymarching and I noticed there were no examples showing how to do so.

This PR changes the webgl_volume_instancing example to calculate the raymarch ray in the fragment shader so gl_FragDepth can be calculated and assigned. This allows the cubes to intersect (more) correctly in the demo:

And with more steps:

And intersecting a mesh:

[gkjohnson]

I'm not sure why the screenshot is failing 🤔 Perhaps there are just some graphics differences on my machine. I can copy the as-run "actual" screenshot from artifacts if that's okay.

[Makio64]

@gkjohnson not sure its related but on my other pr on compute instance particles i also coudnt generate the new screenshot on my macbook pro m3 max. It seems to happen only on certain webgpu examples for me.

[mrdoob]

Updated the PR with whatever the CI server is generating 🤷‍♂️

[mrdoob]

Would you like to update webgl_volume_cloud shader while you're at it? Or in a different PR?

[gkjohnson]

Would you like to update webgl_volume_cloud shader while you're at it? Or in a different PR?

The clouds example accumulates color and opacity over multiple steps so it's a bit more complicated to support depth intersection. Wed need to pass in a depth texture and perform the intersection manually. So I'll have to skip that for now.

[mrdoob]

Updated the PR with whatever the CI server is generating 🤷‍♂️

Seems like it didn't do the trick... Grr...