Shape blur problem

rrraptor · October 2019

So Im trying to achieve this effect:

Its working, yes, but there is some problems.
First, diferent blur levels:

And second, this mess:

Im doing it like in "blur" example that cames with gideros.

function GShape:initShader(blurLevel)
	local texw, texh = self:getSize()
	--Initial blur level
	self.blurShader:setConstant("fRad",Shader.CINT,1,blurLevel)
	--Initial texel size
	self.blurShader:setConstant("fTexelSize",Shader.CFLOAT4,1,{1/texw,1/texh,0,0})
 
	self.blurBG = RenderTarget.new(texw,texh,false)
	self.blurBG:draw(stage)
	self.blurIMG = Bitmap.new(self.blurBG)
	self.blurIMG:setShader(self.blurShader)
 
	self.RT = RenderTarget.new(texw,texh,true)
	self:setTexture(self.RT)
	self:setShader(self.blurShader)
end
--
function GShape:updateBlur()
	local x,y = self:getPosition()
	local offsetX, offsetY = 0, 0
	local texw, texh = self:getSize()
 
	-- circle is centerd, so we need to offset drawing position by its radius
	if (self.name == "circle") then 
		offsetX = self.r
		offsetY = self.r
	end
	-- render stage except this object
	self:setVisible(false)
	self.blurBG:draw(stage, -x+offsetX, -y+offsetY)
	self:setVisible(true)
 
	self.blurShader:setConstant("fTexelSize",Shader.CFLOAT4,1,{0,1/texh,0,0}) --Step 1: Vertical blur
	self.RT:draw(self.blurIMG)
	self.blurShader:setConstant("fTexelSize",Shader.CFLOAT4,1,{1/texw,0,0,0}) --Step 2: Horizontal blur
end
--
function GShape:setPosition(x, y)
	Path2D.setPosition(self, x, y)
	self:updateBlur()
end

I spent whole day trying to fix it, but i have no idea how to do it. Maybe I need to modify shader, but I dont know how to work with them. Maybe someone will have a solution.

Project atached.

MoKaLux · October 2019

hey that's pretty nice thing you have here.
What exactly is your problem I don't really get it?
For your second question I think it's a mess because the shader is on top of another.
I am sure you have read this https://wiki.giderosmobile.com/index.php/Writing_Shaders

MoKaLux · October 2019

and of course the top of the top http://forum.giderosmobile.com/discussion/6667
but that's pretty hard core, so beware

rrraptor · October 2019

I have 0 experience writing shaders, but i gave it a try. All in all, im getting somewhere, but I have one question for now.
@hgy29 how can I pass vec2 value to shader instead of vec4?
For vec4 I must use this:

{name="fDir",type=Shader.CFLOAT4,vertex=false}

In shader:

uniform vec4 fDir

In Lua:

shader:setConstant("fDir",Shader.CFLOAT4,1,{0,1,0,0})

But I use same structure for vec2, and in shader code I only use xy component (e.g. fDir.xy).
I tried to use Shader.DFLOAT, but it wont work, maybe I missed something...

MoKaLux said:
and of course the top of the top http://forum.giderosmobile.com/discussion/6667
but that's pretty hard core, so beware

I think its an overkill for just a blur shader

hgy29 · October 2019

In theory you should use a Shader.CFLOAT2, but I am not completely sure I implemented it in gideros.

rrraptor · October 2019

Aaaah...seems like wiki is missing this one

Also, maybe its better to rewrite Shader constatnts description to somethink like:

Shader.CFLOAT2
Uniform descriptor CFLOAT2 data type
Equivalent to glsl "uniform vec2"

rrraptor · October 2019

Awww, I made this to work..

Whole problem was in background rendering. So I did this:

