У меня есть две вещи, которые я хочу отобразить с помощью p5, одна - это 2D-фон, а другая - передний план 3D WebGL, обе сгенерированы с помощью p5. Я заметил, что даже если я рисую 2D-фон перед 3D-компонентом в функции draw(), 3D-компонент все равно будет частично покрываться фоном при вызове rotateX() или rotateY(). Это выглядит примерно так:
Я подозреваю, что 2d и 3d объекты находятся в одной и той же z-плоскости, поэтому, когда передний план поворачивается, часть покрывается фоном, который теперь находится спереди по сравнению с покрытыми частями.
Таким образом, мой вопрос заключается в том, как сохранить фон полностью сзади (т.е. не покрывая передний план независимо от поворота)?
Ниже моей текущей реализации, 2d фон генерируется в закадровый холст затем поместите на основной холст с помощью image(), где генерируется материал 3d, но я воспользуюсь другими подходами.
let bg;
p.setup = () => {
p.createCanvas(width,height,p.WEBGL);
bg = p.createGraphics(width,height);
}
p.draw = () => {
... // draw background bg
p.image(bg,x,y); // draw background on canvas
... // draw foreground
p.rotateX(degrees);//rotate
}