GL ES 2.0 Color, Transparency and my custom animations

Started by
8 comments, last by Sollum 10 years, 10 months ago

Good evening,

Recently i moved to GL ES 2.0 from "immediate mode" and things here, are rather different...

I can't find a fast way to access glColor4f

I used to do my custom animations, where i do it on "draw triangle" level. Now the problem is transparency and coloring, because i have to access it via shader, so i can't for example do fast fade in and fade outs with white screen.

Maybe someone has any tips for that, or i have to go into textures?

Thanks in advance

Advertisement

If you just want to send a 4-component floating point colour, there are two ways you can do this, both supported in ES2.0:

glVertexAttrib4f(v): sets an atrribute once only and the value remains the same for all vertices.

glUniform4f(v): send the colour as a shader uniform.

Direct3D has need of instancing, but we do not. We have plenty of glVertexAttrib calls.

Thanks lad!

Afternoon

I finally got to the part where i want to polish my graphical aesthetics, but i am kind of struggling to understand these two functions you have posted. Mainly with "when i have to call it?".

I immediate mode what i used to do was simply

glColor4f(1, 1, 1, FadeControl.GetFadeTransparency()); each time i was rendering stuff out.

I use this code, to draw quad each time


        private void drawQuad()
	{
		mCubePositions.position(0);		
        GLES20.glVertexAttribPointer(mPositionHandle, mPositionDataSize, GLES20.GL_FLOAT, false,
        		0, mCubePositions); 
        
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        
        mCubeColors.position(0);
        GLES20.glVertexAttribPointer(mColorHandle, mColorDataSize, GLES20.GL_FLOAT, false,
        		0, mCubeColors);
        
        GLES20.glEnableVertexAttribArray(mColorHandle);
        
        //GLES20.glVertexAttrib4f(mColorHandle, 0.1f, 0.1f, 0.1f, 0.1f); //glVertexAttrib4f(v):
        
        mCubeTextureCoordinates.position(0);
        GLES20.glVertexAttribPointer(mTextureCoordinateHandle, mTextureCoordinateDataSize, GLES20.GL_FLOAT, false, 
        		0, mCubeTextureCoordinates);
        
        GLES20.glEnableVertexAttribArray(mTextureCoordinateHandle);
        
        Matrix.multiplyMM(mMVPMatrix, 0, mViewMatrix, 0, MC.getMatrix(), 0);
        
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mMVPMatrix, 0);
        
        GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mMVPMatrix, 0);
        
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 6);   
	}

Where

mColorHandle is GLES20.glGetAttribLocation(programHandle, "a_Color")

And this to create quad itself


        private FloatBuffer mCubePositions;
	private FloatBuffer mCubeColors;
	private FloatBuffer mCubeTextureCoordinates;
	private void createQuad()
	{
		float[] cubePositionData =
			{
				0, 0, 0,
				1, 0, 0,
				1, 1, 0,
				0, 0, 0,
				0, 1, 0,
				1, 1, 0
			};
		
		float[] cubeTextureCoordinateData =
			{		
				0, 0,
				0, 1,
				1, 1,
				0, 0,
				1, 0,
				1, 1
			};
		
		float[] cubeColorData =
			{				
				1.0f, 1.0f, 1.0f, 1.0f,				
				1.0f, 1.0f, 1.0f, 1.0f,
				1.0f, 1.0f, 1.0f, 1.0f,
				1.0f, 1.0f, 1.0f, 1.0f,				
				1.0f, 1.0f, 1.0f, 1.0f,
				1.0f, 1.0f, 1.0f, 1.0f
			};
		
		mCubePositions = ByteBuffer.allocateDirect(cubePositionData.length * mBytesPerFloat)
			.order(ByteOrder.nativeOrder()).asFloatBuffer();							
			mCubePositions.put(cubePositionData).position(0);
		
		mCubeColors = ByteBuffer.allocateDirect(cubeColorData.length * mBytesPerFloat)
			.order(ByteOrder.nativeOrder()).asFloatBuffer();							
			mCubeColors.put(cubeColorData).position(0);
		
		mCubeTextureCoordinates = ByteBuffer.allocateDirect(cubeTextureCoordinateData.length * mBytesPerFloat)
			.order(ByteOrder.nativeOrder()).asFloatBuffer();
			mCubeTextureCoordinates.put(cubeTextureCoordinateData).position(0);
	}

This is how I do it.

//----------------------------

