GLSL shader for WebGL

[Dinkelborg]

Hi,

 

I'm trying to create a shader and I'm having a really hard time to find a good tutorial for GLSL shaders for WebGL.

I have never written a shader before and so I really need to learn the basics, does anyone know a good resource 

for this or could offer some help with it? 
 

Here are some of the more basic question I have:

 

- What editor would you recommend for shader language?
- Where to look up types and functions (documentation)?

- Tutorials for WebGL?

 

Thanks for any help and recommendations,

 

Dinkelborg

[alex_h]

Here are a couple of links that might help:

 

http://learningwebgl.com/

 

shadertoy

 

webgl-reference-card-1_0.pdf

[julien-moreau]

Hey Dinkelborg

 

Very happy to see people learning shaders

 

The links alex_h shared with you are excellent. Btw, if you want to experiment your shaders, you can use the BabylonJS CYOS at http://babylonjs.com/cyos/

 

Or also use the Material Shader Creator of the BabylonJS Editor at : http://reath.free.fr/babylon/ (Edit -> Create Material Shader)

[Dinkelborg]

Hey, thanks for the links guys, but as far as I understand "learningwebgl.com" is rather about webgl in general not about shaders in specific, I have been reading some of their pages during the time I started using Babylon and Three<.js>, I haven't read all of them though... so there might be something.

I know shadertoy and looked around on it, the page is a really nice resource of interesting effects, but doesn't really help to learn how to create a shader, besides that, as far as I know, all shaders on shadertoy are some kind of screenshader, so probably something like post processing, they also just present the sourcecode to you without any explanation and as I mentioned, I'm a total beginner with shaders, so I really need some basics before I can grasp what people have done there and where the magic happens.

For the last link alex_h posted: I think that one is pretty useful I immediately printed all of the pages out and they will most probably come in very handy once I understand how to work with shader language in general as a reference card to look something up if I forgot, but for a start they also seem somewhat out of context. 

@Luaacro: The online Editor looks pretty nice, I didn't know it existed before! Just in general I don't know where to start, looking at the simplest code seems very confusing to me for example:
I created a new material shader in your editor and the standard code was:
 

// Default pixel shaderprecision mediump float;varying vec2 vUV;uniform sampler2D textureSampler;uniform sampler2D otherSampler;void main(void) {	gl_FragColor = texture2D(textureSampler, vUV)		+ texture2D(otherSampler, vUV);}

I thought: okay lets start really simple and just make the cube entirely white instead of the black color it has now, but looking at the Pixelshader I have no idea how to do that at all. "What is a textureSampler?" "How do I actually load in a texture to it?" and "Can I create a texture at runtime in a shader?" are only three random questions popping up right now looking at the pixel shader.

So what I am looking for is just a very basic tutorial showing how to carry out a very simple and basic task in a webgl shader, so that one can grasp all the different objects and functions that can be used.
 

Thanks for any further help. hope some more people might get interested in learning some shader-magic

[julien-moreau]

Oh, I understand

Here, a mini tutorial (I'll create the wiki for that when the editor will be usable)

Build Script contains a function immediately executed that returns the attributes you want to use in your vertex program (vertex shader), the uniforms you want to send to the programs (Vertex & Pixel Shader) and samplers that are the "uniform sampler2D" you want to use in the Pixel Shader.If you want to remove or add an attribute, uniform or sampler, simply add it to the arrays or remove it from the arrays.Concerning the values you would like to send to shaders, take a look at the Callback. The update method is called at each frame and sends values to the material (shader), values that are the uniforms.To add images, click "Edit -> Set custom texture...", select your texture(s) and apply them using the bottom-right menus (Textures section)I hope you understood everything =S

[alex_h]

Several of the lessons on learningwebgl.com do specifically cover working with vertex shaders and fragment shaders. I would recommend reading through each of those lessons in turn from start to finish. Having done that, then take a look at some of the source code on shadertoy.com. Pick an example on there that you particularly like and try editing some of the code to see what effect it has on what is drawn on screen. At least that's the kind of approach I like to take to learning new stuff.