We Keep Coding

Multitexturing and labels in Opengl ES 3.0

I want to draw numbers on an object using multitexturing. But the final image is lighter, like:
Is it possible to exclude white color from multitexure and make the digit darker?
Here's the my fragment shader:
#version 300 es
precision mediump float;
in vec2 v_textureCoord;
out vec4 outColor;
uniform sampler2D base_texture;
uniform sampler2D number_texture;
void main() {
// wall texture
vec4 baseColor = texture(base_texture, v_textureCoord);
// texture with digit
vec4 numberColor = texture(number_texture, v_textureCoord);
// resulting pixel color based on two textures
outColor = baseColor * (numberColor + 0.5);
}
I tried to do this:
GLES30.glEnable(GLES30.GL_BLEND);
GLES30.glBlendFunc(GLES30.GL_SRC_ALPHA, GLES30.GL_ONE);
GLES30.glActiveTexture(GLES30.GL_TEXTURE1);
...
GLES30.glDisable(GLES30.GL_BLEND);
But this did not solve the problem.
Thank you for any answer/comment!
Solution:
On Rabbid76 advice, I applied this:
outColor = baseColor * mix(numberColor, vec4(1.0), 0.5);
Result:

mix the color of number_texture by a white color, rather than adding a constnant:
outColor = baseColor * mix(numberColor, vec4(1.0), 0.5);
Actually that is the same as:
outColor = baseColor * (numberColor * 0.5 + 0.5);

Diffuse lighting for a moving object

When calculating diffuse lighting for a moving object, I have to move the luminous source along with the object itself:
#Override
public void draw() { // draw frame
...
// Move object
GLES20.glVertexAttribPointer(aPositionLink, 3, GLES30.GL_FLOAT,
false, 0, object3D.getVertices());
// The luminous source moves nearby the object, so the
// object is always illuminated from one side
GLES20.glUniform3f(lightPositionLink, object3D.getX(),
object3D.getY(), object3D.getZ() + 2.0f);
...
}
Snippet of vertex shader:
#version 300 es
uniform mat4 u_mvMatrix; // model-view matrix of object
uniform vec3 u_lightPosition; // position of the luminous source
in vec4 a_position; // vertex data is loaded here
in vec3 a_normal; // normal data is loaded here
struct DiffuseLight {
vec3 color;
float intensity;
};
uniform DiffuseLight u_diffuseLight;
...
void main() {
...
vec3 modelViewNormal = vec3(u_mvMatrix * vec4(a_normal, 0.0));
vec3 modelViewVertex = vec3(u_mvMatrix * a_position);
// calculate the light vector by subtracting the
// position of the object from the light position
vec3 lightVector = normalize(u_lightPosition - modelViewVertex);
float diffuse = max(dot(modelViewNormal, lightVector), 0.1);
float distance = length(u_lightPosition - modelViewVertex);
diffuse = diffuse * (1.0 / (1.0 + pow(distance, 2.0)));
// calculate the final color for diffuse lighting
lowp vec3 diffuseColor = diffuse * u_diffuseLight.color * u_diffuseLight.intensity;
v_commonLight = vec4((ambientColor + diffuseColor), 1.0);
...
}
Is this the right approach? Or is there another rational option with stationary luminous source so as not to expend resources on calculating the position of the luminous source each frame? Note: Increasing the distance does not help. Thanks in advance.
SOLUTION:
On the advice of Rabbid76 I applied directional light as described here.

I have to move the luminous source along with the object itself
Why does the light source move with the object?
If the light is a point light source in the world, and the object moves, then the illumination of the object changes (in the "real" world).
In your case, the lighting is computed in view space. If the light source is a point in the world, then you have to transform the position by the view matrix (the view matrix transforms from world space to view space). e.g:
uniform mat4 u_viewMatrix;
void main()
{
// [...]
vec3 lightPosView = vec3(u_viewMatrix * vec4(u_lightPosition.xyz, 1.0));
vec3 lightVector = normalize(u_lightPosition - modelViewVertex);
// [...]
}
Anyway, if the object moves and the light source is somehow anchored to the object, the you have to apply the transformations, which are applied to the vertices of the object, to the light source, too.
In that case u_lightPosition has to be a position in the model space of the object, that means it is relative to the object (u_lightModelPosition). Then you can do:
uniform vec3 u_lightModelPosition;
void main()
{
mat3 normalMat = inverse(transpose(mat3(u_mvMatrix)));
vec3 modelViewNormal = normalMat * a_normal;
vec3 modelViewVertex = vec3(u_mvMatrix * a_position);
vec3 modelViewLight = vec3(u_mvMatrix * vec4(u_lightModelPosition, 1.0));
vec3 lightVector = normalize(modelViewLight - modelViewVertex);
// [...]
}
If you want a light, that doesn't depend on the position, the you have to use a directional light. In that case the light source is not a point in the world, it is a direction only. e.g.:
vec3 lightVector = -u_lightRayDirection;
u_lightRayDirection has to be in the space of the light calculations. Since the lighting is computed in view space, u_lightRayDirection has to be a direction in view space, too. If u_lightRayDirection is a vector in world space, then it has to be transformed by mat3(u_viewMatrix).
A directional light has no distance (or a constant distance).
If the light source is anchored to the camera, no transformations are required at all (because you the light calculations in view space).

