Implementing shadows with shader

[torbycly]

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

 

 

 

 

[ivan.popelyshev]

> 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.

[torbycly]

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

[ivan.popelyshev]

> 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 

[torbycly]

@ivan.popelyshev

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 December 8, 2020 by torbycly
solved