Drawing a trajectory

sergey_ch · June 5, 2021, 5:10pm

The task in the game is to throw the ball at the target. But I need to show the trajectory on which it will fly. There was an idea to launch an invisible object at a point, and save its coordinates, then insert sprites on them. But with a long range, there will be a long delay, because the object must reach the target and only then will the coordinates for the trajectory appear. If you know how to solve this problem, I will be glad to help!

Leonidas · June 5, 2021, 5:17pm

Hi @sergey_ch,

I see two ways to do this:

If you are using a trajectory that can be described with a math equation, run it against a number of points and find the projected positions.

Take a look at this library that can do that for you for a number of trajectories:

A more advanced way would be to run a second ammo physics instance that can consume your starting position/forces and you can step forward e.g. 1000 steps in a single frame. As it steps forward record each position, now you have your trajectory.

LeXXik · June 5, 2021, 8:16pm

Please, keep in mind that Ballistics will help you finding a needed impulse to apply on a ball for it to hit the target. It will not be useful in building a trajectory line. For that, I would go with @Leonidas second recommendation if it is physics based.

sergey_ch · June 5, 2021, 10:22pm

The second option is much more interesting) You can briefly tell us about the implementation algorithm. Can you recommend something to read or see an example of a solution?

Ketan_ATA · June 6, 2021, 3:50am

Hi @sergey_ch so you want to generate trajectory…

Not sure it will help or not but you can take a look at this as well… (Curved collision detection Project)
https://playcanvas.com/project/692652/overview/curved-collision-detection

Leonidas · June 6, 2021, 7:56am

Study how PlayCanvas initializes Ammo.js, and do something similar in your own class:

github.com

playcanvas/engine/blob/master/src/framework/components/rigid-body/system.js

import { now } from '../../../core/time.js';
import { ObjectPool } from '../../../core/object-pool.js';

import { Vec3 } from '../../../math/vec3.js';

import { Component } from '../component.js';
import { ComponentSystem } from '../system.js';

import { BODYFLAG_NORESPONSE_OBJECT } from './constants.js';
import { RigidBodyComponent } from './component.js';
import { RigidBodyComponentData } from './data.js';

var ammoRayStart, ammoRayEnd;

var collisions = {};
var frameCollisions = {};

/**
 * @class
 * @name RaycastResult

This file has been truncated. show original

Add all of your bodies, static and dynamic, that will somehow interact with the trajectory in your custom physics dynamic world.
Add the moment you require a trajectory, set the starting positions/rotations and forces/impulses/velocities to your bodies.
Step the simulation forward a sufficient number of steps e.g. 100 or 1000, here is how PlayCanvas does that:

github.com

playcanvas/engine/blob/master/src/framework/components/rigid-body/system.js#L750


    const kinematic = this._kinematic;
    for (i = 0, len = kinematic.length; i < len; i++) {
        kinematic[i]._updateKinematic();
    }
    // Step the physics simulation
    this.dynamicsWorld.stepSimulation(dt, this.maxSubSteps, this.fixedTimeStep);
    // Update the transforms of all entities referencing a dynamic body
    const dynamic = this._dynamic;
    for (i = 0, len = dynamic.length; i < len; i++) {
        dynamic[i]._updateDynamic();
    }
    if (!this.dynamicsWorld.setInternalTickCallback)
        this._checkForCollisions(Ammo.getPointer(this.dynamicsWorld), dt);
    // #if _PROFILER
    this._stats.physicsTime = now() - this._stats.physicsStart;
    // #endif
}

On each physics step updated record the position/rotation of your dynamic body. As soon as the loop finishes you will have in a list all the trajectory points.

LeXXik · June 6, 2021, 10:50am

Another option is to simply use the Newton’s second law and calculate the trajectory yourself. Here, I made an example. Instead of update(dt) method, you can make it as a method that returns you a position. You can then call it as many times as you need in a loop to get a series of positions that would comprise your trajectory:

https://playcanvas.com/project/802204/overview/ball-trajectory

Faisal · September 23, 2021, 8:25am

Hi everyone
Did you find any working solution of physics based actual path trajectory?
@sergey_ch @Leonidas @LeXXik

LeXXik · September 23, 2021, 9:22am

The example I made shows one way how to create such a trajectory. Does it not fit your case?

Faisal · September 23, 2021, 9:31am

Hi Lexxik
I am already using your ballistics library so I already know the start and end point of the trajectory as well as height but I want to show the use about the actual path that will be taken after the bounce.

LeXXik · September 23, 2021, 10:45am

I see. Right, in order to get the trajectory of a bounce, you will have to simulate the actual motion of the ball. This is not trivial, and I don’t have a ready made example for that, but I do use a similar method in other cases, which work pretty well. Here is an overview:

Create a temporary new dynamics world using a new Ammo instance.
Add and position your dynamic ball and static meshes it will bounce from to it.
Apply ball impulse/force.
Step your physics world enough and record ball’s position after each step.

At the end of the stepping loop you will get an array of ball’s positions that you can then use to create a trajectory from. The more steps you simulate, the longer it takes to record them, the longer the trajectory line will be. You can record 100-200 steps, which should give reasonable length and can be done within a single frame without significant cost on CPU (1 or 2 ms).

Edit:
Unless, I misunderstood what you mean by “bounce”. If you didn’t mean bouncing off surfaces after initial impulse, then my example above should be suitable for Ballistics.solveStatic() and Ballistics.solveMoving() methods. Simply use the same mass and gravity that you pass to Ballistics and it will compute the same trajectory (but without bouncing off surfaces).
If you use Ballistics.solveLateralStatic() or Ballistics.solveLateralMoving() then you need to adjust the gravity value by the Ballisitics gravity solution - just add or substract a result force value from your gravity and the trajectory should match.

Faiq_Laiq · March 30, 2022, 7:03pm

Hi LeXXik, how about doing it without physics?

Ketan_ATA · March 31, 2022, 12:56am

Hi @Faiq_Laiq ,

I did the same for one of my game without using physics.

I using this Camera following a path
Where object moves according to the path points.

And to represent a curve i used Bezier Curve according to path points.

Maybe it will help!

LeXXik · March 31, 2022, 9:36am

@Faiq_Laiq are you asking how to calculate the bounces of a ball without using a physics? If so, then you could inverse the linear velocity on the ground contact, which should give you a reflection angle and then calculate the new trajectory from there.

LeXXik · January 14, 2023, 2:54pm

Updated an example:
https://playcanvas.com/project/802204/overview/ball-trajectory-approximate

shows walls collision and how to reflect from them (simple approach)
uses a verlet integration with an implicit velocity
builds a trajectory line of the future path

Note: for the sake of keeping example simple, the trajectory line and actual path of the ball are not a perfect match. To make it a perfect match, you need to use a fixed timestep for both. However, when using fixed timestep, you need to also add extrapolation of positions to make the ball motion smooth on monitors with different refresh rates. That would make the example convoluted, so I skipped that.