GLSL Smooth border shader

I'm looking for a specific shader or an idea for another approach to get the desired result.
A picture shows the desired result (left-side input, right-side output):
I already experimented with modifying a simple vignette shader:
varying vec4 v_color;
varying vec2 v_texCoord0;
uniform vec2 u_resolution;
uniform sampler2D u_sampler2D;
const float outerRadius = .65, innerRadius = .4, intensity = .6;
void main() {
vec4 color = texture2D(u_sampler2D, v_texCoord0) * v_color;
vec2 relativePosition = gl_FragCoord.xy / u_resolution - .5;
float len = length(relativePosition);
float vignette = smoothstep(outerRadius, innerRadius, len);
color.rgb = mix(color.rgb, color.rgb * vignette, intensity);
gl_FragColor = color;
}
I think it's more confusing than helpful when I show you my modified code. I tried to imitate the same concept as of the vignette shader: Used the bounding box of the island, transforming x,y,width,height in screenCoords and get the relative position of fragCoords to island's center (normal vignette would use the screen resolution instead the island 'resolution'). Then I wanted to invert the vignette effect (inside dark, outside fade out)
Unfortunately it doesn't work and I think whole approach should be changed.
Second idea is to place a dark light in all islands on my map. (with Box2DLights)
But this might be a little expensive?
Any other ideas?

Rendering a laser beam - how to make it face camera?

(I am using a LibGDX framework which is basically just LWJGL(Java) with OpenGL for rendering)
Hi, I'm trying to render a laser beam, so far I've got this effect,
It's just a rectangle and then the whole effect is done in fragment Shader.
However, as it is a laser beam, I want the rectangle to face a camera, so the player always sees this red transparent "line" everytime. And this is driving me crazy. I tried to do some billboarding stuff, however what I want isn't really billboarding. I just want to rotate it on Z axis so that the player always sees the whole line, that's all. No X and Y rotations.
As you can see, that's what I want. And it's not billboarding at all.
If it was billboarding, it would look like this: .
I also tried to draw cylinder and the effect based on gl_FragCoord, which was working fine, but the coords were varying(sometimes the UVs were 0 and 1, sometimes 0 and 0.7) and it was not sampling whole texture, so the effect was broken.
Thus I don't even know what to do now.
I would really appreciate any help. Thanks in advance.
Here's vertexShader code:
attribute vec3 a_position;
attribute vec2 a_texCoord0;
uniform mat4 u_worldTrans; //model matrix
uniform mat4 u_view; //view matrix
uniform mat4 u_proj; // projection matrix
varying vec2 v_texCoord0;
void main() {
v_texCoord0 = a_texCoord0;
vec4 worldTrans = u_worldTrans * vec4(a_position, 1.0);
gl_Position = u_proj * u_view * worldTrans;
}
and here's fragmentShader codE:
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord0;
uniform sampler2D tex; //texture I apply the red color onto. It's how I get the smooth(transparent) edges.
void main() {
vec4 texelColor = texture2D( tex, v_texCoord0 ); //sampling the texture
vec4 color = vec4(10.0,0.0,0.0,1.0); //the red color
float r = 0.15; //here I want to make the whole texture be red, so when there's less transparency, I want it to be more red, and on the edges(more transparency) less red.
if (texelColor.a > 0.5) r = 0.1;
gl_FragColor = vec4(mix(color.rgb,texelColor.rgb,texelColor.a * r),texelColor.a); //and here I just mix the two colors into one, depengind on the alpha value of texColor and the r float.
}
The texture is just a white line opaque in the middle, but transparent at the edges of the texuture. (smooth transition)

