# Makie outline 3e

**URL:** <https://discourse.julialang.org/t/makie-outline-3e/87694>\
**Category:** General Usage\
**Tags:** question, makie\
**Created:** [September 23, 2022, 11:53am UTC](https://discourse.julialang.org/t/makie-outline-3e/87694 "2022-09-23T11:53:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![FedeClaudi](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fedeclaudi/32/33490_2.png) [@FedeClaudi](https://discourse.julialang.org/u/FedeClaudi)\
**Post date:** [September 23, 2022, 11:53am UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/1 "2022-09-23T11:53:49Z")

</div>

makie expert, need your help again. Is there away to obtain an “outline” effect like this?

 ![image](https://global.discourse-cdn.com/julialang/original/3X/3/e/3e06626aa560b85bcc3d2d8e49ce79598e97f02e.jpeg)

Specifically, in drawing a torus as a `surface`

 ![image](https://global.discourse-cdn.com/julialang/original/3X/c/7/c7481325bb4e2f653bc60fd1267eda8de22c82a1.jpeg)

I’d like the outer edge and the inner “hole” to have an outline, similar to this:

> <https://twitter.com/Federico_claudi/status/1539748908229955584?s=20&t=gyBK28U7msa32ahJdqjx2g>

---

<div class="post-metadata">

**Author:** ![ffreyer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ffreyer/32/21569_2.png) [@ffreyer](https://discourse.julialang.org/u/ffreyer)\
**Post date:** [September 24, 2022, 3:23pm UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/2 "2022-09-24T15:23:12Z")

</div>

```julia
using GLMakie, GeometryBasics

function torus(R, r, N, n)
    ps = Vector{Point3f}(undef, N*n)
    idx = 1
    for i in 1:N
        c = cos(2pi * i/N)
        s = sin(2pi * i/N)
        M = Mat3f(
            c, s, 0,
            -s, c, 0,
            0, 0, 1
        )
        center = Point3f(R*c, R*s, 0)
        for j in 1:n
            ps[idx] = center + M * Point3f(r*cos(2pi * j/n), 0, r*sin(2pi * j/n))
            idx += 1
        end
    end

    faces = Vector{GLTriangleFace}(undef, 2N*n)
    for i in 1:N*n
        faces[2i-1] = GLTriangleFace(
            i, 
            mod1(i+n, N*n),
            mod1(i+1, N*n) 
        )
        faces[2i] = GLTriangleFace(
            mod1(i+1, N*n), 
            mod1(i+n, N*n),
            mod1(i+n+1, N*n) 
        )
    end

    return normal_mesh(ps, faces)
end

```

To my understanding geometry nodes are a way to manipulate the rendering pipeline. Makie doesn’t let you do that, so you have to use or abuse what’s there… I have two ideas how to get something similar:

1. Abuse the lighting calculation to invert specular reflections:

```julia
mesh(
    torus(1f0, 0.3f0, 100, 30), color = RGBf(1, 1, 1),
    specular = Vec3f(-1e-3), shininess = -4f0
)

```

![Screenshot from 2022-09-24 16-59-48](https://global.discourse-cdn.com/julialang/original/3X/4/8/4809b8473b0b213801f8c039bc40d260aa02bbc9.png)  
You can also amplify `color` to values larger than 1 to get sharper outlines with this, but you can’t fully get rid of the dark blobs. But maybe those are nice in some situations? (negative shininess puts specular reflections near edges and negative specular results in brightness/color being taken away)

1. Draw a second mesh “behind” the first:

```julia
f, a, p = mesh(
    torus(1f0, 0.32f0, 100, 30), color = :black, depth_shift = 0.01f0
)
p2 = mesh!(a, torus(1f0, 0.3f0, 100, 30), color = :white)
f

```

![Screenshot from 2022-09-24 16-58-47](https://global.discourse-cdn.com/julialang/original/3X/0/8/08ca30bdfa808fa8eacb70b879561d2d18d29cbf.png)  
`depth_shift = 0.01f0` puts the black torus slightly behind the white one in the final depth buffer, so it only peaks out outside the white torus. Depending on the value of `depth_shift` you may get more or less peaking out. (Should always be between 0 and 1)

---

<div class="post-metadata">

**Author:** ![FedeClaudi](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fedeclaudi/32/33490_2.png) [@FedeClaudi](https://discourse.julialang.org/u/FedeClaudi)\
**Post date:** [September 26, 2022, 10:46pm UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/3 "2022-09-26T22:46:48Z")

</div>

Hi,

This seems amazing, the only problem is that they way I currently have things set up I’m working with `surface` instead of `mesh`, is there a way to achieve something similar with `surface` that you know of?

Thank you

---

<div class="post-metadata">

**Author:** ![ffreyer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ffreyer/32/21569_2.png) [@ffreyer](https://discourse.julialang.org/u/ffreyer)\
**Post date:** [September 27, 2022, 8:20am UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/4 "2022-09-27T08:20:29Z")

</div>

With a simple mesh you could try just scaling it for approach 2:

```julia
p = surface!(ax, ...)
scale!(p, 1.1)

```

For a more complex mesh like a torus this wouldn’t work though. Something else you could try is translating all the vertex positions towards their normal direction. For example: (constants probably need adjustments)

```julia
using CairoMakie, GLMakie
GLMakie.activate!() # just in case

# example mesh
using FileIO
m = FileIO.load(Makie.assetpath("cat.obj"))

# CairoMakie has a (internal) surface -> mesh conversion function you can use
# m = CairoMakie.surface2mesh(xs, ys, zs)

# grow mesh
m2 = deepcopy(m)
scale = 0.0001 * m.position |> norm |> maximum
@. m2.position += scale * m.normals

f, a, p = mesh(m, color = :orange)
mesh!(a, m2, color = :black, depth_shift = 0.005f0)
display(f)

```

![Screenshot from 2022-09-27 10-18-47](https://global.discourse-cdn.com/julialang/original/3X/3/9/3989efefcdddf8853ce236c13a74dee5c94ff546.png)

---

<div class="post-metadata">

**Author:** ![FedeClaudi](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fedeclaudi/32/33490_2.png) [@FedeClaudi](https://discourse.julialang.org/u/FedeClaudi)\
**Post date:** [September 27, 2022, 5:46pm UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/5 "2022-09-27T17:46:20Z")

</div>

Hey,

That seems like it _should_ work, but when I try it I can only see the black cat, the orange one is hidden no matter what I do. Any idea what could be happening?

---

<div class="post-metadata">

**Author:** ![FedeClaudi](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fedeclaudi/32/33490_2.png) [@FedeClaudi](https://discourse.julialang.org/u/FedeClaudi)\
**Post date:** [September 28, 2022, 11:12am UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/6 "2022-09-28T11:12:06Z")

</div>

An update

if I add `using CairoMakie` I get the desired effect (with the two meshes to create outlines), but there’s other problems like the wireframe being in front of the mesh

 ![image](https://global.discourse-cdn.com/julialang/original/3X/a/6/a654e12a407295e503830f2de5c62cfd9227b859.jpeg)

if I `using GLMakie` then `depth_shift` doesn’t do anything and only the black mesh shows.

---

<div class="post-metadata">

**Author:** ![ffreyer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ffreyer/32/21569_2.png) [@ffreyer](https://discourse.julialang.org/u/ffreyer)\
**Post date:** [September 29, 2022, 6:46am UTC](https://discourse.julialang.org/t/makie-outline-3e/87694/7 "2022-09-29T06:46:05Z")

</div>

This should be rendered with GLMakie (maybe WGLMakie also works). CairoMakie can’t deal well with 3D. It basically renders each `plot!` individually and then stacks the images on top of each other. So if you draw the wireframe last in CairoMakie, it’ll just put the full wireframe on top of everything else. It also doesn’t understand depth\_shift. (You can switch back to GLMakie with `GLMakie.activate!()`)

If you’re having issues with GLMakie maybe your version is too far behind (should be Makie 0.16+) or you’re using to much `depth_shift`? At the stage in rendering where depth shift applies, depth is normalized to a 0…1 range. So the values tend to be pretty small (and positive to move something deeper/away).