Outline
Outline is an effect that applies an outline to objects in your scene. This effect is commonly used to highlight objects.
Usage
vue
<script setup lang="ts">
import { EffectComposer, Outline } from '@tresjs/post-processing'
</script>
<template>
<EffectComposer>
<Outline />
</EffectComposer>
</template>Props
| Prop | Description | Default |
|---|---|---|
| outlinedObjects | The objects to highlight | [] |
| blur | Whether the outline should be blurred. | false |
| xRay | Whether occluded parts of selected objects should be visible. | true |
| kernelSize | The blur kernel size. Use together with blur being true. | KernelSize.VERY_SMALL |
| pulseSpeed | The pulse speed. A value of zero disables the pulse effect. | 0.0 |
| resolutionX | The horizontal resolution. This prop is not reactive. | Resolution.AUTO_SIZE |
| resolutionY | The vertical resolution. This prop is not reactive. | Resolution.AUTO_SIZE |
| edgeStrength | The edge strength. | 1.0 |
| patternScale | The pattern scale. | 1.0 |
| multisampling | The number of samples used for multisample antialiasing. Requires WebGL 2. | 0 |
| blendFunction | The blend function. Use BlendFunction.ALPHA for dark outlines. This prop is not reactive. | BlendFunction.SCREEN |
| patternTexture | A pattern texture. This prop is not reactive. | null |
| resolutionScale | The resolution scale. This prop is not reactive. | 0.5 |
| hiddenEdgeColor | The color of hidden edges. | 0x22090a |
| visibleEdgeColor | The color of visible edges. | 0xffffff |