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

"Thanks guys for endless hours of fun." 👍

(My first fan art. Read the article, please.)

#sonic #mario #photoshop

Finished a project I've been working on over the last few days!

Modeled and textured in Blender.

#3dart #lowpoly #npbr #fantasy #hut

Shadow The Hedgehog X pixel art

Family band complete!

Hi everyone! I started to create some environment props for my new video game, here is a cozy house in the forest. I'm planning to switch from Unity to Unreal... Let's see what new challenges I have to face. Made in Blender and Substance Painter.

A house I've built a while ago. :)

It nicely separates the snowy biome from the grassy one.

It's built with painted Ebonstone.

brung back my old oc plus a new one

...they don`t have names yet tho

Szayel Aporro Granz - Bleach

We're knee deep in multiple large features and "game feel". Quick peek behind the scenes in this weeks Dev Blog: https://bit.ly/2QmmaQM

Colorful Fox

Happy Late Easter!