Overlaying webcam input (transparent way )on top of WebGL canvas?

p5.js Coding Questions
1

Hi, I have been trying to overlay webcam feed on top of a webGL canvas having cube shapes . In the sketch

  • The cube originates from -z value and moves towards the user
  • When i dont have the video/ webcam element overlaid , i can clearly see the cube originating from -z co-ordinate
  • When i overlay the video / webcam element, I can only see the cube in the last moment : It seems to be hidden behind the video / webcam feed.

I tried to use createGraphics but as I am using the webcam feed to do some calculations , I do not want to use it .
Is there any way to achieve that ?
p5js sketch : p5.js Web Editor

Timo