在同一画布中为p5.js和babylon.js绘制元素

Question

我想在画布上创建三维形状，但我使用的是ml5.js和posenet示例。我可以想到两种方法：

方法1:使用WEBGL呈现器的。但是，这是行不通的。WEBGL渲染器需要运行三维形状，对吗？当我在ml5.js示例中使用它时，以下内容不起作用：

createCanvas(640,480, WEBGL)

方法2：使用不同的库。我决定使用babylon.js

但是，它要求我首先创建一个画布元素，然后执行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 

问题：-- p5创建的画布不同于babylon.js。我希望显示器是一个而不是两个单独的窗口。怎么做？谢谢!

Answer 1

AFAIK您不能在画布的同一个webgl上下文中使用两个呈现器。这意味着，您将需要选择一个渲染器来绘制您的三维形状。

画布的创建可以是代码的一部分，所以您实际上不必在HTML中使用画布。Babylon.js只需在引擎的构造函数中绘制：

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!