How to Draw a Line Between Two Points in Scenekit

SceneKit – Drawing a line between two points

There are lots of ways to do this.

As noted, your custom geometry approach has some disadvantages. You should be able to correct the problem of it being invisible from one side by giving its material the doubleSided property. You still may have issues with it being two-dimensional, though.

You could also modify your custom geometry to include more triangles, so you get a tube shape with three or more sides instead of a flat rectangle. Or just have two points in your geometry source, and use the SCNGeometryPrimitiveTypeLine geometry element type to have Scene Kit draw a line segment between them. (Though you won't get as much flexibility in rendering styles with line drawing as with shaded polygons.)

You can also use the SCNCylinder approach you mentioned (or any of the other built-in primitive shapes). Remember that geometries are defined in their own local (aka Model) coordinate space, which Scene Kit interprets relative to the coordinate space defined by a node. In other words, you can define a cylinder (or box or capsule or plane or whatever) that's 1.0 units wide in all dimensions, then use the rotation/scale/position or transform of the SCNNode containing that geometry to make it long, thin, and stretching between the two points you want. (Also note that since your line is going to be pretty thin, you can reduce the segmentCounts of whichever built-in geometry you're using, because that much detail won't be visible.)

Yet another option is the SCNShape class that lets you create an extruded 3D object from a 2D Bézier path. Working out the right transform to get a plane connecting two arbitrary points sounds like some fun math, but once you do it you could easily connect your points with any shape of line you choose.

Draw SceneKit object between two points

Both solutions mentioned above work very well and I can contribute third solution to this question.

//extension code starts

func normalizeVector(_ iv: SCNVector3) -> SCNVector3 {
let length = sqrt(iv.x * iv.x + iv.y * iv.y + iv.z * iv.z)
if length == 0 {
return SCNVector3(0.0, 0.0, 0.0)
}

return SCNVector3( iv.x / length, iv.y / length, iv.z / length)

}

extension SCNNode {

func buildLineInTwoPointsWithRotation(from startPoint: SCNVector3,
to endPoint: SCNVector3,
radius: CGFloat,
color: UIColor) -> SCNNode {
let w = SCNVector3(x: endPoint.x-startPoint.x,
y: endPoint.y-startPoint.y,
z: endPoint.z-startPoint.z)
let l = CGFloat(sqrt(w.x * w.x + w.y * w.y + w.z * w.z))

if l == 0.0 {
// two points together.
let sphere = SCNSphere(radius: radius)
sphere.firstMaterial?.diffuse.contents = color
self.geometry = sphere
self.position = startPoint
return self

}

let cyl = SCNCylinder(radius: radius, height: l)
cyl.firstMaterial?.diffuse.contents = color

self.geometry = cyl

//original vector of cylinder above 0,0,0
let ov = SCNVector3(0, l/2.0,0)
//target vector, in new coordination
let nv = SCNVector3((endPoint.x - startPoint.x)/2.0, (endPoint.y - startPoint.y)/2.0,
(endPoint.z-startPoint.z)/2.0)

// axis between two vector
let av = SCNVector3( (ov.x + nv.x)/2.0, (ov.y+nv.y)/2.0, (ov.z+nv.z)/2.0)

//normalized axis vector
let av_normalized = normalizeVector(av)
let q0 = Float(0.0) //cos(angel/2), angle is always 180 or M_PI
let q1 = Float(av_normalized.x) // x' * sin(angle/2)
let q2 = Float(av_normalized.y) // y' * sin(angle/2)
let q3 = Float(av_normalized.z) // z' * sin(angle/2)

let r_m11 = q0 * q0 + q1 * q1 - q2 * q2 - q3 * q3
let r_m12 = 2 * q1 * q2 + 2 * q0 * q3
let r_m13 = 2 * q1 * q3 - 2 * q0 * q2
let r_m21 = 2 * q1 * q2 - 2 * q0 * q3
let r_m22 = q0 * q0 - q1 * q1 + q2 * q2 - q3 * q3
let r_m23 = 2 * q2 * q3 + 2 * q0 * q1
let r_m31 = 2 * q1 * q3 + 2 * q0 * q2
let r_m32 = 2 * q2 * q3 - 2 * q0 * q1
let r_m33 = q0 * q0 - q1 * q1 - q2 * q2 + q3 * q3

self.transform.m11 = r_m11
self.transform.m12 = r_m12
self.transform.m13 = r_m13
self.transform.m14 = 0.0

self.transform.m21 = r_m21
self.transform.m22 = r_m22
self.transform.m23 = r_m23
self.transform.m24 = 0.0

self.transform.m31 = r_m31
self.transform.m32 = r_m32
self.transform.m33 = r_m33
self.transform.m34 = 0.0

self.transform.m41 = (startPoint.x + endPoint.x) / 2.0
self.transform.m42 = (startPoint.y + endPoint.y) / 2.0
self.transform.m43 = (startPoint.z + endPoint.z) / 2.0
self.transform.m44 = 1.0
return self
}
}

//extension ended.

//in your code, you can like this.
let twoPointsNode1 = SCNNode()
scene.rootNode.addChildNode(twoPointsNode1.buildLineInTwoPointsWithRotation(
from: SCNVector3(1,-1,3), to: SCNVector3( 7,11,7), radius: 0.2, color: .cyan))
//end

you can reference http://danceswithcode.net/engineeringnotes/quaternions/quaternions.html

BTW, you will get same result when you use a cylinder to make a line between two points from above 3 methods. But indeed, they will have different normal lines. In another words, if you use box between two points, sides of box, except top and bottom, will face different direction from above 3 methods.

let me know pls if you need further explanation.

How to draw tens of thousands of lines in SceneKit?

The method described in your referenceed answer is correct, you just have not create SCNGeometrySource/SCNGeometryElement/SCNNode for each line, just fill the arrays:

SCNVector3 positions[] = {
SCNVector3Make(0.0, 0.0, 0.0), // line1 begin [0]
SCNVector3Make(10.0, 10.0, 10.0), // line1 end [1]
SCNVector3Make(5.0, 10.0, 10.0), // line2 begin [2]
SCNVector3Make(10.0, 5.0, 10.0) // line2 end [3]
};

int indices[] = {0, 1, 2, 3};
// ^^^^ ^^^^
// 1st 2nd
// line line

And then create geometry source from NSData with stride:

NSData *data = [NSData dataWithBytes:positions length:sizeof(positions)];

SCNGeometrySource *vertexSource = [SCNGeometrySource geometrySourceWithData:data
semantic:SCNGeometrySourceSemanticVertex
vectorCount:POSITION_COUNT
floatComponents:YES
componentsPerVector:3 // x, y, z
bytesPerComponent:sizeof(CGFloat) // size of x/y/z/ component of SCNVector3
dataOffset:0
dataStride:sizeof(SCNVector3)*2]; // offset in buffer to the next line positions

If you have 10000 lines, then your positions buffer will be 2*3*10000*8 = 480KB, and indices 2*10000*4 = 80KB, which is really not much for GPU.

You can even further reduce buffers if you can reduce length of indices and/or positions. For example, if all your coordinates is integers in range -127..128 then passing floatComponent:NO, bytesPerComponent:1 would reduce positions buffer to 60KB).

