Drawing elements for p5.js and babylon.js in same canvas

Question

I want to create 3D shape on my canvas, but I am using ml5.jsand posenet example. There are two ways I could think of:

Approach 1: Using WEBGL renderer. But, it does not work. WEBGL renderer is required to make 3d shapes run, right? The following is NOT working when I use it with ml5.js example:

createCanvas(640,480, WEBGL)

Approach 2: Use a different library. I decided to use babylon.js

But it requires that I create a canvas element first and then do the diplay.

  <canvas id="renderCanvas" touch-action="none"></canvas> 
    var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
    var engine = new BABYLON.Engine(defaultCanvas0, true); // Generate the BABYLON 3D engine
    //  Add the create scene function

Problem: The canvas created by p5 is different from that of the babylon.js. I want the display to be one and not two separate windows. How to do that? Thank you!

Can you specify the **exact** p5.js code which don't works in WEBGL mode ? — Agnius Vasiliauskas, Sep 20 '19 at 11:16

score 0 · Answer 1 · answered Sep 27 '19 at 13:02

AFAIK you cannot use two renderers on the same webgl context of a canvas. Which means, you will need to select one of the renderers to draw your 3D shape.

The canvas creation can be a part of the code, so you don't really have to already have the canvas in your HTML. Babylon.js simply needs to canvas in the engine's constructor:

var canvas = document.createElement("canvas");
// style your canvas
canvas.style.width = "100px";
canvas.style.height = "100px";
// add to wherever you want
document.body.appendChild(canvas);

// use this canvas to init babylon
var engine = new BABYLON.Engine(canvas, true);
// do your thing!

Drawing elements for p5.js and babylon.js in same canvas

1 Answers1