Examples: Add GPU Progressive Lightmapping Example

[zalo]

Related issue: Fixed #14048

Description

This PR adds a light-weight example for generating silky smooth, physically-correct lightmaps over time by jittering directional lights + shadows (1st bounce only).

The lightmapping accumulation step for this scene takes between 0.2ms and 0.4ms per frame on my machine (GTX 1080).

While the setup currently generates physically accurate soft shadows and ambient occlusion, the technique could generalize to multibounce global illumination/radiosity with the right kind of depth-peeling "light sources".

Check out the live deployment here:
https://zalo.github.io/three.js/examples/?q=shadowmap#webgl_shadowmap_progressive

The potpack module is a (very) small utility for packing multiple mesh's UVs into a unified texture atlas for the lightmap.

[Mugen87]

examples/models/obj/ShadowmappableMesh.obj

Do you mind using a glb file instead?

[Mugen87]

The E2E test for webgl_shadowmap_progressive is still failing. Maybe you have to regenerate the screenshot.

For testing: https://raw.githack.com/zalo/three.js/progressive-lightmapping/examples/webgl_shadowmap_progressive.html

[zalo]

Happy to add additional stylization, tests, API changes, or aspects to the scene (if desired).

Also happy to see the retweet 😁
https://twitter.com/threejs_org/status/1369421471643271172

[supereggbert]

Just an FYI I'm not seeing anything on Samsung S10. I'm getting the following in the console "RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?"

[marcofugaro]

@zalo does the ShadowmappableMesh.glb has to be created in any particular way from blender or it can be just a regular model?

[Mugen87]

I've realized there are two warnings in the console that should be removed before merging:

ProgressiveLightMap.js:232 Call this after adding the objects!

three.module.js:17076 THREE.WebGLProgram: gl.getProgramInfoLog() WARNING: Output of vertex shader 'vUv' not read by fragment shader

BTW: Can you please test whether the demo works with WebGL 1, too? You can create an instance of WebGL1Renderer to test this.

[zalo]

@supereggbert I think this was due to a WebGL1 compatibility breaking issue I just fixed in my latest commit. But just to be safe, I added Android to the list of userAgents that trigger Half precision floating point textures. The difference in quality is almost negligible, but there is more support for it on older phones.

@marcofugaro Technically the only requirement is that the object is UV mapped. However, you'll get oddly colored lines at the texture seams if two faces share an edge in the map (bilinear interpolation edge bleed), so adding some padding is ideal. I created this model with automatic UVs from my own program, so I'm not sure if Blender has any special needs...

@Mugen87 Thank you for the suggestion to force a WebGL1 Renderer! I'd been using texture instead of texture2D 🙃
Correcting this fixes support on iOS (though, I don't have any Android phones to test with). I also fixed the warnings you reported.

[supereggbert]

(though, I don't have any Android phones to test with)

Working here now

[zalo]

Slightly off-topic: I'm testing out radiosity using Approximate Radiosity by Stochastic Depth Buffering (which is technically the multi-bounce extension of this PR's technique (that also doesn't require depth peeling)).

Early results are here:
https://raw.githack.com/zalo/three.js/progressive-radiosity/examples/?q=progress#webgl_shadowmap_progressive

It's not really appropriate for this PR or class. It's like triple the complexity+compute, converges way more slowly, and it works best with emissive meshes rather than directional lights... all for dubious additional visual quality. That said, I thought you guys might enjoy it. :-)

[mrdoob]

That said, I thought you guys might enjoy it. :-)

Yes! 😍

[mrdoob]

Thanks!