//==================================================================================_GLOBAL_VARIABLES

GLfloat rubber_COLOR[] = { 1.0, 1.0, 1.0, 1.0};

GLuint UNIFORM_rubber_COLOR;

//==================================================================================_GLOBAL_VARIABLES

//==================================================================================_INIT

rubber_SHADER_FRAGMENT = glCreateShader(GL_FRAGMENT_SHADER);

glShaderSource(rubber_SHADER_FRAGMENT, 1, &fragmentSource_rubber, NULL); glCompileShader(rubber_SHADER_FRAGMENT); //------------------------------------------------ glAttachShader(rubber_SHADER, rubber_SHADER_VERTEX); glAttachShader(rubber_SHADER, rubber_SHADER_FRAGMENT); //------------------------------------------------ glBindAttribLocation(rubber_SHADER, 0, "position"); glBindAttribLocation(rubber_SHADER, 1, "normal"); glBindAttribLocation(rubber_SHADER, 2, "texture"); //------------------------------------------------ glLinkProgram(rubber_SHADER);

UNIFORM_rubber_COLOR = glGetUniformLocation(rubber_SHADER, "color"); //This last part 'color' is how you access the variable in the shader

//==================================================================================_INIT_

//==================================================================================_FRAGMENT_SHADER

uniform highp vec4 color;

void main() { gl_FragColor = color; }

//===================================================================================_FRAGMENT_SHADER

//===================================================================================_RENDER

rubber_COLOR[3] -= fadeAlpha;

glUseProgram(rubber_SHADER);

glUniform4f(UNIFORM_rubber_COLOR, rubber_COLOR[0], rubber_COLOR[1], rubber_COLOR[2], rubber_COLOR[3]);

//drawCall goes here

//====================================================================================_RENDER

Consider it pure joy, my brothers and sisters, whenever you face trials of many kinds, 3 because you know that the testing of your faith produces perseverance. 4 Let perseverance finish its work so that you may be mature and complete, not lacking anything.

Could you please explain your code a little bit?

What is a "rubber_SHADER"? I am taking a guess it's a vertex shader.

In render part, why do you re add "rubber_SHADER" each draw?

By "draw call" you mean "GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 6);"?

My fragment shader looks like this


final String fragmentShader =
	"precision mediump float;\n"

	+ "uniform vec3 u_LightPos;\n"
	+ "uniform sampler2D u_Texture;\n"
	+ "uniform vec4 u_Color;\n"

	+ "varying vec4 v_Color;\n"
	+ "varying vec2 v_TexCoordinate;\n"

	+ "void main()\n"
	+ "{\n"
	+ "    gl_FragColor = u_Color * (v_Color * texture2D(u_Texture, v_TexCoordinate));\n"
	+ "}\n";

And if i try

int i_test = GLES20.glGetUniformLocation(fragmentShaderHandle, "u_Color");

i get -1

By the way, actual version does not use

+ " gl_FragColor = u_Color * (v_Color * texture2D(u_Texture, v_TexCoordinate));\n"

but

+ " gl_FragColor = (v_Color * texture2D(u_Texture, v_TexCoordinate));\n"

