# Shadertoy to Defold Help

**URL:** <https://forum.defold.com/t/shadertoy-to-defold-help/71425>\
**Category:** Questions\
**Created:** [August 11, 2022, 11:38pm UTC](https://forum.defold.com/t/shadertoy-to-defold-help/71425 "2022-08-11T23:38:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pewsplosions](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pewsplosions/32/29153_2.png) [@Pewsplosions](https://forum.defold.com/u/Pewsplosions)\
**Post date:** [August 11, 2022, 11:38pm UTC](https://forum.defold.com/t/shadertoy-to-defold-help/71425/1 "2022-08-11T23:38:42Z")

</div>

Hi, so I’ve been wanting to make a bit of a 2d lighting system with normal mapping. I’ve read a lot of the forum posts and existing workarounds and that we need multi texture support for sprites, which is being worked on.

I also have been learning more about shaders. I found this shadertoy example that seems really nice: [https://www.shadertoy.com/view/lstyDr](https://www.shadertoy.com/view/lstyDr). It seems to do the normalization as part of its code, so only one sampler is needed still, so I thought I’d see if I could make it work as the sprite shader.

So I copied the sprite vertex/fragment shader programs and made a new material and tried to translate it. It just kind of renders a single color for the most part though. Here is what I have:

```glsl
varying mediump vec2 var_texcoord0;
uniform lowp vec4 mousepos;

uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;

#define fac 1.
const int numLights = 2;

vec3 esnm2(in vec2 uv, in vec2 t)
{
    return normalize(vec3(
        texture(texture_sampler, vec2(uv.x + t.x*fac, uv.y)).x - texture(texture_sampler, vec2(uv.x - t.x*fac, uv.y)).x,
        texture(texture_sampler, vec2(uv.x, uv.y + t.y*fac)).x - texture(texture_sampler, vec2(uv.x, uv.y - t.y*fac)).x,
        1
    ));
}

struct material {
    vec3 ambient, diffuse, specular;
    float shininess;
};

struct light {
    vec3 o, ambient, diffuse;
    float power;
};

vec3 shade(in vec3 p, in material m0, in vec3 N, in light[numLights] l) {
    vec3 ambient = m0.ambient;
    vec3 diffuse = m0.diffuse;
    for(int i=0; i<numLights; ++i)
    {
        ambient += l[i].ambient;
        float d = distance(l[i].o, p);
        vec3 ldir = p-l[i].o;
        vec3 L = normalize(ldir);
        float NdotL = dot(N,L);
        diffuse += NdotL*l[i].diffuse*l[i].power/d;
    }
    return (ambient+diffuse)/float(numLights);
}

void main()
{
    vec2 res = vec2(1.92, 1.08); // <3>
    vec2 uv = var_texcoord0.xy/res.xy;
    float aspect = res.y/res.x;

    vec2 p = uv*2.-1.;
    uv.y*=aspect;
    p.y*=aspect;

    vec2 mouse = mousepos.xy/res.xy;
    vec2 mousep = mouse*2.-1.;
    mousep.y *= aspect;

    light[numLights] l;
    l[0] = light(vec3(mousep, -.02), vec3(.075, .056, 0), vec3(.5, .34, 0), .2);
    l[1] = light(vec3(mousep+0.3, -.02), vec3(.075, .056, 0), vec3(.3, .34, 0), .6);

    material m0 = material(vec3(.056), vec3(.1, .089, .08), vec3(.56, .54, .34), 10.0);

    vec3 N = esnm2(uv, 1./res.xy);
    vec3 col = shade(vec3(p,0), m0, N, l);

    gl_FragColor = vec4(col,1);
}

```

I added a vec4 variable to the fragment shader in the material for mousepos and update it with a script which does not seem to work at all. (the script works, I can put a print there to see mouse pos move around but it does not change the shader at all.)

```lua
function init(self)
	msg.post(".", "acquire_input_focus")
end

function on_input(self, action_id, action)
	if action.x and action.y then
		sprite.set_constant("#sprite", "mousepos", vmath.vector4(action.x, action.y, 1, 1))
	end
end

```

I am pretty new to all this. Any help converting this shadertoy to defold would be awesome! Thanks.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [August 12, 2022, 4:43am UTC](https://forum.defold.com/t/shadertoy-to-defold-help/71425/2 "2022-08-12T04:43:49Z")

</div>

> [@Pewsplosions](#):
>
> It just kind of renders a single color for the most part though

Does the color change when the mouse moves?

Note: There’s also this tutorial on Shadertoy to Defold conversions:

> **[Shadertoy to Defold tutorial](https://defold.com/tutorials/shadertoy/)**
>
> In this tutorial you will convert a shader from shadertoy.com to Defold.

---

<div class="post-metadata">

**Author:** ![Pewsplosions](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pewsplosions/32/29153_2.png) [@Pewsplosions](https://forum.defold.com/u/Pewsplosions)\
**Post date:** [August 12, 2022, 7:23am UTC](https://forum.defold.com/t/shadertoy-to-defold-help/71425/3 "2022-08-12T07:23:38Z")

</div>

The color did not change with mouse movement. I followed that tutorial to get as far as I did. Without it I was getting lots of errors haha.

I added a brick pattern image that is mostly brown to the sprite as the texture. With the standard shader the image looks fine. With this shader it is basically solid brown, single color. It loses the image to the one color. And moving the mouse around doesn’t do anything.

I’ll probably try to play more with it but thought I’d post here to see if someone else could see something I’m obviously doing wrong.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [August 12, 2022, 8:44am UTC](https://forum.defold.com/t/shadertoy-to-defold-help/71425/4 "2022-08-12T08:44:50Z")

</div>

I think you need to back away and start from the beginning. First make sure you can get mouse input to the shader. Start by sending a normalized mouse position (ie where all values are between 0 and 1).

```lua
-- width and height of your project as set in game.project
local width = tonumber(sys.get_config("display.width"))
local height = tonumber(sys.get_config("display.height"))

-- make sure values are within 0.0 and 1.0
sprite.set_constant("#sprite", "mousepos", vmath.vector4(action.x / width, action.y / height, 1, 1))

```

And in your shader:

```lua
uniform lowp vec4 mousepos;

void main()
{
    gl_FragColor = mousepos;
}

```

This should draw the whole mesh in a color based on your mouse position. If that works then add more piece by piece until you have something that is working.

---

<div class="post-metadata">

**Author:** ![Pewsplosions](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pewsplosions/32/29153_2.png) [@Pewsplosions](https://forum.defold.com/u/Pewsplosions)\
**Post date:** [August 13, 2022, 12:45am UTC](https://forum.defold.com/t/shadertoy-to-defold-help/71425/5 "2022-08-13T00:45:03Z")

</div>

Normalizing the mouse position helped for sure, thanks!