Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

MSDF shader
Started by StarCrunch Apr 26 2016 10:12 PM

No replies to this topic
shader vector graphics text
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 803 posts
  • Corona SDK

Hi.

 

I saw this project earlier in the day and had a quick go porting the shader while dinner was cooking. I'm adding it here in case it might be of use to anybody:

local kernel = { category = "filter", group = "msdf", name = "draw" }

kernel.vertexData = {
	-- Background colors (use fill color for foreground)
	{ default = 0, name = "back_r", min = 0, max = 1, index = 0 },
	{ default = 0, name = "back_g", min = 0, max = 1, index = 1 },
	{ default = 0, name = "back_b", min = 0, max = 1, index = 2 }
}

kernel.fragment = [[
	#ifdef GL_OES_standard_derivatives
		#extension GL_OES_standard_derivatives : enable
	#endif

	P_POSITION float median (P_COLOR float r, P_COLOR float g, P_COLOR float b)
	{
		return max(min(r, g), min(max(r, g), b));
	}

	P_COLOR vec4 FragmentKernel (P_UV vec2 uv)
	{
		P_COLOR vec3 sample = texture2D(CoronaSampler0, uv).rgb;
		P_UV float sig_dist = median(sample.r, sample.g, sample.b) - 0.5;

		#ifdef GL_OES_standard_derivatives
			P_UV float dsd = fwidth(sig_dist);
		#else
			P_UV float dsd = CoronaTexelSize.x;
		#endif

		P_UV float opacity = clamp(sig_dist / dsd + 0.5, 0.0, 1.0);

		return vec4(mix(CoronaVertexUserData.xyz, CoronaColorScale(1.).xyz, opacity), 1.);
	}
]]

graphics.defineEffect(kernel)

with example usage being:

local m = display.newImageRect("msdf.png", 200, 200)

m.x, m.y = display.contentCenterX, display.contentCenterY

m.fill.effect = "filter.msdf.draw"

m.fill.effect.back_r = .8

m:setFillColor(0, 0, 1)

I've not even remotely put it through its paces. The above image is the "M" output generated from the sample at the end of the Console Commands section, using the executable included with the project. (I've barely looked at the code, so don't know if it'd be an easy port outside Windows.)

 

Anyhow, like I said, just putting it out there.




[topic_controls]
[/topic_controls]