Overlay a 3D sketch with HUD using shaders

p5.js Coding Questions
1

I am trying to display a 2D overlay (head-up-display) over a 3D sketch using a shader. Now I have never created a shader before but have spent the last couple of days researching and experimenting.

I am very close in that I have a

  • 3D animated sketch (p5js example)
  • 2D overlay with transparent areas (created programmatically)
  • shader program (based on code from GeeksForGeeks)

Now it all works except for one thing, although the 2D overlay has transparent areas they are appear opaque

Rather than post the code here I have created a test sketch on p5js web editor that you can copy and experiment with.

The last line in the draw() function is

displayHUD(canvas, hudBuffer);

If this is commented out then you see the 3D animation in action, but if executed it shows the HUD but the transparent areas are opaque. It is not replacing the 3D display as occasionally you get a glimpse of the purple balls in front of it.

Any help would be appreciated. :innocent::+1:

2

In webgl2, textures do not need to be powers of 2. They can have any resolution you like.

filter() would, more simply, replace the shader code that you wrote.

https://editor.p5js.org/scudly/sketches/vjPx7ElaX gives a really simple example of a filter shader that looks at each pixel of the existing image, which p5 passes in as tex0, and then outputs a new pixel. In my code, I’m dimming the brightness to fade the image, but you could pass in your HUD as a second texture uniform and mix() the pixels together based on the HUD image alpha.