Where to start with adding post processing and image effects?

🌵 Needle Engine
1

Was following the three.js how to use post processing guide but wasn’t sure where to include the setup of a postprocessing composer, any tips on where to add that into what Needle spits out? I saw there was one scene.js that has the function animate() lines I need to reference but I’m not sure that’s what ends up in the build

Original Post on Discord

by user 103054507105067008

2

https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing

by user 103054507105067008

3

Changed the channel name: Where to start with adding post processing and image effects?

by user 103054507105067008

4

For quick testing add ?postfx to your url params, it should create a EffectComposer (havent tested in quite some time tho) - you should also be able to set the composer yourself (this.context.composer = new EffectComposer(this.context.renderer))

Make sure to setup a scene RenderPass too like so (taken from the context implementation line 489)

const renderPass = new RenderPass(this.scene, this.mainCamera);
            this.renderer.setSize(this.domWidth, this.domHeight);
            this.composer.addPass(renderPass);
            this.composer.setSize(this.domWidth, this.domHeight);

I would recommend you go to the declaration of Context for reference (in engine/engine_setup.ts)

5

I’m only trying to add bloom but no idea where to start

by user 103054507105067008

6

If a composer is setup/assigned to the context it will use that for rendering

7

So should be pretty straighforward

8

hope that helps

9

Is it fine for me to edit that engine_setup.ts directly?

by user 103054507105067008

10

nope

11

Why would you need to do that?

12

changes there will be gone next time unity updates any package

13

Was just wondering where to edit, so ideally I make a component in the scene that sets that renderpass with a reference to engine_setup.ts

by user 103054507105067008

14

Yup (dont need a reference to engine_setup - it’s this.context from any component - so this.context.composer = yourComposer should be it)

15

I just mentioned it as a reference :slightly_smiling_face: to have a look at if you want to see the core loop etc

16

@ROBYER1 just as a reminder, depending on your target devices any kind of posteffects kill framerate immediately. Especially on mobile + AR or VR devices. Same as in regular Unity :wink:

17

Should think thrice if you really want post effects or if you want e.g. a bloom effect around bright lights - which can easily be emulated with some additive quads.

18

Thanks for the tips, I’ve been very particular on finding out what the target devices the clients intend to show the content on, fortunately for this project with bloom it is a desktop target but it’s going to be a very minimal use of bloom for optimization reasons.

by user 103054507105067008

19

I’m sure I’m missing something really simple here because the bloom pass is added but doesn’t appear to show?
PostProcessing.ts

by user 103054507105067008

20

are you setting the composer?