Open ikbensiep opened 1 year ago
Or perhaps even normal mapping? see: https://codepen.io/ikbensiep/pen/YzLMQXq (forked for archive's sake)
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-mode
d and mask
ed. 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.
Ideally, use (a combination of)
css
(orsvg
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.