October 6th, 2006 by Sharky

kick it on GameDevKicks.com 

Many people discover my blog while searching for XNA & HLSL Tutorials.

To be honest, I’m probably as much a beginner as most of you.  I do know your pain though – it’s damn hard to find an HLSL tutorial pitched at a beginner’s level.  That is why I blogged when I finally discovered some promising resources.

I’m planning to update this blog occasionally with whatever HLSL learning’s I uncover.  They will likely fall short of what you’d call a tutorial.  More likely they’ll be sporadic little journals sharing my HLSL findings as my own understanding grows.

I’ve also been in contact with the operator of the Riemers site. I’ve linked to his HLSL tutorial before and no doubt a few of you are finding it an excellent resource.

He plans to update or include more beginner’s level HLSL tutorials and has welcomed any feedback or ideas from me.  

I’ll be giving him my own wish list at some stage.

If you have any particular ideas or wishes, please leave a comment here, and I’ll be sure to pass them his way.

So what would you like to see in a beginner’s level HLSL tutorial?  Go ahead and comment!

Average Rating: 4.9 out of 5 based on 168 user reviews.

16 Responses to “”

  1. Sharky Says:

    I’ll get the ball rolling!

    XNA or not Game development IS hard!

    I would like to see more HLSL tutorials that explain even the simplest things. Beginners like me need a careful guiding hand before some of these things click and become understanding. The answers are out there, but most tutorials & forum threads I’ve read assume you know a certain amount of the 3D math, color theory, circuit diagram of the 1.21 gigawatts flux capacitor blah blah blah… You get the point?

    With XNA out now there is a growing flood of people just like myself looking for answers in small words. We’re not necessarily grounded in any of the theory that a game dev professional might be, so some might scoff at the thought. However, we’re keen, VERY keen! Who knows, the next John Carmack might be reading this very blog!!! ;)

    For example: I’m not worried about how Matrix Math works, or why it works. So far I’ve got by not needing to. I certainly don’t remember it from school!!! But it’s very helpful to know what a particular Matrix multiplication is trying to achieve, and in language light on jargon.

  2. Sharky Says:

    And here’s another…

    I wouldn’t have a clue how to write one, but I’d very much like to see a tutorial with samples of an HLSL Skybox / Skydome, from a TextureCube. i.e. one that makes a spheracle background sky, rather than a cornered box. I gather it can be done, but I’ve given up finding a sample I can actually get working in the context of XNA & C#.

    I’ve seen this one.
    But I had no success getting it rendering anything at all. Possibly because the mesh and texture were embedded in the .x and .fx files, rather than being provided by C# code. I guessed at how to refactor it, but alas, no success.

  3. riemer Says:

    OK to keep this thread rolling :)

    I see some pretty contradictory demands in your posts.. I consider HLSL already as quite advanced in 3D programming. I think when you move over to HLSL, you already have a understanding of basic 3D stuff. That’s why you won’t find a HLSL tut that explains matrices is basic detail. However, most tutorial sites have pages that explain those points in detail, apart from HLSL, color theory, or a circuit diagram of the 1.21 gigawatts flux capacitor :) You can read my pages on matrices, starting from http://www.riemers.net/ExtraReading/matrices_geometrical.php

    As in your second post, the example you mention there again is pretty advanced, so people not knowing what a spheracle background sky is, will already be turn away from the tut before reading it.

    BTW…. what exactly is this 1.21 gigawatts flux capacitor ??? ;)

  4. Sharky Says:

    Thanks Riemer, and Yes, I agree totally with you on every point.
    I am being very contradictory, and I had the feeling the Skydome one would be considered advanced. (I just have a need for it right now, as would others I imagine).

    In my game at the moment, I have about 4 .fx files for various things.
    - cloud rendering (alpha blending for transparency, no lighting, but they need to fade in and out, and colour tint to match the background sky colour). I didn’t use sprites because I needed them to render with perspective according to their Z position in the world.
    - the planes (nice lighting)
    - the bullets (nice lighting)
    - and the Skybox (unlit, no Zbuffer, just a box at the moment).
    In all cases, these .fx files have been put together or modified from samples, or tutorials I’ve found, and somehow I’ve made them work.

    I imagine I’m not alone in this situation. This is the difficulty with so many beginners, particularly myself NEEDING to pick up HLSL very quickly. XNA doesn’t allow the Fixed-Function Pipeline thingy anymore, so rendering pretty much anything 3D requires some sort of HLSL, unless you can get by with the BasicEffect class.

    I just used the Matrix thing as an example to get my point across. I think to summarise, more explanetory Code commenting with minimal jargon would be fantastic.

    (By the way, I’m not singling out your tutorials. In fact yours seemed much better than most I’ve seen, and I’d really like to spend some time going through the whole lot. ;) )

    I realise at some point, that it gets unrealistic, and people like me are just going to have to accept they are swimming in the deep end, and perhaps learning a little theory would prevent sinking ;)

  5. Sharky Says:

    p.s. I present you the Flux Capacitor….



  6. riemer Says:

    My point exactly. I haven’t yet had a decent look at XNA, but from what I’ve seen up till now, shaders are needed for almost everything. This makes simple things a lot more complex, and at this moment I absolutely don’t have a clue what a first (’Hello world’?) tutorial on XNA would look like..

    I’m going to finish my 3rd series first, after that I’ll try to figure out what would be the best way to learn XNA.

    Oh and, it seems to be Jigowatt… You were right about the 1.21 though :)

  7. Sharky Says:

    Ah yes, the “Jigawatt” indeed!

  8. John Hurliman Says:

    I would love to see a set of HLSL tutorials that start from the very ground up. I’ve found plenty of “here’s how to make a realistic water shader!” followed by 100 lines of code, with no explanation of what each part is doing. Start from the very ground up, such as how to add a color tint with a pixel shader, or do a very simple vertex modification with a vertex shader.

  9. Sharky Says:

    Thanks John.

    Yeah, I know how you feel.

    I might be able to help you with the color tint thing. I don’t have the code in front of me (I’m at work), but from memory it was something like:

    outputColor.rgb = outputColor.rgb * tintColor.rgb;

    where tintColor is a global(?) variable Vector4 passed in to the shader using the Effect class at render time.

    I believe this is equivalent to doing:

    outputColor.r = outputColor.r * tintColor.r;
    outputColor.g = outputColor.g * tintColor.g;
    outputColor.b = outputColor.b * tintColor.b;

    I will confirm, and blog it along with my Cloud.fx hlsl source code ASAP.

    Stay tuned…

  10. John Hurliman Says:

    Sharky thanks for the help. I went out yesterday and bought a book on Managed DirectX which covers shaders, and most everything applies to XNA with a few code tweaks. I have a basic XNA app written (video here: http://www.jhurliman.org/index.php/2006/sceneviewer-video/) and will try out your color tint pixel shader now.

  11. Hannes Says:

    I am very new to XNA programming and I want to make a water shader for my game.
    Can anyone help me?

  12. Sharky Says:

    I’m not strong on shaders myself, but you could start by looking at this Ziggyware post & HLSL links…


    p.s. HLSL = High Level Shader Language = “Shaders”.

  13. Dan Lodge Says:

    In one of the early posts on here, riemer suggests that people looking into HLSL already [should] have a foundation in 3D programming.

    I’m an artist who is interested in post process effects and NPR (non-photo realistic) shaders. A few less technical artists have told me that shaders are programmer work, but at the end of the day shaders are a visual thing, and i want them in my bag of tricks – ideally without having to dedicate masses of time learning irrelevant info.

  14. Dan Says:

    If you’re looking for help on shaders, I’ve written some pretty basic tutorials for things such as ambient light, diffuse light, specular light, rim lighting, texturing, etc.

    I break them down to the very smallest detail so it should help out!

  15. Dan Says:

    The website is http://www.digitseven.com by the way.

  16. Sharky Says:

    Thanks for that. Good to know.