Postprocessing: OutlinePass

[semixor]

When assigning array to pass.selection nothing happens, must use pass.selectObject instead.
It can be fixed ?

Also there is no antialiasing working when enabled in WebGLRenderer, am I doing something wrong ?

Thanks.

[vanruesc]

Thanks for the issue report!

The field OutlinePass.selection is private and shouldn't be modified. The two methods OutlinePass.selectObject and OutlinePass.deselectObject are supposed to be used for efficient object selections.

OutlinePass.selectObject assigns selected objects to a special render layer. The list of selected objects that is maintained by the OutlinePass must not be changed from outside. Objects that are deselected using OutlinePass.deselectObject will also be removed from that render layer.

In most use cases, you're working with a manageable amount of objects. Using the aforementioned methods to select or deselect an array of objects in a simple loop shouldn't have an impact on performance because selections and deselections _don't occur every frame_. If you have a special use case, feel free to present it.

Antialiasing doesn't work on offscreen render targets in WebGL 1. All post processing effects suffer from this. You can use an SMAAPass before or after the OutlinePass to alleviate this issue, but some artifacts may remain. WebGL 2 supports multisampled render buffers but three.js doesn't support that context yet (see https://github.com/mrdoob/three.js/issues/9965).

[semixor]

@vanruesc First of all, thank you for porting this to TypeScript, you're making really great job !
Everything is clear now, but have another question/problem is it normal if I'm using scene.color = 0xFFFFFF i.e. white color, then I can't see outline on white color ?

Thank you.

[vanruesc]

Thank you 😄 Note, however, that I'm not using TypeScript anywhere, I'm just following some sort of documentation-first approach.

After some thought, I decided to add two convenience methods: OutlinePass.setSelection and OutlinePass.clearSelection for setting a list of selected objects and clearing all selected objects in one go.

If the scene is mostly white, then yes, you won't be able to see the outline. This is because the outline overlay is like a glow effect - it's not possible to make white any brighter. I was thinking about changing this behaviour when I ported this pass, but decided to leave it as-is for now. To support outlines on white backgrounds, I'll have to add another blend mode for this pass.

[vanruesc]

Dark outlines can now be drawn on bright backgrounds using the alphaBlending option in [email protected].

[semixor]

Man, you are the best !
Thank you very much !

[sompylasar]

Note, however, that I'm not using TypeScript anywhere, I'm just following some sort of documentation-first approach.

TypeScript types serve as a documentation that is also checked by the compiler to guarantee it's accurate and consistent with the documented code. Applications using libraries with TypeScript are checked by the compiler, too, to ensure consistency with that documentation.

I really wish this library adopted TypeScript and had types like Three.js itself did: https://github.com/mrdoob/three.js/blob/9b247071c2be06d68d4eab44ba4d6ce13551325c/examples/jsm/postprocessing/OutlinePass.d.ts

For those ending up here, like I am, from a google search for OutlinePass from three/examples/jsm/postprocessing, there's no OutlinePass in 'postprocessing', there's OutlineEffect, and according to the documentation, the convenience methods for selecting objects are all deprecated in favor of using the .selection object methods: https://vanruesc.github.io/postprocessing/public/docs/class/src/effects/OutlineEffect.js~OutlineEffect.html

[vanruesc]

Hi,

TypeScript types serve as a documentation that is also checked by the compiler to guarantee it's accurate and consistent with the documented code.

I'm aware of this feature, but I think it doesn't justify the overhead that TypeScript adds to the code base and build setup.

Would dts-gen be an option for you?

I really wish this library adopted TypeScript and had types like Three.js itself did

I wish JavaScript wasn't in this pitiful state where programmers have to rely on things like TypeScript to fill in the obvious shortcomings of the official language. Documentation is an incredibly important aspect of development and Ecma International should've introduced a standard documentation framework years ago.

I've explained why I won't be using TypeScript here.

according to the documentation, the convenience methods for selecting objects are all deprecated in favor of using the .selection object methods

This issue is pretty old and not representative of the current code base; you should always look at the current documentation first. The selection field was a plain array when this issue was raised and the convenience methods have since been moved to the new Selection object to prevent code repetition across classes that use selections.

[sompylasar]

I haven't used dts-gen, but from its description looks like it misses the most important use case for types for a library consumer: API definition with types for functions and their arguments.

The linked explanation about not using TypeScript mentions a personal preference for JS and "various reasons" (without mentioning which ones). I'm quite sure JavaScript isn't going to introduce types in the near future. TypeScript is becoming standard de-facto for typed JavaScript, and the Three.js community is adopting it due to specific reasons of being able to safely develop modular codebases that are larger than one-pager example scripts copy-pasted from each other.

[vanruesc]

Sorry, I got a bit ranty there.

Yes, it's my personal decision not to use TypeScript in this project. I didn't list more specific reasons because there are already many articles for and against TypeScript out there.

being able to safely develop modular codebases

JavaScript supports modular codebases natively.

I'm quite sure JavaScript isn't going to introduce types in the near future.

JavaScript already has types, but I guess you mean static type checking which, I admit, is a pretty important tool and probably the only real purpose of TypeScript.

I'll take a fresh look at TypeScript when I get a chance. Maybe it's not as messy anymore as I remember it.

[sompylasar]

Yes, I mean static type checking. Thank you for your consideration!