Jump to content

Drawing 2D stuff with GLSL

Recommended Posts

I am a bit of a GLSL noob. You are the experts so this is probably easy to answer. biggrin.png


I want to draw a 2D color gradient (as part of the ui) on screen. Lets say I want the gradient to be drawn at x: 100 y:100

and have a with of 200 and a height 50.


I guess I would have x, y, width and height as uniforms in my shader (I will figure out the rest of the glsl later on).


Ok now for one of the questions. Should I use SetShader on Leadwerks::Context to apply my shader? Something like this:


Leadwerks::Shader *myShader;
Leadwerks::Context *context;
myShader->SetInt("pos_x", 100);
myShader->SetInt("pos_x", 100);
myShader->SetInt("dim_width", 200);
myShader->SetInt("dim_height", 50);


Another question is. Should I set the shader before or after world->Render(); My guess is after.


And yes, I want to use a shader. biggrin.png


Thank you for all the help I can get.

Share this post

Link to post

Sounds to me you are wanting to draw a rectangle with a color gradient? If so, I would just use the inherent DrawRect() command and change the default shader used in the Shaders/Drawing folder to allow for a gradient.


Replace the 'drawprimitive.shader' with this file:



To use:

  • 'shader = Shader:Load("Shaders/Drawing/drawprimitive.shader")'
  • 'context:SetColor()' to set the start color
  • 'shader:SetVec4("endcolor", ...)' to set the end color (green is the default color)
  • 'shader:SetInt("horizontal", 1)' to set horizontal gradient (vertical is the default)
  • 'DrawRect()' to draw the gradient rectangle


This will give you a simple gradient:



Note that this will also give a gradient to the selection "box" when you select an item in the Asset Browser.

Share this post

Link to post

Thanks macklebee,


I used your script straight off. Ok, almost no changes. I changed the name to gradient.shader. I did not replace drawprimitive.shader.


I ended upp with code looking like this ... and it works perfectly:


Branch::BranchLoop::BranchLoop(Leadwerks::Context * ctx, Leadwerks::Window *win,
Leadwerks::Camera *cam)
rshader = Leadwerks::Shader::Load("Resources/Gradient/gradient.shader");
void Branch::BranchLoop::postRenderUpdate() {
Leadwerks::Shader *old = context->GetShader();
context->SetColor(1.0, 1.0, 1.0, 1.0);
rshader->SetVec4("endcolor", Leadwerks::Vec4(0.0, 0.0, 1.0, 1.0));
rshader->SetInt("horizontal", 0);
context->DrawRect(350, 350, 200, 20);


I experimented a bit and discovered that if I took care of setting all uniforms before I made my rshader the current shader I got a nice color gradient when I called DrawRect.

Share this post

Link to post

The reason I suggested to just replace the 'drawprimitive.shader' is because the 'DrawRect()' command loads it inherently anyways. So you wouldn't have to set or track the context's "old" shader, but if your method works for you - good enough.

Share this post

Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

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.

  • Create New...