Jump to content

GLSL shader for WebGL


Recommended Posts



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,



Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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 ;):D

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...