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

Question

我正在使用 p5.js，并且在屏幕外图形缓冲区中使用 WebGL 渲染器时遇到奇怪的行为。

这是一个简单的示例，它在画布上绘制模型并将其缩放至 101% 大小。这按预期工作。每次重新绘制框架时模型都保持静止。

//working WEBGL createCanvas example

let 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 example

let 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}