search

ikbensiep / game1

Race Game
2 stars 0 forks source link

Investigate globalCompositeOperation for better dynamic lighting #29

Open ikbensiep opened 1 year ago

ikbensiep commented 1 year ago

Ideally, use (a combination of) css (or svg or, if must be, canvas) filters to make a copy of the environment and use that to light the scene more dynamically.

For example: Car Lights are currently simply semi-transparent layers inside the car .png graphic. It would be neat to separate the light layers from the car and use different blend modes for a more realistic lighting effect.

ikbensiep commented 1 year ago

Or perhaps even normal mapping? see: https://codepen.io/ikbensiep/pen/YzLMQXq (forked for archive's sake)

ikbensiep commented 1 year ago

Solution: each world layer div receives a background image that moves the world layer. Using ::before and ::after pseudo-elements, 2 duplicates can be drawn for each layer by adding background-image: inherit. Also setting background-size and background-position to inherit, everything moves along nicely.

These pseudo elements can be filterd()ed, mix-blend-moded and masked. A more convincing night/day shift can be achieved this way. By offsetting the pseudo elements' position (or even better: scale) and flipping through blend modes, a chromatic abberation effect can be achieved.