Android Shader texture size & Transparency

#1

Hi,

I am trying to work with shaders on Android.
But i encounter an issue :
When i draw an ofFbo with my shader, it only draws the color of the first pixel (top, left : (0,0)) of my image on the entire size of the image:

Here is my code :

// my fragment shader
uniform sampler2D tex0;
varying vec2 texCoordVarying;
void main (void)
{
   vec4 color = texture2D(tex0, texCoordVarying);
   gl_FragColor = color;
}
// my vertex shader
#version 100

attribute vec4 position;
attribute vec2 texCoord;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec2 texCoordVarying;

void main()
{
    gl_Position = projectionMatrix * modelViewMatrix * position;
    texCoordVarying = texCoord;
}
// ofApp.cpp

// setup : 


    ofFbo image;
    image.allocate(ofGetWidth(), ofGetHeight(), GL_RGB);

    image.begin();
    ofClear(0,0,0,255);
    grab_image_from_camera.draw();
    image.end();


// draw:
        ofTexture texImage = image.getTextureReference();

        shader.begin();
        shader.setUniformTexture("tex0",texImage, 1);
        image.draw(0,0,ofGetWidth(), ofGetHeight());
        shader.end();

so what I expect is my image to be drawn as if i dont use shader at all ( it is a test shader, i will update it after)
i expect this :

Thank you :slight_smile:

#2

what is that ?
edit:
Show us the exact code you’re using please. As I can see you declare the fbo inside setup() function and you try to call that in draw() ofTexture texImage = image.getTextureReference();
edit1:
Your fragment shader should have precision defined like this:

#ifdef GL_ES
precision highp float;
#endif
#3

It is just a method i made to get an image from the phone camera as fbo, and then i draw it on the ofFbo (image)
It was just to simplify the code.

#4

Hi, even with the

precision highp float;

it has no effect still the same behavior,
I tried to use power of two textures too, but still no luck.

PS: I am doing that in order to create a shader that discard when alpha == 1.0
So if you know any other solution that by using shaders …

here is my base probleme:

for both images i use setAlphaMask to mask the texture image with a shape.

  • green rectangle : image clother to the camera
  • yellow rectangle : image behind the green image

I want the yellow image to be drawn where the green image is transparent,

This is why I was trying to use shaders.

I know that @zach did it with its new weird-cuts app ? (maybe he can help me)

Thank you :slight_smile:

#5

I think the problem is that android uses a weird texture format for video. In your fragment shader try adding:

#extension GL_OES_EGL_image_external : require

and changing the texture to:

uniform samplerExternalOES texture;

I think the rest is the same

#6

Thank you for your help, but I got my shader working !

// vertex
#version 100
//openframweworks fills attributes
uniform mat4 modelViewProjectionMatrix;
attribute vec2 texcoord;
attribute vec4 position;

varying vec2 texCoordVar;

void main()
{
	gl_Position = modelViewProjectionMatrix * position;
	texCoordVar = texcoord;
}

// fragment
#version 100
precision highp float;
uniform sampler2D texBitmap;
uniform sampler2D maskBitmap;
varying vec2 texCoordVar;

void main(){
	vec2 newTexCoord = vec2(texCoordVar.x, texCoordVar.y);
	vec4 colorMask = texture2D(maskBitmap, newTexCoord);
	if (colorMask.r == 0.0) {
		discard;
	}

	vec4 colorImage = texture2D(texBitmap, newTexCoord);
	gl_FragColor = vec4(colorImage.r, colorImage.g, colorImage.b, 1.0);
}
// draw

ofTexture texImage = images[i].getTextureReference();
ofTexture maskImage = masks[i].getTextureReference();

shader.begin();
shader.setUniformTexture("texBitmap",texImage, 1);
shader.setUniformTexture("maskBitmap",maskImage, 2);

texImage.draw(0, 0, width, height);

shader.end();

Thank you for your help :slight_smile:

Video demo