Varying Line Width with Open GL using GL_POINTS (iOS)

Question

I'm making a drawing application using swift (based on GLPaint) and open gl. Now I would like to improve the curve so that it varies with stroke speed (in eg thicker if drawing fast)

However, since my knowledge in open gl is quite limited I need some guidance. What I want to do is to vary the size of my texture/point for each CGPoint I calculate and add to the screen. Is it possible?

func addQuadBezier(var from:CGPoint, var ctrl:CGPoint, var to:CGPoint, startTime:CGFloat, endTime:CGFloat) {

    scalePoints(from: from, ctrl: ctrl, to: to)
    let pointCount = calculatePointsNeeded(from: from, to: to, min: 16.0, max: 256.0)

    var vertexBuffer: [GLfloat] = [GLfloat](count: Int(pointCount), repeatedValue:0.0)

    var t : CGFloat = startTime + 0.0002
    for i in 0..<Int(pointCount) {

        let p = calculatePoint(from:from, ctrl: ctrl, to: to)        
        vertexBuffer.insert(p.x.f, atIndex: i*2) 
        vertexBuffer.insert(p.y.f, atIndex: i*2+1)    
        t += (CGFloat(1)/CGFloat(pointCount))
    }

    glBufferData(GL_ARRAY_BUFFER.ui, Int(pointCount)*2*sizeof(GLfloat), vertexBuffer, GL_STATIC_DRAW.ui)
    glDrawArrays(GL_POINTS.ui, 0, Int(pointCount).i)        

}  

func render()
{
    context.presentRenderbuffer(GL_RENDERBUFFER.l)
}

where render() is called every 1/60 s.

shader

attribute vec4 inVertex;

uniform mat4 MVP;
uniform float pointSize;
uniform lowp vec4 vertexColor;

varying lowp vec4 color;

void main()
{
    gl_Position = MVP * inVertex;
    gl_PointSize = pointSize;
    color = vertexColor;
}

Thanks in advance!

score 0 · Accepted Answer · answered Feb 26 '16 at 04:54

0

In your vertex shader, set gl_pointSize to the width you want. That measurement is in framebuffer pixels, so if the size of your framebuffer changes with the device's scale factor, you'll need to adjust your point size appropriately.

answered Feb 26 '16 at 04:54

rickster

124,678
26
272
326

Thanks for your reply @rickster. However, wouldn't this affect all points in the vertexBuffer array? I'm interested in adjusting each point in the vertexBuffer array independently. – Malkovic911 Feb 26 '16 at 09:17
The vertex shader runs once per vertex, so setting `gl_pointSize` non-uniformly will get you points of different sizes. You just need a way to pass per-vertex size into your shader... Probably the best is to create another vertex attribute. – rickster Feb 26 '16 at 13:14

score 0 · Answer 2 · answered Feb 26 '16 at 10:15

If you find a way to control the line width in the vertex shader it would most likely be the best solution. Not only the lines would have different width but even a single line may have an increasing width (interpolated) between the points. I am not sure you will be able to achieve this on your platform though.

So if you do find a way you would add the point size to your buffer and use it with a new attribute in the vertex shader.

If not you will need to use triangles to draw the line which is generally a better practice anyway. To define vertices between point A and B you can get the normal as W = (B-A).normalized(), normal = N = (W.y, -W.x). Then the 4 positions are k = lineWidth/2.0, t1 = A + N*k, t2 = A - N*k, t3 = B + N*k, t4 = B - N*k. So this is what you add into your buffer and draw as a triangle strip or triangles depending on what you are looking for.

Varying Line Width with Open GL using GL_POINTS (iOS)

2 Answers2