具有SceneKit线原始类型的笔画宽度 [英] Stroke Width with a SceneKit line primitive type

问题描述

我正在尝试复制此立方体图像形状（获得是一个示例项目。

解决方案

SceneKit不为此提供控制。但是，SceneKit使用OpenGL ES进行绘制。

当您在 GL_LINES 模式下使用GL绘图时， glLineWidth 调用会更改线宽。 （注意：参数是实际像素，而不是UI布局点，因此如果你不想在Retina显示屏上使用超薄细线，你需要比你想象的更大的宽度。）

那么，你在SceneKit应用程序中将其称为何处？你有几个选择。在像你这样的简单场景中，你只渲染一件东西，你可以在场景渲染之前设置它。设置委托为您的观点，然后实施 renderer：willRenderSceneAtTime： 并调用 glLineWidth 那里。

然而，OpenGL线渲染非常有限 - 如果你想更多地自定义渲染，你需要一个不同的方法。哪种方法效果最好取决于您的具体目标，所以这里有一些想法供你研究：

• 让你的来自窄三角形条带的线条


• 使用原始SCN几何形状（如方框和圆柱体）制作它们


• 保留简单的立方体几何体，但使用片段着色器（或着色器修改器片段）仅在每个多边形的边缘附近绘制

I am trying to replicate this cube image shape (with permission from the original creator) using scene kit.

Thus far, I have the drawing code for the lines and the vertices. I cannot use an image because the background has to be transparent.

The specific I am trying to solve right now is how to edit the stroke width for the SCNGeometryPrimitiveType.Line element.

The basic way I am creating lines is like this:

private func squareVertices(length: Float) -> [SCNVector3] {
    let m = length/Float(2)

    let topLeft =       SCNVector3Make(-m-q,  m+q, m+q)
    let topRight =      SCNVector3Make( m+q,  m+q, m+q)
    let bottomLeft =    SCNVector3Make(-m-q, -m-q, m+q)
    let bottomRight =   SCNVector3Make( m+q, -m-q, m+q)

    return [topLeft, topRight, bottomLeft, bottomRight]
}

private func cubeFace() -> SCNGeometry {

    let vertices : [SCNVector3] = squareVertices(l)
    let geoSrc = SCNGeometrySource(vertices: UnsafePointer<SCNVector3>(vertices), count: vertices.count)

    // index buffer
    let idx1 : [Int32] = [0, 3]
    let data1 = NSData(bytes: idx1, length: (sizeof(Int32) * idx1.count))
    let geoElements1 = SCNGeometryElement(data: data1, primitiveType: SCNGeometryPrimitiveType.Line, primitiveCount: idx1.count, bytesPerIndex: sizeof(Int32))

    let idx2 : [Int32] = [1, 2]
    let data2 = NSData(bytes: idx2, length: (sizeof(Int32) * idx2.count))
    let geoElements2 = SCNGeometryElement(data: data2, primitiveType: SCNGeometryPrimitiveType.Line, primitiveCount: idx2.count, bytesPerIndex: sizeof(Int32))

    let geo = SCNGeometry(sources: [geoSrc], elements: [geoElements1, geoElements2])

    return geo
}

    private func setupFaceNodes() {
    // sides
    for i in 0..<4 {
        let face = SCNNode(geometry: cubeFace())
        face.rotation = SCNVector4Make(0, 1, 0, Float(i) * Float(M_PI_2))
        rootNode.addChildNode(face)
    }
    // top/bottom
    for i in [1, 3] {
        let face = SCNNode(geometry: cubeFace())
        face.rotation = SCNVector4Make(1, 0, 0, Float(i) * Float(M_PI_2))
        rootNode.addChildNode(face)
    }
}

I have something that looks like this with the correct overall shape:

but I can't figure out how to increase the width of the lines being drawn using SceneKit. How can I achieve this?

For those interested, here is a sample proj.

解决方案

SceneKit doesn't provide controls for this. However, SceneKit draws using OpenGL ES, which does.

When you're drawing with GL in the GL_LINES mode, the glLineWidth call changes the line width. (Watch out: the argument is in actual pixels, not UI-layout points, so you'll need a larger width than you might think if you don't want super-thin hairlines on a Retina display.)

So, where do you call that in your SceneKit app? You have a few options there. In a simple scene like yours, where you're only rendering one thing, you can just set it before the scene renders. Set a delegate for your view, then implement renderer:willRenderSceneAtTime: and call glLineWidth there.

However, OpenGL line rendering is pretty limited — if you want to customize rendering more, you'll need a different approach. Just which approach works best depends on exactly what you're going for, so here are a few ideas for you to research:

• Make your "lines" from narrow triangle strips
• Make them from primitive SCN geometries like boxes and cylinders
• Keep a simple cube geometry, but use a fragment shader (or shader modifier snippet) to draw only near the edges of each polygon

这篇关于具有SceneKit线原始类型的笔画宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！