Outline

<Outline /> creates an inverted-hull outline using its parent's geometry. Supported parents are <TresMesh> and <TresSkinnedMesh>.

Usage

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { OrbitControls, Outline } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas clear-color="#4f4f4f">
    <TresPerspectiveCamera />
    <OrbitControls />
    <TresAmbientLight :intensity="3.14" />
    <TresPointLight :intensity="50" :position="[2, 2, 0]" />
    <TresMesh :position-x="-0.75">
      <TresBoxGeometry />
      <TresMeshPhongMaterial />
      <Outline :thickness="7.5" color="#82dbc5" />
    </TresMesh>
    <TresMesh :position-x="0.75">
      <TresSphereGeometry :args="[0.5]" />
      <TresMeshPhongMaterial />
      <Outline :thickness="7.5" color="#fbb03b" />
    </TresMesh>
  </TresCanvas>
</template>

WebGPU

Import Outline from @tresjs/cientos/webgpu on a TresCanvas from @tresjs/core/webgpu. That version uses a MeshBasicNodeMaterial and has the same props. See WebGPU.

import { Outline } from '@tresjs/cientos/webgpu'

The outline can differ a little from WebGLRenderer:

• The WebGL version pushes the vertices along the normals of the geometry. The WebGPU version uses the normals after morph targets and skinning. You see the difference on skinned or morphed parents.
• When screenspace is off, the WebGPU version takes the direction of the offset from the instance normal. With a non-uniform instance scale, the direction can differ a little.
• WebGPURenderer tone-maps the whole frame, so it ignores toneMapped.

Props