gl_FragCoord 与 three.js 中的屏幕大小不匹配

【问题标题】：gl_FragCoord doesn't match the size of the screen in three.jsgl_FragCoord 与 three.js 中的屏幕大小不匹配
【发布时间】：2017-03-16 15:32:05
【问题描述】：

我一直遇到这个问题，使用 gl_FragCoord 会在屏幕左下角以较小的尺寸显示上一次渲染纹理的纹理。

好像窗口的大小与渲染目标的大小不匹配，但我已经仔细检查过。

【问题讨论】：

标签： opengl-es three.js

【解决方案1】：

我终于弄明白了，问题是画布与相机和渲染目标的大小不同。

您要确保这些匹配：

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);
}

【讨论】：