# How can I punch a hole in a cylinder?

**URL:** <https://forum.babylonjs.com/t/how-can-i-punch-a-hole-in-a-cylinder/16937>\
**Category:** Questions\
**Tags:** material\
**Created:** [December 25, 2020, 5:39pm UTC](https://forum.babylonjs.com/t/how-can-i-punch-a-hole-in-a-cylinder/16937 "2020-12-25T17:39:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![richardtallent](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/richardtallent/32/10848_2.png) [@richardtallent](https://forum.babylonjs.com/u/richardtallent)\
**Post date:** [December 25, 2020, 5:39pm UTC](https://forum.babylonjs.com/t/how-can-i-punch-a-hole-in-a-cylinder/16937/1 "2020-12-25T17:39:45Z")

</div>

I’m trying to create an “info” button by combining some primitive shapes. So far I have the outer wall (cylinder), inner wall (tube), the white background (disc), and the “i” (another cylinder, and a cube):

> **[Babylon.js Playground](https://playground.babylonjs.com/#TPPC6G)**

The tricky part I can’t figure out – how can I use the “tube” to punch a “hole” in the outer cylinder? I looked around for some sort of notion of subtracting meshes, but haven’t found anything. I see there’s a way to “merge” meshes with a custom function, but the math involved in that is daunting.

My other option is to use a “filled” info button with a raised “i” (e.g., [File:Eo circle blue white info.svg - Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Eo_circle_blue_white_info.svg)) instead of a “ring” info button like I’d prefer to use (e.g., [Category:SVG Info icons - Wikimedia Commons](https://commons.wikimedia.org/wiki/Category:SVG_Info_icons#/media/File:Breezeicons-actions-22-help-about.svg)).

I’d be happy with either one, but if there is a way to easily use one mesh to punch out the interior of the other (and still have the inside faces), I’d love to know how!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [December 25, 2020, 6:08pm UTC](https://forum.babylonjs.com/t/how-can-i-punch-a-hole-in-a-cylinder/16937/2 "2020-12-25T18:08:02Z")

</div>

You might be able to rely on CSG for this which lets you add substract meshes together:  
[CSG | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/classes/babylon.csg)

---

<div class="post-metadata">

**Author:** ![richardtallent](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/richardtallent/32/10848_2.png) [@richardtallent](https://forum.babylonjs.com/u/richardtallent)\
**Post date:** [December 26, 2020, 12:34am UTC](https://forum.babylonjs.com/t/how-can-i-punch-a-hole-in-a-cylinder/16937/3 "2020-12-26T00:34:00Z")

</div>

Dadgumit, I looked all over the place and never ran into that class!

It worked beautifully, here’s the result:

> **[Babylon.js Playground](https://playground.babylonjs.com/#TPPC6G%233)**

---

<div class="post-metadata">

**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\
**Post date:** [December 27, 2020, 12:33am UTC](https://forum.babylonjs.com/t/how-can-i-punch-a-hole-in-a-cylinder/16937/4 "2020-12-27T00:33:38Z")

</div>

What a frighteningly complex problem.