Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support applying outlines to individual objects #3

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

OmarShehata
Copy link
Owner

This PR adds support for applying the outline to individual objects. It is not intended to be merged because doing this requires an additional render pass.

outline_selected

To apply the outline on an object, enable it with:

mesh.traverse(node => node.applyOutline = true);

How it works

For reference, here is the original pipeline described here: https://omar-shehata.medium.com/how-to-render-outlines-in-webgl-8253c14724f9

image

To apply outlines selectively, we need to create normal & depth buffers that ONLY include the outlined object(s). However, the original scene buffer still needs to include all the objects. In addition, the final outline must be occluded by objects in front of it, even if they do not have outlines applied.

My initial approach was to make render pass 2 only include the outlined objects, and use the depth & normal buffers from that. This works and does not add any additional render passes, but the final outline can be "seen through" objects in front it, because then the normal buffer that is used to compute the outlines doesn't include any foreground cubes to occlude it.

To fix this, we add an additional render pass to get a depth buffer with just the objects that do NOT have an outline on them. We then use this to apply a manual depth test in the shader:

// If the depth of the current object is greater
// than an object without outlines
// that means further away from the camera, so the outline shouldn't be visible here
if ( depth > nonOutlinesDepth ) {
	outline = 0.0;
}

The new render pipeline is shown below, including snapshots of what each buffer looks like:

rendering_diagram

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.

1 participant