MacBook Pro M1上P5.js WEBGL createGraphics渲染异常求助

在MacBook Pro M1设备上使用P5.js在线编辑器制作ASCII艺术，创建了WEBGL画布并通过createGraphics()生成WEBGL图形对象pg，将3D圆环绘制在pg中。目前除pg渲染异常外其余功能正常——pg画面出现与其他内容混合的情况。尝试直接在画布中绘制3D元素显示正常，但必须使用pg绘制3D元素以读取其像素数据生成ASCII艺术。

问题截图：

JavaScript代码 #

const density = '  .:-i|=+%O#@'

let img;
let asciiDiv;
let cc = 10;
let pg;
let count = 0;

let W = 500;
let H = 500;

function setup() {
    createCanvas(W, H, WEBGL);
    //noCanvas();
    pg = createGraphics(W, H, WEBGL);
    asciiDiv = createDiv('');
}

function draw() {
    //video.loadPixels();

    let wave = map(sin(radians(frameCount)), -1, 1, -cc, cc);
    let locX = mouseX;
    let locY = mouseY;

    pg.ambientLight(255, 255, 255);
    pg.pointLight(255, 255, 255, locX, locY, 100);

    // if (wave >=-2 && wave<=2 ) {
    // count++;
    //print("count: "+count);
    //}
    //if (count == 5) {
    //noLoop();
    //  print("save");
    // }
    pg.normalMaterial();
    pg.rectMode(CENTER);
    background(0);
    //pg.translate(0, 0, 0);
    pg.push();
    pg.background(155);
    pg.translate(0, 0, 0);
    pg.rotateZ(frameCount * 0.001);
    pg.rotateX(frameCount * 0.001);
    pg.rotateY(frameCount * 0.001);
    pg.torus(200, 50);
    pg.pop();

    push();
    translate(-width / 2, -height / 2, 0);
    image(pg, 0, 0, W, H);
    pop();
    pg.loadPixels();
    textFont('courier');
    let asciiImage = "";
    for (let j = 0; j < pg.height; j++) {
        for (let i = 0; i < pg.width; i++) {
            const pixelIndex = (i + j * pg.width) * 4;
            const r = pg.pixels[pixelIndex + 0];
            const g = pg.pixels[pixelIndex + 1];
            const b = pg.pixels[pixelIndex + 2];
            const avg = (r + g + b) / 3;
            const len = density.length;
            const charIndex = floor(map(avg, 0, 255, 0, len));
            const c = density.charAt(charIndex);
            if (c == " ") asciiImage += "&nbsp;";
            else asciiImage += c;
        }
        asciiImage += '<br/>';
    }
    asciiDiv.html(asciiImage);
}

CSS代码 #

html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #FFF;
    font-family: 'courier';
    font-size: 16pt;
    line-height: 14pt;
    letter-spacing: 3px;
  }
  canvas {
    display: block;
  }

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script src="sketch.js"></script>
  </body>
</html>

问题根源在于WEBGL离屏画布pg的深度缓冲区未被正确清除，导致每帧绘制时残留上一帧的深度信息，进而出现画面混合异常。

修改JavaScript代码中draw()函数内的pg绘制部分，在pg.background(155)之后添加pg.clearDepth()，强制清除深度缓冲区：

pg.push();
pg.background(155);
pg.clearDepth(); // 新增这一行
pg.translate(0, 0, 0);
pg.rotateZ(frameCount * 0.001);
pg.rotateX(frameCount * 0.001);
pg.rotateY(frameCount * 0.001);
pg.torus(200, 50);
pg.pop();

若上述修改仍未解决问题，可尝试在pg.push()前添加pg.resetMatrix()，避免矩阵变换残留影响渲染结果。

内容的提问来源于stack exchange，提问作者Dario Pistillo