thenut at February 4th, 2012 10:00 — #1
I was thinking about doing some WebGL stuff for DevMaster and the idea of a shader library hit me. I thought about dividing it up into several categories.
Phong, ward, oren-nayar, cell, bumps, gamma, HDR and tone mapping, etc.
Leather, plastic, metal, stone, minerals, crystals, etc.
Noise, sky, water, terrain, textures, etc.
Film grain, colour filtering, sepia, curves, emboss, edge detection, bloom, heat waves, etc.
Slideins, cross-fade, zoom blur, wave, wiggle, dissolve, etc.
I'm sure there are other categories, but this would be a start towards an expansive shader library. Keep in mind this isn't just a shader dump, but rather each shader will come with the background theory, maths, and a down-to-earth explanation much like you would expect when reading a normal article here. For example, a shader on gamma correction would attempt to illustrate the power law by providing controls that allow the user to manipulate the gamma value to calibrate their monitor to a grayscale card. The article would then explain why that is an important process to maximize the user's gaming experience, giving examples of what a user would see with an uncalibrated monitor vs a calibrated one.
So it boils down to this.
- Do you think this is worth while?
- Can DevMaster support this style of interactive learning?
- Other thoughts or concerns?
dk2 at February 5th, 2012 05:42 — #2
That sounds like a great idea! This would definitely be a valuable collection to have and can be of tremendous learning value, especially in being interactive. I don't expect any special technical requirements on Devmaster itself (unless you're thinking of organizing this in a special way). In any case, let me know what you need and we'll can make it happen.
thenut at February 5th, 2012 09:08 — #3
Cool, I'll get started on the framework then. There's nothing server related I need from DevMaster, other then perhaps a way to eventually link these all together somehow. Right now the articles section is a flat list. I think once the shader library gets large enough, it would be beneficial to have a table of contents to help readers discover more shaders.
stainless at February 6th, 2012 04:34 — #4
How about adding a new area to the site, "Game Development\Shaders"
By the way we will need to do some kind of FAQ to get webgl running, doesn't work by default on most machines and we don't want a load of posts saying "this doesn't work, you are a bunch of \\^*&\\^**687, I have a \\$30,000.00 rig and your code doesn't run"
thenut at February 6th, 2012 10:42 — #5
I thought in such scenarios I would just show this
There will be a note about system requirements to run the interactive demos along with some error checking and reporting, but I think anyone interested in game dev will need some level of competency.
Install the latest drivers for your video card
- "What's a video card?"
* face palm *
stainless at February 7th, 2012 04:51 — #6
You remember the famous tech support call ? Woman complaining her computer didn't work in a power cut?
thenut at February 11th, 2012 22:52 — #7
Just thought I would post a status update on this. It's been a busy week, but I've managed to get the base of the framework done and I'm wrapping up two shaders to go with the initial release. One on basic lighting and the other on generating old photographic images. The framework is a bit larger than I was hoping for, but I forgot how much code is involved just to get some simple GL apps up and running. I will need to provide documentation in the framework release package to help explain all that, so that's more added on my plate.
I have attached some screenshots showing the current layout (still a WIP). I'm trying to keep it compact, with the width of the app set to 800 pixels (apparently that's the size of the article section here) and using a tab navigation system (UI is powered by jQuery). You can play with some shader settings, view the source, read the theory, and download the framework + shaders. At some point I'm hoping to see a table of contents with a listing of all the shaders and someone can just click and jump right into it. After they get what they need, the can browse for more.
Dia, the only thing I'm curious about is your policy on using iframes. I didn't want to manage a colossal HTML file with all that stuff in it, but I know iframe's are not considered best web practices, especially for search engines. Let me know your thoughts on that and/or how you want the final package to work out.
dk2 at February 14th, 2012 14:49 — #8
It's looking great! Awesome job. This should be an invaluable resource for everyone. Devmaster is already using jquery UI, so you should be able to make use of it directly.
As you suggested, the preference is not use iframes, but let's see how well it works first with using the HTML directly, then we can look into alternatives if issues arise. If you have something working, we can try it out for the first article.
thenut at February 27th, 2012 14:13 — #9
It has been a busy few weeks. I managed to squeeze some time to get this moving into the preview stage. I am going to post both shaders up here for the DevMaster community to preview and give feedback on. These demos work fine in Firefox and Chrome. IE 8.0 properly reports an error, but you can still view the article content. I assume other browsers that lack the functionality would fucntion properly (I haven't tried Opera).
1. Basic Lighting
2. Old Film Effect
There's some text overlap issues in the vertex and fragment shader tabs. This is due to the way Notepad++ exports HTML files. I'm looking for a better solution. Source is downloadable if you're interested in that sort of thing. I haven't had a chance yet to write a high level document for the source, so it's up to your developer intuition and reading comments to figure things out
Any feedback you give will help me finalize this template.
fireside at February 28th, 2012 09:31 — #10
Pretty cool. I'll try to spend more time with it later.
stainless at February 28th, 2012 13:03 — #11
Got it working in Chrome. Looking nice.
I had to add a flag to the command line, apparently google has blacklisted gpu acceleration by default.
Anybody else using chrome will need --ignore-gpu-blacklist adding to the command line
dk2 at February 29th, 2012 02:59 — #12
Looks great! It might be a good idea to put some where the requirements to have the shaders run properly (browser requirements, flags, etc.)
Let's sync up privately to discuss how it will be published and perhaps we can try it for the first article (it doesn't have to be public yet, if it's not ready).
thenut at February 29th, 2012 07:07 — #13
Stainless, out of curiosity are you on a Mac or Linux? I just checked the blacklistand there's some restrictions with those two operating systems. Thanks for the heads up though, I'll make sure to include that tip. I'll also add pointers about the various advanced webgl config options in Firefox.
Dia, sure thing. Once I complete the high level dev guide for the source code and add in better error reporting for users without WebGL, I'll send you the first shader we can start off with.
stainless at February 29th, 2012 10:55 — #14
17.0.963.56 m build by the look of it, don't know why they blacklisted GPU acceleration... makes no sense to me.