[SOLVED] How to make a simple circle line (not shaded)?

What’s up guys,
I was trying to create a simple circle line with playcanvas but I didn’t find anything, someone would have a suggestion.

I need to draw the line just for help when doing Ray Casting.

The only way is me calculating the arc with the Bézier Curve algorithm ?
If the answer is yes then it is very sad.

I was only able to find the renderLine and the renderLines
URL: https://developer.playcanvas.com/en/api/pc.Application.html#renderLine

Answer: url

Functional code: url

you could render a circle using lines. I have this code which renders a sphere using 3 circles … perhaps extract a single circle from it.

        addSphere: function (center, radius, numSegments, color, duration, options, id) {
            duration = duration || 0;

            var points = [];
            var colors = [];

            var step = 2 * Math.PI / numSegments;
            var angle = 0, i;
            for (i = 0; i < numSegments; i++) {
                var sin0 = Math.sin(angle);
                var cos0 = Math.cos(angle);
                angle += step;
                var sin1 = Math.sin(angle);
                var cos1 = Math.cos(angle);

                points.push(
                    new pc.Vec3(center.x + radius * sin0, center.y, center.z + radius * cos0), new pc.Vec3(center.x + radius * sin1, center.y, center.z + radius * cos1),
                    new pc.Vec3(center.x + radius * sin0, center.y + radius * cos0, center.z), new pc.Vec3(center.x + radius * sin1, center.y + radius * cos1, center.z),
                    new pc.Vec3(center.x, center.y + radius * sin0, center.z + radius * cos0), new pc.Vec3(center.x, center.y + radius * sin1, center.z + radius * cos1)
                );

                colors.push(color, color, color, color, color, color);
            }
            lines.push(new DebugLine(points, colors, _currentTime + duration, id, options));
        },

3 Likes

Thanks for the quick response, I will test your implementation.

A suggestion for PlayCanvas Add a renderCircle or renderArc to pc.Application

This code worked very well Thank you very much @mvaligursky .

var Line = pc.createScript('line');

Line.prototype.update = function(dt) {
  var center = new pc.Vec4();
  var color = pc.Color.RED;
  var radius = 10;
  var numSegments = 100;
  this.renderArc(center, radius, numSegments, color);
};

Line.prototype.renderArc = function (center, radius, numSegments, color) {
  var points = [];
  var colors = [];

  var step = 2 * Math.PI / numSegments;
  var angle = 0, i;
  for (i = 0; i < numSegments; i++) {
      var sin0 = Math.sin(angle);
      var cos0 = Math.cos(angle);
      angle += step;
      var sin1 = Math.sin(angle);
      var cos1 = Math.cos(angle);

      points.push(new pc.Vec3(center.x + radius * sin0, center.y, center.z + radius * cos0), new pc.Vec3(center.x + radius * sin1, center.y, center.z + radius * cos1));

      colors.push(color, color);
  }
  this.app.renderLines(points, colors);
};

1 Like

We’re planning to add more comprehensive debug primitive for rendering - such as circles, boxes, sphere and similar. Definitely something requested and needed a lot.

5 Likes

:heart:

Hi excellent code! I have a question tho.
how do I force this to always be aligned to the camera ?
I know i can draw orbits and what not, but is there a way this would always face the camera?