dealah
Posts: 6
Joined: Wed Dec 05, 2012 2:24 pm

display a changing array in opengl es

Mon Jan 07, 2013 2:56 pm

Hi All,

I'm working on a music visualizer based on pishadertoy (https://github.com/dff180/pishadertoy).
I already managed to integrate a pulseaudio listener to get the audio input, and I also managed to pass a limited number of music related variables (eg. energy, frequency etc) to the shader as uniform variables and I can use them for controlling colors, ampulited etc, and thats fine..

However, I also want to display the audio sample so I tried to pass the array of audio samples as a uniform array to GLSL. The problem is when I try to use this array to decide what to do with a specific pixel I got this error:
"Support for indexing array/vector/matrix with a non-constant is not mandated in the fragment shader."

It there any common solution how to override this limitation? What should I do in order to use an non-constant array to control the operation of fragment shader. I was already thinking on to depict the audio signal in a texture and to display this texture in the fragment shader but I'm not sure whether this is best solution.

Thanks for your advice in advance!

User avatar
PeterO
Posts: 5829
Joined: Sun Jul 22, 2012 4:14 pm

Re: display a changing array in opengl es

Mon Jan 07, 2013 3:05 pm

It may not be quite what you are looking for, but I use textures to pass in large arrays of data to shaders.
It can be a bit "fiddly" making sure you access the correct position in the texture to get the array element you want, but it can be made to work.
I'll post an example fragment shader this evening.
PeterO
Discoverer of the PI2 XENON DEATH FLASH!
Interests: C,Python,PIC,Electronics,Ham Radio (G0DZB),1960s British Computers.
"The primary requirement (as we've always seen in your examples) is that the code is readable. " Dougie Lawson

User avatar
PeterO
Posts: 5829
Joined: Sun Jul 22, 2012 4:14 pm

Re: display a changing array in opengl es

Mon Jan 07, 2013 7:55 pm

Here is a fragment shader I use to display text in an old style typewriter font on a texture.

Code: Select all

precision mediump float;
 varying vec2 v_texCoord;
 uniform sampler2D s_paperFontTexture;
 uniform sampler2D s_paperCharsTexture;
  
 uniform vec2 u_offset;
 void main()
 {
	vec2 tmp,chargen,charxy;
     	float char;
     	vec4 charv;
     
	charxy.x = (0.5+floor(v_texCoord.x * 85.0)*0.9921875)/128.0;  
     	charxy.y = fract(((0.5+floor(v_texCoord.y * 51.0))/64.0) + u_offset.y);
	
	charv = texture2D(s_paperCharsTexture,charxy);
	char = floor(charv.r * 64.0);

	chargen.x = mod(char,8.0)*255.0/(8.0*256.0);
     	chargen.y = floor((char+0.01)/8.0)/8.0;


     	tmp.x = chargen.x + (0.075 * fract(v_texCoord.x * 85.0));
     	tmp.y = chargen.y + (0.11 * fract(v_texCoord.y * 51.0));

	gl_FragColor = texture2D(s_paperFontTexture, tmp);
}


And the matching vertex shader

Code: Select all

uniform mat4 u_mvpMatrix;
attribute vec4 a_position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;
void main()
{
   gl_Position = u_mvpMatrix * a_position;
   v_texCoord = a_texCoord;
}
v_texCoord (which has x and y values between 0 and 1) is converted into 85 x 51 discrete coordinates which match the number of characters that fit on a piece of paper in the typewriter.
0.9921875 is 254/256, charxy is used to look up the actual character code in the texture paperCharsTexture which is then multipled by 64 to give the integer character number.
paperFontTexture holds the 64 character images on an 8x8 grid. The character code (char) is converted into the coordinated of the corner of on of these 64 cells. Then a scaled version of texCoord is added to the cell coordinate to scan the image in the cell and lookup the fragment colour. The attached image shows a typical result.
HTH PeterO
Attachments
grab.png
grab.png (60.91 KiB) Viewed 2972 times
Discoverer of the PI2 XENON DEATH FLASH!
Interests: C,Python,PIC,Electronics,Ham Radio (G0DZB),1960s British Computers.
"The primary requirement (as we've always seen in your examples) is that the code is readable. " Dougie Lawson

dealah
Posts: 6
Joined: Wed Dec 05, 2012 2:24 pm

Re: display a changing array in opengl es

Mon Jan 07, 2013 11:27 pm

Wow PeterO!

I wouldn't say that I completely understand your tricky mechanism (or at least for me it is very tricky:).
My problem is somehow different. I want to update the texture during runtime (with the new audio data available) and display on the screen.
If I'm not mistaken in the example you choose a specific character to display from a predefined texture (paperFontTexture) where all the font are stored.

User avatar
PeterO
Posts: 5829
Joined: Sun Jul 22, 2012 4:14 pm

Re: display a changing array in opengl es

Tue Jan 08, 2013 10:25 am

You can bind a texture with new data for every frame. When the text to be displayed changes my code just changes the values in the texture and the new characters appear :-)

If you are just drawing a line graph of the waveform it may be better to produce an array of vertices and let the GPU draw the lines.
PeterO
Discoverer of the PI2 XENON DEATH FLASH!
Interests: C,Python,PIC,Electronics,Ham Radio (G0DZB),1960s British Computers.
"The primary requirement (as we've always seen in your examples) is that the code is readable. " Dougie Lawson

Return to “OpenGLES”