Discussion :

[paulolol]

Bonjour,

Je suis actuellement en train de réaliser ce (magnifique) visualiseur audio : http://cyxo.cf/audio-analyser/
Il est fait avec Three.js

Le code est disponible ici :
HTML : http://pastebin.com/EauGjfwW
CSS : http://pastebin.com/kamSpLAW
JS : http://pastebin.com/UC4FVP5S

Mais je voudrais qu'au lieu de ce (magnifique) vert, les sommets (vertex) prennent une couleur en fonction de leur hauteur sur l'axe Z.

Il faudrait que les couleurs se situent dans un array. Par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Pseudo-code :
var couleurs = [0x000000, 0x888888, 0xFFFFFF]
for i = 0 to sommets.length :
  if (sommets[i].position.z <= 66) then sommets[i].color = couleurs[0]
  if (sommets[i].position.z > 66 && sommets[i].position.z < 133) then sommets[i].color = couleurs[1]
  if (sommets[i].position.z >= 133) then sommets[i].color = couleurs[2]

Pourriez-vous m'aider ?
PS : Il y a des emplacements pour d'éventuels shaders dans le code HTML, qui pourraient être intégrés dans le matériau comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent

[paulolol]

Bon, en faisant plus de recherches, j'ai réussi à avoir ces shaders fonctionnels :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Vertex shader
varying vec3 col;
 
void main() {
  col = position;
  vec4 offset = vec4(col.x, col.y, col.z, 1.0);
  gl_Position = projectionMatrix * modelViewMatrix * offset;
}
//Fragment shader
varying vec3 col;
 
void main(void) {
  gl_FragColor = vec4(1.0, 1.0, col.z, 1.0);
}

Ça permet d'avoir une couleur jaune quand le z est environ 0 et sinon blanc. Mais comme je m'étais jamais intéressé au GLSL avant, j'ai aucune idée de comment choisir la couleur des vertex, et aussi (si c'est possible) comment mettre plus de 2 couleurs.

EDIT : J'ai compris un truc : le vec4 qui définie le gl_FragColor c'est du rgba (ou rgb + quelque chose), du coup j'ai réussi à personnaliser les 2 couleurs. Mais peut on en avoir plus de 2 ?