ThreeJS＆amp;片段着色器窗口大小

Question

在我的ThreeJS WebGLRenderer场景中，我目前使用GLSL片段（像素）着色器剪切像素，根据它们与屏幕左下角的距离：

if (distance(vec2(gl_FragCoord.x, gl_FragCoord.y), vec2(0.0, 0.0)) > 42.0)
    discard;

此着色器与ThreeJS.ShaderMaterial实例一起使用，最终与PointCloud网格一起使用，最终会在场景中结束粒子系统。

我的问题是，如何确定此着色器的“窗口大小”？我很高兴将这些像素尺寸从ThreeJS传递到着色器，但不知道映射ThreeJS几何体的最佳方法。网格到GLSL窗口大小。传递window.innerWidth和window.innerHeight不起作用。

目标是剪辑靠近物理屏幕中心的碎片：

if (distance(vec2(gl_FragCoord.x, gl_FragCoord.y), vec2(pixelWidth * 0.5, pixelHeight * 0.5)) > 42.0)
    discard;

我如何在ThreeJS方面找到pixelWidth和pixelHeight？

Answer 1

如果您要渲染到画布，可以使用

获得实际尺寸

var width = renderer.context.drawingBufferWidth;
var height = renderer.context.drawingBufferHeight;

如果您要渲染渲染目标，那么

var width = renderTarget.width;
var height = renderTarget.height;

应该有效