solved Drawing Firing Arcs

[Kreeba]

I am building the GUI for my Bridge Sim. The end result will be something like the images below. The game is in 3D, but the weapons view is a locked camera on top.

Visually I would like it to look like the top image here, with a pulsing gradient texture. Functionally I would need to be able to set a 'forward' angle and then the beginning and ends of the arc (up to a full circle), then the arc would move with the gun/ship as it rotated.

I am guessing that it is best achieved in 3D, rather than 2D so I can use animated materials and textures. What is the best direction to go and how should I get started?

[jerome]

https://github.com/jbousquie/UserFunctions/blob/master/showAngleSector.js

https://www.babylonjs-playground.com/#FUK3S#7

with sectorType paramater equals 3

[Kreeba]

Thanks.

I don't think that will handle a firing arc more than 180 degrees? I would need to to generate up to a full circle.

[jerome]

why not ?

[Kreeba]

Because it uses the shortest angle between two axis to draw the arc.

[JohnK]

16 minutes ago, Kreeba said:

Because it uses the shortest angle between two axis to draw the arc.

The given example is calculating the angle from two given vectors and is designed to use the smallest angle. In your case it seems that you already know the angle and so it does not have to be calculated. Hence the example can be adapted, as a starting point, to meet your needs , you just pass the start vector and the angle rather than two vectors.

[Kreeba]

Thanks.

I worked something out: https://www.babylonjs-playground.com/#84JJ9K#6

[Kreeba]

I tried to complete the function to meet the same standards as the inbuilt ones by passing the 'scene' object in as the last parameter. It would crash the PG though. What am I doing wrong?

[JohnK]

Possibly because you had scene after a missing optional parameter. In this PG https://www.babylonjs-playground.com/#84JJ9K#7 you have to put in the centerAngle. If you want some parameters to be optional they must follow all the required parameters, see https://www.babylonjs-playground.com/#84JJ9K#8

[Kreeba]

OK. This might possibly need a maths genius.

How can I now check to see if an X/Z coordinate falls within the the arc?

[Kreeba]

I guess, if I ignore the arc and just treat it as a AABB style detection. See if the object is within the two angles of the detector object. Then check for min and max distances.

I hate maths:

http://nic-gamedev.blogspot.com/2011/11/using-vector-mathematics-and-bit-of.html

https://stackoverflow.com/questions/13652518/efficiently-find-points-inside-a-circle-sector

Too be honest I could use a little help converting this into something that will work with Babylon/pure JS. Also would need a Min/Mac distance check (he talks about this at the bottom)

[JohnK]

If you are happy with AABB detection use intersectMesh, you can always do a more refined check on top.

https://www.babylonjs-playground.com/#84JJ9K#9

lines 49 are the important ones.

[Kreeba]

Thanks. I need to do this without Babylon as it also has to run on the server for verification. The second link I posted looks the easiest. However my maths is nowhere good enough to think how it will work if the gun is parented to a moving ship, and the gun is fixed (so the firing arc will move).

 

 

[Kreeba]

Done it. that was HARD!

 

https://www.babylonjs-playground.com/#84JJ9K#10

[Kreeba]

Cleaned it up a little: https://www.babylonjs-playground.com/#84JJ9K#11

[JohnK]

Well done

[Kreeba]

OK this has absolutely stumped me.

I am trying to get it to work with y axis rotation (for when the ships are turning)........I applied a offsetAngle variable to the code, but it totally messes up when the radians flip from + to - 

Can anyone help with the best way to handle y axis rotation?

 

[sable]

This seemed interesting, so I had a play about with it.

https://www.babylonjs-playground.com/#P4IH5X#1

I'm not entirely sure if that's sort of what you were getting at or not, so let me know.

EDIT:

https://www.babylonjs-playground.com/#P4IH5X#2

Mistake in first pg when sphere not at origin, see lines 110 to 112 --> I'd translated an already translated point

[Kreeba]

Thanks sable, that looks exactly what I want. I will go through and try to understand it a little later.

[Kreeba]

Sable, could this be adapted so it didn't use the babylon line let distance = BABYLON.Vector3.Distance(point, center);?

Eventually I would like to also run this function server-side for verification, and wouldn't have access to the Babylon framework? This is why I did my own distance calculation using sqrt before.

 

[sable]

Yep, it can be done in the same way you were calculating distance before. The vector subtraction could also easily be done without babylonjs. 

[Kreeba]

Cheers. Is that the point.subtractToRef(center, _translatedPoint); line? This is some maths I have never seen before. What does it do?

[sable]

All that is doing is subtracting the center vector from the point vector and storing it in another vector called _translatedPoint.

Vector3.prototype.subtractToRef = function (otherVector, result) {
    result.x = this.x - otherVector.x;
    result.y = this.y - otherVector.y;
    result.z = this.z - otherVector.z;
    return this;
};

 

[Kreeba]

 I have begun ripping out source from Babylon as well.

[Kreeba]

Thanks for everyones help. I got them working fine with detection as well. Marked as solved