gl_FragCoordがthree.js内の画面のサイズと一致しない

Question

gl_FragCoordを使用すると、画面の左下部分の以前のパスのレンダリングテクスチャのテクスチャが小さいサイズで表示される。

これは、ウィンドウのサイズがレンダリングターゲットのサイズと一致しない場合と同じですが、レンダリングの対象をダブルチェックしています。

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