Want use OpenGLFrameBuffer with wantsDepthBuffer and wantsStencilBuffer enabled

General JUCE discussion
#1

I am porting https://learnopengl.com/ to juce (https://github.com/iomeone/openglWithJuce)
Currently woking on https://learnopengl.com/Advanced-OpenGL/Framebuffers .
I’d like to use the built in class OpenGLFrameBuffer in juce since it’s convinient.
But It do not provide a way to set wantsDepthBuffer and wantsStencilBuffer to true.
I’d suggest this function at
https://github.com/WeAreROLI/JUCE/blob/3a4c0f901204a1aeec05597421da80acff403a4a/modules/juce_opengl/opengl/juce_OpenGLFrameBuffer.cpp#L179
could be written to

bool initialise (OpenGLContext& context, int width, int height, bool wantsDepthBuffer=false,  bool wantsStencilBuffer = false);

bool OpenGLFrameBuffer::initialise (OpenGLContext& context, int width, int height, bool wantsDepthBuffer,  bool wantsStencilBuffer)
    {
        jassert (context.isActive()); // The context must be active when creating a framebuffer!

        pimpl.reset();
        pimpl.reset (new Pimpl (context, width, height, wantsDepthBuffer, wantsStencilBuffer));

        if (! pimpl->createdOk())
            pimpl.reset();

        return pimpl != nullptr;
    }

（add default argument)
then we have a way to enable stencil and depth buffer!

BTW: use Framebuffers to achieve some post-processing effects is really convient!
like i did in


Just call makeCurrentRenderingTarget and releaseAsRenderingTarget, everything done!!

#2

Hey @bzhkl, I really appreciate the tutorials you’ve ported to Juce from the learn open GL website, much appreciated.

I’m also trying to get framebuffers to work, but just for 2D. However I think I may have stumbled up the way to figure out your problem. Have you checked out openGlContext.extensions and the renderbuffer entries? Through that you can find openGLContext.extensions.glFramebufferTexture2D then maybe you can set your GL_FRAMEBUFFER there.

Think to use your depth and stencil you would have to use renderBuffers right?

I’m just trying to get FBO’s working similar to the Buffer tabs in shadertoy. I know this post was originally from 8 months ago, but I wondering if you’re still kicking around and able to give me some pointers about how to use Juce’s OpenGLFrameBuffer object? I don’t understand how to hook it up, there’s no documentation or examples!

Here’s what I’ve got set up:

openGLFrameBuffer.initialise(openGLContext, getWidth(), getHeight()); // This is in constructor

openGLFrameBuffer.release(); // this is in destructor

OpenGLFrameBuffer openGLFrameBuffer; // this is in .h

// Main OpenGL render loop:

shaderProgram->use();
openGLFrameBuffer.makeCurrentRenderingTarget();

shaderProgram->setUniform("colour1", 1.f, 0.f, 0.f);

openGLContext.extensions.glBindVertexArray(VAO);
glDrawArrays (GL_TRIANGLES, 0, (int) vertices.size());
openGLContext.extensions.glBindVertexArray (0);
// Bind vert array and set uniforms

openGLFrameBuffer.makeCurrentRenderingTarget();

openGLFrameBuffer.releaseAsRenderingTarget();

bufferAProgram->use();

openGLFrameBuffer.makeCurrentRenderingTarget();

openGLFrameBuffer.releaseAsRenderingTarget();

This is the debug shader with bufferA set up: https://www.shadertoy.com/view/WsfSzj

I’ve heard that what the buffer tab is actually two textures, one that’s read from and one that’s written to, and they swap each frame, one frame it’s read, one time it’s write.

Am I on the right track to setting this up in Juce? Do I need to store the fbo for the next shader to read?

There’s functions on the framebuffer that are labelled, .readPixels and .writePixels, do you know if I should be storing and reading from a pixel array to mimic this concept of Buffer tabs?

#3

