13 replies to this topic

[TheNut]

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.

1. Lighting effects
- Phong, ward, oren-nayar, cell, bumps, gamma, HDR and tone mapping, etc.

2. Material effects
- Leather, plastic, metal, stone, minerals, crystals, etc.

3. Procedural effects
- Noise, sky, water, terrain, textures, etc.

4. Post-process effects
- Film grain, colour filtering, sepia, curves, emboss, edge detection, bloom, heat waves, etc.

5. Transition effects
- 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.
1. Do you think this is worth while?
2. Can DevMaster support this style of interactive learning?
3. Other thoughts or concerns?

If this is a go, I can write up a lightweight framework in JavaScript to make this a reality. I would like for all articles to reuse this code so readers don't have to worry about shaders running on "special" code or other such nonsense. Each shader will come with downloadable source if the user wishes to take it offline.

[Dia]

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]

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]

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]

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]

You remember the famous tech support call ? Woman complaining her computer didn't work in a power cut?

[TheNut]

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.

[Dia]

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]

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]

Pretty cool. I'll try to spend more time with it later.

[Stainless]

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

[Dia]

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]

Stainless, out of curiosity are you on a Mac or Linux? I just checked the blacklist and 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]

No Windows

17.0.963.56 m build by the look of it, don't know why they blacklisted GPU acceleration... makes no sense to me.