Stay Frosty Extension Preview - A WPF ShaderEffect for chiseled or beveled text
Saturday, June 27, 2015Stay Frosty
There's always been a retro movement in the programming world. Every time a new tool comes out that reduces the requirement to memorize commands or the complete API of a language, there's many among us who wish we had a green terminal and punch cards. The elite look down upon us folks who love Visual Studio, spouting off about the advantages of vi/vim, emacs and other ancient, though powerful, tools. I came from that era. Screw it. I like my Intellisense and GUI based IDEs. I like defaults that build (most of the time). I like using a keyboard shortcut to fire the whole thing off in a debugger and I enjoy a gargantuan 32-bit text editor.I use many text editors for lighter-weight work. Sublime is awesome, as is the atom.io editor I'm starting to fall in love with. But my primary language for work and play is C# and Visual Studio has the tooling I need for that work. And if you're going to use a GUI interface for text editing, it might as well be really, really Gooey!
For the last 4 years or so, I've had an extension I wrote for myself to add a simple background graphic to the text editor window. I wrote it for Visual Studio 2010, originally, and since that time there have been many others that do the same thing. I decided late last year to take it a step further.
What, precisely, are you trying to fix?
I used to get Migraine headaches regularly. I had tried triptans (and found out that my body does not metabolize them correctly) and many other medicines. None worked. Thankfully that's in the past, now, but prior to last year I had to figure out how to live my life and do my job while dealing with a very intense headache. I've never let Migraine keep me from living my life. Unfortunately, displays of any kind seem to trigger the worst sensitivities. My only trick was to work in a dim room with the Brightness setting on my display turned down. Unfortunately, many colors become invisible as the brightness drops. My options were limited, so I used the Visual Studio Color Theme Editor extension to keep two themes, one titled Migraine and one titled Normal. The Migraine theme had most of the syntax rules set to the same color, and all of the text was very, very bright. It was not ideal for using day-to-day but it worked when I needed it.Sometime around 2011 I purchased an 27" iMac. At the time it was the least expensive IPS display at its resolution and it had the added benefit of having a Mini-Display Port plug on the back that would allow you to plug in an external PC. I used it as my monitor and rarely logged into OS X. I did, of course, download XCode and all of the Apple development environment tooling. One morning I woke up with the familiar headache symptoms and began work in my home office. The Windows box had shut down and I was left on my Apple screen, so I powered up the PC and logged into my Mac to waste away the boot time on the web. The last time I had logged in I had left XCode (I think that's what it was) up. I noticed immediately that at the lowest display setting, all of the text was readable. The principal reason for this was a very subtle text chiseling applied to the code editor window. This got me *very* excited -- I could code using my normal syntax highlighting and still read the text at low brightness! A quick look around though spoiled my excitement. There was no ShaderEffect to be found that could apply this chisel. I'd have to write my own. And I'd have to write it in a language that I was unfamiliar with. Having too much to do already, I put it down until late last year.
A Mac-like Chisel Effect
The brilliant folks in Cupertino did something rather simple. The effect was no more than a subtle glow on the bottom and shadow on the top. Surely this couldn't be difficult to reproduce. It turns out, in the end, it wasn't all that difficult. I am not a game developer. I've never written a line of shader code. While I am plenty familiar with C and comfortable with the math, I found myself in hell without a debugger. Something so straight-forward was complicated by subtle requirements WPF imposes on ShaderEffects. Multipass? Nope. Alpha that works like the rest of the libraries I was familiar with? Nope. It's pre-multiplied. I was amazed at the body of knowledge I had to immerse myself in to write a simple ShaderEffect for 2-dimensional text. I wanted, after all, a pixel above and a pixel below the boundaries of the font. I was up against ClearType, DirectX and the fact that in the realm of 3D the concept of a pixel is absent, and of course, GPU parallelism. Fun.The Stay Frosty Extension
The title is a bit of a joke. I got a chuckle out of Scott Hanselman's comment in the first paragraph of his Visual Studio Programmer Themes blog post and thought I'd swipe it.The main purpose of the extension is to improve code text readability. WPF has long had a lot of complainers about how it render text. In the version used by Visual Studio 2013, you can tweak the text with several rules around font smoothing, hinting and rendering as well as requiring that the output snaps to the pixels of the device that's displaying it. I've exposed these as settings. You can apply rendering, font smoothing and hinting rules as well as require text to snap to device pixels. I've tweaked the window to allow the placement of a background image and an override to the background color without requiring the aforementioned Theme Editor extension installed (and it'll override whatever theme you've put there, as well). In addition, you can (optionally) apply the ChiseledText ShaderEffect and control the settings around it (described below). I plan to add many, many more capabilities to it and it will be released under the Apache 2.0 license as well, however that's my planned first release.
Here's how it looks in my environment fully customized:
The ShaderEffect
You can download the library complete with the HLSL source and the ShaderEffect class implementation from its BitBucket repo. The effect is simple but could still use some tweaking. It's "good enough" at the moment, but if you have any improvements, I'll gladly accept them!How it works
Very loosely, it works by layering a darkened and lightened version of the input offset by the size supplied in the size parameter. That's not really how it works, but that's how it appears to work when you use it. In addition to the two layers, the original sampled pixel is mixed in so that parts of the font aren't wiped out as the shadow and glow are offset. Due to pre-multiplied alpha and some blending, the main part of the font remains identical to the input color and the glow/shadow are lighter and darker. As I said, it's very simple.Usage and Limitations
Reference the library and add the effect to any text element. It'll work with other elements, but the results may not be all that great. I designed it to work with small text since it was aimed at the code panel in Visual Studio but it works fine on large text, as well, provided you tweak the effect settings accordingly. The effect is applied vertically, only. It would be easy to change to allow an angle specified and, in fact, the earliest working prototype I had did this, however it nearly doubled the instruction count and performance suffered. I wanted this thing to work well with software rendering and to be as inexpensive as possible, so that's a trade-off I took and it's the other reason it will start to look less than ideal with large text.- Size - This is the size (roughly) in pixels of the effect. This is really the offset of the two layers. The glow layer is usually far more visible than the shadow layer so changing this might have the illusion of only increasing the glow portion of the effect. It's a double, so any fraction is fine. If you use a negative number, the chisel will appear as a bevel. The ideal value will vary depending on the target size of the text. The effect above uses a value of 0.5f which is also the default.
- GlowIntensity - This increases the intensity of the glow portion of the layer. Remember that the actual color is just a combination of glow and shadow, so increasing the glow will similarly increase the overall brightness of the font, too. Sorry about that. The default value for this is 1.0f
- ShadowIntensity - Same as Glow, but for Shadow. If Glow and Shadow are the same value, the font in the middle should be about the same color as the input.
- MixDivisor - It's a terrible name and I will be changing it. At the end of the HLSL, the input pixel and the new values calculated for the two layers are divided by this number. 3.0f is the default and causes the text to barely blend with the background. Increasing this value will make the text and the effect blend more with the background. Use the Intensity and this value together to get the desired result. The text in the picture above uses a value of 3.5 on a background of #FFAAAAAA.
I also strongly recommend a font with some meat on it. Mac OS renders fonts differently than Windows. They're chunkier and cleaner. Google mactype if you want similar results in Windows, or use a very high-quality OTF font. I use Source Code Pro Medium, free from Adobe, and it works quite well. I'll write up some more later explaining the effect in detail. I won't waste much time on the C# code required to use the shader, it's very simple.
As far as the Stay Frosty extension, I'm writing it in some very limited free time. It's nearly done except for a few issues around settings that I'd like to sort out.
You can download the entire library with its code from its public BitBucket repo. It has the path to fxc.exe hardcoded in the pre-build. You'll need to ensure you have the Windows 8 SDK or the DirectX SDK and you'll need to modify the path accordingly. That was a time trade-off for me.
Subscribe to:
Posts
(
Atom
)
I write code, sometimes from a beach.