在 p5 中将 createGraphics() 与 WEBGL 一起使用时出现奇怪的行为

Question

我正在使用 p5.js，并且在屏幕外图形缓冲区中使用 WebGL 渲染器时遇到奇怪的行为。这是一个简单的示例，它在画布上绘制模型并将其缩放至 101% 大小。这按预期工作。每次重新绘制框架时模型都保持静止。//working WEBGL createCanvas examplelet icosa;function preload() {    icosa = loadModel('model.obj', true);}function setup() {    createCanvas(800, 800, WEBGL);}function draw() {     background(0);    //the model remains at 1.01 scale every time the frame is re-drawn, as expected.    scale(1.01);    model(icosa);}当我使用“createGraphics()”将 webGL 场景渲染到 p5.Graphics 离屏图形缓冲区时，会发生奇怪的行为。我这样做是为了进一步处理 2D 画布上的渲染帧，如下所示：//broken WEBGL createGraphics examplelet icosa;let rend3d;function preload() {    icosa = loadModel('model.obj', true);}function setup() {    rend3d = createGraphics(800, 800, WEBGL);    createCanvas(800, 800);}function draw() {     rend3d.background(0);    //the model continuously scales up every time the frame is re-drawn!    rend3d.scale(1.01);    rend3d.model(icosa);    background(0);    image(rend3d, 0,0, 800, 800);}每次重新绘制框架时，模型都会不断按比例放大。我不确定为什么会发生这种情况，或者是什么导致它的行为与我的第一个示例中的行为不同。

Answer 1

该draw函数位于<main-canvas>.push()后端<main-canvas>.pop()，以便每次draw()运行时都会重置转换。

（这<main-canvas>是我所说的占位符，它在 p5js 库的真实后端上绝对是不同的，但为了简单起见，这就是我所说的。）

所以你需要push和pop模型的图形对象进行交互。

function draw() { 

    rend3d.background(0);

    rend3d.push(); // Added line here

    rend3d.scale(1.01);

    rend3d.model(icosa);

    background(0);

    image(rend3d, 0,0, 800, 800);

    rend3d.pop(); // Added line here

}