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

Question

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

这是一个简单的示例，它在 canvas 上绘制模型并将其缩放到 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 canvas 上的渲染帧，如下所示：

//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() 为 [=29] 时都会重置 t运行信息=].

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

阅读更多关于 push() here and pop() here

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

Strange behaviour when using createGraphics() with WEBGL in p5

javascript

p5.js