@ZackBellGames sometimes when lightning strikes whilst looking in a mirror you swear you can see my face instead of yours. . . (Today)

@MattThorson it's a metaphor (Today)

@ZackBellGames twenty four seven (Today)

@ADAMATOMIC It took me like 3 weeks to convince comcast that I was using my own modem and they can't charge me for renting one from them :I (Today)

@progrium twitch stream speed tests (Today)

@Fruckert toggl (Yesterday)

you ever do that thing where you drop something with one hand and then your other hand catches it before you know it and you feel like a god (2 days ago)

@SharkTankGaming YEAH Until Perfect Cell just took a destructo disk head on and nothing happened (I think, I don't exactly remember) (2 days ago)

@floatvoid UGH I remember doing this in school I couldn't handle it (3 days ago)

Some days I just feel like Krillin in a world full of Super Saiyans (3 days ago)

@HilariousCow "dear google what to do if my entire life feels like constant burnout" "shit fam I dunno I'm a search engine not a doctor" (3 days ago)

@konjak Depends on what keys people start with, but yeah I think Hyper Light's was totally deciphered 2 days after launch. (3 days ago)

@HilariousCow probably like 4 years ago after offspring fling and snapshot come out ha haaaa~ (3 days ago)

@konjak It's just like riding several different bicycles all with different ways to pedal and steer and on different terrains with traffic (3 days ago)

I don't understand what is happening in my brain during times where I just seemingly forget how to draw anything. >:( (3 days ago)

@torahhorse split it up into smaller stars that have to compete with each other (3 days ago)

@MisfitsAttic I reset it so it changed the name because I didn't want to find out (4 days ago)

@loltimo seems that way but I can't find any commits that change it hmmm (4 days ago)

okay SO SFML .Net 2.3's texture.smooth seems to blend the edges of textures in ways that makes their edges messed up. 2.2 doesn't do this? (4 days ago)

what the fuck I start up duskers for the first time and the very first drone is named kyle I'm done t.co/vDgwlqVHB9 (5 days ago)

follow
search

2014 - 6 - 2 / 4:09 pm / general

Dev Log: Shader Experiments

Dev Log: Shader Experiments

Since my break to work on the remaining bits of Otter I haven't really fallen back into the groove on working on my big game project yet. Yesterday I dedicated the day to playing around with shaders since I'm really interested in using them for all kinds of cool visual effects.

Image

This is what I ended up coming up with at the end of the day. First I was playing around with gradient maps for recoloring an image, and then I started to mess with displacement to make cool waves in the image. Finally I wanted to experiment with having a render texture that could be passed to the shader for dynamic effects.

Basically how this little program works is that there is the static image with a shader loaded. Then there's a Surface object that can be painted on with the mouse. The shader uses the texture from that Surface to affect the image in different ways.

Here's the full C# source:

using Otter;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ShaderTesting {
class Program {
static void Main(string[] args) {
var image = new Image("pic.jpg");
var game = new Game("ShaderZ", image.Width, image.Height);

game.FirstScene = new TestScene();

game.Start();
}
}

class TestScene : Scene {

Image image = new Image("pic.jpg");
Image circle = new Image("circle.png");
Surface distortion;

public TestScene() {
AddGraphic(image);
distortion = new Surface(image.Width, image.Height);
circle.CenterOrigin();
circle.Blend = BlendMode.Add;
AddGraphic(distortion);
circle.Alpha = 0.1f;
distortion.Visible = false;
distortion.AutoClear = false;
}

public override void Update() {
base.Update();

if (Timer % 30 == 0) {
try {
image.Shader = new Shader("../../shader.frag");
}
catch(Exception e) {
Console.WriteLine("Shader error:");
Console.WriteLine(e.Message);
}
image.Shader.SetParameter("gradient", new Texture("gradient.png"));
}
if (Input.MouseButtonPressed(MouseButton.Right)) {
distortion.Clear();
}
image.Shader.SetParameter("time", Timer);
image.Shader.SetParameter("distortion", distortion.Texture);
image.Shader.SetParameter("offset", Util.SinScale(Timer, 0, 1));

if (Input.MouseButtonDown(MouseButton.Left)) {
Draw.SetTarget(distortion);
Draw.Graphic(circle, MouseX, image.Height - MouseY);
Draw.ResetTarget();
}
}

public override void Render() {
base.Render();

Draw.Circle(MouseX - 15, MouseY - 15, 30, Color.None, Color.Red, 2);
}
}
}


And the GLSL shader source:

sampler2D texture;
sampler2D gradient;
sampler2D distortion;
uniform float offset;
uniform float time;
uniform float mixfactor;

void main() {
vec2 pos = gl_TexCoord[0];
vec2 distortColor = texture2D(distortion, pos);
pos.x += distortColor.r * (sin(time * 0.1 + pos.x * 10) * 0.05);
pos.y -= distortColor.g * (cos(time * 0.1 + pos.y * 10) * 0.05);
vec4 color = texture2D(texture, pos);

float gray = (color.r + color.g + color.b) / 3;

vec4 gradientColor = texture2D(gradient, vec2(gray, offset));

gl_FragColor = mix(color, gradientColor, distortColor.r + distortColor.g);
}


You can download everything here. Note that you'll have to give it a reference to Otter to compile and run it yourself.

2 Comments
Avatar

2014 - 6 - 10 9:57 PM

R Brack

Are you meant to be creating a new shader and texture every 30 (seconds? milliseconds?) That seems a bit rough to me.

Avatar

2014 - 6 - 11 1:25 AM

Kyle

It's actually every half second (60 fps.) It's so I can edit the shader, save, and see my changes almost instantly instead of having to rebuild the application. I don't notice any performance issues.

Avatar

Post your comment!

POST COMMENT

about

About

Hi! My name's Kyle, and I make video games most of the time in Denver, Colorado. Here you will find my thoughts, games, websites, doodles, and other stuff like that. I worked on Snapshot, Offspring Fling, and a whole bunch of other games. I also created and maintain Otter, a 2d game making framework. If you want to get a hold of me use the form on the bottom of the page, leave a comment, or just tweet at me. I try to post three times a week. Thanks for stoppin' by! You're the coolest.

blog stuff

categories

tags

archives

facebook

videos

Do you want to make a Let's Play of one of my games, or a just a video featuring footage of my games? You have my full permission to do so! Even if you are monetizing your videos, you still have my full permission to use any footage from any of my games. Go for it!

contact

Your message has been sent! Thanks :)
SEND MESSAGE