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
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?
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.
Please log in or register to post a reply.
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
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
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” :P
I thought in such scenarios I would just show this :D
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 *
You remember the famous tech support call ? Woman complaining her
computer didn’t work in a power cut?
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.
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.
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.
Pretty cool. I’ll try to spend more time with it later.
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
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).
Stainless, out of curiosity are you on a Mac or Linux? I just checked
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.
17.0.963.56 m build by the look of it, don’t know why they blacklisted
GPU acceleration… makes no sense to me.