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.

Sign up for GitHub

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

Jump to bottom

fix: allow clipping planes to be used with Outlines #2133

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+10 −0
Open

fix: allow clipping planes to be used with Outlines #2133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d733cce
Allow clipping planes to be used with Outlines
Archimagus Oct 22, 2024
838e475
Document clipping planes for Outlines
Archimagus Oct 22, 2024
5c74fc6
Merge branch 'master' into allow-outline-clipping
CodyJasonBennett Oct 24, 2024
4b42719
Merge branch 'master' into allow-outline-clipping
Archimagus Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/abstractions/outlines.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ type OutlinesProps = JSX.IntrinsicElements['group'] & {
thickness: number
/** Geometry crease angle (0 === no crease), default: Math.PI */
angle: number
/** Clipping planes, default: null (no clipping) works the same as clipping planes on any material */
clippingPlanes: THREE.Plane[] | null
}
```

Expand Down
8 changes: 8 additions & 0 deletions src/core/Outlines.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial(
`#include <common>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <clipping_planes_pars_vertex>
uniform float thickness;
uniform bool screenspace;
uniform vec2 size;
Expand All @@ -31,6 +32,7 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial(
#include <morphtarget_vertex>
#include <skinning_vertex>
#include <project_vertex>
#include <clipping_planes_vertex>
vec4 tNormal = vec4(normal, 0.0);
vec4 tPosition = vec4(transformed, 1.0);
#ifdef USE_INSTANCING
Expand All @@ -50,7 +52,9 @@ const OutlinesMaterial = /* @__PURE__ */ shaderMaterial(
}`,
`uniform vec3 color;
uniform float opacity;
#include <clipping_planes_pars_fragment>
void main(){
#include <clipping_planes_fragment>
gl_FragColor = vec4(color, opacity);
#include <tonemapping_fragment>
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
Expand All @@ -70,6 +74,7 @@ type OutlinesProps = JSX.IntrinsicElements['group'] & {
thickness?: number
/** Geometry crease angle (0 === no crease), default: Math.PI */
angle?: number
clippingPlanes?: THREE.Plane[]
toneMapped?: boolean
polygonOffset?: boolean
polygonOffsetFactor?: number
Expand All @@ -87,6 +92,7 @@ export function Outlines({
renderOrder = 0,
thickness = 0.05,
angle = Math.PI,
clippingPlanes,
...props
}: OutlinesProps) {
const ref = React.useRef<THREE.Group>()
Expand Down Expand Up @@ -150,6 +156,8 @@ export function Outlines({
toneMapped,
polygonOffset,
polygonOffsetFactor,
clippingPlanes,
clipping: clippingPlanes && clippingPlanes.length > 0,
})
}
})
Expand Down