如何产生圆环结？

Question

让我通过提供一些我们将在其中使用的样板代码来开始这个问题：

mcve_framework.py

import time

from OpenGL.GL import *
from OpenGL.GLU import *
from OpenGL.GLUT import *

import glm
from glm import unProject
from glm import vec2
from glm import vec3
from glm import vec4


# -------- Camera --------
class BaseCamera():

    def __init__(
        self,
        eye=None, target=None, up=None,
        fov=None, near=0.1, far=100000
    ):
        self.eye = eye or glm.vec3(0, 0, 1)
        self.target = target or glm.vec3(0, 0, 0)
        self.up = up or glm.vec3(0, 1, 0)
        self.original_up = glm.vec3(self.up)
        self.fov = fov or glm.radians(45)
        self.near = near
        self.far = far

    def update(self, aspect):
        self.view = glm.lookAt(
            self.eye, self.target, self.up
        )
        self.projection = glm.perspective(
            self.fov, aspect, self.near, self.far
        )

    # def zoom(self, *args):
    #     delta = -args[1] * 0.1
    #     self.eye = self.target + (self.eye - self.target) * (delta + 1)

    def zoom(self, *args):
        x = args[2]
        y = args[3]
        v = glGetIntegerv(GL_VIEWPORT)
        viewport = vec4(float(v[0]), float(v[1]), float(v[2]), float(v[3]))
        height = viewport.w

        pt_wnd = vec3(x, height - y, 1.0)
        pt_world = unProject(pt_wnd, self.view, self.projection, viewport)
        ray_cursor = glm.normalize(pt_world - self.eye)

        delta = args[1] * 10
        self.eye = self.eye + ray_cursor * delta
        self.target = self.target + ray_cursor * delta

    def load_projection(self):
        width = glutGet(GLUT_WINDOW_WIDTH)
        height = glutGet(GLUT_WINDOW_HEIGHT)

        glMatrixMode(GL_PROJECTION)
        glLoadIdentity()
        gluPerspective(glm.degrees(self.fov), width / height, self.near, self.far)

    def load_modelview(self):
        e = self.eye
        t = self.target
        u = self.up

        glMatrixMode(GL_MODELVIEW)
        glLoadIdentity()
        gluLookAt(e.x, e.y, e.z, t.x, t.y, t.z, u.x, u.y, u.z)


class Camera(BaseCamera):

    def rotate_target(self, delta):
        right = glm.normalize(glm.cross(self.target - self.eye, self.up))
        M = glm.mat4(1)
        M = glm.translate(M, self.eye)
        M = glm.rotate(M, delta.y, right)
        M = glm.rotate(M, delta.x, self.up)
        M = glm.translate(M, -self.eye)
        self.target = glm.vec3(M * glm.vec4(self.target, 1.0))

    def rotate_around_target(self, target, delta):
        right = glm.normalize(glm.cross(self.target - self.eye, self.up))
        ammount = (right * delta.y + self.up * delta.x)
        M = glm.mat4(1)
        M = glm.rotate(M, ammount.z, glm.vec3(0, 0, 1))
        M = glm.rotate(M, ammount.y, glm.vec3(0, 1, 0))
        M = glm.rotate(M, ammount.x, glm.vec3(1, 0, 0))
        self.eye = glm.vec3(M * glm.vec4(self.eye, 1.0))
        self.target = target
        self.up = self.original_up

    def rotate_around_origin(self, delta):
        return self.rotate_around_target(glm.vec3(0), delta)


class GlutController():

    FPS = 0
    ORBIT = 1

    def __init__(self, camera, velocity=100, velocity_wheel=100):
        self.velocity = velocity
        self.velocity_wheel = velocity_wheel
        self.camera = camera

    def glut_mouse(self, button, state, x, y):
        self.mouse_last_pos = vec2(x, y)
        self.mouse_down_pos = vec2(x, y)

        if button == GLUT_LEFT_BUTTON:
            self.mode = self.FPS
        elif button == GLUT_RIGHT_BUTTON:
            self.mode = self.ORBIT

    def glut_motion(self, x, y):
        pos = vec2(x, y)
        move = self.mouse_last_pos - pos
        self.mouse_last_pos = pos

        if self.mode == self.FPS:
            self.camera.rotate_target(move * 0.005)
        elif self.mode == self.ORBIT:
            self.camera.rotate_around_origin(move * 0.005)

    def glut_mouse_wheel(self, *args):
        self.camera.zoom(*args)


# -------- Miscelanea --------
def render_text(x, y, text):
    glColor3f(1, 1, 1)
    glRasterPos2f(x, y)
    glutBitmapString(GLUT_BITMAP_TIMES_ROMAN_24, text.encode("utf-8"))


def line(p0, p1, color=None):
    c = color or glm.vec3(1, 1, 1)
    glColor3f(c.x, c.y, c.z)
    glVertex3f(p0.x, p0.y, p0.z)
    glVertex3f(p1.x, p1.y, p1.z)


def grid(segment_count=10, spacing=1, yup=True):
    size = segment_count * spacing
    right = glm.vec3(1, 0, 0)
    forward = glm.vec3(0, 0, 1) if yup else glm.vec3(0, 1, 0)
    x_axis = right * size
    z_axis = forward * size

    i = -segment_count

    glBegin(GL_LINES)
    while i <= segment_count:
        p0 = -x_axis + forward * i * spacing
        p1 = x_axis + forward * i * spacing
        line(p0, p1)
        p0 = -z_axis + right * i * spacing
        p1 = z_axis + right * i * spacing
        line(p0, p1)
        i += 1
    glEnd()


def axis(size=1.0, yup=True):
    right = glm.vec3(1, 0, 0)
    forward = glm.vec3(0, 0, 1) if yup else glm.vec3(0, 1, 0)
    x_axis = right * size
    z_axis = forward * size
    y_axis = glm.cross(forward, right) * size
    glBegin(GL_LINES)
    line(x_axis, glm.vec3(0, 0, 0), glm.vec3(1, 0, 0))
    line(y_axis, glm.vec3(0, 0, 0), glm.vec3(0, 1, 0))
    line(z_axis, glm.vec3(0, 0, 0), glm.vec3(0, 0, 1))
    glEnd()


# -------- Mcve --------
class BaseWindow:

    def __init__(self, w, h):
        self.width = w
        self.height = h

        glutInit()
        glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH)
        glutInitWindowSize(w, h)
        glutCreateWindow('OpenGL Window')

        self._startup()

        glutReshapeFunc(self.reshape)
        glutDisplayFunc(self._display)
        glutMouseFunc(self.controller.glut_mouse)
        glutMotionFunc(self.controller.glut_motion)
        glutMouseWheelFunc(self.controller.glut_mouse_wheel)
        glutKeyboardFunc(self.keyboard_func)
        glutIdleFunc(self.idle_func)

    def keyboard_func(self, *args):
        try:
            key = args[0].decode("utf8")

            if key == "\x1b":
                glutLeaveMainLoop()

            if key in ['1']:
                if key == '1':
                    self.index_camera = "BPL"

                self.camera = self.cameras[self.index_camera]
                self.controller.camera = self.camera
        except Exception as e:
            import traceback
            traceback.print_exc()

    def display(self):
        pass

    def startup(self):
        pass

    def _startup(self):
        glEnable(GL_DEPTH_TEST)

        params = {
            "eye": glm.vec3(0, 150, 150),
            "target": glm.vec3(0, 0, 0),
            "up": glm.vec3(0, 1, 0)
        }
        self.start_time = time.time()
        self.cameras = {
            "BPL": Camera(**params)
        }
        self.index_camera = "BPL"
        self.yup = True
        self.camera = self.cameras[self.index_camera]
        self.model = glm.mat4(1)
        self.controller = GlutController(self.camera)
        glPolygonMode(GL_FRONT_AND_BACK, GL_LINE)

        self.startup()

    def run(self):
        glutMainLoop()

    def idle_func(self):
        glutPostRedisplay()

    def reshape(self, w, h):
        glViewport(0, 0, w, h)
        self.width = w
        self.height = h

    def render_points(self, vertices):
        glColor3f(0.0, 0.0, 0.0)
        glBegin(GL_POINTS)
        for v in vertices:
            glVertex3f(v.x, v.y, v.z)
        glEnd()

    def render_triangles(self, vertices):
        glBegin(GL_TRIANGLES)
        for i in range(0, len(vertices), 3):
            v0 = vertices[i]
            v1 = vertices[i + 1]
            v2 = vertices[i + 2]
            glVertex3f(v0.x, v0.y, v0.z)
            glVertex3f(v1.x, v1.y, v1.z)
            glVertex3f(v2.x, v2.y, v2.z)
        glEnd()

    def render_quads(self, vertices):
        glBegin(GL_QUADS)
        for i in range(0, len(vertices), 4):
            v0 = vertices[i]
            v1 = vertices[i + 1]
            v2 = vertices[i + 2]
            v3 = vertices[i + 3]
            glVertex3f(v0.x, v0.y, v0.z)
            glVertex3f(v1.x, v1.y, v1.z)
            glVertex3f(v2.x, v2.y, v2.z)
            glVertex3f(v3.x, v3.y, v3.z)
        glEnd()

    def render_indexed_triangles(self, indices, vertices):
        glBegin(GL_TRIANGLES)
        for i in indices:
            for j in range(3):
                v = vertices[i[j]]
                glVertex3f(v.x, v.y, v.z)
        glEnd()

    def render_indexed_quads(self, indices, vertices):
        glBegin(GL_QUADS)
        for f1, f2 in zip(indices[::2], indices[1::2]):
            i = [f1[0], f1[1], f1[2], f2[2]]
            for j in range(4):
                v = vertices[i[j]]
                glVertex3f(v.x, v.y, v.z)
        glEnd()

    def _display(self):
        self.camera.update(self.width / self.height)

        glClearColor(0.2, 0.3, 0.3, 1.0)
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

        self.camera.load_projection()
        self.camera.load_modelview()

        self.display()

        glLineWidth(5)
        axis(size=70, yup=True)
        glLineWidth(1)
        grid(segment_count=7, spacing=10, yup=True)

        glMatrixMode(GL_PROJECTION)
        glLoadIdentity()
        glOrtho(-1, 1, -1, 1, -1, 1)
        glMatrixMode(GL_MODELVIEW)
        glLoadIdentity()

        info = "\n".join([
            "{}: Camera - {}".format(i, k) for i, k in enumerate(self.cameras.keys())
        ])
        render_text(-1.0, 1.0 - 0.1, info)
        render_text(-1.0, -1.0, "{} camera is active".format(self.index_camera))

        glutSwapBuffers()

如果您想使用上面的代码，只需安装pyopengl和pygml。之后，您可以创建自己的BaseWindow子类，覆盖startup和render，您将拥有一个非常基本的glut窗口，该窗口具有简单的功能，例如相机旋转/缩放以及一些点/三角形/四边形和indexed_triangles / indexed_quads的渲染方法。

---

问题

现在是真正的问题，请考虑以下小片段：

mcve_torusknot.py

from math import cos
from math import pi
from math import sin

from OpenGL.GL import *
from OpenGL.GLU import *
from OpenGL.GLUT import *

from glm import cross
from glm import normalize
from glm import vec3
from mcve_framework import BaseWindow


def sample(theta, p, q, out):
    r = cos(q * theta) + 2.0
    out.x = r * cos(p * theta)
    out.y = r * sin(q * theta)
    out.z = -sin(q * theta)


def gen_torusknot(tess_u, tess_v, p, q):
    vertices = []
    pp = vec3()
    centerpoint = vec3()
    nextpoint = vec3()
    T = vec3()
    B = vec3()
    N = vec3()
    r2 = 5.0

    for u in range(tess_u):
        theta = (u / tess_u) * 2 * pi
        sample(theta, p, q, centerpoint)

        theta = (u + 1) * 2 * pi / tess_u
        sample(theta, p, q, nextpoint)

        T = (nextpoint - centerpoint)
        N = (nextpoint + centerpoint)
        B = normalize(cross(T, N))
        N = normalize(cross(B, T))

        for v in range(tess_v):
            theta = (v / tess_v) * 2 * pi
            pointx = sin(theta) * r2
            pointy = cos(theta) * r2
            pp = N * pointx + B * pointy + centerpoint
            vertices.append(pp * 10)

    return vertices


class McveTorusKnot(BaseWindow):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def startup(self):
        self.torusknot = gen_torusknot(60, 60, 1.000000001, 0.000000001)

    def display(self):
        glPointSize(3)
        glPushMatrix()
        self.render_points(self.torusknot)
        glPopMatrix()


if __name__ == '__main__':
    window = McveTorusKnot(800, 600)
    window.run()

这里的最终目标是弄清楚如何生成和渲染torus knots。但是在实现如此宏伟的目标之前，我想弄清楚为什么在使用p=1和q=0参数时，我没有像这里显示的https://www.geeks3d.com/20140516/pq-torus-knot/这样简单的圆环，而是我得到这样的东西：

是的，这基本上是我的问题，首先，我想知道我上面的代码有什么问题，所以我没有从general formula那里得到一个简单的圆环，之后……想知道创建网格连接性的方式是什么（又称索引，无论三角形/四边形/三角形带）？

注意：为了简便起见，在这一点上法线或纹理坐标均无关紧要，仅了解如何正确生成网格的位置顶点/索引就足够了：）

Answer 1

  

...首先，我想知道上面的代码有什么问题，所以我没有得到简单的圆环...

函数样本仅需在半径为r的圆上生成一个点：

def sample(theta, p, q, out):
    r = 5.0
    out.x = r * cos(theta)
    out.y = r * sin(theta)
    out.z = 0

切线（T）是从圆上当前点到下一个点（近似值）的向量，而切线（B）是从圆环的中心到圆点的向量圆上的当前点：

def gen_torusknot(tess_u, tess_v, p, q):
    vertices = []
    pp = vec3()
    centerpoint = vec3()
    nextpoint = vec3()
    T = vec3()
    B = vec3()
    N = vec3()
    r2 = 2.0

    for u in range(tess_u):
        theta = (u / tess_u) * 2 * pi
        sample(theta, p, q, centerpoint)

        theta = (u + 1) * 2 * pi / tess_u
        sample(theta, p, q, nextpoint)

        T = (nextpoint - centerpoint)
        B = normalize(centerpoint)
        N = normalize(cross(T, B))
        T = normalize(cross(B, N))

        for v in range(tess_v):
            theta = (v / tess_v) * 2 * pi
            pointx = sin(theta) * r2
            pointy = cos(theta) * r2
            pp = N * pointx + B * pointy + centerpoint
            vertices.append(pp * 10)

    return vertices

---

Torus knot的第一步是在geometrical representation上采样点，并在圆环中心的圆上采样点。
圆上的点可以用与游览上的点相同的方法来计算，只不过管的半径（r2）为0。

def sample(phi, p, q, r1, r2, out):
    out.x = (r1 + r2 * cos(p * phi)) * cos(q * phi)
    out.y = (r1 + r2 * cos(p * phi)) * sin(q * phi)
    out.z = r2 * -sin(p * phi)

def gen_torusknot(tess_u, tess_v, p, q):

    vertices = []
    pt_tk = vec3()
    pt_c = vec3()

    r1, r2 = 5, 2
    p, q = 7, 3

    for u in range(tess_u):
        phi = (u / tess_u) * 2 * pi
        sample(phi, p, q, r1, r2, pt_tk)

        sample(phi, p, q, r1, 0, pt_c)

        vertices.append(pt_tk * 10)
        vertices.append(pt_c * 10)

    return vertices

