Issue 1:
Describe the bug

The recent transmission framebuffer is awesome 🎉 but I ran into a couple issues:

The aspect ratio of the transmission framebuffer is uncoupled from the current render target, creating x / y warping dependent on viewing dimensions

Nearest sampling is used for magnification which creates visual artefacts but there's no obvious motivation for Nearest over Linear here

Relevant part of three.js source

_transmissionRenderTarget = new renderTargetType( 1024, 1024, {
generateMipmaps: true,
type: utils.convert( HalfFloatType ) !== null ? HalfFloatType : UnsignedByteType,
minFilter: LinearMipmapLinearFilter,
magFilter: NearestFilter,
wrapS: ClampToEdgeWrapping,
wrapT: ClampToEdgeWrapping
} );

Current three.js

Here we render scattered Points within a refractive sphere, notice the asymmetrical refraction pattern in the lower image and hard pixel edges in both

After correcting

Here we use Linear sample and couple the transmission framebuffer's resolution to the viewing resolution. Refraction patterns are now symmetrical and the hard pixel edges are resolved

To Reproduce

Use a refracting material with roughness set to 0 (or close 0) and IOR greater than 1

Notice the refraction effect has dimension dependence

Notice hard pixel edges where refraction scales up

Code

Example material

new MeshPhysicalMaterial({
roughness: 0.0,
color: 0xffffff,
transmission: 0.9,
attenuationTint: new Color(0x59ff),
attenuationDistance: 1.7,
clearcoat: 0.9
})

Live example

Example above, click "Fix Transmission" to toggle my fix

https://threejs-issue-22729.netlify.app

Expected behavior

Transmission should be independent of viewing dimensions and use Linear filtering for magnification

Suggested fix

The dimension issue has 2 complexities

WebGL1 requires power-of-two dimensions for mipmapping

Different passes may require different transmission texture dimensions, requiring some level of texture management

Both these issues can be solved fully but introduce complexity to the three.js codebase. Instead, if we expose creation of transmission textures to the user, they can handle this to suit their needs

For example: https://github.com/haxiomic/three.js-refraction/blob/f90ec8e27b61f0be4974c0da2f15f8789dc5336f/src/Main.hx#L60

Platform:

Device: All

OS: All

Browser: All

Three.js version: [dev, r133.1]

Issue 2:
Reposting #21000 (comment) so as to consolidate some remaining issues.

webgl_loader_gltf_transmission has the transparent property of each sphere to set to false. Is that what the loader should be doing? What should transparent be set to when transmission is non-zero?

After setting transparent to true, only front-faces show the hot-spot. (This may be a known limitation, but @mrdoob just added support for properly rendering back-faces of double-sided meshes.) There should be two hot-spots.

FIXED: This is caused by issue 7. below.

FIXED Also, in Chrome and Firefox (not Safari)

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

Transmission always sets the USE_UV flag.

FIXED: If performant, I think the dimensions of the "transmission render target" should match the dimensions of the "current render target". Doing so will prevent artifacts like the following:

FIXED In the following code snippet, transmissionFactor is applied to getIBLVolumeRefraction() twice. I expect that is a physical modeling error.

three.js/src/renderers/shaders/ShaderChunk/transmission_fragment.glsl.js

Lines 23 to 28
in
dd6ab3c

vec3 transmission = transmissionFactor * getIBLVolumeRefraction(

normal, v, roughnessFactor, material.diffuseColor, totalSpecular,

pos, modelMatrix, viewMatrix, projectionMatrix, ior, thicknessFactor,

attenuationColor, attenuationDistance );

totalDiffuse = mix( totalDiffuse, transmission, transmissionFactor );

FIXED Also in the above snippet, totalSpecular has units of radiance, and therefore cannot be the correct argument because the function expects a unit-less quantity. A reasonable guess would be material.specularColor, instead.

Device: Desktop

OS: macOS 11.4

Browser: Chrome, Firefox, Safari

Three.js version: r130dev

/ping @takahirox @donmccurdy