# Light and Shadows example

**URL:** <https://forum.defold.com/t/light-and-shadows-example/71713>\
**Category:** The Defoldmine\
**Created:** [September 23, 2022, 5:48pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713 "2022-09-23T17:48:01Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![jhonny.goransson](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/jhonny.goransson/32/3864_2.png) [@jhonny.goransson](https://forum.defold.com/u/jhonny.goransson)\
**Post date:** [March 22, 2024, 2:48pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/21 "2024-03-22T14:48:03Z")

</div>

Ok, it’s working better now, this is vulkan:

 ![image](https://forum-defold.b-cdn.net/uploads/default/original/3X/9/f/9f46d0964820cbbeecd9da2a61de328b2865696e.jpeg)

I copied the varying specification from the vertex shader to the fragment shader. So now I just need to figure out if we can catch this early, or avoid it happening. Thanks for the report!

---

<div class="post-metadata">

**Author:** ![iotaHum](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/i/977dab/32.png) [@iotaHum](https://forum.defold.com/u/iotaHum)\
**Post date:** [July 12, 2024, 11:56am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/22 "2024-07-12T11:56:30Z")

</div>

There are some build errors for simple\_input.lua  
Line 56: registered\_node[node] = nil  
‘Undefined global registered\_node’  
These don’t stop it ‘working’ though, so I guess it is no big deal.  
(tag: v0.4.0,e8222cd)

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [July 12, 2024, 3:03pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/23 "2024-07-12T15:03:05Z")

</div>

> [@iotaHum](#):
>
> registered\_node

yep, should be ‘registered\_nodes’, I’ve fixed this typo mistake. Thanks.

---

<div class="post-metadata">

**Author:** ![ainonovo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/ainonovo/32/27068_2.png) [@ainonovo](https://forum.defold.com/u/ainonovo)\
**Post date:** [January 1, 2025, 5:03pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/24 "2025-01-01T17:03:31Z")

</div>

I have a small question. How can you make it so that an object can cast a shadow - but the shadow does not fall on it?

normal

 ![1](https://forum-defold.b-cdn.net/uploads/default/original/3X/2/c/2cb45ca9938e1f1179eaffac280d4b26806df488.jpeg)

i wont use this code for show GO “robot2” to front

```lua
    render.disable_state(render.STATE_DEPTH_TEST)
    render.draw(self.robot1, frustum)
    render.draw(self.robot2, frustum)
    render.enable_state(render.STATE_DEPTH_TEST)

```

but shadow continue cast from bihind robot ((

 ![2](https://forum-defold.b-cdn.net/uploads/default/original/3X/6/6/66ac2056079382fabca49b8c23057551d72a04c9.jpeg)

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [January 1, 2025, 5:39pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/25 "2025-01-01T17:39:29Z")

</div>

Objects that cast a shadow must have the second tag ‘shadow’ in their material.

Sorting when casting shadows is by Z (in view coordinates), if you introduce your own sorting of objects in the render script in the following, you should take this into account for casting shadows as well.

---

<div class="post-metadata">

**Author:** ![ainonovo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/ainonovo/32/27068_2.png) [@ainonovo](https://forum.defold.com/u/ainonovo)\
**Post date:** [January 1, 2025, 6:26pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/26 "2025-01-01T18:26:05Z")

</div>

Thank you for your answer. Yes, now I use z sorting - but it’s not pretty (( All my characters are on the same line and the offset along the z axis is immediately visible

That’s why I want to do sorting in render

 ![3](https://forum-defold.b-cdn.net/uploads/default/original/3X/2/7/2740c4257a8be053b66e80c6b7656545d40a7bc2.png)  
 ![2](https://forum-defold.b-cdn.net/uploads/default/original/3X/5/d/5d10d270b04cdc0205a7d268302bfa9a1917107f.png)  
 ![1](https://forum-defold.b-cdn.net/uploads/default/original/3X/9/4/94ffb8faa4cad048cc6a2e6f968a16e8aae909c0.png)  
 ![4](https://forum-defold.b-cdn.net/uploads/default/original/3X/3/a/3a1323db3864a63236f037f1a2bb4bdc5111f0eb.png)

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [March 28, 2025, 6:55pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/27 "2025-03-28T18:55:07Z")

</div>

Well, here is a new big update.

- Uses standart Defold camera component instead _rendercam_.
- Uses **default render script** (based on Defold v.1.9.8) with some injections to enable shadowmapping.
- New examples. Player controller, virtual game stick. Draggable dice.
- Shaders enhancements. Uses include to reduce code repetition.
- PCF Poisson Shadow added.
- Billboard particle material.

[GitHub - Dragosha/defold-light-and-shadows: Pack of shaders to make light and shadows in Defold. · GitHub](https://github.com/Dragosha/defold-light-and-shadows)

[HTML5 Demo](https://dragosha.com/defold/Light_and_Shadows/)

---

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [March 28, 2025, 7:54pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/28 "2025-03-28T19:54:31Z")

</div>

Wow, wow, wow, wow! 😍

---

<div class="post-metadata">

**Author:** ![SuperEly](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/superely/32/36691_2.png) [@SuperEly](https://forum.defold.com/u/SuperEly)\
**Post date:** [March 28, 2025, 9:52pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/29 "2025-03-28T21:52:31Z")

</div>

Incredible.

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [April 4, 2025, 3:31pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/30 "2025-04-04T15:31:28Z")

</div>

v.0.6.0 is here.

- Added Spotlight bulb.
- Added Spine scene example.
- Added Instanced model material.
- Upscale. In some cases a useful rendering technique where your scene is rendered at a low resolution and then stretched to the screen with `linear` scaling. Can help to get acceptable FPS on slow devices with large physical screen resolution.

---

<div class="post-metadata">

**Author:** ![gameoffate2018](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/gameoffate2018/32/20065_2.png) [@gameoffate2018](https://forum.defold.com/u/gameoffate2018)\
**Post date:** [April 5, 2025, 4:22am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/31 "2025-04-05T04:22:32Z")

</div>

Thank you for updating this! I’ve had a lot of fun playing around with this!

I was trying to create a billboard sprite similar to your billboard particleFX but am having some difficulty.

In the game object it is working correctly:

 ![workingInGO](https://forum-defold-uploads.b-cdn.net/original/3X/c/7/c72c3644c502c773588839351566d15d737b7d14.png)

However, when I try adding it to the example scene it stretches in some unexpected ways.

 ![stretchedBillboard](https://forum-defold-uploads.b-cdn.net/original/3X/3/a/3aa0c64e5b539a644a6f3c7145fcd65e923b08c0.jpeg)

Any ideas on how I could set this up correctly?

This is the code I tried to modify:

```lua
// positions are in world space
attribute highp vec4 position;
attribute mediump vec2 texcoord0;

uniform highp mat4 view_proj;
uniform highp mat4 mtx_view;
uniform highp vec4 normal;
uniform highp mat4 mtx_light;
uniform mediump vec4 param;

varying mediump vec2 var_texcoord0;
varying highp vec4 var_position;
varying highp vec4 var_view_position;
varying highp vec3 var_normal;
varying highp vec4 var_texcoord0_shadow;

//Billboard effect
attribute highp vec3 local_position;
uniform highp mat4 proj;

void main()
{

    gl_Position = (view_proj * vec4(position.xyz - local_position.xyz, 1.0)) + (proj * vec4(local_position.xy, 0.0, 0.0)); // Copied from billboard_particle/particlefx.vp
    var_texcoord0 = texcoord0;

    if(param.y < 1.) {
        var_texcoord0_shadow = mtx_light * position;
    }

    var_position = vec4(position.xyz, 1.0);
    var_view_position = mtx_view * position;
    var_normal = normalize(normal.xyz);

}

```

Thank you!

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [April 5, 2025, 4:58am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/32 "2025-04-05T04:58:08Z")

</div>

As far as I understand billboard sprite must be in zero rotation on the scene, otherwise the set initial values are then incorrectly changed in the shader and distortions are received.

---

<div class="post-metadata">

**Author:** ![gameoffate2018](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/gameoffate2018/32/20065_2.png) [@gameoffate2018](https://forum.defold.com/u/gameoffate2018)\
**Post date:** [April 5, 2025, 5:49am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/33 "2025-04-05T05:49:41Z")

</div>

I set the rotation to 0 on him and that didn’t fix it.

I tried setting the scale back to 1.0 and that did fix it. It appears that when the scale on either the game object or sprite is ~=1 it the distortion takes place. The smaller it gets the more extreme I am seeing. Larger then 1 results in the sprite not completely turning to face the camera.

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [April 5, 2025, 7:06am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/34 "2025-04-05T07:06:03Z")

</div>

ah yes, I remembered that I had the same adventure with billboard sprites in other projects, I even passed the scale through the sprite attributes to the shader to account for it. Interestingly, this works with particles, even though they are actively resizing in runtime. So far I see only one way out: if we need billboard sprites, we need to make the scene bound to the sprite scale 1 to 1, not to the scale of 3D models.

```lua
// positions are in world space
attribute highp vec4 position;
attribute mediump vec2 texcoord0;
attribute highp vec3 local_position;
attribute mediump vec3 scale;

uniform highp mat4 view_proj;
uniform highp mat4 proj;

uniform highp vec4 normal;

uniform highp vec4 cam_pos;

varying mediump vec2 var_texcoord0;
varying highp vec4 var_position;
varying highp vec3 var_normal;

void main()
{
   highp vec4 base = vec4(position.x - local_position.x / scale.x, position.y - (local_position.y / scale.y) *.5, position.z - local_position.z / scale.z, 1.0);
    highp vec4 local_pos = vec4(position.x - base.x, position.y - base.y, 0.0, 0.0);
    gl_Position = (view_proj * base) + (proj * local_pos);
    
    // gl_Position = view_proj * vec4(position.xyz, 1.0);
    var_texcoord0 = texcoord0;
    var_position = vec4(position.xyz, 1.0);
    var_normal = normalize((cam_pos - position).xyz); // normal facing to camera too

}

```

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [April 17, 2025, 8:00am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/35 "2025-04-17T08:00:38Z")

</div>

**v.0.7.0**  
Updated to modern GLSL shaders version 140

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [April 17, 2025, 3:21pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/36 "2025-04-17T15:21:53Z")

</div>

Now that the versions of the engine’s built-in shaders and the L\_S library are the same, it’s time to experiment with GPU skinned models and shadows. You can ignore the running animation, I couldn’t quickly make friends with the skeleton and character animation from the free Kenney set.

What’s interesting.

1. The engine places the pose\_matrix\_cache texture apparently not by name, but by number? Because if pose\_matrix\_cache is not specified in the material, this texture will overwrite the tex1 texture, which contains the shadow map and is included in the render script. There is clearly some conflict here.  

2. If you don’t specify any samplers for the shadow render material (you don’t need them for the model), but use skinnig, the engine will show the error `ERROR:GAMESYS: Unable to bind bone matrix cache texture for component ‘/boy5’, does the shader(s) have a sampler named ‘pose_matrix_cache’?"` This situation can still be for a material without a texture, if the lowpoly model is for example painted with the colour of vertexes.

3. What happens to the shadow of the duplicated character model\_skinned I honestly do not understand yet 😅 Somehow the position of the last character is remembered when the rendering script substitutes the material for the shadow renderer.

4. Unrelated to skinning. I noticed that `in mediump mat4 mtx_normal;` comes to the shader incorrectly? In some cases, replacing this matrix with `mtx_world` in the normal correction for later light calculations gives the expected result.  
`var_normal = normalize((mtx_world * vec4(normal, 0.0)).xyz);` But even this does not solve the case with different platforms, for example in html5 and just building PC give me different results.

 ![2025-04-17_20-04-33](https://forum-defold-uploads.b-cdn.net/original/3X/0/4/0458816a9f1cb5a92a6742990ef21f982b0ecf35.jpeg)

And finally, the most disturbing thing of all. My tests show GPU skinned losing to regular World material in the browser on the 12 iPhone. 48 vs 60 fps. 🤔

I think I should create issues, but I don’t have the energy for that yet 🙃  
I have created a [separate branch](https://github.com/Dragosha/defold-light-and-shadows/tree/skinning) in the repository with these materials for experimentation and testing.

---

<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:** [April 17, 2025, 8:05pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/37 "2025-04-17T20:05:43Z")

</div>

Thanks for testing and finding a bunch of issues. ❤

> [@Dragosha](#):
>
> I think I should create issues, but I don’t have the energy for that yet

We look forward to the bug reports!

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [May 17, 2025, 6:40am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/38 "2025-05-17T06:40:18Z")

</div>

v.0.8.0

- Added `perspective projection` for shadow casting. Experimental function, gliches in shadow casting may occur. The direction of shadow casting is determined by the direction (rotation) of the sun object. Keep in mind that this mode is not an analogue of shadows from a point light source, as it directs its rays only in one direction (plane), not in six, as is necessary for a full-fledged point light source. However, with the help of scene adjustment it is quite possible to achieve an acceptable result, for example, to fill one room with light and shadow.
- Added ability to adjust the Projection Resolution value from the `sun` object. This value indicates the size of the area on which the shadow is projected around the screen center. Smaller size is better shadow quality. Note: only relevant for orthographic projection (default).

Perspective projection example:

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [June 29, 2025, 7:54am UTC](https://forum.defold.com/t/light-and-shadows-example/71713/39 "2025-06-29T07:54:41Z")

</div>

> [@Dragosha](#):
>
> Unrelated to skinning. I noticed that `in mediump mat4 mtx_normal;` comes to the shader incorrectly? In some cases, replacing this matrix with `mtx_world` in the normal correction for later light calculations gives the expected result.  
> `var_normal = normalize((mtx_world * vec4(normal, 0.0)).xyz);` But even this does not solve the case with different platforms, for example in html5 and just building PC give me different results.

I can’t find tickets for this or some other issues you mentioned.

> [@Dragosha](#):
>
> And finally, the most disturbing thing of all. My tests show GPU skinned losing to regular World material in the browser on the 12 iPhone. 48 vs 60 fps. 🤔

Should be better in the next (after 1.10.3, now in alpha) version

---

<div class="post-metadata">

**Author:** ![Dragosha](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/dragosha/32/5103_2.png) [@Dragosha](https://forum.defold.com/u/Dragosha)\
**Post date:** [July 8, 2025, 2:33pm UTC](https://forum.defold.com/t/light-and-shadows-example/71713/40 "2025-07-08T14:33:44Z")

</div>

v0.8.1

- Added **Blur** shader. Now you can enable blurring the game scene canvas and draw an unblurred GUI on top of it.
- Added **Billboard** sprite shader.
- Background parallax sprite shader.
- And sprite texture repeat shader.
- Texture sampler filtering has been changed to `default` instead of `linear` value. This means that all materials inherit texture filtering values from project settings.

 ![2025-07-08_17-44-08](https://forum-defold-uploads.b-cdn.net/original/3X/0/6/0646094397112f2aa5f3061ded5b11d7fa6d1cd3.jpeg)

[demo](https://dragosha.com/defold/Light_and_Shadows/) updated with Defold v 1.10.3

[Previous page](https://forum.defold.com/t/light-and-shadows-example/71713.md?page=1)

[Next page](https://forum.defold.com/t/light-and-shadows-example/71713.md?page=3)