p5.j​​s中的多个3D WebGL画布

Question

我正在尝试将2个不同的3D WebGL上下文与p5.js合并在一起，而我无法一次显示两者。

第一个WebGL上下文是3D模型，它使用正常的材质进行旋转。

let 3dModel;

function preload() {
  3dModel = loadModel('/static/models/3dModel.obj');
}

function setup() {
  let canvas1 = createCanvas(800, 600, WEBGL);
  canvas1.parent('logoSpin');
}

function draw() {
  push();
  clear();
  scale(60);
  normalMaterial();
  rotateX(frameCount * 0.02);
  rotateY(frameCount * 0.01);
  model(3dModel);
  pop();
}

第二个上下文用作站点范围内的半透明CRT模糊扫描线着色器。

let blurObj;

function preload() {
    blurObj = loadShader('/static/shaders/vert.shader', '/static/shaders/frag.shader');
}
function setup() {
    let canvas = createCanvas(window.innerWidth, window.innerHeight, WEBGL);
    canvas.parent('blurLayer')
    shader(blurObj);
    noStroke();
    x = 0.0;
}

function draw() {
    push();
    blurObj.setUniform("u_resolution", [canvas.width, canvas.height])
    blurObj.setUniform('u_time', x);
    quad(-1, -1, 1, -1, 1, 1, -1, 1);
    x -= -0.01;
    pop();
}

我的主要问题是，模糊着色器似乎利用其模糊效果“覆盖”了模型上下文的渲染像素数据。这样做的主要目的是使模型层位于模糊层之下。

我想念什么吗？就像允许多个上下文的标志，还是一种在不完全破坏其呈现数据的情况下覆盖其他上下文的方式？

有人是否有将两个上下文合并在一起的指针（如果可以，则可以正确渲染场景），或者指向与问题相关的良好的p5.js特定指南/参考的链接？