Of course, this is applicible if all of your lines have same material properties. Otherwise, you have to group all lines with same properties in SCNGeometrySource/SCNGeometryElement/SCNNode.

SceneKit Object between two points

I've good news for you ! You can link two points and put a SCNNode on this Vector !

Take this and enjoy drawing line between two points !

class   CylinderLine: SCNNode
{
init( parent: SCNNode,//Needed to line to your scene
v1: SCNVector3,//Source
v2: SCNVector3,//Destination
radius: CGFloat,// Radius of the cylinder
radSegmentCount: Int, // Number of faces of the cylinder
color: UIColor )// Color of the cylinder
{
super.init()

//Calcul the height of our line
let height = v1.distance(v2)

//set position to v1 coordonate
position = v1

//Create the second node to draw direction vector
let nodeV2 = SCNNode()

//define his position
nodeV2.position = v2
//add it to parent
parent.addChildNode(nodeV2)

//Align Z axis
let zAlign = SCNNode()
zAlign.eulerAngles.x = CGFloat(M_PI_2)

//create our cylinder
let cyl = SCNCylinder(radius: radius, height: CGFloat(height))
cyl.radialSegmentCount = radSegmentCount
cyl.firstMaterial?.diffuse.contents = color

//Create node with cylinder
let nodeCyl = SCNNode(geometry: cyl )
nodeCyl.position.y = CGFloat(-height/2)
zAlign.addChildNode(nodeCyl)

//Add it to child
addChildNode(zAlign)

//set constraint direction to our vector
constraints = [SCNLookAtConstraint(target: nodeV2)]
}

override init() {
super.init()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}

private extension SCNVector3{
func distance(receiver:SCNVector3) -> Float{
let xd = receiver.x - self.x
let yd = receiver.y - self.y
let zd = receiver.z - self.z
let distance = Float(sqrt(xd * xd + yd * yd + zd * zd))

if (distance < 0){
return (distance * -1)
} else {
return (distance)
}
}
}

How to draw dashed line in ARKit (SceneKit) like in the Measure app?

Probably not the most professional solution, but I started with a very similar approach. And then added the dashed-style like follows.

First I created an image that is half white, half transparent, to create the dashed-style

Then used it in the material of the SCNCylinder:

material.diffuse.contents = UIImage(named: "line")!
material.diffuse.wrapS = .repeat
material.diffuse.wrapT = .repeat
material.isDoubleSided = true // Not sure if this is really needed here^

Next I scaled it accordingly, to repeat it (make it as fine) as I want it:

material.diffuse.contentsTransform = SCNMatrix4MakeScale(width * repeatCountPerMeter, height * repeatCountPerMeter, 1)

As I used a white image, I can "tint" it in any color I want:

material.multiply.contents = UIColor.green

To make it look more "2D like", ignore the lighting, using:

material.lighting = .constant

Additionally (as my Cylinder is rotated by 90°) I had to rotate the material as well:

let rotation = SCNMatrix4MakeRotation(.pi / 2, 0, 0, 1)
material.diffuse.contentsTransform = SCNMatrix4Mult(rotation, material.diffuse.contentsTransform)

And whenever the line gets resized, update its SCNMatrix4MakeScale accordingly (see width and heightabove, where forheight` I just put the diameter (2*r)).

Draw a line with SceneKit using Swift on iOS: line drawn but not visible?

I haven't had a chance to debug the code live, but most likely these lines are your problem:

let vertexData = NSData(bytes: &positions, length: positions.count)
// ...
let indexData = NSData(bytes: &indicies, length: indicies.count)

The length of your data is the number of entries times the size (in bytes) of each entry. Each element in positions is a SCNVector3, which is three Floats on iOS, so each position is 3 * sizeof(Float) or 12 bytes. Each element in indicies (sic) is a CInt, which I believe is a 32-bit integer. So your data buffers are much shorter than your SCNGeometrySource and SCNGeometryElement constructors claim they should be, which means that at render time SceneKit is asking OpenGL to take a long walk draw off a short pier buffer.

Generally, if you're constructing an NSData from an array, you want the length parameter to be the array count times the sizeof the array's element type.



Related Topics



Leave a reply



Submit