# Would it be okay to the Three.Js lib as the 3d renderer and use p5 as the overlay

**URL:** <https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991>\
**Category:** Libraries\
**Created:** [October 21, 2021, 7:24pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991 "2021-10-21T19:24:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 21, 2021, 7:24pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/1 "2021-10-21T19:24:15Z")

</div>

I want three.js to use the same canvas, as in p5 being the UI and three.js as the Renderer

would that be allowed / okay or is it bad…

the could look be like this…

```auto
// Vars, functions and stuff...
function setup() {
  cnv = createCanvas(100, 100);
  // Stuff...
  renderer = WebGLRenderer( { canvas: cnv.elt } );
  // More stuff
}

function draw() {
  // Stuff
  renderer.render(scene, camera);
  // More Stuff
  text("HI!!", width / 2, height / 2);
  // Even MORE STUFF
}

// MORE MOOOOOORE MMMMMMOOOOOOOOOOOOOOOOOOOOOOORRRRRREEEEEEEEEE

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 21, 2021, 11:49pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/2 "2021-10-21T23:49:04Z")

</div>

I cannot think of a reason why this wouldn’t work. You should try a very simple prototype just be be sure though, before launch into a major project.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 22, 2021, 4:27pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/3 "2021-10-22T16:27:26Z")

</div>

I never tried this way but I don’t know if actually it works. I don’t think the same canvas can hold both webgl and 2d contexts.

What I usually do is to prepare 2 canvases - one for webgl (in my case hydra/regl but it can be three.js, babylon etc) and one for p5.js. Then you can either overlay two canvases using CSS, or copy one of the canvases to the other using p5’s `image` function (or directly call [`drawImage`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)). In this case you may need to turn `preserveDrawingBuffer` flag on the webgl canvas to be copyable:

```javascript
webglCanvas.getContext("webgl", { preserveDrawingBuffer: true });

```

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 22, 2021, 5:29pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/6 "2021-10-22T17:29:38Z")

</div>

> [@micuat](#):
>
> I don’t think the same canvas can hold both webgl and 2d contexts.

ya your right

> [@micuat](#):
>
> What I usually do is to prepare 2 canvases - one for webgl (in my case hydra/regl but it can be three.js, babylon etc) and one for p5.js. Then you can either overlay two canvases using CSS, or copy one of the canvases to the other using p5’s `image` function (or directly call [`drawImage`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)). In this case you may need to turn `preserveDrawingBuffer` flag on the webgl canvas to be copyable:

Ill try that, but how would I use the image() to overlay them, and wouldn’t break [Three.js’s Orbitcontrols](https://threejs.org/docs/#examples/en/controls/OrbitControls)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 22, 2021, 5:47pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/7 "2021-10-22T17:47:49Z")

</div>

assuming you copy a canvas inside another canvas, there are two different approaches:

1. copy webgl canvas into p5.js and overlay UI
2. copy p5.js canvas and use it as a texture in three.js

if you want to use orbit controls, perhaps the latter is the way to go. What you probably need is a technique called billboarding - regardless of where the object is facing at, the texture looks as if it’s facing the camera. You can find some info here

> **[Three.js Billboards](https://threejsfundamentals.org/threejs/lessons/threejs-billboards.html)**
>
> How to make things always face the camera.

if you go with this direction, I would suggest asking in three.js communities because this is not related to p5.js anymore - just to let you know 🙂

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 22, 2021, 5:56pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/8 "2021-10-22T17:56:05Z")

</div>

I can’t because I was [“Teperarilly paused”](https://discourse.threejs.org/t/account-temporarily-on-hold/30544) and now I won’t let me post topics ☹

AND IT WAS MY FIRST TOPIC 🥴

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 22, 2021, 6:10pm UTC](https://discourse.processing.org/t/would-it-be-okay-to-the-three-js-lib-as-the-3d-renderer-and-use-p5-as-the-overlay/32991/9 "2021-10-22T18:10:50Z")

</div>

sorry to hear that - you can perhaps appeal about the suspension or find other places like discord server or some knowledgeable people on twitter. but unfortunately we can’t help you with this matter on the processing forum.