EGADS #1

Big visual difference makes that everything else is even more grayed. Try different setting, like adding all adding all 3 components to parks, roads, water etc.

[lua]

local unrelated  = display.newImage( “archery.png”, 80, 220 )

unrelated.fill.effect = “filter.colorMatrix”

unrelated.fill.effect.coefficients = {

    0.299, 0.587, 0.114, 0.7,

    0.299, 0.587, 0.114, 0.7,

    0.299, 0.587, 0.114, 0.7,

    0,     0,     0,     1

}

unrelated.fill.effect.bias = { -0.2, -0.2, -0.2, 0 }

[/lua]

IfQLket.png

          Default

Unrelated Disabled

         Active

Hi Vlad, I’ve noticed a big frame rate hit with colorMatrix fills.  Without fill…

With fill…

On device (One Plus 3T with snapdragon 821 and 6GB RAM) the frame rate drops from 29 fps to 12 fps - is this normal and expected behaviour?

It’s hard to say. Try assigning fill effect/parameters once and not changing them, see if it helps. But using color matrix can slow things down. I didn’t expect such impact though…

I only applied the colorMatrix once to only the buildings within the screen bounds.  Applying to every building dragged it down to sub 4 fps.   Is there a less resource intensive way of achieving this?

What happens to performance when you’re just using grayscale effect?

colorMatrix does a lot of computations you don’t need. You can try defining your custom effect which can be way simpler. Here’s some example:
https://goo.gl/287Rnn - in shader playground
And in actual code:
[lua]

graphics.defineEffect {

category = “filter”,

name = “grayscale”,

fragment = [[

const P_COLOR vec3 kWeights = vec3( 0.2125, 0.7154, 0.0721 );

P_COLOR vec4 FragmentKernel( P_UV vec2 texCoord )

{

    P_COLOR vec4 texColor = texture2D( CoronaSampler0, texCoord );

    P_COLOR float luminance = dot( texColor.rgb, kWeights );

    return CoronaColorScale(texColor.a) + vec4( luminance, luminance, luminance, texColor.a );

}

]],

}

-------------- 

local unrelated  = display.newImage( “archery.png”, 80, 220 )

unrelated.fill.effect = “filter.custom.grayscale”

unrelated:setFillColor( 1,0,0 )

[/lua]

tPBNv1i.png

Alternatively, you can define several simple effects for each of the state, and adjust each one of them separately, like this. I think this would be easier for you.

Oh I’ll have to try that as I’ve never played with shaders before.  

I have made an interesting discovery…  I apply an ellipse to indicate to the player the area of effect of the building (green in this screen shot)

Bizarrely, with this removed and with the colorMatrix code unchanged the frame rate only drops to 25 fps. Much better than 12 fps. I then tried inserting the circle into different display groups and I found that the lower down the display object stack I inserted it the slower the game ran!  If I didn’t place it in a display group at all the frame rate remains unchanged.

Update: your shader shows NO slowdown and runs at 30 fps.  But it doesn’t handle transparency very well on 32 bit pngs and seems to really highlight edges.  Is this simple to change?

The colorMatrix filter handles semi-transparency.

Just multiply something by texColor.a. Should be easy enough :wink: Try playing with shader in my last link as well.

AH fixed it… It would appear I am somewhat out of my depth with shaders!

I’m trying to use this in my game - https://goo.gl/igLAlp.  But I am really struggling.  The code I have is this can you see where I’m going wrong please?

graphics.defineEffect { category = "filter", name = "water", isTimeDependent = true, fragment = [[P\_COLOR vec4 FragmentKernel( P\_UV vec2 texCoord ) { P\_DEFAULT vec2 uv = ( texCoord.xy / CoronaVertexUserData.xy ); uv.y += (cos((uv.y + (CoronaTotalTime \* 0.04)) \* 45.0) \* 0.0019) + (cos((uv.y + (CoronaTotalTime \* 0.1)) \* 10.0) \* 0.002); uv.x += (sin((uv.y + (CoronaTotalTime \* 0.07)) \* 15.0) \* 0.0029) + (sin((uv.y + (CoronaTotalTime \* 0.1)) \* 15.0) \* 0.002); P\_COLOR vec4 texColor = texture2D(CoronaSampler0,uv); return CoronaColorScale( texColor ); }]], }

Works for me. Wavy wave. I think your problem is that you are not setting CoronaVertexUserData. It is set to 1,1 in link you provided doesn’t have definition of parameters… Here’s documentation on it: 

https://docs.coronalabs.com/guide/graphics/customEffects.html#vertex-userdata

Quick and dirty way to fix it - just delete “/ CoronaVertexUserData.xy”

Thanks, yes I just discovered that…   I am trying to simulate water in my isometric environment and I thought that might work as it looked good in the sandbox.  Unfortunately, it doesn’t scale well to thousands of tiles and halved the frame rate.

Does the shader continue to use resources when the iamge it is allocated to is hidden with alpha=0?

What I’m trying to achieve may not be possible unless you have any genius suggestions?

I’m not sure about that… Also, if you want to synchronize all your water, you may attempt to somehow use world position for wave displacement, rather than UV. It’s little more complicated. May be someone would be willing to help you with that.