Jump to content

Implementing shadows with shader


Recommended Posts

Hi everyone,

I have recently been learning to code and currently am creating a 2d game using PIXI v5.
I want to implement some interactive shadows, based on different light points on the map(lights) or "above" the map(sunlight).

I still have a lot to learn about Webgl and  the insides of PIXI, and I got some questions about some different approaches.

I noticed that there is a plugin, PIXI lights, but unfortunately it does not work with PIXI v5. 
On different forums and tutorials I encountered some shader ideas that create a shadow of particular objects.
This works perfectly.
However, when applied to my object container, it will render the container as a single texture and create shadows that are of course not in sync with the place of the objects itself,
but will appear as a combined shadow of the total combination textures.

I have also tried some shadowing through normal mapping, could work great as well, but if feel is mostly suitable for creating shadows for the terrain of the map.
As far as i could tell, PIXI lights is using some form of flexible normal map rendering.

Im curious what you all think is the best approach to create simple moving shadows for a container of display objects.

some questions:

I dont understand a lot about the batch renderer, and if that would be the right area to find a solution? I noticed some thing about a batch renderer that uses a %forloop% in the shader and 'uSamplers', could this be usefull to implement inside a shader to id the textures of the individual sprites which are inside the container?

Would it even make a performance difference to use the shadow shader on every object in the container or using 1 shader?
Would it be beneficial to put the shader inside a PIXI.program in that case?

Im looking forward to hear your perspectives.

Thank in advance





Link to comment
Share on other sites

I noticed that there is a plugin, PIXI lights, but unfortunately it does not work with PIXI v5. 

Here is where lighting starts: https://pixijs.io/examples/#/plugin-layers/lighting.js

When you understand layering, renderTextures, shaders - you can actually make great lighting. There are many tricks and recipe for that.

pixi-lights is just normal maps which is actually not suitable for most of games. For example, on those 5 slides, there are no normal maps but lighting looks cool: https://docs.google.com/presentation/d/1wX-sXRh8qkmadwMPb1noFpsVAU5jQyg9DBrwcSOYlXA/edit#slide=id.g70b2e5f95b_1_12

You need something like https://github.com/TarVK/pixi-shadows - that thing was based on pixi-lights approach.

There's another possibility - someone else will make lighting plugins based on their game, but for two years no one actually did that. Doesnt mean its not possible, its just people dont like to report back :)

This is my lighting demo: https://codesandbox.io/s/tender-franklin-iycmu , maybe that can help you.

Link to comment
Share on other sites

Hi Ivan,
Thank you for your advice!

Your presence on the forums has been a great help to me, thank you very much for all your work.

PIXI shadows definitely looks interesting, but my knowledge on renderTexture and Layering is a bit short.

I dont really understand renderTexture.
When would you use it? And what is the benefit of it?
Is it something like .generateTexture()? to ease the performance load?

And in regard to layering, I currently just have nested containers, with one container that includes and sorts my map objects.
How is layering with PIXI Layers better?
Because you still have to add the containers to stage as well right? and then also the displayGroups and layersGroups?

Thank you!
hope to hear from you

Link to comment
Share on other sites

How is layering with PIXI Layers better?

you dont have to add/remove object to several containers, you can store HPbar, shadow and body of character in same container, and move them together. This is main feature of plugin, it just saves time and code, but it has nothing that cant be written manually :)

as for renderTextures, we can talk when you figure out how basic stuff works. You can use SpectorJS extension to capture one frame (not workign on pixi examples iframes , you have to make a standalone), and look at produced webgl commands sequence

Its all about layer manipulation, you have many textures that have alreay rendered objects, and you have to combine them using mesh-shaders or filters or just blending modes to get a nice lighting 

Link to comment
Share on other sites

  • 3 weeks later...


Thank you so much for your help, I have looked a bit into rendertexture and its great. I could use it for lots of things, Thank you!
For shadows im progressing.

I have experimented with some different things, and I have come to the conclusion that I want to make a mesh for my map layer, a mesh with 3 different textures.

I will let know how it goes!

Edited by torbycly
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...