Skip to content

Conversation

almarklein
Copy link
Member

@almarklein almarklein commented Jun 13, 2025

In ThreeJS post-processing is an addon. The API proposed here is more integrated with the renderer, making it simpler to add effects to an existing visualization.

Screen Recording 2025-06-13 at 13 00 04

@almarklein almarklein marked this pull request as ready for review June 13, 2025 09:42
@almarklein almarklein requested a review from Korijn as a code owner June 13, 2025 09:42
@almarklein
Copy link
Member Author

Ready for review. I think I made a small change in the output pass (formerly flusher) causing the screenshot comparison tests to fail.

@almarklein
Copy link
Member Author

And CI is green!

Copy link
Collaborator

@Korijn Korijn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome to finally have access to the depth buffer here :) looks great!

@almarklein almarklein merged commit fa71a93 into main Jun 13, 2025
13 checks passed
@almarklein almarklein deleted the postprocessing branch June 13, 2025 11:40
@hmaarrfk
Copy link
Contributor

Really cool. One of the effects I’ve wanted has been a « grayscale » effect.

It helps us generate assets that are 1/3 in size

@claydugo and I have been playing with workarounds (mostly doing the conversion on the CPU) for the grayscale filter.

@almarklein
Copy link
Member Author

Also some ideas for more effects:

# Creating effects is fun! Some ideas:
#
# BloomPass, FilmPass, GlitchPass, GodRayPass, OutlinePass, AmbientOcclusionPass, FogPass, ...
# GaussXPass, GaussYPass, GaussDxPass, GaussDyPass, SobelPass, LaplacianPass, SharpeningPass, ...
# Color grading, color conversions, depth of field, patterns, pixelize, tone mapping, texture overlay, ...
#
# See https://github.com/pmndrs/postprocessing and ThreeJS code for implementations.

@Vipitis
Copy link

Vipitis commented Jun 13, 2025

Feel like some potential for interop with existing shadertoys. Especially those that read a texture (or two for depth?) and then draw to screen.

@almarklein
Copy link
Member Author

almarklein commented Jun 14, 2025

Feel like some potential for interop with existing shadertoys. Especially those that read a texture (or two for depth?) and then draw to screen.

Yeah, I guess the post-processing effects is like Shadertoy Light (TM) 😉.

They can actually have more textures as input (and also output); the base class makes no assumptions about the number of render and target textures. In terms of API, the EffectPass subclass should likely have properties that allow users to set a texture.

@Minigoer
Copy link

Hello,
Does renderer.snapshot() capture EffectPass ?
In the viewport I can see the fog pass,
but when I try to save several .snapshot as numpy arrays to make a video with imageio, the effect is not (yet?) rendered.
I know snapshot not exactly save the viewport, as it "samples from the internal texture, so the result may be different then what's shown on screen."

Anyway, thanks for your excellent library.

@almarklein
Copy link
Member Author

almarklein commented Jun 20, 2025

@Minigoer Good question! This is something that has crossed my mind, and which was considered in the design, but I have not addressed snapshot yet. Thanks for bringing it up. I'll add an entry in #1065.

The way that post-processing is implemented, is that it pingpongs between the texture that it renders to, and an alt texture. So snapshot cannot capture the original rendered image, but it can/should capture the image including post-processing. For what it's worth, I also considered the option where snapshot captured the render result without effects, but that made the code more complex and requires an additional render texture, so I decided against it.

Anyway, to fix this issue, the renderer should keep track of what the "final" texture is to take the screenshot from.

In the mean time, as a workaround, you can add a CopyPass if needed, so the final effect is in the original texture again 😃

@Minigoer
Copy link

@almarklein , it does the trick very well ! Thanks a lot !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

API for adding fog and custom full-screen post-processing effects
5 participants