How to get the in-scene-width of the canvas?

Questions
,
1

I am making a custom arc rotate camera collision. For some situations, the camera still go inside the wall made player can see through it.
So far I am using only 1 ray from camera’s target to camera for detecting collision in every frame. I think it can be solved if I can get the width and height (not px, I mean meters in scene) of the viewport. Is that possible? How to get those values? I need it to create 4 rays corresponding to the 4 corners of the viewport.
True camera collision demo | Babylon.js Playground (babylonjs.com)

图片
图片930×880 27.8 KB

2

I’m not sure what you call “viewport” (is it the wall?).

Anyway, I think your problem is that you would need continous collision detection (CCD) if you don’t want to go through a wall whatever the speed of the object/camera. See for eg:

If you don’t want to use a physic engine for CCD, this may get you started:

3

Well, you didn’t get my idea… Maybe I shouldn’t call it viewport. Let me try explain it in another way.

First of all, the camera in the scene, it’s a point. But for the canvas in HTML document, it has width and height, so I can say it’s a plane. What I need, it the width and height of this “canvas-plane” in scene, not in pixels.
You can check my code in that playground link. It makes sure the line between camera point and its target won’t intersect with wall, with 1 ray for detection. But the “canvas-plane” may still intersect with wall. With the values I need, I can make it to prevent that with 4 rays.

4

Everything you see in the canvas is bounded by the camera frustum, whose planes (in 3D space) can be retrieved via scene.frustumPlanes. Maybe you can do what you want with these planes?

5

Thanks for the tip!

Now I have my next question. While the scene has only 1 camera, I saw 6 frustum planes by console.log in every frame, which one is the camera’s? What do those 6 planes mean?

6

All 6 planes define a frustum (a truncated pyramid) for the camera, which is the region of space that is visible on screen through this camera. This page may help you understand the concept:

1 Like
7

Well, I still don’t get how to use this for my problem… Now I have to estimate it from scene.getEngine().getScreenAspectRatio(), although it’s a dirty way but I have no choice

8

True camera collision demo | Babylon.js Playground (babylonjs.com)

10

True camera collision demo | Babylon.js Playground (babylonjs.com)
Fixed some bug, but still no idea on line 65

11

Why do you want to use the screen aspect ratio?

I now understand you want to do some character controller where the camera should not penetrate elements whithin the scene. So, you need to represent the camera by a (virtual) 3D object (a cylinder would be best I think, as you would not have to handle the orientation) and test collisions between this object and objects in the scene. In your code, rayLength would be the radius of the cylinder. You could create a few rays along the capsule, with varying directions.

To illustrate my point, I have added a cylinder to your scene that could represent the camera and drawn some directions:

You would place (virtually) the cylinder at the camera location and send rays to check for intersections.