If you use DecalBatch to draw your laser, you can do it this way. It's called axial billboarding or cylindrical billboarding, as opposed to the spherical billboarding you described.
The basic idea is that you calculate the direction the sprite would be oriented for spherical billboarding, and then you do a couple of cross products to get the component of that direction that is perpendicular to the axis.
Let's assume your laser sprite is aligned to point up and down. You would do this series of calculations on every frame that the camera or laser moves.
//reusable calculation vectors
final Vector3 axis = new Vector3();
final Vector3 look = new Vector3();
final Vector3 tmp = new Vector3();
void orientLaserDecal (Decal decal, float beamWidth, Vector3 endA, Vector3 endB, Camera camera) {
axis.set(endB).sub(endA); //the axis direction
decal.setDimensions(beamWidth, axis.len());
axis.scl(0.5f);
tmp.set(endA).add(axis); //the center point of the laser
decal.setPosition(tmp);
look.set(camera.position).sub(tmp); //Laser center to camera. This is
//the look vector you'd use if doing spherical billboarding, so it needs
//to be adjusted.
tmp.set(axis).crs(look); //Axis cross look gives you the
//right vector, the direction the right edge of the sprite should be
//pointing. This is the same for spherical or cylindrical billboarding.
look.set(tmp).crs(axis); //Right cross axis gives you an adjusted
//look vector that is perpendicular to the axis, i.e. cylindrical billboarding.
decal.setRotation(look.nor(), axis); //Note that setRotation method requires
//direction vector to be normalized beforehand.
}
I didn't check to make sure the direction doesn't get flipped, because I draw it with back face culling turned off. So if you have culling on and don't see the sprite, that last cross product step might need to have its order reversed so the look vector points in the opposite direction.

GLSL renders textures wrong

I am trying to make a lighting system, the program changes the texture(block) brightness depends on the light it gets, and the program does it for every block(texture) that is visible to the player.
However, the lighting system works perfectly, but when it comes to rendering with shaders everything gets destroyed.
This code is in the render loop -
float light = Lighting.checkLight(mapPosY, mapPosX, this); // Returns the light the current block gets
map[mapPos].light = light; // Applies the light to the block
Shaders.block.setUniformf("lightBlock", light); // Sets the light value to the shader's uniform, to change the brightness of the current block / texture.
batch.draw(map[mapPos].TEXTURE, (mapPosX * Block.WIDTH), (mapPosY * Block.HEIGHT), Block.WIDTH, Block.HEIGHT); // Renders the block / texture to the screen.
The result is pretty random..
As i said the first two lines work perfectly, the problem is probably is in the third line or in the shader itself.
The shader:
Vertex shader -
attribute vec4 a_color;
attribute vec3 a_position;
attribute vec2 a_texCoord0;
uniform mat4 u_projTrans;
varying vec4 vColor;
varying vec2 vTexCoord;
void main() {
vColor = a_color;
vTexCoord = a_texCoord0;
gl_Position = u_projTrans * vec4(a_position, 1.0f);
}
Fragment shader -
varying vec4 vColor;
varying vec2 vTexCoord;
uniform vec2 screenSize;
uniform sampler2D tex;
uniform float lightBlock;
const float outerRadius = .65, innerRadius = .4, intensity = .6;
const float SOFTNESS = 0.6;
void main() {
vec4 texColor = texture2D(tex, vTexCoord) * vColor;
vec2 relativePosition = gl_FragCoord.xy / screenSize - .5;
float len = length(relativePosition);
float vignette = smoothstep(outerRadius, innerRadius, len);
texColor.rgb = mix(texColor.rgb, texColor.rgb * vignette * lightBlock, intensity);
gl_FragColor = texColor;
}

I fixed the problem.. but i dont have any idea why it fixed it.
Thanks to Pedro, i focused more on the render loop instead of the shader itself.
Before the loop i added those 2 lines -
List<Integer> lBlocks = new ArrayList<Integer>();
Shaders.block.setUniformf("lightBlock", 0.3f);
Basically I created an array to store the bright blocks later on.
I set the uniform of the shader to be 0.3f which means pretty dark. the value should be 0-1f.
Now in the render loop, inside the for -
float light = Lighting.checkLight(mapPosY, mapPosX, this);
map[mapPos].light = light;
if( light == 1.0f) {
lBlocks.add(mapPos);
} else {
batch.draw(map[mapPos].TEXTURE, (mapPosX * Block.WIDTH), (mapPosY * Block.HEIGHT), Block.WIDTH, Block.HEIGHT);
}
As you can see, the bright blocks i add to the array and the dark ones i render, i set the uniform to 0.3f before the render loop as you can in the first code sample.
After the render loop i loop again through the bright blocks.. because we didn't render them.
Shaders.block.setUniformf("lightBlock", 1.0f);
for(int i = 0; i < lBlocks.size(); i++) {
batch.draw(map[lBlocks.get(i)].TEXTURE, ((lBlocks.get(i) % width) * Block.WIDTH), ((lBlocks.get(i) / width) * Block.HEIGHT), Block.WIDTH, Block.HEIGHT);
}
Now i rendered the bright blocks and it works.. the result was good.
But I don't have any idea why its like that, its like cutting the render loop to two, one for dark blocks and one for the bright ones.
Thanks :)