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

p5.js Libraries
1

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…

// 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
1 Like
2

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.

3

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). In this case you may need to turn preserveDrawingBuffer flag on the webgl canvas to be copyable:

webglCanvas.getContext("webgl", { preserveDrawingBuffer: true });
1 Like
6

ya your right

Ill try that, but how would I use the image() to overlay them, and wouldn’t break Three.js’s Orbitcontrols

7

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

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 :slight_smile:

8

I can’t because I was “Teperarilly paused” and now I won’t let me post topics :frowning:

AND IT WAS MY FIRST TOPIC :woozy_face:

9

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.