为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

拉丁的传说 2023-08-24 17:51:19
我正在使用 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);}每次重新绘制框架时,模型都会不断按比例放大。我不确定为什么会发生这种情况,或者是什么导致它的行为与我的第一个示例中的行为不同。
查看完整描述

1 回答

?
qq_笑_17

TA贡献1818条经验 获得超7个赞

该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

}

查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 106 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信