Reproduire la rotation d'une balle en Javascript / WebGL ?

WebGL, Javascript et vecteurs...

a marqué ce sujet comme résolu.

Salut à tous,

sur le site https://baseballsavant.mlb.com/savant-player/aaron-nola-605400?stats=statcast-r-pitching-mlb#statcast-pitch-arsenal on peut voir les balles de baseball tourner en live.

Oui ça ressemble à des gifs dégueulasses des années 2000 mais en réalité il s’agit de canvas avec du Javascript, et certainement du WebGL (vu que l’axe et la vitesse de rotation sont censés changer d’un joueur à l’autre).

N’étant pas très spécialiste de WebGL (je sais faire bouger des objets de droite à gauche, super :popcorn: ) je me suis posé la question de savoir comment ce code était généré.

Plus j’y réfléchis plus ça m’a l’air compliqué car outre la balle (ok, un sphère), le halo lumineux dessus, il faut deux trois axes de rotation (x, y, z), la vitesse de rotation, etc.

Le HTML généré (DOM) est plus que basique :

<div class="spin-axis" id="spin_FF"><canvas style="display: block; width: 50px; height: 50px;" width="50" height="50"></canvas></div>

Et la fonction qui doit générer la ou les rotations est présente dans : https://baseballsavant.mlb.com/sections/player-update/builds/1ab21cead176ae03fba5856fb44c52ba2fcd0dc6/scripts/build/index.bundle.js

Ce que je n’ai pas trouvé c’est où les valeurs (x, y, z) sont stockées, ce qui fait que je n’arrive pas à modifier le mouvement de la balle via Web Developper.

J’aimerai bien créer un truc similaire, peut-être plus simple pour commencer, mais mes notions en 3D sont assez limitées : du Unreal Engine niveau très débutant, un peu d’OpenGL et c’est tout. Rien pour le web.

Qu’en pensent les experts ?

Je téléchargerais bien le fichier Javascript mais j’imagine qu’ils ont offusqué le code - ce qui est logique, au demeurant. Merci de votre aide ^^

+0 -0

Hello,

Obfusquer du JS c’est compliqué, pour ne pas dire impossible. Au mieux il est minifié, en supprimant la mise en forme et en remplaçant les noms de variables pour économiser la bande passante.

Mais ça reste en grande partie réversible. Il existe das outils en ligne, ou ton IDE saura faire une bonne partie du boulot. Le mot-clé qui peut t’aider à trouve ce qu’il faut est beautify. ;)

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte