How to build interactive, 3D graphs in javascript

Question

I am building an interactive sports-graphics website and I recently came across this great 3D baseball vis tool and I am very curious how to make something like this. In particular, I would like to build a similar tool for basketball (that shows shot trajectories).

I don't think stackoverflow is the best place to post this, but I'm not sure where else to ask. Feel free to point me in the right direction, or if the post is okay, I'm happy to hear people's thoughts on how to build a tool like this.

Thanks in advance!!

Edit: for those curious / interested in these types of graphs, here is another tool on the same website that shows homeruns hit

The link you shared is using HTML 5 canvas and web gl . To code something like this you will need a small understanding of matrix mathematics and vectors . Also there's a game development platform called Unity that gives you the ability to compile 3d to HTML 5 canvas. If you know JavaScript here's a 3d library called Three.js threejs.org/examples/#webgl_animation_skinning_morph — KpTheConstructor
– KpTheConstructor, Commented May 1, 2018 at 18:21
it seems like most people that use the webGL API do so with the help of some other library (three.js like you suggested), rather than using the webGL API directly... does that sound right? — Canovice
– Canovice, Commented May 1, 2018 at 18:28

ibrahim tanyalcin · Accepted Answer · 2018-05-01 18:28:08Z

If you have a lot of sprites/polygons go with webgl-canvas. If you do not want to use it directly there are many libraries to make your life easier such as pixie.js(2D) or three.js.

If you do not have too many polygons (<~2000) you can still go with svg. If you are going with this way, your best bet will be going for point cloud (scatter plot with circles) or polygons where you keep the points attached to the element so you can rotate them on demand and set the points attribute/property (if you'll use d3, it will already add it to the element in the __data__ property):

polygon.__points = [[x1,y1]..];

You can either go for euclidian angles with 3*3 matrix or use quaternions (a bit faster and avoids gimbal lock). Most likely, your bottleneck will not be these but the DOM operations. Here is an example from one of my projects, its bit old (about 6-7 years) but still can demonstrate the idea (click lower left icon when the link opens):

http://www.i-pv.org/1_45/NFKB1

what it looks like

In short, if you are going for fps and shading, then go for webgl.

Collectives™ on Stack Overflow

How to build interactive, 3D graphs in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related