Jump to content

Using Second Texture in Filter Question


Recommended Posts

Hi there!

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


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


Link to comment
Share on other sites

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


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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...