Otherwise screen will go black. since u_Color is all 0's, but i can't access it :(

rubber is this particular shader's name, you didn't say what your shader's name is, so I used rubber. For instance, rubber_SHADER, iron_SHADER, velvet_SHADER. It's both a vertex shader and a fragment shader. The reason I put the "glUseProgram(rubber_SHADER); " in the render loop is because if you have more than one shader, you have to activate the shader that you currently want to use.

And 'yes' by draw call I mean -> "GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 6);"

//=================================================================================

This following part looks wrong to me. int i_test = GLES20.glGetUniformLocation(fragmentShaderHandle, "u_Color"); It looks like you are trying to make the u_Color a uniform specifically for the fragment shader. The way I set things up, all uniforms are available to both the vertex and fragment programs. To my knowledge, GLSL doesn't make this distinction although Cg does and I assume HLSL does as well. I suppose it's possible but I've never encountered this so far. I would try int i_test = GLES20.glGetUniformLocation(ShaderHandle, "u_Color"); instead, but if the uniform is failing in the shader, this test will fail as well I suspect. Without your full shader initialization code I can't even guess at where the error is coming from. All I can say is that u_Color is not being initialized properly.

Consider it pure joy, my brothers and sisters, whenever you face trials of many kinds, 3 because you know that the testing of your faith produces perseverance. 4 Let perseverance finish its work so that you may be mature and complete, not lacking anything.

Ahhh, yes, sorry, forgot to post shader code, my bad. I'll post entire shader code with initialization, some assigned handles are not working, because they do not exist, but they aint that critical. I'll admit that shader initialization code is glued from many sources, so i might not be entirely sure whats going on in there. In any case, ill try to fix it by myself tomorrow after work, because i am dead tired already >.>


	final String vertexShader =
		"uniform mat4 u_MVPMatrix;\n"
		+ "uniform mat4 u_MVMatrix;\n"
		+ "uniform vec4 u_Color;\n"
				 
		+ "attribute vec4 a_Position;\n"
		+ "attribute vec4 a_Color;\n"
		+ "attribute vec3 a_Normal;\n"
		+ "attribute vec2 a_TexCoordinate;\n"
				 
		+ "varying vec3 v_Position;\n"
		+ "varying vec4 v_Color;\n"
		+ "varying vec3 v_Normal;\n"
		+ "varying vec2 v_TexCoordinate;\n"
				 
		+ "void main()\n"
		+ "{\n"
		+ "    v_Position = vec3(u_MVMatrix * a_Position);\n"
		+ "    v_Color = a_Color;\n"
		+ "    v_TexCoordinate = a_TexCoordinate;\n"
		+ "    gl_Position = u_MVPMatrix * a_Position;\n"
		+ "}\n";
			
	final String fragmentShader =
		"precision mediump float;\n"
				
		+ "uniform vec3 u_LightPos;\n"
		+ "uniform sampler2D u_Texture;\n"
		//+ "uniform vec4 u_Color;\n"
				
		//+ "varying vec3 v_Position;\n"
		+ "varying vec4 v_Color;\n"
		//+ "varying vec3 v_Normal;\n"
		+ "varying vec2 v_TexCoordinate;\n"
				
		+ "void main()\n"
		+ "{\n"
		+ "    gl_FragColor = (v_Color * texture2D(u_Texture, v_TexCoordinate));\n"
		+ "}\n";
		
	vertexShaderHandle = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
		
	if (vertexShaderHandle != 0) 
	{
		// Pass in the shader source.
		GLES20.glShaderSource(vertexShaderHandle, vertexShader);

		// Compile the shader.
		GLES20.glCompileShader(vertexShaderHandle);

		// Get the compilation status.
		final int[] compileStatus = new int[1];
		GLES20.glGetShaderiv(vertexShaderHandle, GLES20.GL_COMPILE_STATUS, compileStatus, 0);

		// If the compilation failed, delete the shader.
		if (compileStatus[0] == 0) 
		{				
			GLES20.glDeleteShader(vertexShaderHandle);
			vertexShaderHandle = 0;
		}
	}

	if (vertexShaderHandle == 0)
	{
		throw new RuntimeException("Error creating vertex shader.");
	}
		
	// Load in the fragment shader shader.
	fragmentShaderHandle = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);

	if (fragmentShaderHandle != 0) 
	{
		// Pass in the shader source.
		GLES20.glShaderSource(fragmentShaderHandle, fragmentShader);

		// Compile the shader.
		GLES20.glCompileShader(fragmentShaderHandle);

		// Get the compilation status.
		final int[] compileStatus = new int[1];
		GLES20.glGetShaderiv(fragmentShaderHandle, GLES20.GL_COMPILE_STATUS, compileStatus, 0);
			
		// If the compilation failed, delete the shader.
		if (compileStatus[0] == 0) 
		{				
			GLES20.glDeleteShader(fragmentShaderHandle);
			fragmentShaderHandle = 0;
		}
	}

	if (fragmentShaderHandle == 0)
	{
		throw new RuntimeException("Error creating fragment shader.");
	}
		
	// Create a program object and store the handle to it.
	programHandle = GLES20.glCreateProgram();
		
	if (programHandle != 0) 
	{
		// Bind the vertex shader to the program.
		GLES20.glAttachShader(programHandle, vertexShaderHandle);			

		// Bind the fragment shader to the program.
		GLES20.glAttachShader(programHandle, fragmentShaderHandle);
			
		// Bind attributes
		GLES20.glBindAttribLocation(programHandle, 0, "a_Position");
		GLES20.glBindAttribLocation(programHandle, 1, "a_Color");
		GLES20.glBindAttribLocation(programHandle, 2, "a_TexCoordinate");
		GLES20.glBindAttribLocation(programHandle, 3, "a_Normal");
			
		// Link the two shaders together into a program.
		GLES20.glLinkProgram(programHandle);

		// Get the link status.
		final int[] linkStatus = new int[1];
		GLES20.glGetProgramiv(programHandle, GLES20.GL_LINK_STATUS, linkStatus, 0);

		// If the link failed, delete the program.
		if (linkStatus[0] == 0) 
		{				
			GLES20.glDeleteProgram(programHandle);
			programHandle = 0;
		}
	}
		
	if (programHandle == 0)
	{
		throw new RuntimeException("Error creating program.");
	}
		
	GLES20.glUseProgram(programHandle);
		
	mMVPMatrixHandle = GLES20.glGetUniformLocation(programHandle, "u_MVPMatrix");
	mMVMatrixHandle = GLES20.glGetUniformLocation(programHandle, "u_MVMatrix"); 
	mLightPosHandle = GLES20.glGetUniformLocation(programHandle, "u_LightPos");
	mTextureUniformHandle = GLES20.glGetUniformLocation(programHandle, "u_Texture");
	mPositionHandle = GLES20.glGetAttribLocation(programHandle, "a_Position");
	mColorHandle = GLES20.glGetAttribLocation(programHandle, "a_Color");
	mNormalHandle = GLES20.glGetAttribLocation(programHandle, "a_Normal"); 
	mTextureCoordinateHandle = GLES20.glGetAttribLocation(programHandle, "a_TexCoordinate");      
        
	GLES20.glUseProgram(programHandle);

