Визуализация текстуры в OpenGL ES 2 с использованием массива цветовой карты - PullRequest
0 голосов
/ 05 марта 2020

Я пытаюсь отобразить растровое изображение карты как текстуру в OpenGL. Исходный пиксельный формат файла изображения - это один байт, значения RGB которого представлены в цветовой карте 256x3 байта (R, G, B). Я могу правильно визуализировать изображение, выполняя цветовое картирование и генерируя пиксели RGB в CPU, а затем загружая их в качестве текстуры в OpenGL. Однако я бы хотел, чтобы фрагментный шейдер делал это. Поскольку в настоящее время я использую OpenGL ES, я загружаю цветовую карту как 2D-текстуру 256x1 (1D не поддерживается). Однако я получаю неправильную цветопередачу (все красные или некоторые оттенки изображения все красные). Я могу сделать рендер в очень сыром черно-белом назначении fragColor = texture (ourTexture, texCoord) .rrr, поэтому загрузка текстуры изображения выглядит нормально;

Вот фрагментный шейдер:

#version 300 es                              
precision mediump float;                     
in vec2 texCoord;                            
out vec4 fragColor;                          
uniform sampler2D ourTexture;                
uniform sampler2D colormap;                  
void main() {                                
float color =texture(ourTexture, texCoord).r;  
fragColor = texture(colormap, vec2(color,0.0)); 
}                                            

Вот инициализация текстуры цветовой карты

glGenTextures(1, &render.colormapTexture);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, render.colormapTexture);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB,
        256, 1, 0, GL_RGB, GL_UNSIGNED_BYTE, &render.geoData.colormap[0]);


Вот инициализация растрового изображения:

glGenTextures(1, &cache.cache[i].texture.texID); 
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, cache.cache[i].texture.texID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);    
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  


и загрузка пикселей в другом месте

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, tile->texture->texID);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RED,
             tile->texture->width,
             tile->texture->height, 0, GL_RED,
             GL_UNSIGNED_BYTE,
             tile->texture->texData);  

Вот код для рисования:

glBindVertexArray(render.grid.terrainGrid[i][j].vao);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D,
               render.grid.terrainGrid[i][j].texture->texID);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_2D, render.colormapTexture);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT,0);

это отформатированная распечатка карты цветов при загрузке в качестве текстуры:

