ThreeJS & Fragment Shader Window Size

Question

In my ThreeJS WebGLRenderer scene, I am currently clipping pixels with a GLSL fragment (pixel) shader, according to their distance from the lower left-hand corner of the screen:

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

This shader is used with a ThreeJS.ShaderMaterial instance, that ends up used with a PointCloud mesh, that ends up a particle system in the scene.

My question is, how do I determine the "window size" for this shader? I am happy to pass these pixel dimensions from ThreeJS to the shader, but do not know the best way to map a ThreeJS geometry & mesh to a GLSL window size. Passing in window.innerWidth and window.innerHeight does not work.

The goal is to clip fragments that are near the center of the physical screen:

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

How would I find pixelWidth and pixelHeight on the ThreeJS side?

attribute is inappropriate for the fragment shader. Something qualified as attribute is a vertex attribute. In a fragment shader, the equivalent of a per-vertex attribute is a varying. But I don't think you want that - you'd have to write this attribute once for every vertex. A uniform is probably what you want. — Andon M. Coleman
– Andon M. Coleman, Commented Feb 17, 2015 at 3:30

user128511 · Accepted Answer · 2015-02-17 05:50:37Z

2

If you're rendering to the canvas you can get the actual size with

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

If you're rendering to a render target then

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

should work

answered Feb 17, 2015 at 5:50

user128511

Sign up to request clarification or add additional context in comments.

3 Comments

someben Over a year ago

Thank you for the help, @gman. And for addressing the actual question, rather than nitpicking. You got me in the right direction. In my case, I needed to do: var width = webGLRenderer.context.drawingBufferWidth; var height = webGLRenderer.context.drawingBufferHeight; And then pass those values into the shader. Thanks again!

user128511 Over a year ago

Assuming you're talking about the comment on your question, it is strange to see you passing in pixelWidth and pixelHeight as attributes :D Unless you really meant to do that maybe you want to edit your question so others don't copy that example?

someben Over a year ago

Good point. I removed attribute (or varying or uniform) references, since how state is passed from ThreeJS into shaders is not relevant to the question.

Collectives™ on Stack Overflow

ThreeJS & Fragment Shader Window Size

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related