# Hexagonal grid formation

**URL:** <https://discourse.threejs.org/t/hexagonal-grid-formation/18396>\
**Category:** Resources\
**Tags:** dof, bloom, instanced-mesh, shaders\
**Created:** [September 3, 2020, 9:00am UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396 "2020-09-03T09:00:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 3, 2020, 9:00am UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/1 "2020-09-03T09:00:52Z")

</div>

Hi community!  
Just an example of how to put objects in formation of hexagonal grid:

[https://jsfiddle.net/prisoner849/jzLdcemb/](https://jsfiddle.net/prisoner849/jzLdcemb/) (an example with points, for clarification and simplicity)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/826a44b2524304446e24799fbc5c65a8362533f1.png)

Something heavier:

https://codepen.io/prisoner849/embed/preview/VwamWbm?height=300&slug-hash=VwamWbm&default-tabs=js,result&host=https://codepen.io

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/984caa4dcd00af2ce87cbd8454a2cfafed10b066.jpeg)

Also tried InstancedMesh with DoF (bumped into that cool example from @DolphinIQ: [Bokeh & Unreal Bloom Website header or something](https://discourse.threejs.org/t/bokeh-unreal-bloom-website-header-or-something/10318) ). Seems they work well together with no need of patching shaders of Bokeh 🙂  
Something heavier with DoF:

https://codepen.io/prisoner849/embed/preview/mdPqpOY?height=300&slug-hash=mdPqpOY&default-tabs=js,result&host=https://codepen.io

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/042b3acddf92e529c99b3596b4cefc18a97c25b5.jpeg)

---

<div class="post-metadata">

**Author:** ![GlifTek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gliftek/32/13131_2.png) [@GlifTek](https://discourse.threejs.org/u/GlifTek)\
**Post date:** [September 6, 2020, 6:38pm UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/2 "2020-09-06T18:38:32Z")

</div>

That’s great!  
Do you have a striped down version of JUST the compositing effects with nothing but say…a cube in the scene to share possibly?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 6, 2020, 8:48pm UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/3 "2020-09-06T20:48:42Z")

</div>

@GlifTek do you need an example with postprocessing effects?

---

<div class="post-metadata">

**Author:** ![GlifTek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gliftek/32/13131_2.png) [@GlifTek](https://discourse.threejs.org/u/GlifTek)\
**Post date:** [September 7, 2020, 1:27am UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/4 "2020-09-07T01:27:19Z")

</div>

I see the ones in the docs, I love this combo going on with the hex tho

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 7, 2020, 7:10am UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/5 "2020-09-07T07:10:16Z")

</div>

@GlifTek  
If you’re interested, there is a topic that mentions about kind of “evolution” of my thoughts on using of selective bloom: [Robeast (selective bloom)](https://discourse.threejs.org/t/robeast-selective-bloom/11098)  
Search “Resources” and “Showcase” with “bloom” and you’ll find interesting examples. 🙂

---

<div class="post-metadata">

**Author:** ![GlifTek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gliftek/32/13131_2.png) [@GlifTek](https://discourse.threejs.org/u/GlifTek)\
**Post date:** [September 7, 2020, 1:01pm UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/6 "2020-09-07T13:01:17Z")

</div>

Cool! Thanks!

---

<div class="post-metadata">

**Author:** ![GlifTek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gliftek/32/13131_2.png) [@GlifTek](https://discourse.threejs.org/u/GlifTek)\
**Post date:** [September 7, 2020, 10:14pm UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/7 "2020-09-07T22:14:03Z")

</div>

But also, if I just wanted to experiment with bokeh, DOF, …ALSO “chromatic aberration RGB splitting” (there’s another simpler name for it I wish I remembered) … Used with a vignette mask, so it’s adjustable to be only in the corners if desired…  
I’m trying to get those …aaand selective bloom stacked in a template file that lacks ANY other things going on, so that I can just snap it onto any scene and get creative with them.

Do you have any projects like that? Or you or anyone else here know of any?  
Would really appreciate it,  
(Tried creating them with SVG filters as an overlay to 3d once…super frustrating waste of time!)  
thanks!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 8, 2020, 8:48am UTC](https://discourse.threejs.org/t/hexagonal-grid-formation/18396/8 "2020-09-08T08:48:18Z")

</div>

@GlifTek  
There’s an approach from @looeee: [Selective UnrealBloomPass issues](https://discourse.threejs.org/t/selective-unrealbloompass-issues/9331/12)