p5中的纹理闪烁

Question

我有一个包含多维数据集和自定义obj的场景。我试图通过createGraphics将渐变作为纹理应用于多维数据集，但是每次我使用createGraphics作为多维数据集上的纹理时，它都会闪烁

自定义模型在使用createGraphics纹理时没有相同的问题，这完全是多维数据集的问题。

这是我的代码：

var camy;
var camz;
var camoffset;
var horiZon;
var c1;
var c2;

function preload() {
    fria = loadImage('nocity.png');
    island = loadModel('untitled.obj');
}
function setup() {
    canvas = createCanvas(windowWidth, windowHeight, WEBGL);
    pixelDensity=1;
    c1 = color(255, 255, 255);
    c2 = color(0, 0, 0);
    sunset = createGraphics(200, 200);
}

function windowResized() {
      resizeCanvas(windowWidth,windowHeight);
}

function draw() {
    background(0, 5, 100);
    angleMode(DEGREES);

    camoffset = 2500 - windowWidth;
    horiZon = map(mouseY, 0, height, -35, -65);
    camx = map(mouseX, 0, width, -500, 500);
    camz = map(mouseY, height, 0, -1400 - camoffset, -2100 - camoffset);
    camy = map(mouseY, height, 0, -1000 - camoffset, -400);
    setGradient(0, 0, 200, 200, c1, c2);

    perspective(PI / 3.0, width / height, 0.1, 10000);
    camera(camx, camy, camz, 0, 0, 0, 0, 1, -0.25);
    translate(-2.5, 6, 0);
    rotateZ(180);
    rotateY(180);
    noStroke();
    texture(fria);
    model(island);
    texture(sunset);
    translate(0, 100, horiZon);
    box(200, 200, 1);
}

function setGradient(x, y, w, h, c1, c2) {
  noFill();
    for (var i = y; i <= y + h; i++) {
      var inter = map(i, y, y + h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      sunset.stroke(c);
      sunset.line(x, i, x + w, i);
    }
}

Answer 1

我找到了解决此问题的方法。当我删除相机代码时，闪烁消失了。因此，我所采取的解决方案是我改用平移和旋转来模拟所需的相机运动。用这种方式很难想到它，但是您可以通过简单的Trig找出您需要进行的翻译。