---

最后，切线（T）和双切线（B）的计算方法类似于圆环中的切线。
切线（T）是从圆环结上的当前点到圆环结上的下一个点（近似）的向量。切线（B）是从圆上的采样点到环结上的当前采样点的向量：

def sample(phi, p, q, r1, r2, out):
    out.x = (r1 + r2 * cos(p * phi)) * cos(q * phi)
    out.y = (r1 + r2 * cos(p * phi)) * sin(q * phi)
    out.z = r2 * -sin(p * phi)

def gen_torusknot(tess_u, tess_v, p, q):

    vertices = []
    pt_tk = vec3()
    pt_tk_next = vec3()
    pt_c = vec3()

    r1, r2, r3 = 5, 2, 0.5
    p, q = 7, 3

    for u in range(tess_u):
        phi = (u / tess_u) * 2 * pi
        sample(phi, p, q, r1, r2, pt_tk)

        phi = (u + 1) * 2 * pi / tess_u
        sample(phi, p, q, r1, r2, pt_tk_next)

        sample(phi, p, q, r1, 0, pt_c)

        T = (pt_tk_next - pt_tk)
        B = normalize(pt_tk - pt_c)
        N = normalize(cross(T, B))
        T = normalize(cross(B, N))

        for v in range(tess_v):
            theta = (v / tess_v) * 2 * pi
            px = sin(theta) * r3
            py = cos(theta) * r3
            pp = N * px + B * py + pt_tk
            vertices.append(pp * 10)

    return vertices

设置p = 3和q = 2将产生三叶结，而p = 0和q = 1将产生圆环。

---

我激活了多重采样，以生成上述图像。

glutInit()
glutSetOption( GLUT_MULTISAMPLE, 8 )
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH | GLUT_MULTISAMPLE) 

此外，我使用了一个函数，将范围为[0，1]的Hue值转换为RGB颜色

def HUEtoRGB(self, H):
    R = abs(H * 6.0 - 3.0) - 1.0
    G = 2.0 - abs(H * 6.0 - 2.0)
    B = 2.0 - abs(H * 6.0 - 4.0)
    return (R, G, B)

和以下绘制点的功能：

def render_points(self, vertices):
    glPointSize(5)
    glBegin(GL_POINTS)
    for i in range(len(vertices)):
        v = vertices[i]
        H = i / len(vertices)
        glColor4f(*self.HUEtoRGB(H), 0.0)
        glVertex3f(v.x, v.y, v.z)
    glEnd()

---

图元GL_TRIANLGL_STRIP可以生成网格而不是点。 tess_u *条带沿着结曲线绘制，每个条带由tess_v个部分组成（tess_v * 2个三角形）：

def render_strips(self, vertices, tess_v):
    glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)
    no_strips = len(vertices) // tess_v
    for i_strip in range(no_strips):
        glBegin(GL_TRIANGLE_STRIP)
        for i_v in range(tess_v+1):
            for i in [i_strip, (i_strip+1) % no_strips]:
                v, H = vertices[i*tess_v + i_v % tess_v], i / no_strips
                glColor4f(*self.HUEtoRGB(H), 0.0)
                glVertex3f(v.x, v.y, v.z)
        glEnd()

class McveTorusKnot(BaseWindow):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def startup(self):
        self.tess_v = 60
        self.torusknot = gen_torusknot(300, self.tess_v, 1.000000001, 0.000000001)

    def display(self):
        glPushMatrix()
        #self.render_points(self.torusknot)
        self.render_strips(self.torusknot, self.tess_v)
        glPopMatrix()

以下三叶结是通过使用以下参数绘制的：

r1, r2, r3 = 5, 2, 1
p, q = 3, 2