Transparency rendering - OpenProcessing

mySketch
drawTransparent
xxxxxxxxxx
 
// Try setting this to false to see how default p5 works
let fix = true
​
let tex
const positions = []
let fps
let fpsSamples = []
​
OPC.select('scene', ['boxes', 'images'], 'boxes')
​
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL)
  randomSeed(1)
  tex = createFramebuffer({ width: 200, height: 200 })
  tex.draw(() => {
    fill(255, 0, 0, 150)
    circle(0, 0, 50)
  })
  
  for (let i = 0; i < 50; i++) {
    positions.push({
      x: random(-1, 1) * width * 0.3,
      y: random(-1, 1) * height * 0.3,
      z: random(-1, 1) * min(width, height) * 0.3,
      rx: random(TWO_PI),
      ry: random(TWO_PI)
    })
  }
  
  fps = createP()
  fps.position(20, 20)
}
​
function keyPressed() {
  save('transparency.png')
}
​
function draw() {
  background(255)
  orbitControl()
  imageMode(CENTER)
  for (const { x, y, z, rx, ry } of positions) {
    push()
    translate(x, y, z)
    rotateX(rx)
    rotateY(ry)
    if (fix) {
      if (scene === 'images') drawTransparent(() => {
        image(tex, 0, 0)
      })
      if (scene === 'boxes') drawTwoSided(() => {
        texture(tex)
        box(100)
      })
    } else {
      if (scene === 'images') {
        image(tex, 0, 0)
      }
      if (scene === 'boxes') {
        texture(tex)
        box(100)
      }
    }
    pop()
  }
  
  fpsSamples.push(frameRate())
  if (fpsSamples.length > 10) fpsSamples.shift()
  fps.html(`${(fpsSamples.reduce((a,b)=>a+b)/fpsSamples.length).toFixed(2)} FPS`)
}