# OpenGL - blur a component

**URL:** <https://forum.juce.com/t/opengl-blur-a-component/30097>\
**Category:** General JUCE discussion\
**Created:** [October 30, 2018, 12:01pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097 "2018-10-30T12:01:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 12:01pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/1 "2018-10-30T12:01:50Z")

</div>

Does anyone who finds openGL super easy want to suggest a shader that I could use with the OpenGLContext attached to a component to blur said component? Is that even possible. Or failing that I can paint the component to an OpenGLImage and then blur that …?

---

<div class="post-metadata">

**Author:** ![alassandro](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/alassandro/32/4297_2.png) [@alassandro](https://forum.juce.com/u/alassandro)\
**Post date:** [October 30, 2018, 4:30pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/2 "2018-10-30T16:30:51Z")

</div>

Seems similar to this thread:

> [@Pixel shader on 2D vector graphics](https://forum.juce.com/t/pixel-shader-on-2d-vector-graphics/14241):
>
> I'm trying to create a bloom effect on some 2D vector graphics.&nbsp;I've tried doing this myself for a while but I can't figure out how to get the drawn colors&nbsp;into a texture that a pixel shader can read. I'm using the&nbsp;OpenGLGraphicsContextCustomShader since it says it's good for per pixel effects: "Used to create custom shaders for use with an openGL 2D rendering context. Given a GL-based rendering context, you can write a fragment shader that applies some kind of per-pixel effect." I could prob…

I’m in the middle of trying to do some similar things now ( as seen in the thread 🙂 ) it seems you’d have to paint to an `OpenGLImageType` and then draw that image to a quad using a shader. You should be able to do it without `OpenGLRenderer` although it might be more cumbersome

There may even be an opportunity to use [`ImageEffectFilter`](https://docs.juce.com/master/classImageEffectFilter.html) to handle the blur, so you get passed the component image already finished and just draw it using the shaders. I’ve been looking into using that approach myself but haven’t gotten to try it out yet

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 4:34pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/3 "2018-10-30T16:34:30Z")

</div>

The mystery bit for me is getting the texture to the shader. Lack of serious OpenGL chops…

---

<div class="post-metadata">

**Author:** ![alassandro](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/alassandro/32/4297_2.png) [@alassandro](https://forum.juce.com/u/alassandro)\
**Post date:** [October 30, 2018, 4:40pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/4 "2018-10-30T16:40:18Z")

</div>

This site has been great for helping me learn more about OpenGL, this page specifically goes over using textures with shaders:

[https://learnopengl.com/Getting-started/Textures](https://learnopengl.com/Getting-started/Textures)

You’ll have to bind your textures and then get them to the shader via uniforms  
If you’re using `juce::OpenGLShaderProgram` it’s a bit more simplified too!

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 4:47pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/5 "2018-10-30T16:47:02Z")

</div>

I got a fragment shader rendering with [https://docs.juce.com/master/structOpenGLGraphicsContextCustomShader.html](https://docs.juce.com/master/structOpenGLGraphicsContextCustomShader.html) which looked easiest but I couldn’t figure out how to get an image to attached to the shader…

OpenGLTexture looks like it ought be useful 🙂

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:09pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/6 "2018-10-30T17:09:12Z")

</div>

I might have achieved lift off!!

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:11pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/7 "2018-10-30T17:11:46Z")

</div>

Nope - my mistake 😉 Had my success and failure colours confused…

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:13pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/8 "2018-10-30T17:13:19Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/d/d6743e4c75e0139396a51f6a8669b6cce7c09a2f.png) and there we have OpenGL painting an image from a component… badly ;0)

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:19pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/9 "2018-10-30T17:19:36Z")

</div>

Well - here’s my shonky OpenGL to get that far in case it’s useful. I have only about 50% of a clue what I’m doing at the moment, and no idea why my image appears where it does at the size it does 🙂

```
#pragma once

#include "../JuceLibraryCode/JuceHeader.h"

//==============================================================================
/*
    This component lives inside our window, and this is where you should put all
    your controls and content.
*/
class MainComponent : public Component, Timer, OpenGLRenderer
{
public:
    MainComponent()
    {
        setSize (600, 400);
        context.setRenderer(this);
        context.setComponentPaintingEnabled(false);
        context.setContinuousRepainting(true);
        context.attachTo(*getTopLevelComponent());
        startTimer(100);
    }

    void paint (Graphics&g) override
    {
        g.fillAll(Colours::blue);
    }

    void timerCallback() override
    {
        repaint();
    }

    void resized() override
    {}

    void newOpenGLContextCreated () override
    {
        shader = new OpenGLShaderProgram(context);
        shader->addFragmentShader(shaderWotBlurs);
        shader->link();
        createTexture();
    }

    void renderOpenGL () override
    {
        OpenGLHelpers::clear (Colours::black);
        glDisable(GL_LIGHTING);
        glColor3f(1, 1, 1);
        glEnable(GL_TEXTURE_2D);
        texture.bind();
        shader->use();
        // Draw a textured quad
        glBegin(GL_QUADS);

        auto w = getWidth();
        auto h = getHeight();

        glTexCoord2f(0, 0); glVertex3f(0, 0, 0);
        glTexCoord2f(0, h); glVertex3f(0, h, 0);
        glTexCoord2f(w, h); glVertex3f(w, h, 0);
        glTexCoord2f(w, 0); glVertex3f(w, 0, 0);
        glEnd();
    }

    void openGLContextClosing () override
    {}

    class CompToRenderWithOpenGL : public Component
    {
    public:
        void paint (Graphics& g) override
        {
            g.fillAll(Colours::red);
            g.setColour(Colours::white);
            g.drawText("Hello world", 0, 0, 100, 20, Justification::centred, false);
        }
    };

    void createTexture()
    {
        CompToRenderWithOpenGL comp;
        Image im{ Image::ARGB, getWidth(), getHeight(), true };
        comp.setSize(getWidth(), getHeight());

        {
            Graphics gi{ im };
            MessageManagerLock lock;
            comp.paintEntireComponent(gi, true);
        }

        texture.loadImage(im);
    }

private:
    OpenGLTexture texture;
    ScopedPointer<OpenGLShaderProgram> shader;
    OpenGLContext context;

    String shaderWotBlurs =
        "uniform sampler2D sampler0;"
        "uniform vec2 tc_offset[9];"
        "void main()"
        "{"
        " vec4 sample[9];"
        " for (int i = 0; i < 9; ++i)"
        " sample[i] = texture2D(sampler0, gl_TexCoord[0].st + tc_offset[i]);"
        ""
        " gl_FragColor = (sample[0] + (2.0 * sample[1]) + sample[2] +"
        " (2.0 * sample[3]) + sample[4] + 2.0 * sample[5] +"
        " sample[6] + 2.0 * sample[7] + sample[8]) / 13.0;"
        "}";

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)
};
```

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:32pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/10 "2018-10-30T17:32:37Z")

</div>

No idea what’s going on with the co-ordinate space, and do I need some kind of vertex shader here…?

---

<div class="post-metadata">

**Author:** ![alassandro](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/alassandro/32/4297_2.png) [@alassandro](https://forum.juce.com/u/alassandro)\
**Post date:** [October 30, 2018, 5:41pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/11 "2018-10-30T17:41:14Z")

</div>

When you’re working with vertices (including `glTexCoord2f`), the coordinate space will be in the range from `-1, 1`, here’s a more detailed explanation:

[https://learnopengl.com/Getting-started/Coordinate-Systems](https://learnopengl.com/Getting-started/Coordinate-Systems)

If I’m understanding correctly, not including a vertex shader should use a default so it’s more like a fixed pipeline. That’s discussed some [here](https://www.khronos.org/registry/OpenGL/extensions/ARB/ARB_shader_objects.txt) under “What to do if part of a shader pair is not present?”. I usually include a vertex shader in my stuff since I have vertex attributes, but I suppose it should work without in your case for now.

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:45pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/12 "2018-10-30T17:45:32Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/a/a6fed1d28ad2590d305c4c10870255694bbf6211.png)

ok… 🙂

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:46pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/13 "2018-10-30T17:46:20Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/8/8771b8acb8bd63c883d8aeffee22f7bcda14d3d1.png)

kind of progress 🙂

---

<div class="post-metadata">

**Author:** ![Achder](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/achder/32/5897_2.png) [@Achder](https://forum.juce.com/u/Achder)\
**Post date:** [October 30, 2018, 5:48pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/14 "2018-10-30T17:48:10Z")

</div>

Texture coordinates are normalized values. Maybe that’s the problem here.

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 5:50pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/15 "2018-10-30T17:50:10Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/3/396584ef3bed4747f8e5401b29e3d7a8aa5ce861.png)

yep 🙂 now it just looksl ike my texture is different size to the window or something…

---

<div class="post-metadata">

**Author:** ![tadnicol](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/tadnicol/32/5141_2.png) [@tadnicol](https://forum.juce.com/u/tadnicol)\
**Post date:** [October 30, 2018, 6:10pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/16 "2018-10-30T18:10:00Z")

</div>

I don’t mean to derail your thread here, but thought this could possibly help ya:

For months I tried to avoid learning more in depth of OpenGL & then for a particular project I just couldn’t ignore it anymore. This youtube plist saved my butt. Super well done: [https://www.youtube.com/watch?v=W3gAzLwfIP0&list=PLlrATfBNZ98foTJPJ\_Ev03o2oq3-GGOS2](https://www.youtube.com/watch?v=W3gAzLwfIP0&list=PLlrATfBNZ98foTJPJ_Ev03o2oq3-GGOS2) I just followed each video, working on an OpenGL JUCE App and implementing the stuff from the video. It was well worth the time investment, & actually quite a new refreshing concept to dive into 🙂

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [October 30, 2018, 6:13pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/17 "2018-10-30T18:13:12Z")

</div>

Can’t you see I’m trying to do this without actually understanding what I’m doing 😄

---

<div class="post-metadata">

**Author:** ![tadnicol](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/tadnicol/32/5141_2.png) [@tadnicol](https://forum.juce.com/u/tadnicol)\
**Post date:** [October 30, 2018, 6:17pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/18 "2018-10-30T18:17:21Z")

</div>

I totally understand 😆 me a year ago --\> [OpenGL + GraphicsContext::drawImage Performance](https://forum.juce.com/t/opengl-graphicscontext-drawimage-performance/21669/9?u=rustypine)

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [November 1, 2018, 9:24pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/19 "2018-11-01T21:24:27Z")

</div>

thanks all - up and running. 50fps at 2%cpu load 🙂

---

<div class="post-metadata">

**Author:** ![jimc](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jimc/32/16067_2.png) [@jimc](https://forum.juce.com/u/jimc)\
**Post date:** [November 2, 2018, 3:56pm UTC](https://forum.juce.com/t/opengl-blur-a-component/30097/20 "2018-11-02T15:56:12Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/c/c3fdca8bc178c61c03bef0614b66862d3aa51051.png)

and now with multiple layers, blurred and non-blurred:

```
/**
 * Base class for an object (probably a component) that'll be painting itself in
 * multiple layers. @see ComponentBlur for a consumer of this class.
 */
class MultiLayerPainter
{
public:
    virtual void paintLayer(int layer, Graphics & g) = 0;
};
```

[Next page](https://forum.juce.com/t/opengl-blur-a-component/30097.md?page=2)