Is there a better way of finding the screen positions of the corners of a plane?

Help & Support
1

I’ve come up with the code below to find the screen positions of the corners of a plane.
It works, but it feels inefficient and long-winded.

In particular:

  1. line 10: creating a vec4 this way seems clunky
  2. line 37: “converting” from vec4 to vec3 this way feels clumsy, is there a direct conversion method available?
  3. applying the transform to each vertex in a loop, is there a way to apply a matrix to an array of vec4s?

Can anyone suggest any improvements?
TIA

let camera = this.camera.camera;

// get the mesh
let meshInstance = this.entity.render.meshInstances[0];
let mesh = meshInstance.mesh;
// get the vertex positions
let positions = [];
mesh.getPositions(positions);

let toWorldTransform = this.entity.getWorldTransform();
let screenPositions = [];

// temp Vec3 for re-use in loop
let t = new pc.Vec3();

for (let i = 0; i < positions.length; i += 3) {
    // create a vec4 from the position
    let v0 = new pc.Vec4(positions[i], positions[i + 1], positions[i + 2], 1);

    // apply the transfrom to "move" it world co-ords
    let worldPosition = toWorldTransform.transformVec4(v0);

    // pull back the vec3
    t.x = worldPosition.x; t.y = worldPosition.y; t.z = worldPosition.z;
    
    // get its screen space position
    let screenPosition = camera.worldToScreen(t);

    screenPositions.push(screenPosition);
}
2

This looks about right. Get the positions of all vertexes, convert them to world space and use the camera to convert to screen space.

You probably want https://developer.playcanvas.com/en/api/pc.Mat4.html#transformVector instead of transformVec4 so you don’t have to convert vec3 → vec4 → vec3.

1 Like
3

I found that transformVector doesn’t work as expected with Vec3, hence my use of Vec4.
My test case was transforming Vec3(0,0,0), which resulted in Vec3(0,0,0).
Whereas, Vec4(0,0,0,1) was transformed correctly.
This isn’t a bug is it? I think it’s intended for use with affine vectors.

4

I think you need transformPoint function.

5

Hah ha! That’s the kiddie!