Jump to content

Need help with shader


Recommended Posts

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?

Link to comment
Share on other sites

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".


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 by ivan.popelyshev
Link to comment
Share on other sites

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 by Kultie
Link to comment
Share on other sites

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.

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...