WebGL Perspective Projection - webgl

I have a scene of a cube with vertices defined like so
const positions = [
-10.0, 10.0,
10.0, 10.0,
-10.0, -10.0,
10.0, -10.0
];
I'm trying to go from a field of view perspective matrix (not shown) to a specified rectangle perspective projection matrix defined like so
const n = 0.1;
const f = 100.0;
const l = -50;
const r = 50;
const t = 50;
const b = -50;
Float32Array([
(2*n/r-l), 0.0, 0.0, 0.0,
0.0, (2*n/t-b), 0.0, 0.0,
(r+l/r-l), (t+b/t-b), -(f+n/f-n), -1.0,
0.0, 0.0, -(2*f*n/f-n), 0.0
]);
I also have a model matrix that moves the box -6 units in the z index so that it's within the bounds of the near and far clip planes.
Am I right to assume that before transforming anything the coordinates I use to specify the box and perspective matrix are in the same space/frame of reference? Therefore the box should be dead center of the view?
The box renders with the field of view matrix, but not the matrix defined above.

The formulas are not exact. Try this (I have added parentheses only):
Float32Array([
(2*n)/(r-l), 0.0, 0.0, 0.0,
0.0, (2*n)/(t-b), 0.0, 0.0,
(r+l)/(r-l), (t+b)/(t-b), -(f+n)/(f-n), -1.0,
0.0, 0.0, -(2*f*n)/(f-n), 0.0
]);

Related

Metal Tessellation on subdivided quad

I am totally new to tessellation and relatively new to Metal API, and have been referring to this sample code https://developer.apple.com/library/archive/samplecode/MetalBasicTessellation/Introduction/Intro.html
I realise the max tessellation factor on iOS is 16, which is very low for my use case compared to 64 on OSX.
I suppose i'll need to apply tessellation on a quad that has been sub-divided to 4 by 4 smaller sections to begin with, so that after tessellation it will end up into something like one with a tessellation factor of 64?
So, i've changed the input control points to something like this
static const float controlPointPositionsQuad[] = {
-0.8, 0.8, 0.0, 1.0, // upper-left
0.0, 0.8, 0.0, 1.0, // upper-mid
0.0, 0.0, 0.0, 1.0, // mid-mid
-0.8, 0.0, 0.0, 1.0, // mid-left
-0.8, 0.0, 0.0, 1.0, // mid-left
0.0, 0.0, 0.0, 1.0, // mid-mid
0.0, -0.8, 0.0, 1.0, // lower-mid
-0.8, -0.8, 0.0, 1.0, // lower-left
0.0, 0.8, 0.0, 1.0, // upper-mid
0.8, 0.8, 0.0, 1.0, // upper-right
0.8, 0.0, 0.0, 1.0, // mid-right
0.0, 0.0, 0.0, 1.0, // mid-mid
0.0, 0.0, 0.0, 1.0, // mid-mid
0.8, 0.0, 0.0, 1.0, // mid-right
0.8, -0.8, 0.0, 1.0, // lower-right
0.0, -0.8, 0.0, 1.0, // lower-mid
};
and for the drawPatches i changed it to 16 instead of 4.
But the result is that it is only showing only the first 4 points (top left).
if i change the vertex layout stride to this:
vertexDescriptor.layouts[0].stride = 16*sizeof(float);
it is still showing the same.
I don't really know what i'm doing but what i'm going for is similar to tessellating a 3d mesh, but for my case is just a quad with subdivisions.
I am unable to find any tutorial / code samples that teach about this using Metal API.
Can someone please point me to the right direction? thanks!
Here are a few things to check:
Ensure that your tessellation factor compute kernel is generating inside/edge factors for all patches by dispatching a compute grid of the appropriate size.
When dispatching threadgroups to execute your tessellation factor kernel, use 1D threadgroup counts and sizes (such that the total thread count is the number of patches, and the heights of both sizes passed to the dispatch method are 1).
When drawing patches, the first parameter (numberOfPatchControlPoints) should equal the number of control points in each patch (3 for triangles; 4 for quads), and the third parameter should be the number of patches to draw.