function GShape:renderBG()
	local x,y = self:getPosition()
	local offsetX, offsetY = 0, 0
 
	-- circle is centerd, so we need to offset drawing position by its radius
	if (self.name == "circle") then 
		offsetX = self.r
		offsetY = self.r
	end
 
	local par = self:getParent()
	if (not par) then return end
	local ind = par:getChildIndex(self)
	local l = par:getNumChildren()
	print("Hide from " .. ind .. " to "..l)
	for i = ind, l do 
		local c = par:getChildAt(i)
		c:setVisible(false)
	end
	self.blurBG:draw(stage, -x+offsetX, -y+offsetY)
	for i = ind, l do 
		local c = par:getChildAt(i)
		c:setVisible(true)
	end
end
--
function GShape:updateBlur()
	if (self.needToUpdate) then 
		self:forceUpdate()
	end
end
--
function GShape:forceUpdate()
	self:renderBG()	
	-- vertical blur
	shader:setConstant("fDir",Shader.CFLOAT2,1,{0,1})
	self.RT:draw(self.blurIMG)
	-- horizontal blur
	shader:setConstant("fDir",Shader.CFLOAT2,1,{1,0})
end
--
function GShape:setPosition(x, y)
	Path2D.setPosition(self, x, y)
	self.needToUpdate = true
end

Probably not the best solution, and I need to try to ptimize it, but a BIG progress there

I also modifed the shader (not by myself ofcourse

).
Source link
Project attached.

And the final queston, how can a recolor the texture? I mean, equivalent to setColorTransform, that only applies to texture. I understand that to achieve this I need to edit fragment shader, but idk how)))

Tried this:

vec4 toGrayscale(in vec4 color)
{
	float average = (color.r + color.g + color.b) / 3.0;
	return vec4(average, average, average, 1.0);
}
 
vec4 colorize(in vec4 grayscale, in vec4 color)
{
	return (grayscale * color);
}
 
void main() {
	vec4 outColor = blur13(fTexture, fTexCoord, fResolution, fDir);
	vec4 grayscale = toGrayscale(outColor);
	vec4 finalColor = colorize(grayscale, fColorTransform);
	gl_FragColor = finalColor;
}

But this is not what im looking for))
I need you @hgy29

hgy29 · October 2019

to mimic setColorTransform you would just need:

 vec4 finalColor=outColor*fColorTransform;

but I am not sure that's what you want to achieve, btw your toGrayscale is wrong:

float average = color.r*0.4+color.g*0.5+color.b*0.1;

would be more correct, and those are only approximate coefficients.

hgy29 · October 2019

More typical coefs: 0.2989, 0.5870, 0.1140 for R,G,B

rrraptor · October 2019

Added shadows

Blur works very strange. Every shape that is not rectangle offsets the background a bit (as you can see on a picture above). Need to fix it somehow... Probably texel size issue, but idk, need to do some tests.

Source

hgy29 · October 2019

About texel size, beware about gideros extending textures so that they are power of two sized. The texel size should be computed from the extended texture size.

rrraptor · October 2019

hgy29 said:
About texel size, beware about gideros extending textures so that they are power of two sized.

So what could posibly go wrong?

Out of memory?
Also, to render shadow I downscale original shape, then render it to RenderTarget, apply blur, and upscale Bitmap to shape scale like that: 1/downScale. And for shadows I use different shader.

hgy29 said:
The texel size should be computed from the extended texture size.

I use shape:getSize() and set texel size to a {1/w, 0} for horizontal blur, and {0, 1/h} for vertical, but something is wrong...

hgy29 · October 2019

rrraptor said:

I use shape:getSize() and set texel size to a {1/w, 0} for horizontal blur, and {0, 1/h} for vertical, but something is wrong...

Yes thats what I mean: if your w and h aren't power of two, then the texel size will be wrong! When you create the a rendertarget of 50x120 pixels (for exemple), gideros internals makes one of 64x128 to please the GPU. So your texel size will be 1/64 and 1/128, not 1/50 and 1/120

EDIT: BTW gideros can compute the texel size for you with Shader.SYS TEXTUREINFO, with this attribute on a CFLOAT4 constant, gideros will fill it with the extent of the original texture in x and y, and the texel size in z and w

rrraptor · October 2019

hgy29 said:
So your texel size will be 1/64 and 1/128, not 1/50 and 1/120

