Смешать две текстуры с различными координатами и размерами в одном шейдере

Question

У меня есть две текстуры с различными координатамииразмеры в моем пиксельный шейдер:

varying highp vec2 v_currentTextureCoords; 
varying highp vec2 v_backgroundTextureCoords; 
uniform sampler2D u_currentTexture; 
uniform sampler2D u_backgroundTexture; 

void main() 
{ 
    vec4 currentColor = texture2D(u_currentTexture, v_currentTextureCoords); 
    vec4 backgroundColor = texture2D(u_backgroundTexture, v_backgroundTextureCoords); 

    gl_FragColor = backgroundColor; 
} 

Вот соответствующий вершинный шейдер :

attribute vec4 a_position; 
attribute vec2 a_currentTextureCoords; 
attribute vec2 a_backgroundTextureCoords; 
varying vec2 v_currentTextureCoords; 
varying vec2 v_backgroundTextureCoords; 

void main() 
{ 
    gl_Position = a_position; 
    v_currentTextureCoords = a_currentTextureCoords; 
    v_backgroundTextureCoords = a_backgroundTextureCoords; 
} 

Эти шейдеры несут ответственность за renderin g u_currentTexture.

EDIT: обновленный пост с моим настоящим приложением (приложение для Android) и проблема.

Как вы можете прочитать выше, два текстуры:

• u_backgroundTexture: это видео поток, полный экран, размер 1080x1920
• u_currentTexture: это может быть любое изображение, размер 469x833 (меньше но такой же соотношение).

Чтобы сделать это просто, потому что теперь, я не хочу, чтобы смешать что-нибудь, но только отображать пиксели u_backgroundTextureв программе шейдера из u_currentTexture.

Как вы можете видеть, воспроизводимое изображение с выше (в верхнем левом углу, а не все изображение) шейдеры, так же, как фоновое изображение, но масштабируется, чтобы уместить в меньшем прямоугольнике. Это не то, что я хочу.

Я хочу отображения пикселей, которые «за» u_currentTexture (те u_backgroundTexture), так что в конце концов, один даже не заметит есть две текстуры.

Но так как текстуры имеют разных размеров и координат, это не дает никакого результата вообще (на данный момент это то, что вы видите выше).

Затем в моем пиксельном шейдере, мне удалось «масштаба» текстура, чтобы изображение в верхнем левом углу есть тот же самый «зум» в качестве фонового изображения:

Для сделать это, я изменил мой фрагмент шейдера:

varying highp vec2 v_currentTextureCoords; 
varying highp vec2 v_backgroundTextureCoords; 
uniform sampler2D u_currentTexture; 
uniform sampler2D u_backgroundTexture; 
uniform vec2 u_scaleRatio; // Notice here 

void main() 
{ 
    vec4 currentColor = texture2D(u_currentTexture, v_currentTextureCoords); 
    vec4 backgroundColor = texture2D(u_backgroundTexture, v_backgroundTextureCoords * u_scaleRatio); // And here 

    gl_FragColor = backgroundColor; 
} 

я поставил u_scaleRatio в моей программе с glUniform2fv().Значения в основном (псевдо-код):

u_scaleRatio = vec2(currentTextureWidth/backgroundTextureWidth, currentTextureHeight/backgroundTextureHeight); 

Как вы можете видеть, это почти работает, но, похоже, есть смещение по оси X: тонированное изображение в верхнем покинул угол на самом деле то, что мы видим в верхней части right corner ... Я не могу найти способ исправить его.

Как я могу изменить свои шейдеры, чтобы исправить это смещение, зная, что текстуры имеют разные размеры и координаты?

EDIT 2:

Чтобы ответить на комментарий ниже, это скриншот с

vec4 backgroundColor = texture2D(u_backgroundTexture, v_currentTextureCoords); 

и с:

vec4 backgroundColor = texture2D(u_backgroundTexture, v_currentTextureCoords * u_scaleRatio); 

EDIT 3: ответить на this answer, вот скриншот с:

uniform vec2 texelSize; // (1.0/windowResolution.x, 1.0/windowResolution.y) 

vec2 uv = gl_FragCoord.xy * texelSize; 
vec4 backgroundColor = texture2D(u_backgroundTexture, uv); 

Я понимаю, что вы пытаетесь сделать, я думаю, что это сработало бы, если положение вершин и координаты текстуры были то же самое для обеих текстур, но ... это не так. У вас есть идея, как это исправить?

Answer 1

Если я правильно понимаю вашу проблему правильно, вы должны быть хорошо вычисляя

uniform vec2 texelSize; // (1.0/windowResolution.x, 1.0/windowResolution.y) 

vec2 uv = gl_FragCoord.xy * texelSize; 
vec4 backgroundColor = texture2D(u_backgroundTexture, uv); 

Встроенный в переменной gl_FragCoord.xy«содержит окно относительные координаты (х, у, г, 1/w) для фрагмента « (https://www.opengl.org/sdk/docs/man/html/gl_FragCoord.xhtml). Поскольку вам в основном нужны координаты текстуры фрагмента, как если бы они были частью полноэкранного квадроцикла, это должно дать ожидаемые результаты. Вы должны только передать относительный размер полноэкранного текселя как единое целое (посмотрите в комментариях для расчета).