Shearing SCNPlane with ARKit

I want to shear a SCNPlane like in the image below, but then on the Y-axis. So B and C are moved upwards instead of A and B to the right. I know there is a transform matrix needed to accomplish this, so I have tried to create this transform matrix like the code snippet below. But none of the possible options does give the desired result. Besides, the SCNPlane is rotated -90 around the X-axis. Maybe someone can show me what I'm doing wrong.
var transformMatrix = matrix_float4x4()
transformMatrix.columns.0 = [1.0, tan(60), 0.0, 0.0]
transformMatrix.columns.1 = [0.0, 1.0, 0.0, 0.0]
transformMatrix.columns.2 = [0.0, 0.0, 1.0, 0.0]
transformMatrix.columns.3 = [0.0, 0.0, 0.0, 1.0]
let newTransform = matrix_multiply(transformMatrix, simd_float4x4((transformPlane?.transform)!))
transformPlane?.simdTransform = newTransform
I got the transform matrix from the answer to this question (number 3).

ARKit nodes dissapear after sceneView.session.setWorldOrigin transformation

I have some code that is comprised of the delegate method for obtaining a heading, and a transformation. I take the heading and turn it into radians and use the angle to rotate around the y-axis:
┌ ┐
Y = | cos(ry) 0 sin(ry) 0 |
| 0 1 0 0 |
| -sin(ry) 0 cos(ry) 0 |
| 0 0 0 1 |
└ ┘
What are the first two columns in SCNMatrix4
code:
func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
print("received heading: \(String(describing: newHeading))")
self.currentHeading = newHeading
print("\(Float(currentHeading.trueHeading)) or for magneticHeading: \(currentHeading.magneticHeading)")
let headingInRadians = degreesToRadians(deg: Float(currentHeading.trueHeading))
print("\(headingInRadians) -------- headingInRadians")
var m = matrix_float4x4()
m.columns.3 = [0.0, 0.0, 0.0, 1.0]
m.columns.2 = [sin(headingInRadians), 0.0, cos(headingInRadians), 0.0]
m.columns.1 = [0.0, 1.0, 0.0, 0.0]
m.columns.0 = [cos(headingInRadians), 0.0, -sin(headingInRadians), 0.0]
sceneView.session.setWorldOrigin(relativeTransform: m)
}
It is removing all the nodes when I call setWorldOrigin. I have tried pausing the session, running the function, and then starting the session again, and I get this weird wonky low fps, low light situation. I know it is the function call to setWorldOrigin because when I remove it I see the nodes and they persist.
UPDATE
Ive been working on this...I am debugging by simply trying to change the scale by 2...all I should see happen is the nodes I have placed in a grid should spread out...however I am still getting the same result. After trying to setWorldOrigin the nodes are removed. Does using this function reset something? Is there a special place I am supposed to use it? (some delegate function)?
UPDATE
print("\(sceneView.scene.rootNode) --- rootNode in renderer") produces:
<SCNNode: 0x1c01f8100 | 111 children> --- rootNode in renderer
So it appears that the rootNode and its children are still somewhere...but where are they going with such a simple and small transformation?
UPDATE
print("\(sceneView.scene.rootNode.position) --- rootNode in renderer") produces:
SCNVector3(x: 0.0, y: 0.0, z: 0.0) --- rootNode in renderer
Yet...I see none of the children...so the rootNode appears to be somewhere else.
UPDATE
I can confirm that the transform is not happening...the positioning of the childnodes (that I can't see) is still the same as its original state (a node every 2 grid blocks (meters) i.e.:
SCNVector3(x: 6.0, y: 0.0, z: -4.0) --- rootNode child node
SCNVector3(x: 6.0, y: 0.0, z: -2.0) --- rootNode child node
UPDATE
The narrowest view of this problem I have now is that even a simple rotate removes the nodes from view...since there is no position change...this means that something is going on with the rendering process I believe.
func viewDidLoad() {
...
sceneView.scene = scene
view.addSubview(sceneView)
let angle = coordinateConverter.getUprightMKMapCameraHeading()
print("\(angle) --- angle")
mRotate = matrix_float4x4()
mRotate.columns.3 = [0.0, 0.0, 0.0, 1.0]
mRotate.columns.2 = [Float(sin(angle)), 0.0, Float(cos(angle)), 0.0]
mRotate.columns.1 = [0.0, 0.0, 0.0, 0.0]
mRotate.columns.0 = [Float(cos(angle)), 0.0, Float(-sin(angle)), 0.0]
sceneView.session.setWorldOrigin(relativeTransform: mRotate)
console output:
281.689248803283 --- angle
Still, the virtual objects remain invisible, but placed at the origin...which should still be the same.
I also should note that the standard 1,1,1,1 transform DOES work...but obviously, it does nothing...but I guess just using the function doesn't make them disappear...they only disappear if your transform actually does something...
...
var identity = matrix_float4x4()
identity.columns.3 = [0.0, 0.0, 0.0, 1.0]
identity.columns.2 = [0.0, 0.0, 1.0, 0.0]
identity.columns.1 = [0.0, 1.0, 0.0, 0.0]
identity.columns.0 = [1.0, 0.0, 0.0, 0.0]
sceneView.session.setWorldOrigin(relativeTransform: identity)
...
The above transforms nothing...and the nodes remain in view.
If I change the matrix to this (translate by 10,10):
var identity = matrix_float4x4()
identity.columns.3 = [10.0, 0.0, 10.0, 1.0]
identity.columns.2 = [0.0, 0.0, 1.0, 0.0]
identity.columns.1 = [0.0, 1.0, 0.0, 0.0]
identity.columns.0 = [1.0, 0.0, 0.0, 0.0]
It works...
I'm just thinking... do I have to scale my world down (real-world MKMapKit coordinates/unit) maybe because the hardware can't handle a world that is scaled. Also, from the above test...I think I realized that the origin moves when you use this function, but the nodes do not, so If I want the nodes to remain at my position after the transform...and I need to transform them back. Still, the result is the same:
print("\(transformerFromPDFToMk.tx) -- tx")
print("\(transformerFromPDFToMk.ty) -- ty")
m = matrix_float4x4()
m.columns.3 = [Float(transformerFromPDFToMk.tx), 0.0, Float(transformerFromPDFToMk.ty), 1.0]
m.columns.2 = [0.0, 0.0, 1.0, 0.0]
m.columns.1 = [0.0, 1.0, 0.0, 0.0]
m.columns.0 = [1.0, 0.0, 0.0, 0.0]
sceneView.session.setWorldOrigin(relativeTransform: m)
for node in scene.rootNode.childNodes {
node.position = SCNVector3Make(-Float(transformerFromPDFToMk.tx) + node.position.x, node.position.y, Float(transformerFromPDFToMk.ty) + node.position.z)
}
console output:
81145547.3824476 -- tx
99399579.5362287 -- ty
UPDATE
I SEE MY OBJECTS (kind of)! I thought I had tried this before...but its working a little better now -
the code package I used defined a scale (coordinateConverter.unitSizeInMeters)...and I was converting to it improperly. But...they are flickering in and out rapidly...
m = matrix_float4x4()
m.columns.3 = [Float(transformerFromPDFToMk.tx) / Float(coordinateConverter.unitSizeInMeters), 0.0, Float(transformerFromPDFToMk.ty) / Float(coordinateConverter.unitSizeInMeters), 1.0]
m.columns.2 = [0.0, 0.0, 1.0, 0.0]
m.columns.1 = [0.0, 1.0, 0.0, 0.0]
m.columns.0 = [1.0, 0.0, 0.0, 0.0]
sceneView.session.setWorldOrigin(relativeTransform: m)
sceneView.session.setWorldOrigin(relativeTransform: m)
for node in scene.rootNode.childNodes {
node.position = SCNVector3Make(-Float(transformerFromPDFToMk.tx) /
Float(coordinateConverter.unitSizeInMeters) + node.position.x /
Float(coordinateConverter.unitSizeInMeters), node.position.y /
Float(coordinateConverter.unitSizeInMeters), -
Float(transformerFromPDFToMk.ty) /
Float(coordinateConverter.unitSizeInMeters) + node.position.z /
Float(coordinateConverter.unitSizeInMeters))
}
UPDATE
Is the flickering "z-fighting"? https://en.wikipedia.org/wiki/Z-fighting
After resolving the scaling issues, I reduced the size of the world (scale) and put the objects a little further apart from each other (to fix the flickering/"z-fighting") - wikipedia's page was very helpful, I'm pretty sure all I needed to do was reduce the world size.
Hey After looking through your code, I noticed that you have the 4x4 matrix set up wrong for a rotation around the y-axis.
You currently have.
var m = matrix_float4x4()
m.columns.3 = [0.0, 0.0, 0.0, 1.0]
m.columns.2 = [sin(headingInRadians), 0.0, cos(headingInRadians), 0.0]
m.columns.1 = [0.0, 1.0, 0.0, 0.0]
m.columns.0 = [cos(headingInRadians), 0.0, -sin(headingInRadians), 0.0]
The correct format is below based on the exchange:
https://math.stackexchange.com/questions/72014/given-an-angle-in-radians-how-could-i-calculate-a-4x4-rotation-matrix-about-the
var m = matrix_float4x4()
m.columns.3 = [0.0, 0.0, 0.0, 1.0]
m.columns.2 = [-sin(headingInRadians), 0.0, cos(headingInRadians), 0.0]
m.columns.1 = [0.0, 1.0, 0.0, 0.0]
m.columns.0 = [cos(headingInRadians), 0.0, sin(headingInRadians), 0.0]
This should make it work for you.
Depending on what you want to do with your scene I recommend taking the difference between the current heading and previous heading and using that as your angle. This should theoretically have it so that the scene is always facing the same direction for you.

WebGl rotation matrix

I have this very simple rotation program in Webgl to get some understanding of rotation matrix.
http://poly.byethost18.com/pyra1.htm
As you can see the object doesn't turn around actually.
The code for the vertex shader is here:
float angle = radians( theta );
float c = cos( angle );
float s = sin( angle );
mat4 ry = mat4( c, 0.0, -s, 0.0,
0.0, 1.0, 0.0, 0.0,
s, 0.0, c, 0.0,
0.0, 0.0, 0.0, 1.0 );
gl_Position = ry * vPosition;
I guess it's a kinda regular beginners stuff but what could be the cause?
Needed to add
gl.enable(gl.DEPTH_TEST);

Pixel to Vertex coordinate during off-screen rendering

I'm drawing a set of triangles filled with plain color to off-screen texture.
My problem is that I get too big triangles in a result image, it looks like this:
My vertex coordinates are in pixels. (I simply generate them as a random float in (0, outTexture.width/height)). I do not multiply them by any projection in my vertex function (maybe that is my mistake?)
So my question is how does vertex coordinates correlate with pixel coordinate?
The solution was to make ortho projection and pass it as a uniform.
Here is the code that worked for me:
func makeOrthographicMatrix(left: Float, right: Float, bottom: Float, top: Float, near: Float, far: Float) -> [Float] {
let ral = right + left
let rsl = right - left
let tab = top + bottom
let tsb = top - bottom
let fan = far + near
let fsn = far - near
return [2.0 / rsl, 0.0, 0.0, 0.0,
0.0, 2.0 / tsb, 0.0, 0.0,
0.0, 0.0, -2.0 / fsn, 0.0,
-ral / rsl, -tab / tsb, -fan / fsn, 1.0]
}
And I called that like so :
var projection = makeOrthographicMatrix(0.0, right: Float(inTexture.width), bottom: 0.0, top: Float(inTexture.height), near: -1.0, far: 1.0)

Resources