# Three.js + canvas-2d + SDF

**URL:** <https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361>\
**Category:** Resources\
**Tags:** canvas-2d, sdf\
**Created:** [October 24, 2023, 7:33pm UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361 "2023-10-24T19:33:51Z")\
**Posts on this page:** 7\
**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:** [October 24, 2023, 7:33pm UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/1 "2023-10-24T19:33:52Z")

</div>

Hi community!

Video:

**Demo: [https://codepen.io/prisoner849/full/dyayoZK](https://codepen.io/prisoner849/full/dyayoZK)**

This is what happens when you want something 3D, but don’t want to use WebGL/WebGPU 😅

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [October 24, 2023, 8:08pm UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/2 "2023-10-24T20:08:18Z")

</div>

sick. 😃 😃 😃

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 24, 2023, 9:25pm UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/3 "2023-10-24T21:25:41Z")

</div>

Slick.

A lot of numbers in the code to play with. Changing the power of `rFactor` from 2 to 8 increases the noisiness so that it also affects the background. A kind of quantum effect with virtual particles popping in and out in the vacuum.

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [October 25, 2023, 12:37am UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/4 "2023-10-25T00:37:07Z")

</div>

I lovely demo. I’m always in a bit of an awe when looking at your demos, they are generally small in scope and code, but they manage to look complete and stylish. Thanks for sharing!

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [October 25, 2023, 6:55am UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/5 "2023-10-25T06:55:49Z")

</div>

My crappy old phone agrees with this demo. Smooth as butter and looks cool. 😁👌

---

<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:** [October 26, 2023, 9:37am UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/6 "2023-10-26T09:37:57Z")

</div>

Thanks, guys!  
So many heartmelting words 🙂

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [October 27, 2023, 7:39am UTC](https://discourse.threejs.org/t/three-js-canvas-2d-sdf/57361/7 "2023-10-27T07:39:09Z")

</div>

- mitochondria
- convection
- friction

Some more heartwarming words for you