Shadertoy - uniform variables needs explanation (SOLVED)

Questions
4

The sampler settings looks good! :+1:

I did a quick stab at using the raindrops-shader you linked. One important thing to remember when converting to Defold is that you need to expose the same data inputs that ShaderToy does. Shown here:

27
271910×458 185 KB

Looking through the shader you can see that these four are used in this particular shader;

  • Uniform values: iResolution, iTime and iMouse - need to supply the shader with these from a script
  • Texture: iChannel0 - the texture is automatically supplied by Defold

These uniforms needs to be defined in the material file, as described earlier.

But we also need to add these ourselves to the shader file, something like this:

uniform lowp vec4 iResolution;
uniform lowp vec4 iTime;
uniform sampler2D iChannel0;
uniform lowp vec4 iMouse;

The last thing we need to do is add some code to a script that will send these values to the shader at runtime;

function init(self)
	self.time = 0
	msg.post(".", "acquire_input_focus")
	sprite.set_constant("#sprite", "iResolution", vmath.vector4(1024.0, 1024.0, 0,0))
end

function update(self, dt)
	self.time = self.time + dt
	sprite.set_constant("#sprite", "iTime", vmath.vector4(self.time, 0,0,0))
end

function on_input(self, action_id, action)
	if action_id == hash("touch") and not action.released then
		sprite.set_constant("#sprite", "iMouse", vmath.vector4(action.x, action.y, 0,0))
	end
end

And voilà;

38
381210×1222 459 KB

I’m adding the finished project here for you to inspect: raindrops.zip (1.2 MB)

A quick note about shaders; they can generally be quite hard to debug, especially since you don’t have any “regular” debugging options such as breakpoints and logging/printing functionality. I would even say that debugging shaders calls for it’s own manual.

5 Likes