Как отредактировать значения RGBA текстуры в WebGL?

Question

У меня есть фрагмент шейдеров, как так:

<script id="shader-fs" type="x-shader/x-fragment"> 
    precision mediump float; 
    uniform sampler2D uSampler; 
    varying vec2 vTextureCoord; 
    void main() { 
     gl_FragColor = texture2D(uSampler, vTextureCoord).rgba; 
    } 
</script> 

и здесь есть код JavaScript, который обрабатывает текстуры:

function handleLoadedTexture(texture) { 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    gl.bindTexture(gl.TEXTURE_2D, null); 
} 

function initTexture(source) { 
    var newTexture = gl.createTexture(); 
    newTexture.image = new Image(); 
    objectTextures.push(newTexture); 
    var index = objectTextures.length - 1; 
    objectTextures[objectTextures.length - 1].image.onload = function() { 
     handleLoadedTexture(objectTextures[index]) 
    } 
    objectTextures[objectTextures.length - 1].image.src = source; 
} 

параметр «источник» является только URL к изображению, «например. png "может быть источником. Я пытаюсь изменить цвет текстуры на другой. Можно ли просто переназначить каждый пиксель в текстуре до определенного цвета? Можно ли также оттенять текстуру? Могу ли я добавить еще один параметр в функцию initTexture, называемый «цвет», и это будет массив из 4 значений (RGBA) или 3, если альфа-канал невозможно отредактировать, а затем использовать этот массив каким-то образом, чтобы изменить цвет текстуры до одного сплошного цвета или оттенка?

objectTextures - это просто массив, содержащий все созданные WebGLTextures.

Answer 1

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

добавить к вашей вершинных шейдеров (однако он выглядит):

attribute vec4 aColors; 
varying vec4 vColors; 

void main (void) { 
    vColors = aColors; //basically the same as you do with texture coordinates 
} 

и ваш фрагмент шейдеров теперь выглядит следующим образом:

precision mediump float; 

uniform sampler2D uSampler; 

varying vec4 vColor; 
varying vec2 vTextureCoord; 
void main() { 
    gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor; 
} 

Хорошо, что как основной в вершинных цветов устанавливаются. Но теперь идет немного необычная часть: вместо того, чтобы заниматься бизнесом по настройке буфера и заполнять его цветами для каждой вершины, как вы обычно делали, вы просто устанавливаете ее постоянное значение для всех вершин, в основном «значение по умолчанию», используемое, когда для этого местоположения не разрешено vertexAttribArray.

var colorLocation = gl.getAttribLocation(yourProgram, "aColors"); 
var yourColor = [1,0,1,1]; 
gl.vertexAttrib4fv(colorLocation, yourColor); 

Таким образом, вы можете «Оттенок» или в постоянный цвет или другой цвет на вершине (это не единственный способ сделать красящее вещество есть как бесконечные альтернативы, но я чувствую это делать это путь элегантный и гибкий :)