gl_FragCoord doesn't match the size of the screen in three.js

问题

I've been having this issue where using gl_FragCoord shows the texture from the render texture of the previous pass on the bottom left part of the screen at a smaller size.

It's as if the size of the window doesn't match the size of the render target but I've double checked they do.

回答1:

I finally figured it out, the problem is that the canvas wasn't the same size as the camera and the render targets.

You want to make sure these match:

var winW = window.innerWidth;
var winH = window.innerHeight;
// Render target matches in size to the window
var rtTexture1 = new THREE.WebGLRenderTarget( winW, winH, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat, depthBuffer: true } );
// Canvas matches in size to the window too!
var canvas = document.querySelector('canvas');
var gl;
try {
    gl = canvas.getContext('webgl2');
    canvas.width = winW;
    canvas.height = winH;
} catch (err) {
    console.error(err);
}

来源：https://stackoverflow.com/questions/42827826/gl-fragcoord-doesnt-match-the-size-of-the-screen-in-three-js