// seems to require a buffer.reset() call afterwards, for the perspective camera

// settings to be obeyed. This "bug" has existed for several releases. 

​

let canvas, buf, mainCam, bufCam;

let xSize = 1000, ySize = 800;

​

function setup() {

​

   canvas = createCanvas(xSize, ySize, WEBGL);              // Create canvas

   buf = createGraphics(xSize, ySize, WEBGL);              // Create buffer

​

   mainCam = createCamera(); 

   mainCam.perspective(PI / 3, xSize / ySize, 1, 2000);

   mainCam.camera(1000, 0, 1000,    0, 0, 0,    0, 1, 0);   // Main cam looking at (0,0,0)

   setCamera(mainCam);                                      // obliquely from (1000,0,1000)

​

   bufCam = createCamera();

   bufCam.perspective(PI / 3, xSize / ySize, 1, 2000);

   bufCam.camera(1000, 0, 1000,    0, 0, 0,    0, 1, 0);    // buf cam, same as main cam

   buf.setCamera(bufCam);

}

​

function draw() {

   // Draw a couple of squares onscreen

   // View will be correct, ie. oblique

​

   background(color(128));    

   fill(255,0,0);

   square(100, 100, 200);

   translate(0, 0, 200);

   fill(255,255,0);

   square(100, 100, 200); 

​

   // Draw same squares in offscreen buf, the view will be wrong

   // ie head on

   drawBufSquares()

   saveCanvas(buf, "save1", "png");

​

   buf.reset();                    // reset() call

  // Draw the same again, the view will be correct.

   drawBufSquares()

   saveCanvas(buf, "save2", "png");

   noLoop();

}

​

function drawBufSquares() {

   buf.background(color(128));    

   buf.fill(255,0,0);

   buf.square(100, 100, 200);

   buf.translate(0, 0, 200);

   buf.fill(255,255,0);

   buf.square(100, 100, 200); 

}

​