Game
Battery Golem
8 years ago

Fun with shaders


At some point of a game programmers lifetime, they will eventually bump into shaders. This post is made to try inspire other by viewing that shaders don’t really have a super steep learning curve.

For this project I had virtually zero experience with shaders so I had to keep it very simple. But it didn’t stop me from trying. Like look at this silhouette, I coded it with no experience with shaders in less than 1 hour.

5d0b0779f1291.gif

Hey, that’s pretty good!

The algorithm behind it is pretty simple. It uses stencils and post-processing scripts to first check, one pixel at a time, if it’s obstructed by anything (also referred to as depth-testing) and if so, store a value 1 in the stencil for that pixel, and if not store the value 0 for that pixel in the stencil. Then after that, we go through the screen (again, 1 pixel at a time) and check where the stencil is 1 and where it’s 0, and then tint the 1-pixels brighter.

Boom and bap, and we have a silhouette shader.


Another fun shader is the wavy grass. For this we can use a vertex shader. In the vertex shader we want to move the vertices around, based on some wind.

My approach was to simulate wind via the sinus math function. The calculation was something similar to this:

		
			vertex.x = sin(worldPos.x + time * speed) * normY;
		
	

Where worldPos.x is the global world position, so not all grass straws wave at the same time. And the multiplier normY is a normalized local y position for this vertex, where the bottom is normY = 0 and the top of the mesh is norm = 1. This way, it waves more at the top than at the bottom.

With just some playing around with the numbers, starting with this:

5d0b077be82ea.gif

And eventually ending up with something like this:

5d0b077d98b16.gif

Moral of the post

Shaders may seem complicated, but what they really is is just some code that you write, that instead of running on the CPU, it runs on the GPU. Just another language to learn.

Never stop trying new things. Experimenting with shaders is one of the best things you can do, because you can find such awesome results. Examples:

5d0b0781a721c.gif
5d0b07825cabc.gif
5d0b078417859.gif

Now for the lolz, here’s the battery golem with the wavey grass shader (inside spoiler):

5d0b078580826.gif

Thanks for reading. And don’t be afraid to try scripting shaders, just give it a shot!



0 comments

Loading...

Next up

Did you know that today is #InternationalJazzDay? 🎷😎

No? 😯 Well, we couldn't pass up this date!

And what better to celebrate this day than #Pecaminosa #OST? 🎷

Let us know what you think about it and have a great weekend!

So

i may or may not make an full art of some person or i may just leave this like that-

Bandana Dee the Dream Friend

Been working lately on lots of 'behind-the-scenes' boring stuff that no one really cares about, so here’s a guy playing the sax for some reason.

#screenshotsaturday

Path of Kami: The Evolution of the Lore

Heya there! I really wanted to show you all a little gameplay preview of the first boss fight i'm currently working on i hope you like it ^^

One of the most critical update for Sunblaze demo. Now you are able to pet a cat! Finally!

Microsoft Windows XP Unprofessional (windows logo prototype)

a drawing I did because I was bored😪. But I love how it turned out.😊

Today I tackled drawing different variations of facial expressions for one of the main characters in Eden. What do you think of it? :) Eden: https://gamejolt.com/games/Eden/592698