Render a texture in OpenGL ES 2 using a colormap array

0
votes

I´m trying to render a map raster image as a texture in OpenGL. The original image file pixel format is a single byte and have their RGB values in a 256x3 bytes colormap (R,G,B). I can correctly render the image performing the color mapping and generating RGB pixels in the CPU, then loading as texture in OpenGL. However I'd like to have the fragment shader do that. As I'm currently using OpenGL ES , I'm loading the colormap as a 256x1 2D texture (1D are not supported). However I'm getting a wrong color rendering (all red or some hint of image all in red). I can have a render in very raw black-white assigning fragColor = texture(ourTexture, texCoord).rrr so the image texture loading seems fine;

Here's the fragment shader:

#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)); 
}

Here's the colormap texture initialization

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]);

Here's the raster image initialization:

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);

and pixel loading somewhere else

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);

Here's the drawing code:

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);

this is a formatted printout of the colormap as it gets loaded as texture:

[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

EDIT: added the following:

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

and now I get proper colors but a very blurry and noisy image.

2
copengl-es
Where are the uniforms set and textures bound for drawing? – user253751
sorry, just added the binding/drawing code to the question – metamatic
Where do you set the values of uniform variables? – user253751
I don't. Those should be sorted out when calling glActiveTexture according to the position in the shader code. – metamatic
I have reverted your last edit because you should not put the solution in the question. See meta.stackoverflow.com/questions/266767/… and meta.stackexchange.com/questions/43478/… . In my opinion, the original problem (everything is red) and the new problem (everything is blurry) are different problems, even though they're both related to the same part of the program. – user253751

2 Answers

0
votes

You need to bind the colormap uniform to texture unit 1 (which has the colormap texture bound).

You don't need to bind ourTexture because 0 is the default value, but you can.

You can do this with (when the program is bound):

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

Otherwise, both samplers read from the image texture using texture unit 0.

0
votes

Fixed, the problem here was the Use of GL_LINEAR filtering. It would interpolate the texture and create "entry" values that don't map coherently anymore to the original color-map. Changing it to GL_NEAREST fixed it: 

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);