Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
GIDEROS LUA SHADERS DISCOVERY — Gideros Forum

GIDEROS LUA SHADERS DISCOVERY

MoKaLuxMoKaLux Member
edited March 18 in Relax cafe
Ok, time to have some more fun with gideros: GIDEROS LUA SHADERS B)

I am playing around to see what I can understand from the gideros lua shader demo.



I have mixed two shaders wave + bloom and I see that I can get the outline of the character already :smile:

So my goal has become to "code" a shader to have the outline of my character :wink:

Please don't help me yet.

Relax cafe category
luashaders02.png
601 x 411 - 89K
luashaders01.png
601 x 411 - 90K
my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
+1 -1 (+2 / -0 )Share on Facebook

Comments

  • MoKaLuxMoKaLux Member
    edited April 2021
    still trying to understand shaders :#
    For normal shaders (glsl for example), I need 2 files: 1 for the vertex shader and 1 for the fragment shader. Then we pass them to Shader.new(...).

    For lua shaders, we must include (or link to) Gideros\Library\luashader files in our projects. Then we write our vertex shader and our fragment shader in lua. Then lua shaders calls Shader.new(...).

    Is that correct? I am trying to sort out shaders in the wiki :*

    PS: there is a typo in luashader.lua?
    function Shader.lua(vf,ff,opt,uniforms,attrs,varying,funcs,const,debug)
    	local lang=Shader.getShaderLanguage()
    	local mtd=Shader["lua_"..lang]
    	assert(mtd,"Language not supported: "..lang)
    	local _vshader,_fshader=mtd(vf,ff,opt,uniforms,attrs,varying,funcs or {},const)
    	if funcs then for _,fg in ipairs(funcs) do fg.code=nil end end
    	if debug then print("VSHADER_CODE:\n".._vshader) print("FSHADER_CODE:\n".._fshader) end
    	if not vdebug then return Shader.new(_vshader,_fshader,Shader.FLAG_FROM_CODE|opt,uniforms,attrs) end
    end
    vdebug is never declared?
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • hgy29hgy29 Maintainer
    Oops, a left-over of a debug. The whole condition should be removed.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited March 18
    I need your help guys implementing a shader which draws an outline of a sprite, shader experts to the rescue please o:)

    I have this old outline shader made by great mister rrraptor :)
    --!NEEDS:luashader/luashader.lua
     
    local function makeEffect(name, vshader, fshader)
    ...
    end
     
    Effect={}
     
    -- <a href="https://forum.giderosmobile.com/profile/rrraptor" rel="nofollow">@rrraptor</a> V1 -- 1px outline
    Effect.outline = makeEffect(
    	"Outline",
    	function (vVertex, vColor, vTexCoord)
    		local vertex = hF4(vVertex, 0.0, 1.0)
    		fTexCoord = vTexCoord
    		return vMatrix*vertex
    	end,
    	function ()
    		local outlinesize = 1
    		local tc = fTexCoord - fTextureInfo.zw
    		local original = lF4(fColor) * texture2D(fTexture, tc)
    		if original.a == 0 then
    			local step = 1.57079632679 -- math.pi/2 -- perfect for 1 to 2 pixels outline
    			for theta = 0, 6.28318530718, step do -- 2 PI
    				local offset = lF2(fTextureInfo.z * cos(theta) * outlinesize, fTextureInfo.w * sin(theta) * outlinesize)
    				local frag = lF4(fColor) * texture2D(fTexture, tc + offset)
    				if frag.a ~= 0 then
    					original = lF4(0, 0, 0, frag.a) -- change outline color here
    				end
    			end
    		end
    		return original
    	end
    )
    It works great prior gideros 2022.1. My problem is I still don't understand nothing about shaders and I would like to port it to newer gideros version 2022.3.1 :s

    This is my attempt but gideros doesn't like it and throws errors:
    local Outline1Effect=Core.class(ShaderEffect)
    ShaderEffect.Outline1=Outline1Effect
     
    makeEffect("Outline1", vertexShader,
    	function (vVertex, vColor, vTexCoord): Shader
    		local vertex = hF4(vVertex, 0.0, 1.0)
    		fTexCoord = vTexCoord
    		return vMatrix*vertex
     
    THIS HAS BEEN REMOVED, NSFW ;-)
    I tried to understand the other shaders as an example but I couldn't wrap my head around those, somebody please help me ;)

    Likes: SinisterSoft

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited March 18
    oh that works :o and it was easier than I thought ;)

    hgy29 you are so kind to us, I knew it since day 1 but this shader thing, you gave everything to make our lifes simpler. I trully respect the LOVE you put in gideros and its users (us). So thank you, thank you, thank you.

    After starting afresh I realised I had everything at my disposal in the gideros samples ;)

    So I picked the shader example and it was using the same logic as previous gideros (which I was more used to) with minor tweaks. And, to my surprise, I had clear explanations of what was not working!!! (hgy29 super kindness in action):

    1st attempt:
    FragmentShader:
    0(28) : error C0000: syntax error, unexpected '~', expecting ',' or ')' at token "~"
    0(34) : error C1503: undefined variable "original"
    0(36) : error C0000: syntax error, unexpected '}' at token "}"

    2nd attempt:
    FragmentShader:
    0(28) : error C7011: implicit cast from "float" to "bool"
    0(28) : error C1020: invalid operands to "=="

    And the working result:
    Effect={}
     
    -- <a href="https://forum.giderosmobile.com/profile/hgy29" rel="nofollow">@hgy29</a>
    Effect.none=makeEffect("None",
    	function (vVertex,vColor,vTexCoord) : Shader
    		local vertex = hF4(vVertex,0.0,1.0)
    		fTexCoord=vTexCoord
    		return vMatrix*vertex
    	end,
    	function () : Shader
    		local frag=lF4(fColor)*texture2D(fTexture, fTexCoord)
    		if (frag.a==0.0) then discard() end
    		return frag
    	end)	
     
    -- <a href="https://forum.giderosmobile.com/profile/rrraptor" rel="nofollow">@rrraptor</a> V1 luau -- 1px outline
    Effect.outline=makeEffect("Outline",
    	function (vVertex,vColor,vTexCoord) : Shader
    		local vertex = hF4(vVertex,0.0,1.0)
    		fTexCoord = vTexCoord
    		return vMatrix*vertex
    	end,
    	function () : Shader
    		local outlinesize=1
    		local tc=fTexCoord-fTextureInfo.zw
    		local original=lF4(fColor)*texture2D(fTexture, tc)
    		if (original.a==0) then
    			local step = 1.57079632679 -- math.pi/2 -- perfect for 1 to 2 pixels outline
    --			local step = 0.78539816339 -- math.pi/4 -- perfect for 3 to 4 pixels outline
    --			local step = 0.39269908169 -- PI/8 -- ok for 4+ pixels outline
    			for theta = 0, 6.28318530718, step do -- 2 PI
    				local offset = lF2(fTextureInfo.z * cos(theta) * outlinesize, fTextureInfo.w * sin(theta) * outlinesize)
    				local frag = lF4(fColor)*texture2D(fTexture, tc+offset)
    --				if frag.a ~= 0 then
    --				if (not frag.a == 0) then
    				if frag.a==0 then --discard()
    				else original=lF4(0,0,0, frag.a) -- change outline color here
    				end
    			end
    		end
    		return original
    	end)
    I will let you do the cleaning :p

    I wish you all the best, a special thought for our friend Oleg and his people, and my best wishes to you Nicolas (alias hgy29) o:)

    PS: this outline shader is the work of genius mister RRRAPTOR, THANK YOU!

    Viva Gideros Luau, Peace & <3

    Likes: SinisterSoft

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    and here is a sample use case:
    function TheStage:xRenderTarget()
    	-- first render target so we can apply shaders
    	local rt = RenderTarget.new(self.canvasw or 8, self.canvash or 8)
    	local rbmp = Bitmap.new(rt)
    	rt:clear(0x0, 0)
    	rt:draw(self.camera.view)
    	if self.outline then rbmp:setShader(Effect.outline) end
    	-- then the actual output image
    	self.rt2:clear(0x0, 0)
    	self.rt2:draw(rbmp)
    	self.bmprt:setTexture(self.rt2) -- to show actual frame in the app (not needed for the output image)
    end
    ...

    Likes: SinisterSoft

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    Accepted Answer
    I think there is a bug in the luau shader compiler, it doesn’t seem to translate properly the ~= operator into != in C
  • YanYan Member
    Accepted Answer
    spriteOutline = {}
     
    spriteOutline.VS_GL = [[
     
    	uniform highp mat4 vMatrix;
     
    	attribute highp vec3 vVertex;
    	attribute mediump vec2 vTexCoord;
     
    	varying mediump vec2 fTexCoord;
     
    	void main() {
    		vec4 vertex = vec4(vVertex, 1.0);
    		gl_Position = vMatrix*vertex;
    		fTexCoord = vTexCoord;
    	}
    ]]
     
    spriteOutline.FS_GL = [[
     
    	#ifdef GL_ES
    		precision highp float;
    	#endif
     
    	const float offseta = 0.010;
     
    	uniform lowp vec4 fColor;
    	uniform mediump vec4 fTexSize;
    	uniform lowp sampler2D fTexture;
     
    	uniform lowp int fSwitch;
     
    	varying mediump vec2 fTexCoord;
     
    	vec4 getSample(float x, float y, float offset, float num)
    	{
    		vec4 result = vec4(0);
    		float size = 360.0 / num;
     
    		for (float a; a <= 360.0; a += size)
    		{
    			vec2 coord = vec2(cos(a) * offset + x, sin(a) * offset + y);
     
    			result += texture2D(fTexture, coord);
    		}
     
    		return result;
    	}
     
    	void main()
    	{
    		vec4 col = texture2D(fTexture, fTexCoord);
     
    		float nums = 32.0;
     
    		if (fSwitch == 1)
    		{
    			vec4 nb = getSample(fTexCoord.x, fTexCoord.y, 0.020, nums);
     
    			if (col.a > 0. && nb.a < nums)
    			{
    				col.a = nb.a / nums;
    				col.r = nb.a / nums;
    				col.g = 0.0;
    				col.b = 0.0;
    			}
    		}
     
    		gl_FragColor = col;
    	}
    ]]
     
    spriteOutline.Shader=Shader.new(spriteOutline.VS_GL,spriteOutline.FS_GL,Shader.FLAG_FROM_CODE, {
    	{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="fSwitch",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},
    });
    Thats all.

    Likes: MoKaLux, talis, hito9

    vk.com/yan_alex
    +1 -1 (+3 / -0 )Share on Facebook
Sign In or Register to comment.