Jump to content

Drawing 2D stuff with GLSL


codeape
 Share

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);
context->SetShader(myShader);

 

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.

Link to comment
Share on other sites

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:

drawprimitive.zip

 

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:

post-14-0-32835300-1410578479_thumb.jpg

 

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

  • Upvote 3

Win7 64bit / Intel i7-2600 CPU @ 3.9 GHz / 16 GB DDR3 / NVIDIA GeForce GTX 590

LE / 3DWS / BMX / Hexagon

macklebee's channel

Link to comment
Share on other sites

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->SetShader(rshader);
context->DrawRect(350, 350, 200, 20);
context->SetShader(old);
}

 

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.

Link to comment
Share on other sites

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.

  • Upvote 1

Win7 64bit / Intel i7-2600 CPU @ 3.9 GHz / 16 GB DDR3 / NVIDIA GeForce GTX 590

LE / 3DWS / BMX / Hexagon

macklebee's channel

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.

Guest
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.

 Share

×
×
  • Create New...