Размер окна ThreeJS и фрагментного шейдера

В моей сцене 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;

Как мне найти pixelWidth и pixelHeight на стороне ThreeJS?


three.js 3d webgl opengl-es particle-system
person someben    schedule 16.02.2015    source источник
comment
attribute не подходит для фрагментного шейдера. Нечто, определяемое как attribute, является атрибутом вершины. Во фрагментном шейдере эквивалентом атрибута для каждой вершины является varying. Но я не думаю, что вы этого хотите - вам придется писать этот атрибут один раз для каждой вершины. uniform, вероятно, то, что вы хотите.   -  person Andon M. Coleman    schedule 17.02.2015

Ответы (1)


arrow_upward
2
arrow_downward

Если вы выполняете рендеринг на холст, вы можете получить фактический размер с помощью

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

Если вы выполняете рендеринг в цель рендеринга, то

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

должно сработать

person gman    schedule 17.02.2015
comment
Спасибо за помощь, @gman. И за решение собственно вопроса, а не за придирки. Вы меня в правильном направлении. В моем случае мне нужно было сделать: var width = webGLRenderer.context.drawingBufferWidth; var height = webGLRenderer.context.drawingBufferHeight; А затем передать эти значения в шейдер. Еще раз спасибо! - person someben; 17.02.2015
comment
Предполагая, что вы говорите о комментарии к своему вопросу, странно видеть, что вы передаете pixelWidth и pixelHeight в качестве атрибутов: D Если вы действительно не хотели этого делать, возможно, вы хотите отредактировать свой вопрос, чтобы другие не копировать этот пример? - person gman; 18.02.2015
comment
Хорошая точка зрения. Я удалил ссылки на атрибуты (изменяющиеся или унифицированные), поскольку то, как состояние передается из ThreeJS в шейдеры, не имеет отношения к вопросу. - person someben; 18.02.2015