Then why it works for rectangles? Their rendertargets w,h aren't power of two, but everything works.

Btw, I added SYS_TEXTUREINFO flag, but they now flicking and look a bit strange:

hgy29 · October 2019

Ok, I tried your code and turns out that the rendering offset is not at all correct by texel size issue. Now I think about it, a texel size problem would just have made the blur cover and unexpected amount of texels, but not have changed the center position.

Your issue is that you apply your blur to a Path2D shape, which only use texture coordinates for the 'filled' part, not for the outline. Since there is an outline in your case, the shape size is slightly bigger than the filled part (by the line thickness exactly). In theory, substracting the line width from the shape size before creating the render target should fix it.

hgy29 · October 2019

Try this

rrraptor · October 2019

Hmmm
It works even if I just use

local tw,th = self.w,self.h

Probably because self.w,self.h is not including stroke width.
But i discovered a very strange bug.

First, shape that is on top blures incorrectly (even with your fix), it dont have shadow, and its stroke is blured somehow.
Second, the circle also dont have shadow, and also have blured stroke, BUT! Its texture is 100% correct

Also, Im using Path2D because I didt find another way of applying some sort of mask on shader. Pixel and Bitmap are squares, Mesh is a black box for me, Shape... well I almost forgot about it, because we have more powerful and friendly Path2D

hgy29 · October 2019

Ah, I forgot to remove the setAnchorPoint call around line 300 (for rrect)

rrraptor · October 2019

Ah, ok

Now its all good, except this weird stoke blur effect...

rrraptor · October 2019

Also, any way to fix this?

P.S. lol, looking like this cat xDDD

hgy29 · October 2019

Not sure, it could be due to using a radius too small as compared with the line width in your rrect

rrraptor · November 2019

In my first post you can see exactly same problem with rounded rectangle. It hapens at any radius/width/feather value. Even on a circle, but not that frequntly. Also, I noticed that this gaps appears only at 45 degrees step (0, 45, 90, 135, 180, 225, 270, 315).

EDIT: Ok, i tried the Shape object aaaand i got this

Stroke looks like a mess with virtices, but also texture itself is a small square (idk why).

In initBlurShader I added this:

		self.textureB = RenderTarget.new(tw*2,th*2,true)
		-- remove Path2D
		self:removeChild(self.shape)
		self.shape = Shape.new()
		self.shape:setFillStyle(Shape.TEXTURE, self.textureB)
		self.shape:setLineStyle(10,0xffffff,1)
		self.shape:setShader(self.blurShader)
 
		self.shape:beginPath()
		self.shape:moveTo(0,0)
		self.shape:lineTo(tw,0)
		self.shape:lineTo(tw*2,th)
		self.shape:lineTo(0,th*2)
		self.shape:lineTo(0,0)
		self.shape:endPath()
 
		self.shape:setAnchorPoint(self.ax, self.ay)
		self:addChild(self.shape)

rrraptor · November 2019

Updated.

Reworked shadows
Fixed anchor points
Shadow and blur now uses 1 shader
Added "updateRelativeXY" to correctly update blur if object is a child of another sprite
Overridden "setPosition", to apply blur when shape changes its position
Added setBlurColor (setBlurColorR, G, B, A) to mirror setColorTransform

TODO:

Comments

rrraptor · January 2021

For some reason I decided to update this thing for lua shaders, but it no longer works...
Shape do not have a stroke anymore.
Works on 2019.9, but does not on 2021.1

It uses Path2D as a shape.

@hgy29 is it possible to make it work again?)

Here is a simple version (lua shaders):

require("Library/luashader/luac_loader")
require("Library/luashader/luac_codegen")
require("Library/luashader/luashader") -- include luashader to project
 
