# TetraFlow (Three.js + Tone.js)

**URL:** https://discourse.threejs.org/t/tetraflow-three-js-tone-js/37247
**Category:** Showcase
**Tags:** instancing, shaders
**Created:** [April 20, 2022, 7:27am UTC](https://discourse.threejs.org/t/tetraflow-three-js-tone-js/37247 "2022-04-20T07:27:41Z")
**Posts on this page:** 2
**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: [April 20, 2022, 7:27am UTC](https://discourse.threejs.org/t/tetraflow-three-js-tone-js/37247/1 "2022-04-20T07:27:41Z")

</div>

Hi community!

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/b/abe79741cc47156bf8ffb38046af7796b4aaa03c.jpeg)

**DEMO: [TetraFlow](https://cywarr.github.io/tetraflow/dist/)**

Source Code: [GitHub - cywarr/tetraflow](https://github.com/cywarr/tetraflow)

Objects on the scene:

- Flow of tetrahedra: `InstancedBufferGeometry` + modified `MeshLambertMaterial` with a spline in `DataTexture`
- Vertical lines: `LineSegments` with modified `LineBasicMaterial`
- Hexagons: `Line` of `InstancedBufferGeometry` with modified `LineBasicMaterial`
- Points: `Points` with modified `PointsMaterial`, kind of a wireframe box is an SDF function.
- Central fog: a cylinder with the code from this [example](https://threejs.org/examples/?q=cloud#webgl2_volume_cloud)
- Background: a sphere with steam (fBm) and triangles (TheBookOfShaders) in `ShaderMaterial`.

Sound: `Tone.js`

---

<div class="post-metadata">

### Author: ![D13](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@D13](https://discourse.threejs.org/u/D13)
#### Post date: [September 17, 2022, 7:48pm UTC](https://discourse.threejs.org/t/tetraflow-three-js-tone-js/37247/2 "2022-09-17T19:48:55Z")

</div>

Thats cool. I dig the ambient theme music too.