Community Challenge: Post-processing effects

Announcements
#1

It is about time that we announce another community challenge! This time we’d like to challenge you to create some cool looking post-processing effects. Post-processing effects can be used to control the overall look and feel of the game by rendering the game world and applying various effects in sequence to produce the final result.

Share your post-processing effects here (must be open source) and in January we’ll pick three projects and award the authors with Steam Gift Cards.

Examples of post-processing effects

  • Blur - full screen blur effect (Shadertoy)
  • Vignette - fades the image out towards the edges (Shadertoy)
  • Scanlines - simulates the visible scanlines of an old display (Shadertoy)
  • Chromatic aberration - simulate defects and color shifts in real-world cameras (Shadertoy)
  • Color grading - adjust the color palette to achieve a certain mood or scenario such as time of day (Defold tutorial)
  • Grain - emulate the imperfections of analog film
  • Unreal Engine manual on post-processing effects
  • KinoGlitch video glitch effects for Unity (link)

Post-processing example project by @jhonny.goransson (https://github.com/Jhonnyg/my-public-defold-examples/tree/master/postprocessing). Normal vs Blur example:

Screenshot 2024-12-17 at 14.50.28
Screenshot 2024-12-17 at 14.50.284288×1560 479 KB

Crash course in Defold rendering

In Defold the default render script will draw all components (sprites, tilemaps, particle effects etc) directly to the screen by copying the pixels from the atlas/tilesource texture to the screen using the default materials. From the default render script:

-- render sprites, tilemaps, particle effects etc
render.enable_state(graphics.STATE_BLEND)
render.draw(predicates.tile, camera_world.frustum)
render.draw(predicates.particle, camera_world.frustum)
render.disable_state(graphics.STATE_DEPTH_TEST)

When applying post-processing effects an additional step is introduced where the components are first drawn to an off-screen buffer (a render target) before drawing the entire off-screen buffer to the screen using a mesh (quad) which covers the screen and a custom material which applies the post-processing effect. Example:

-- step 1: render sprites, tilemaps, particle effects etc to a render target named 'my_render_target'
render.set_render_target(my_render_target)
render.enable_state(graphics.STATE_BLEND)
render.draw(predicates.tile, camera_world.frustum)
render.draw(predicates.particle, camera_world.frustum)
render.disable_state(graphics.STATE_DEPTH_TEST)
render.set_render_target(render.RENDER_TARGET_DEFAULT)

-- step 2: render 'my_render_target'  using 'my_material' to a model quad with a material with tag 'my_predicate'
render.enable_texture(0, my_render_target, graphics.BUFFER_TYPE_COLOR0_BIT)
render.enable_material(my_material)
render.draw(my_predicate)
render.disable_material()
render.disable_texture0)

Tutorials and sample projects

Here’s a collection of tutorials and sample projects to get you started:

20 Likes
#2