Need help with shader

[Kultie]

Hi, so currently i'm working on personal game with RPG Maker MV and i'm trying to recreate vision limitation with shader, some thing like this

This example is created with PIXI 5.2 and working with mouse position

After this i'm went back to RPG Maker MV(Using Pixi 4.5.4) and use the shader code, alter it a bit and got it's kinda working with position (0,0)

But when I change to position (0.5,0.5) - hopefully the light will go to center of the screen it got offset like this:

This is what I come up with shader code for this effect 

precision mediump float;
const float PI = 3.1415926535;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

uniform vec2 iResolution;
uniform float iTime;
uniform vec2 pos;

vec4 limitVision(vec2 st, vec2 pos, float radius){
  float pct = 1. - smoothstep(0., radius ,distance(st,vec2(pos)));
  return vec4(pct);
}

vec4 norctunalVision(vec2 st, vec2 pos){
  vec4 col = limitVision(st, pos, .2);  
  vec4 tex = texture2D(uSampler,st);
  vec4 result = mix(col,tex,col.a);
  vec4 tex2 = texture2D(uSampler,st); //sampler texture again for out of vision effect
  tex2.rgb /= 5.; // Alter color
  result = mix(result,tex2,1. - col.a); //Mix them together
  return result;
}

void main(){
    vec2 uv = vTextureCoord;
    vec4 col = norctunalVision(uv, pos);
    gl_FragColor = col;
}

Are there any difference between filter of PIXI(4.5.4) inside RMMV and standalone PIXI(5.2) or some kind of matrix calculation for them?

 

EDIT: Just downgrade my standalone PIXI 5.2 down to 4.5.4 and have same issue, so this maybe a PIXI issues not by rpg maker mv

-------- So what difference between the vTextureCoord or some matrix calculation between PIXI 4.5.4 and 5.2?

[ivan.popelyshev]

There are differences between v4 and v5: v5 allows for fullscreen filters to use same size of texture as screen. 4.5.4 doesnt have that and requires extra conversion operation. 

That operation is mentioned in every filter-related thread on this forum: https://github.com/pixijs/pixi.js/wiki/v4-Creating-filters#filter-area .

The most basic usage is VignetteFilter, which is exactly your case. It was here 10 or more times already.

Imagine that input texture has power-of-two size, and UV's are actually from 0 to 0.6 or something like that, noty from 0 to 1. In your "limitVision" functionyou have to pass not uv's, but "uv * filterArea.xy / iResolution". iResolution aka dimensions can be calcalated inside "filter.apply".

Alternatively:

Try update pixi 4.5.4 to latest 4.8. If pixi-tilemap doesn't work - take it here: https://github.com/pixijs/pixi-tilemap/tree/v4.x/dist . 4.8 has fullscreen mode and you wont have problems with coords.

Welcome to the forums!

 

Edited January 6, 2020 by ivan.popelyshev

[Kultie]

Thanks, I'm fairly new to PIXI and still playing around with it.

I Better remake the code base to match it with the 4.5.4 version since I don't think RMMV will update the PIXI version soon.

For 4.5.4 using filterArea data and i get the perfect result!!!

Still not figuring out how to use 4.8 tho, after I update the library to 4.8 I still have to use pos/filterArea ?.

So i've decided to keep version 4.5.4 for now and when ever i need to do with coordinate on screen like (.5,.5) i'll use `screen's coordinate/filterArea`

Edited January 7, 2020 by Kultie

[ivan.popelyshev]

10 hours ago, Kultie said:

Still not figuring out how to use 4.8 tho, after I update the library to 4.8 I still have to use pos/filterArea ?.

"container.filterArea = renderer.screen" for whatever container has those filters.

[Kultie]

God i'm obviously a retard for not understand this.

When you say 4.8 has full screen mode and i blindly follow that without reading more in documents.

Thank you so much !!!!

[ivan.popelyshev]

You're not  That topic is pixijs only, doesn't exist in other GL engines, they all have only full-screen or fixed area mode, on temporary pow2-textures. It took time to make docs, and we are fortunate that your case is one of our basics. I counted 15 different coord system in pixijs shaders, so its kind of difficult topic.