使用 GL_POINTS (iOS) 使用 Open GL 改变线宽
Varying Line Width with Open GL using GL_POINTS (iOS)
我正在使用 swift(基于 GLPaint)和打开 gl.现在我想改进曲线,使其随笔划速度变化(例如,如果绘制速度快,则更粗)
但是,由于我对 open gl 的了解非常有限,因此我需要一些指导。我想要做的是为我计算并添加到屏幕的每个 CGPoint 改变我的 texture/point 的大小。可能吗?
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)
}
其中每 1/60 秒调用一次 render()。
着色器
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;
}
提前致谢!
在您的顶点着色器中,将 gl_pointSize
设置为您想要的宽度。该测量值以帧缓冲区像素为单位,因此如果帧缓冲区的大小随设备的比例因子而变化,则需要适当调整点大小。
如果您找到一种在顶点着色器中控制线宽的方法,那很可能是最佳解决方案。不仅线条会具有不同的宽度,而且即使是单条线也可能在点之间具有增加的宽度(插值)。不过,我不确定您能否在您的平台上实现这一目标。
因此,如果您确实找到了一种方法,您可以将点大小添加到缓冲区中,并在顶点着色器中将其与新属性一起使用。
否则,您将需要使用三角形来画线,这通常是更好的做法。要定义点 A
和 B
之间的顶点,您可以获得法线 W = (B-A).normalized()
、normal = N = (W.y, -W.x)
。那么4个位置分别是k = lineWidth/2.0
、t1 = A + N*k
、t2 = A - N*k
、t3 = B + N*k
、t4 = B - N*k
。所以这就是您添加到缓冲区中并绘制为三角形带或三角形的内容,具体取决于您要查找的内容。
我正在使用 swift(基于 GLPaint)和打开 gl.现在我想改进曲线,使其随笔划速度变化(例如,如果绘制速度快,则更粗)
但是,由于我对 open gl 的了解非常有限,因此我需要一些指导。我想要做的是为我计算并添加到屏幕的每个 CGPoint 改变我的 texture/point 的大小。可能吗?
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)
}
其中每 1/60 秒调用一次 render()。
着色器
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;
}
提前致谢!
在您的顶点着色器中,将 gl_pointSize
设置为您想要的宽度。该测量值以帧缓冲区像素为单位,因此如果帧缓冲区的大小随设备的比例因子而变化,则需要适当调整点大小。
如果您找到一种在顶点着色器中控制线宽的方法,那很可能是最佳解决方案。不仅线条会具有不同的宽度,而且即使是单条线也可能在点之间具有增加的宽度(插值)。不过,我不确定您能否在您的平台上实现这一目标。
因此,如果您确实找到了一种方法,您可以将点大小添加到缓冲区中,并在顶点着色器中将其与新属性一起使用。
否则,您将需要使用三角形来画线,这通常是更好的做法。要定义点 A
和 B
之间的顶点,您可以获得法线 W = (B-A).normalized()
、normal = N = (W.y, -W.x)
。那么4个位置分别是k = lineWidth/2.0
、t1 = A + N*k
、t2 = A - N*k
、t3 = B + N*k
、t4 = B - N*k
。所以这就是您添加到缓冲区中并绘制为三角形带或三角形的内容,具体取决于您要查找的内容。