WebGL: используйте как текстурные, так и цветовые буферы

Question

This question, где ОП сообщал предупреждение, выдаваемое при выполнении инструкции gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);, заставил меня подумать: что, если я хочу иметь сцену с двумя (предположим: плоскими) фигурами в ней, один с текстурой и один с однородным цветом? В фрагмент шейдера main, если я раскомментировать вторую команду и закомментировать первую, так как:

void main(void) { 
    //gl_FragColor = vColor; 
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); 
} 

предупреждение по-прежнему выдаются, но на этот раз в отношении к инструкции gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);.
Если я оставлю оба без ранения, он все еще жалуется на вершинный символ, потому что явно его переопределяют.
Итак, как я могу иметь оба? Можно ли использовать два разных шейдера фрагмента? Если да, то как это можно сделать?

Answer 1

собственно путь будет иметь два отдельных шейдеров, так как вы хотите сделать либо текстурированной или окрашенным.

За счет памяти и времени выполнения вы всегда можете иметь цветные атрибуты текстур в ваших данных вершин и использовать какое-то смешение в зависимости от вашего прецедента.

Как вы описали это, вы можете использовать простое смешивание добавок, поскольку большинство реализаций WebGL связывают черную пиксельную текстуру [0,0,0,255] по умолчанию, когда никакая текстура не связана.

Таким образом, имея что-то вроде

void main(void) { 
    gl_FragColor = vColor + texture2D(uSampler, vTexCoord); 
} 

сделает цвет, когда нет текстуры не обязан и правильно оказывать связанную текстуру, когда цвет [0,0,0,0].

См википедия для обзора различных blend modes

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

void main(void) { 
    if (uMethod == 1) 
     gl_FragColor = vColor; 
    else if (uMethod == 2) 
     gl_FragColor = texture2D(uSampler, vTexCoord); 
    else 
     gl_FragColor = vColor + texture2D(uSampler, vTexCoord); 
}