Using Second Texture in Filter Question

[gizmodude4]

Hi there!

I've been following this tutorial for doing my day/night shaders for a scene I'm working on:

https://www.youtube.com/watch?v=q4N6xE7FHTU

The day/night part has been working great, but I'm having issues passing in a second texture to use for my lights. I've created an image with the same dimensions as my first texture, but with lights and nothing else. My fragment shader currently looks like this:

varying vec2 vTextureCoord;

uniform sampler2D uSampler;

 

uniform sampler2D lights;

 

uniform vec3 color;

uniform float con_sat_brt[5];

uniform float lightStrength;

 

#define contrast      con_sat_brt[0]

#define saturation    con_sat_brt[1]

#define brightness    con_sat_brt[2]

#define pop_strength  con_sat_brt[3]

#define pop_threshold con_sat_brt[4]

 

void main() {

vec4 tex = texture2D(uSampler, vTextureCoord);

vec3 out_col = tex.rgb;

 

float grey = dot(out_col, vec3(0.299, 0.587, 0.114));

// overlay

out_col = grey > 0.5 ? 1.0 - (1.0 - 2.0 * (out_col - 0.5)) * (1.0 - color)  : 2.0 * out_col * color;

// add saturation

out_col = mix(vec3(grey), out_col, saturation);

// add contrast

out_col = (out_col - 0.5) * contrast + 0.5;

// pop lights

out_col = out_col + pop_strength * max(grey - pop_threshold, 0.0);

// add brightness

out_col = out_col + brightness;

 

// lights for night time, breh

vec3 lights_col = texture2D(lights, vTextureCoord).rgb;

grey = lightStrength * dot(lights_col, vec3(0.333));

out_col = mix(out_col, tex.rgb * normalize(lights_col + 0.05) * 3.0, grey);

 

gl_FragColor = vec4(out_col, tex.a);

The result of this is a super saturated, very bright image even when the values for brightness, contrast, saturation, etc. are low for night and nothing changes for time of day. I suspect this has to do with `vec3 lights_col = texture2D(lights, vTextureCoord).rgb`

I was trying to narrow down the differences between `uSampler` and `lights`, but didn't get anywhere. `lights` is passed in as a uniform like this:

lights = new PIXI.Sprite(loader.resources["assets/peaceful-valley-lights.png"].texture);

foregroundDayNightShader.uniforms.lights = lights._texture;

I've tried reading through the Displacement Filter source, but I'm not sure if this is directly applicable.

It feels like I'm really close to figuring this out and that it has something to do with my lights not being in the right coordinate space or being sampled incorrectly. Any tips? If this isn't clear enough, I can also spend some time trying to fiddle-fy it

 

[ivan.popelyshev]

please provide minimal demo so someone can fix it )

[gizmodude4]

Thanks Ivan! Here's the weird thing, I put together a demo and the demo works:

https://jsfiddle.net/o51eax6v/22/

After manipulating my source to include the texture and light strength in the shader before animate was called, things started working. Is there some timing I'm not aware of? My source had lights and lightStrength being set a whenever an update to the shader was necessary, but not being present during the initial definition. The fiddle I posted has the uniforms set after the sprites are rendered to the screen, but for some reason it still works. Is there maybe something in the animation loop that locks down what uniforms can be passed in or when?