[Video Tutorials] Introduction to shaders

[wezrule]

Ok these tutorials aren’t very good, recorded in the last few hours, and I was ill (still am) while doing them :P. I wasn’t as prepared as I would have liked to have been, and am new to shaders myself, but hopefully they can help someone start off into the world of shaders with the jMonkeyEngine.



Thanks to t0neG0d and thetoucher (i stole some of your material ;)), Pspeed (a nice tip), Remy and momako_fan (motivation) and normen <33



All videos were recorded in HD 720p, so should be very clear, the mic is bad but hopefully you can hear it ok.



jME Shader Tutorial series, lasting approx 1 hour 20 mins:

[General Introduction] – 2 mins

[Introduction to materials] – 7 mins

[Introduction to shaders] – 10 mins

[Simple Color] – 12:30 mins

[Flattening vertices] – 2 mins

[Rainbow color] – 10 mins

[Animating a waving flag] – 20 mins

[Dissolve shader] – 14 mins

[TODO] Applying multiple textures

[TODO] Mesh deformation using normal data

[TODO] Mesh deformation using a deformation map

[TODO] Procedural texture generation and lighting



[General Introduction]

http://www.youtube.com/watch?v=H-bbhVVME58

[Introduction to materials]
http://www.youtube.com/watch?v=_Fmlhr-3FdY


[Introduction to shaders]
http://www.youtube.com/watch?v=PlTQBHlDAwk


[Simple Color]
http://www.youtube.com/watch?v=GX-GL-f4CEo


[Flattening vertices]
http://www.youtube.com/watch?v=67UQ4jkgo08


[Rainbow color]
http://www.youtube.com/watch?v=numZ0J22es8


[Animating a waving flag] (part 1)
http://www.youtube.com/watch?v=5OwQIBPdAu8


[Animating a waving flag] (part 2)
http://www.youtube.com/watch?v=-BDclUWQypo


[Dissolve shader]
http://www.youtube.com/watch?v=XO8y6cmGiFM

[erlend_sh]

Awesome stuff! i’ll start another round of daily tutorial tweets once I come back from a quick cabin trip. Has the last series been incorporated into the wiki already? You should talk to @zathras about finding a suitable spot (possibly tie-ins in existing articles) for your video tutorials.



Also I think it’s blogpost time I was thinking it could cover your previous tutorials, as well as some rudimentary howto about making tutorials such as these. Thoughts?

[memonick]

Fantastic job @wezrule. I’m going to start learning some shader stuff soon, and I will use these. Thanks a lot!

[normen]

Yeah, great job man. I know how much work this means, much appreciated! I didn’t listen to them all yet but I will, the ones I listened to were good.

[polygnome]

very nice. haven’t watched it yet, but the summary looks great.

[wezrule]

@erlend_sh said:
Awesome stuff! i'll start another round of daily tutorial tweets once I come back from a quick cabin trip. Has the last series been incorporated into the wiki already? You should talk to @zathras about finding a suitable spot (possibly tie-ins in existing articles) for your video tutorials.

Also I think it's blogpost time :P I was thinking it could cover your previous tutorials, as well as some rudimentary howto about making tutorials such as these. Thoughts?

I added the math ones already, haven't done these ones yet. Sure sounds good :)

Thanks guys, you might be saying a different story if you actually watched them tho ^_^ ;)

[memonick]

I started watching them. I finished all up to #5 and now I’m experimenting alone. Great tutorials. And funny at times

[iamcreasy]

Thank you very much.



Coupled with to-be-completed Forward rendering and rendering bucket tutorial, jME3 will have one of the most comprehensive tutorial set of any game engine out there



Keep up the good work.

[mifth]

MUST TO BE ON THE WIKI! REALLY COOL!

[jmaasing]

Here I was thinking that I should get started learning shaders and this comes along. Perfect. Thanks a lot!

[oxplay2]

awesome tutorials, sometimes funny

[memonick]

@wezrule, in tutorial 7, the Shader M Stat goes up to 1700 and more. How can this be brought down?

[wezrule]

hmmmm something doesn’t seem right, possibly a bug somewhere, because I also managed to increase the FPS from 200 to 5000 and fix the Shader M stat, although i didn’t really pay attention to that.



Basically I just changed it from a float to a Vector2 and updated that using param.setX() instead of mat.setFloat(“Param”, param");



Full Project with the changes can be found here:

http://dl.dropbox.com/u/53339759/ShaderTutorials.zip

[wezrule]

ok @brentowens explained that

"if your variable is in the 'define' section of the j3md then whenever you update it the whole shader gets recompiled, stealing your precious FPS"

[oxplay2]

so when you update material via code, then shader recompile?



i hoped, that was solved better



just need to make “motion loops” in shaders.

[wezrule]

only if it is within the Defines {



}



and you do mat.setXXX



if you pass in a reference type i.e Vector2f you can update that vec.setX() and vec.setY() for example, then the shader doesn’t need to recompile each frame and there is no performance loss

[oxplay2]

wezrule:



i had RenderException in your tutorial project.



i propose you to change:



varying vec4 texCoord; → varying vec2 texCoord;

and attribute vec4 inTexCoord; → attribute vec2 inTexCoord;



like in JME shaders.

don’t know why it work for you with vec4



or if you know, then tell me.

[wezrule]

inTexCoord is a vec4



can you try change this line in the .frag and see if it works:



[java]color *= texture2D(m_ColorMap, vec2(texCoord));[/java]



The problem with shaders is that there are compatibility issues with different cards, im not sure what is the most effective yet, i’m still new to shaders, and only ever tried it on my card

[oxplay2]

yes it work,



question to someone who know: should i use vec2 or vec4? and why JME use vec2?



i just want to know why both of them are possible…

[wezrule]

If you only ever need the first 2 points of a texCoord (not sure what the other 2 are even for :P) then i guess it makes sense to cast it to a vec2 in the vertex shader and pass that to the fragment shader to avoid passing unnecessary information