processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.11k stars 3.22k forks source link

beginClip() is accidentally being applied to framebuffers #6989

Closed davepagurek closed 2 months ago

davepagurek commented 2 months ago

Most appropriate sub-area of p5.js?

p5.js version

1.9.1

Web browser and version

Chrome 124 (not Firefox, weirdly!)

Operating system

MacOS 14.2.1

Steps to reproduce this

Steps:

  1. Start clipping to a shape
  2. Draw something to a framebuffer. The clip shouldn't be applied to the framebuffer's context.
  3. Stop clipping
  4. Draw the framebuffer to the main canvas
  5. The framebuffer should appear unclipped, since its framebuffer context was never clipped, and clipping was not applied when drawing it to the main canvas.

Snippet:

let fbo

function setup() {
  createCanvas(400, 400, WEBGL);
  fbo = createFramebuffer()
}

function draw() {
  background(220);
  push()
  beginClip()
  circle(0, 0, 200)
  endClip()

  fbo.draw(() => {
    console.log(drawingContext.isEnabled(drawingContext.STENCIL_TEST))
    fill('red')
    noStroke()
    plane(width, height)
  })
  pop()

  imageMode(CENTER)
  image(fbo, 0, 0)

  noLoop()
}

The expected output is a full red canvas, but instead we get an empty canvas.