local function makeEffect(vshader,fshader)
	local shader = Shader.lua(vshader,fshader,0, {
			{name="vMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP,vertex=true},
			{name="fColor",type=Shader.CFLOAT4,sys=Shader.SYS_COLOR,vertex=false},
			{name="fTexture",type=Shader.CTEXTURE,vertex=false},
			{name="fTextureInfo",type=Shader.CFLOAT4,sys=Shader.SYS_TEXTUREINFO,vertex=false},
 
			{name="fTexelSize",type=Shader.CFLOAT2,vertex=false},
			{name="fColorTransform",type=Shader.CFLOAT4,vertex=false},
			{name="fRad",type=Shader.CINT,vertex=false},
		}, {
			{name="vVertex",type=Shader.DFLOAT,mult=2,slot=0,offset=0},
			{name="vColor",type=Shader.DUBYTE,mult=4,slot=1,offset=0},
			{name="vTexCoord",type=Shader.DFLOAT,mult=2,slot=2,offset=0},
		}, {
			{name="fTexCoord",type=Shader.CFLOAT2},
		}
	)
	return shader
end
 
local function blurVert(vVertex,vColor,vTexCoord)
	local vertex = hF4(vVertex,0.0,1.0)
	fTexCoord=vTexCoord
	return vMatrix*vertex
end
local function blurFrag()
	local frag=lF4(0,0,0,0)
	local ext=2*fRad+1
	local tc=fTexCoord-fTexelSize*fRad
	for v=0,19 do
		if v<ext then
			frag=frag+texture2D(fTexture, tc)
		end
		tc+=fTexelSize
	end
	frag=frag/ext
	if (frag.a==0.0) then 
		discard() 
	end
	return frag * fColorTransform
end
 
local minX, minY, maxX, maxY = app:getLogicalBounds()
local SW = maxX - minX
local SH = maxY - minY
 
local w,h = 400, 400
local ax,ay=0.5,0.5
local blurLevel = 2
 
local tex = Texture.new("bg2.jpg", true)
local bg = Bitmap.new(tex)
bg:setPosition(minX, minY)
bg:setScale(SW / tex:getWidth(), SH / tex:getHeight())
stage:addChild(bg)
 
local shape = Path2D.new()
shape:setPath("MHVHVZ",{0,0, w, h, 0, 0})
shape:setFillColor(0xffffff, 1)
shape:setLineColor(0, 1)
shape:setLineThickness(8, 0.1)
shape:setAnchorPosition(w * ax, h * ay)
stage:addChild(shape)
 
shape:setPosition(minX + SW / 2, minY + SH / 2)
 
local blur = makeEffect(blurVert, blurFrag)
blur:setConstant("fRad",Shader.CINT,1,blurLevel)
blur:setConstant("fTexelSize",Shader.CFLOAT2,1,{1/w,1/h})
blur:setConstant("fColorTransform",Shader.CFLOAT4,1,{1,1,1,1})
 
local textureA = RenderTarget.new(w,h,true)
local textureB = RenderTarget.new(w,h,true)
 
local bufferA = Bitmap.new(textureA)
bufferA:setShader(blur)
 
shape:setTexture(textureA)
shape:setShader(blur)
 
local function updateBlur()
	local x, y = shape:getPosition()
	textureA:draw(stage, -x + w * ax, -y + h * ay)
	blur:setConstant("fTexelSize",Shader.CFLOAT2,1,{0,1/h})
	textureB:draw(bufferA)
	blur:setConstant("fTexelSize",Shader.CFLOAT2,1,{1/w,0})
end
 
updateBlur()
 
stage:addEventListener("mouseMove", function(e)
	shape:setPosition(e.x,e.y)
	updateBlur()
end)

Old version (using glsl shaders):

local blurVert = [[attribute highp vec3 vVertex;
attribute mediump vec2 vTexCoord;
uniform highp mat4 vMatrix;
varying mediump vec2 fTexCoord;
 
void main() {
	vec4 vertex = vec4(vVertex,1.0);
	gl_Position = vMatrix*vertex;
	fTexCoord=vTexCoord;
}
]]
 
local blurFrag = [[#define STEPS 20
uniform lowp vec4 fColor;
uniform lowp sampler2D fTexture;
uniform int fRad;
uniform mediump vec2 fTexelSize;
varying mediump vec2 fTexCoord;
uniform lowp vec4 fColorTransform;
 
void main() {
	lowp vec4 frag=vec4(0,0,0,0);
	int ext=2*fRad+1;	
	mediump vec2 tc=fTexCoord-fTexelSize*float(fRad);
	for (int v=0;v<STEPS;v++)	
	{
		if (v<ext)
			frag=frag+texture2D(fTexture, tc);
		tc+=fTexelSize;
	}
	frag=frag/float(ext);
	if (frag.a==0.0) discard;
	gl_FragColor = frag * fColorTransform;
}
]]
 
local minX, minY, maxX, maxY = app:getLogicalBounds()
local SW = maxX - minX
local SH = maxY - minY
 
local w,h = 400, 400
local ax,ay=0.5,0.5
local blurLevel = 2
 
local tex = Texture.new("bg2.jpg", true)
local bg = Bitmap.new(tex)
bg:setPosition(minX, minY)
bg:setScale(SW / tex:getWidth(), SH / tex:getHeight())
stage:addChild(bg)
 
local shape = Path2D.new()
shape:setPath("MHVHVZ",{0,0, w, h, 0, 0})
shape:setFillColor(0xffffff, 1)
shape:setLineColor(0, 1)
shape:setLineThickness(8, 0.1)
shape:setAnchorPosition(w * ax, h * ay)
stage:addChild(shape)
 
shape:setPosition(minX + SW / 2, minY + SH / 2)
 
local blur = Shader.new(blurVert, blurFrag, 4, {
		{name="vMatrix",type=Shader.CMATRIX,sys=Shader.SYS_WVP,vertex=true},
		{name="fColor",type=Shader.CFLOAT4,sys=Shader.SYS_COLOR,vertex=false},
		{name="fTexture",type=Shader.CTEXTURE,vertex=false},
		{name="fTexelSize",type=Shader.CFLOAT2,vertex=false},
		{name="fColorTransform",type=Shader.CFLOAT4,vertex=false},
		{name="fRad",type=Shader.CINT,vertex=false},
	},
	{
		{name="vVertex",type=Shader.DFLOAT,mult=3,slot=0,offset=0},
		{name="vColor",type=Shader.DUBYTE,mult=4,slot=1,offset=0},
		{name="vTexCoord",type=Shader.DFLOAT,mult=2,slot=2,offset=0},
	}
)
blur:setConstant("fRad",Shader.CINT,1,blurLevel)
blur:setConstant("fTexelSize",Shader.CFLOAT2,1,{1/w,1/h})
blur:setConstant("fColorTransform",Shader.CFLOAT4,1,{1,1,1,1})
 
local textureA = RenderTarget.new(w,h,true)
local textureB = RenderTarget.new(w,h,true)
 
local bufferA = Bitmap.new(textureA)
bufferA:setShader(blur)
 
shape:setTexture(textureA)
shape:setShader(blur)
 
local function updateBlur()
	local x, y = shape:getPosition()
	textureA:draw(stage, -x + w * ax, -y + h * ay)
	blur:setConstant("fTexelSize",Shader.CFLOAT2,1,{0,1/h})
	textureB:draw(bufferA)
	blur:setConstant("fTexelSize",Shader.CFLOAT2,1,{1/w,0})
end
 
updateBlur()
 
stage:addEventListener("mouseMove", function(e)
	shape:setPosition(e.x,e.y)
	updateBlur()
end)

hgy29 · January 2021

The issue here is that Path2D uses several highly specific shaders to render the outline. Thoses shaders used to be "hidden" to setShader() which would apply only to the fill operation, but in 2021.1 I decided to make them overridable too.
To do so, setShader() was extended to take three more parameters, see https://wiki.gideros.rocks/index.php/Sprite:setShader

Extra parameters allows to select which kind of default shader to override, default being all. So if you don't specify a programType, your shader will be used for stroking too.

Since you want the blur to be applied to the shape fill operation, select program type Shader.SHADER PROGRAM TEXTURE:

shape:setShader(blur,Shader.SHADER PROGRAM TEXTURE)

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Shape blur problem

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Shape blur problem

Comments