When you call _frameBuffer.makeCurrentRenderingTarget();
then all the things render to your frame buffer, it just bind to current frameBufferID.
then you call releaseAsRenderingTarget, it just say you want to unbind this buffer ,
and begin to render all thing to the screen.
but how can we use the frame buffer？
like I did in https://github.com/iomeone/openglWithJuce/blob/032e6d3a1092da5574fcc0a3250a72e343312b1e/Source/Tutorial18.cpp#L461
Just think the frame buffer as a texture. and you use the texture in you shader .

Tutorial18.cpp actually work. you can study the theory from https://learnopengl.com/ and debug the program.

#4

Hey @bzhkl thanks for the reply, much appreciated! That’s the resource I’ve been using to get to this stage thank you! I’m stuck on one bit and you’re right it’s the texture, I think I’ve got everything else set up. Do you need to instantiate an openGLTexture and load fbo into that image? If that’s the case I’m unsure of what exactly to write for the frameBuffer address. I think I’m just missing this part.

In newContextCreated I compile and initialise the frame buffer:
compileOpenGLBufferShaderProgram();

openGLFrameBuffer.initialise(openGLContext, getWidth(), getHeight());

In the main render loop:

openGLFrameBuffer.makeCurrentRenderingTarget();

bufferAProgram->use();

glEnable(GL_DEPTH_TEST);

//iBuffer is an OpenGLTexture
iBuffer.loadImage(<#const Image &image#>) // unsure how to bind the fbo here
iBuffer.bind();

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT );
openGLFrameBuffer.releaseAsRenderingTarget();
// Draw Verts for the screen quad, triangle array defined in ShapeVertices.cpp
openGLContext.extensions.glBindVertexArray(VAO);
glDrawArrays (GL_TRIANGLES, 0, (int) vertices.size());
openGLContext.extensions.glBindVertexArray (0);

openGLFrameBuffer.releaseAsRenderingTarget();

openGLFrameBuffer.makeCurrentRenderingTarget();

shaderProgram->use();

// do uniform stuff then release as render target

I also have framebuffer.release() in the destructor.

To me a seems a bit pointless having to load/save the fbo into another texture, and then read from there, can I just bind the fbo straight into a texture uniform of the shader? I see you’ve used framebuffer id, can I set the texture via this identifier? I’m struggling to read what’s happening in the code without being able to run and step through.

#5

Right had another look at your code, was going through it yesterday, and hadn’t re-looked.

So you’re setting something called SpriteQuard with .setTexture(getFramebufferID)

But what’s a spriteQuard, of what type? Is it an openGL texture? As I couldn’t find .setTexture as a method for OpenGLTexture. Damn I think I’m close

#6

like I did at line 348, just save _frameBuffer.getTextureID() to _frameBufferTextureID for further using .
So when we call bindTexture, we bind the frame buffer’s id. like I did at
glBindTexture(GL_TEXTURE_2D, _frameBufferTextureID);

So the order is
1, Save _frameBuffer.getTextureID() to member variable _frameBufferTextureID
2, when bindTexture, we bind to the texture that it’s texture id is _frameBufferTextureID

#7

awesome thank you, I think I’ve definitely got it woking forward now, so my A Shader feeds into the texture of Shader B:

Screen Shot 2020-06-19 at 15.25.21
Screen Shot 2020-06-19 at 15.25.211912×945 233 KB

Main shader is just looking at the first shader and presenting the texture.

So it wouldn’t be too hard to now feed that framebuffer back into the the first shader’s texture slot? As in to re-create the shadertoy’s buffer tab set up

#8

This is how far I’ve got: https://youtu.be/UbpUIOq9mcI. (It’s supposed to enable drawing with the mouse)

It’s for sure sending pixels from Shader A framebuffer to the texture slot on shader B, but I have no idea how to get or store the pixels in that texture in shaderA again.

Maybe I need another framebuffer? So shader A feeds into FboA, shaderB reads FboA, writes to FboB and shader A reads from fboB.

Could that work?