Alright, let's see if we can get your color uniform up and running. I'm only going to use code fragments so you can identify proper positioning without me making a big mess here.

//===========================================================================_GLOBALS

GLfloat AdjustColor[] = {1.0, 1.0, 1.0, 1.0}; //

GLint mMVPMatrixHandle; GLint mMVMatrixHandle; GLint mLightPosHandle;

GLint mAdjustColorUniformHandle; //<--------Add the shader handle

//===========================================================================_SHADER

final String fragmentShader = "precision mediump float;\n" + "uniform vec3 u_LightPos;\n" + "uniform sampler2D u_Texture;\n" + "uniform vec4 u_Color ;\n" //<----make sure to uncomment this again

//...................

+ "void main()\n" + "{\n" + " gl_FragColor = u_Color * (v_Color * texture2D(u_Texture, v_TexCoordinate));\n" //<----Then add it back into the formula + "}\n";

//===========================================================================

mMVPMatrixHandle = GLES20.glGetUniformLocation(programHandle, "u_MVPMatrix"); mMVMatrixHandle = GLES20.glGetUniformLocation(programHandle, "u_MVMatrix"); mLightPosHandle = GLES20.glGetUniformLocation(programHandle, "u_LightPos"); mTextureUniformHandle = GLES20.glGetUniformLocation(programHandle, "u_Texture");

mAdjustColorUniformHandle = GLES20.glGetUniformLocation(programHandle, "u_Color"); //<----now initialize the color uniform here

mPositionHandle = GLES20.glGetAttribLocation(programHandle, "a_Position"); mColorHandle = GLES20.glGetAttribLocation(programHandle, "a_Color"); mNormalHandle = GLES20.glGetAttribLocation(programHandle, "a_Normal"); mTextureCoordinateHandle = GLES20.glGetAttribLocation(programHandle, "a_TexCoordinate");

//===========================================================================_RENDER

private void drawQuad() { AdjustColor[3] -= 0.01; //<----fade transparency

//--------------------------------------------------------

mCubePositions.position(0); //... //... GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mMVPMatrix, 0);

GLES20.glUniform4f(mAdjustColorUniformHandle, AdjustColor[0], AdjustColor[1], AdjustColor[2], AdjustColor[3]); //<----now update the shader

GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 6); }

//===========================================================================

And also, check to make sure blending is enabled.

Consider it pure joy, my brothers and sisters, whenever you face trials of many kinds, 3 because you know that the testing of your faith produces perseverance. 4 Let perseverance finish its work so that you may be mature and complete, not lacking anything.

Thanks a lot mate!

It finally works!

Funny thing, i tried to check first if handle is assigned, without changing gl_FragColor. Handle was always -1. Was stuck about half an hour, still couldn't find the problem, started googling, it appeared that GL SL optimized my code and removed uniform, since i wasnt using it.

This topic is closed to new replies.

Advertisement