技术问询：如何在OpenGL中实现点的轮廓绘制？

嘿，我来帮你搞定这个问题！OpenGL本身没有直接给点添加轮廓的内置功能，但我们可以用几种实用的方法来实现，下面结合你的现有代码一步步说明：

方法1：双层绘制（最简单的方案） #

这个思路很直观：先绘制一个比目标点更大的、颜色为轮廓色的点，然后在同一个位置绘制一个稍小的、实心颜色的点，这样就形成了“轮廓+实心”的效果。

结合你的代码，修改后的示例如下：

// 顶点设置（和你原来的代码一致）
GLfloat points[graph->vertexCount * 6]; 
for (int i = 0 ; i < graph->vertexCount; i++) { 
    points[i*6] = (graph->vertices[i].x / (backingWidth/2) ) - 1; 
    points[i*6+1] = -(graph->vertices[i].y / (backingHeight/2) ) + 1; 
    points[i*6+2] = 1.0; // 实心点颜色（这里假设是红色）
    points[i*6+3] = 0.0; 
    points[i*6+4] = 0.0; 
    points[i*6+5] = 1.0; 
}

glEnable(GL_POINT_SMOOTH); 
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glVertexPointer(2, GL_FLOAT, 24, points); 
glColorPointer(4, GL_FLOAT, 24, points + 2); 

// 第一步：绘制轮廓（黑色，点更大）
glColor4f(0.0f, 0.0f, 0.0f, 1.0f); // 轮廓色设为黑色
glPointSize((DOT_SIZE * scale) + 2); // 轮廓点比实心点大2个单位
glDrawArrays(GL_POINTS, 0, graph->vertexCount);

// 第二步：绘制实心点（原来的颜色和大小）
glColorPointer(4, GL_FLOAT, 24, points + 2); // 恢复原来的颜色指针
glPointSize(DOT_SIZE * scale);
glDrawArrays(GL_POINTS, 0, graph->vertexCount);

glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_VERTEX_ARRAY);
glDisable(GL_POINT_SMOOTH);

注意：如果你的颜色数据是单独存储的，记得调整glColorPointer的偏移量；另外GL_POINT_SMOOTH可以让点的边缘更圆润，适合轮廓效果，开启后建议同时启用混合：glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);。

方法2：几何着色器（更灵活的进阶方案） #

如果你的OpenGL版本支持几何着色器（3.2+核心模式），可以把每个点扩展成一个带轮廓的圆形或四边形。这种方法能更精确控制轮廓的宽度和形状，不会出现双层绘制可能的重叠问题。

大致步骤：

• 顶点着色器传递点的位置和颜色；
• 几何着色器把GL_POINTS输入转换成GL_TRIANGLE_STRIP，生成外轮廓环和内部实心区域；
• 片段着色器区分轮廓区域和实心区域，分别上色。

一个简化的几何着色器示例：

#version 330 core

layout (points) in;
layout (triangle_strip, max_vertices = 8) out;

uniform float pointSize;
uniform float outlineWidth;
uniform vec4 outlineColor;
uniform vec4 fillColor;

out vec4 fragColor;

void main() {
    vec2 center = gl_in[0].gl_Position.xy;
    float outerRadius = pointSize / 2.0;
    float innerRadius = outerRadius - outlineWidth;

    // 生成外轮廓的四个顶点（正方形，也可以改成圆形的多个顶点）
    vec2 outerPoints[4] = vec2[4](
        center + vec2(-outerRadius, -outerRadius),
        center + vec2(outerRadius, -outerRadius),
        center + vec2(-outerRadius, outerRadius),
        center + vec2(outerRadius, outerRadius)
    );

    // 生成内实心区域的四个顶点
    vec2 innerPoints[4] = vec2[4](
        center + vec2(-innerRadius, -innerRadius),
        center + vec2(innerRadius, -innerRadius),
        center + vec2(-innerRadius, innerRadius),
        center + vec2(innerRadius, innerRadius)
    );

    // 先绘制外轮廓
    fragColor = outlineColor;
    for (int i = 0; i < 4; i++) {
        gl_Position = vec4(outerPoints[i], 0.0, 1.0);
        EmitVertex();
    }
    EndPrimitive();

    // 再绘制内部实心区域
    fragColor = fillColor;
    for (int i = 0; i < 4; i++) {
        gl_Position = vec4(innerPoints[i], 0.0, 1.0);
        EmitVertex();
    }
    EndPrimitive();
}

这种方案需要你切换到核心模式，使用VAO/VBO来管理顶点数据，比固定管线更现代，但功能也更强大。

额外提示 #

• 双层绘制时，要根据实际显示效果调整轮廓点的大小增量，避免出现缝隙或过度重叠；
• 如果需要非常平滑的圆形轮廓，几何着色器可以生成更多顶点来模拟圆形，比如用12个顶点组成正十二边形，视觉上就接近完美圆形了。

内容的提问来源于stack exchange，提问作者jdleung