[0]->r:0 g:0 b:0 
[1]->r:255 g:255 b:255 
[2]->r:0 g:0 b:2 
[3]->r:252 g:252 b:254 
[4]->r:111 g:18 b:20 
[5]->r:80 g:18 b:19 
[6]->r:205 g:59 b:60 
[7]->r:145 g:16 b:20 
[8]->r:207 g:176 b:177 
[9]->r:142 g:48 b:53 
[10]->r:81 g:47 b:49 
[11]->r:175 g:48 b:57 
[12]->r:113 g:48 b:53 
[13]->r:176 g:15 b:36 
[14]->r:176 g:141 b:147 
[15]->r:132 g:116 b:119 
[16]->r:46 g:16 b:23 
[17]->r:176 g:18 b:63 
[18]->r:144 g:18 b:54 
[19]->r:153 g:41 b:78 
[20]->r:248 g:200 b:216 
[21]->r:113 g:20 b:54 
[22]->r:236 g:143 b:176 
[23]->r:182 g:75 b:117 
[24]->r:189 g:36 b:102 
[25]->r:80 g:21 b:50 
[26]->r:240 g:178 b:208 
[27]->r:207 g:102 b:155 
[28]->r:232 g:200 b:216 
[29]->r:248 g:216 b:232 
[30]->r:207 g:145 b:177 
[31]->r:198 g:61 b:149 
[32]->r:248 g:200 b:232 
[33]->r:235 g:144 b:209 
[34]->r:99 g:55 b:87 
[35]->r:133 g:78 b:118 
[36]->r:213 g:109 b:197 
[37]->r:157 g:108 b:150 
[38]->r:171 g:15 b:156 
[39]->r:137 g:22 b:125 
[40]->r:198 g:71 b:193 
[41]->r:186 g:26 b:181 
[42]->r:208 g:146 b:207 
[43]->r:240 g:179 b:238 
[44]->r:24 g:8 b:24 
[45]->r:236 g:146 b:235 
[46]->r:248 g:200 b:248 
[47]->r:175 g:143 b:175 
[48]->r:232 g:200 b:232 
[49]->r:248 g:216 b:248 
[50]->r:232 g:216 b:232 
[51]->r:248 g:232 b:248 
[52]->r:207 g:177 b:209 
[53]->r:45 g:21 b:48 
[54]->r:208 g:146 b:234 
[55]->r:232 g:200 b:248 
[56]->r:24 g:8 b:40 
[57]->r:176 g:144 b:210 
[58]->r:206 g:180 b:234 
[59]->r:216 g:200 b:232 
[60]->r:232 g:216 b:248 
[61]->r:45 g:22 b:76 
[62]->r:146 g:110 b:200 
[63]->r:216 g:197 b:248 
[64]->r:176 g:147 b:233 
[65]->r:24 g:8 b:56 
[66]->r:45 g:20 b:114 
[67]->r:82 g:54 b:160 
[68]->r:104 g:79 b:188 
[69]->r:42 g:22 b:146 
[70]->r:44 g:23 b:169 
[71]->r:54 g:50 b:77 
[72]->r:20 g:22 b:169 
[73]->r:18 g:20 b:152 
[74]->r:16 g:17 b:136 
[75]->r:15 g:16 b:114 
[76]->r:8 g:8 b:56 
[77]->r:8 g:8 b:40 
[78]->r:8 g:8 b:24 
[79]->r:24 g:24 b:56 
[80]->r:24 g:24 b:40 
[81]->r:200 g:200 b:248 
[82]->r:177 g:177 b:209 
[83]->r:200 g:200 b:232 
[84]->r:216 g:216 b:248 
[85]->r:216 g:216 b:232 
[86]->r:232 g:232 b:248 
[87]->r:141 g:141 b:144 
[88]->r:17 g:19 b:78 
[89]->r:44 g:47 b:170 
[90]->r:42 g:44 b:148 
[91]->r:141 g:143 b:174 
[92]->r:60 g:70 b:184 
[93]->r:139 g:147 b:233 
[94]->r:49 g:56 b:114 
[95]->r:175 g:180 b:232 
[96]->r:102 g:117 b:199 
[97]->r:136 g:146 b:210 
[98]->r:21 g:46 b:170 
[99]->r:20 g:45 b:146 
[100]->r:87 g:106 b:167 
[101]->r:184 g:199 b:248 
[102]->r:18 g:48 b:114 
[103]->r:8 g:24 b:56 
[104]->r:184 g:200 b:232 
[105]->r:200 g:216 b:248 
[106]->r:175 g:176 b:178 
[107]->r:38 g:87 b:163 
[108]->r:145 g:181 b:232 
[109]->r:168 g:200 b:248 
[110]->r:143 g:175 b:211 
[111]->r:8 g:24 b:40 
[112]->r:152 g:199 b:248 
[113]->r:168 g:200 b:232 
[114]->r:184 g:216 b:248 
[115]->r:200 g:216 b:232 
[116]->r:216 g:232 b:248 
[117]->r:207 g:208 b:209 
[118]->r:18 g:49 b:77 
[119]->r:96 g:158 b:217 
[120]->r:12 g:119 b:206 
[121]->r:132 g:195 b:248 
[122]->r:112 g:179 b:228 
[123]->r:90 g:105 b:116 
[124]->r:152 g:200 b:232 
[125]->r:168 g:216 b:248 
[126]->r:58 g:158 b:221 
[127]->r:14 g:143 b:219 
[128]->r:152 g:216 b:248 
[129]->r:184 g:216 b:232 
[130]->r:200 g:232 b:248 
[131]->r:47 g:49 b:50 
[132]->r:134 g:200 b:231 
[133]->r:56 g:138 b:169 
[134]->r:132 g:216 b:248 
[135]->r:97 g:152 b:171 
[136]->r:168 g:216 b:232 
[137]->r:183 g:232 b:247 
[138]->r:152 g:216 b:232 
[139]->r:15 g:122 b:146 
[140]->r:133 g:216 b:231 
[141]->r:150 g:232 b:246 
[142]->r:19 g:45 b:49 
[143]->r:179 g:204 b:207 
[144]->r:8 g:24 b:24 
[145]->r:200 g:248 b:248 
[146]->r:200 g:232 b:232 
[147]->r:216 g:248 b:248 
[148]->r:216 g:232 b:232 
[149]->r:232 g:248 b:248 
[150]->r:141 g:177 b:175 
[151]->r:146 g:202 b:191 
[152]->r:26 g:108 b:74 
[153]->r:198 g:248 b:226 
[154]->r:216 g:248 b:232 
[155]->r:17 g:92 b:52 
[156]->r:181 g:232 b:200 
[157]->r:106 g:161 b:125 
[158]->r:18 g:51 b:21 
[159]->r:138 g:180 b:141 
[160]->r:8 g:29 b:8 
[161]->r:153 g:204 b:153 
[162]->r:232 g:248 b:232 
[163]->r:211 g:232 b:209 
[164]->r:178 g:204 b:173 
[165]->r:80 g:95 b:76 
[166]->r:103 g:146 b:70 
[167]->r:230 g:248 b:216 
[168]->r:208 g:232 b:177 
[169]->r:197 g:209 b:179 
[170]->r:230 g:248 b:200 
[171]->r:145 g:186 b:71 
[172]->r:208 g:233 b:145 
[173]->r:230 g:248 b:184 
[174]->r:48 g:56 b:20 
[175]->r:230 g:248 b:161 
[176]->r:177 g:197 b:76 
[177]->r:211 g:232 b:72 
[178]->r:205 g:219 b:112 
[179]->r:176 g:181 b:139 
[180]->r:180 g:191 b:51 
[181]->r:29 g:30 b:8 
[182]->r:157 g:158 b:53 
[183]->r:207 g:208 b:145 
[184]->r:207 g:206 b:75 
[185]->r:248 g:248 b:168 
[186]->r:232 g:232 b:162 
[187]->r:248 g:248 b:184 
[188]->r:232 g:232 b:184 
[189]->r:248 g:248 b:200 
[190]->r:232 g:232 b:200 
[191]->r:248 g:248 b:216 
[192]->r:232 g:232 b:216 
[193]->r:248 g:248 b:232 
[194]->r:211 g:205 b:52 
[195]->r:245 g:237 b:74 
[196]->r:247 g:238 b:113 
[197]->r:247 g:238 b:145 
[198]->r:90 g:85 b:46 
[199]->r:165 g:158 b:103 
[200]->r:239 g:208 b:32 
[201]->r:135 g:118 b:18 
[202]->r:203 g:188 b:109 
[203]->r:248 g:232 b:168 
[204]->r:229 g:216 b:163 
[205]->r:243 g:204 b:76 
[206]->r:137 g:114 b:49 
[207]->r:248 g:232 b:184 
[208]->r:227 g:216 b:184 
[209]->r:245 g:204 b:113 
[210]->r:248 g:232 b:200 
[211]->r:183 g:126 b:18 
[212]->r:219 g:155 b:42 
[213]->r:246 g:209 b:144 
[214]->r:139 g:116 b:79 
[215]->r:81 g:55 b:18 
[216]->r:248 g:216 b:168 
[217]->r:229 g:200 b:162 
[218]->r:177 g:120 b:50 
[219]->r:135 g:80 b:18 
[220]->r:225 g:156 b:80 
[221]->r:248 g:216 b:184 
[222]->r:232 g:216 b:200 
[223]->r:248 g:232 b:216 
[224]->r:208 g:176 b:145 
[225]->r:182 g:121 b:78 
[226]->r:231 g:161 b:111 
[227]->r:248 g:200 b:168 
[228]->r:182 g:81 b:19 
[229]->r:110 g:52 b:19 
[230]->r:210 g:106 b:44 
[231]->r:227 g:200 b:184 
[232]->r:137 g:79 b:50 
[233]->r:241 g:178 b:145 
[234]->r:248 g:216 b:200 
[235]->r:143 g:49 b:19 
[236]->r:174 g:80 b:50 
[237]->r:248 g:200 b:184 
[238]->r:179 g:49 b:19 
[239]->r:217 g:102 b:94 
[240]->r:183 g:118 b:115 
[241]->r:208 g:139 b:137 
[242]->r:241 g:178 b:176 
[243]->r:28 g:8 b:8 
[244]->r:178 g:80 b:78 
[245]->r:137 g:78 b:78 
[246]->r:236 g:140 b:140 
[247]->r:248 g:200 b:200 
[248]->r:232 g:200 b:200 
[249]->r:248 g:216 b:216 
[250]->r:232 g:216 b:216 
[251]->r:248 g:232 b:232 
[252]->r:248 g:248 b:248 
[253]->r:232 g:232 b:232 
[254]->r:24 g:24 b:24 
[255]->r:8 g:8 b:8 

РЕДАКТИРОВАТЬ: добавлено следующее:

glUniform1i(glGetUniformLocation(render.program, "colormap"), 1);

и теперь я получаю правильные цвета, но очень размытое и шумное изображение.

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

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

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
0 голосов
/ 05 марта 2020

Вам необходимо связать униформу colormap с текстурным блоком 1 (с привязкой текстуры карты цветов).

Вам не нужно связывать ourTexture, потому что 0 - это значение по умолчанию, но вы можете.

Это можно сделать с помощью (когда программа связана):

glUniform1i(glGetUniformLocation(program, "colormap"), 1);

В противном случае оба сэмплера считывают текстуру изображения, используя единицу текстуры 0.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...