Raycast/Pick ScreenCoordintates on VirtualPlane

Questions
1

Hello everyone,

I am currently moving an old project of mine from threejs to babylonjs and now need help to translate one of my old tricks into babylon:

I have a game board, that is just a virtual plane and translate screenYX to a PointXYZ on that plane with a trick: In ThreeJS the raycaster can find intersections with Geometries not just meshes (because i am currently under the opinion babylon can only pick actual meshes added to the scene). Also Planes in ThreeJS are infinite and the raycaster has a intersectPlane method.

So what i do to translate ScreenCoordinates to XYZ coordinates on that plane is just
creating that plane - but never add it as a mesh - and then use the raycaster to find the ScreenXY on that plane, like this:

this.plane = new THREE.Plane(new THREE.Vector3(0,0,1), 0);
x = ( x / this.container.clientWidth ) * 2 - 1;
y = - ( y / this.container.clientHeight ) * 2 + 1;
this.re.raycaster.setFromCamera(new THREE.Vector2(x, y), this.re.camera);
return this.re.raycaster.ray.intersectPlane(this.plane, new THREE.Vector3());

Sorry to annoy you with threeJS code, i just think i am confusing basic concepts of those two libraries and wanted to show how i dealt with this till now. After trying arround a few hours i think i need a completly different approach to this with babylon.

For example i do not understand the difference between plane and ground. Both are limited to a width and height.

When i add a plane or ground to a scene and do a scene.pick, it works as described. I get a pickInfo, there is a pickedPoint and i can do my game math with it. But:
How can i make that Plane/Ground infinite?
How can i make it invisible or virtual?

I found a infiniteDistance property, but when i add that to plane or ground it disappears from the scene completly and scene.pick acts like its not there.

Can you intersect geometries somehow without adding them with meshes to the scene?
Or is there a completly different technique in babylon to achieve this?

Regards

2

Do you think you really need infinite plane? Or it would be possible to have some limits?
Anyway, this article is great - Infinite Grassland: Ray Traced Rare Semi-Uniform Entity Manifolds for Rendering Countless Discreta | by Babylon.js | Medium

They just have different properties but visually may look the same.

ground.isVisible = false;

2 Likes
3

As it is a new year and I forgot about coding during the break here it is : https://playground.babylonjs.com/#RKEI59#2

As simple as Three and this is GC free to use every frame:

var plane = new BABYLON.Plane(0, 1, 0, 0);
    var ray = BABYLON.Ray.Zero();

    scene.onBeforeRenderObservable.add(() => {
        scene.createPickingRayToRef(scene.pointerX, scene.pointerY, BABYLON.Matrix.IdentityReadOnly, ray);
        var distance = ray.intersectsPlane(plane);
        if (distance) {
            var scaled = ray.direction.scaleToRef(distance, sphere.position);
            scaled.addInPlace(ray.origin);
        };
    });
3 Likes
4

Yes, thats pretty much it!

Thank you very much!

2 Likes