Discussion :

[sylvain230]

Bonjour,

Je travaille actuellement sur WebGL et les canvas.

Je cherche un moyen de récupérer le clic de la souris d'un canvas. Ce canvas est présent dans une scéne en 3D. Ce canvas est affiché sur les faces d'un cube en rotation.

En fait je voudrais cliquer sur un objet en mouvement sur le cube qui est lui aussi en mouvement dans le but de faire une action.

Pouvez vous me donner des idées ?
De quelle manière feriez vous ca ?

Merci d'avance !

[LittleWhite]

Bonjour,

Avez vous regarder dans les demos de Khronos, j'ai vu la gestion du clic, je pense, dans plusieurs démos. Sinon, on peut regarder le ShaderToy

[Invité]

Je cherche un moyen de récupérer le clic de la souris d'un canvas. Ce canvas est présent dans une scéne en 3D. Ce canvas est affiché sur les faces d'un cube en rotation.

En fait je voudrais cliquer sur un objet en mouvement sur le cube qui est lui aussi en mouvement dans le but de faire une action.

Pouvez vous me donner des idées ?
De quelle manière feriez vous ca ?

En gros ce problème général c'est le picking et voilà comment le résoudre d'une manière théorique. C'est bien de savoir ça car en fait l'algo qui peut servir pour le picking, les collisions et le raytracing, c'est un peu pareil. Ca revient à faire du raytracing mais avec un seul rayon qui passerait vers ta souris.

1. tu trouve le rayon (point + direction unité) qui part du pixel que tu as cliqué appuyé sur le plan proche de ton frustum, et qui a comme direction (ce point - oeil). Donc tu as ce rayon en espace monde.

2. Ensuite tu parcours ton graph de scene en projetant ce rayon dans l'espace objet de l'objet à tester.

Code :

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

1
2
3
4
5
6
7
 
transformer_un_rayon_par_une_matrice(rayon r, mat4 m)
{
   vec4 newStart = mat * vec4(r.start, 1);
   vec4 newDir = mat * vec4(r.dir, 0);
   return rayon(newStart.xyz, newDir.xyz);
}

3. Ensuite il te faut la routine d'intersection en espace-objet. C'est pas forcément évident à faire sauf pour les sphères.

4. Tu remonte les infos qui t'intéressent en espace monde (pour le picking : le point d'intersection) et tu choisis l'objet qui est le plus proche en cas d'intersection multiples.

Evidemment si tu peux faire plus simple, il faut faire plus simple. Mais des fois ben on ne peut pas.

Si tu fais un readback tu peux utiliser un PBO pour éviter de staller ta carte graphique (genre tu demande ton PBO 2 frames après un glReadPixels dans ce PBO).

(EDIT: pas trop le temps de répondre à tes questions là)

[sylvain230]

Merci pour ces informations.

Par contre pour ce qui est de la démo Shader toy, le problème est que les coordonnées sont gérées avec 1 seul élément canvas.
Mon problème est la gestion de 2 canvas.
J'arrive à récupérer toutes les informations avec 1 seul canvas mais pas avec 2.
Il n'existe pas d'autres démos pour illustrer mon problème ?

Pour ce qui est du lancé de rayon, je connais cette technique, je l'ai déjà implémentée en Java mais elle ne va pas être trop couteuse pour un simple clic de souris ?
Donc sinon pour résumer :
1- Je lance les rayons dans mon canvas principal.
2- Je cherche le rayon qui intersecte le cube en rotation.
3- Je renvoie le vertex concerné et ses coordonnées.
4- Je dis que la souris se déplace en ce point.

C'est comme cela qu'il faut faire ? Je ne suis pas sur d'avoir bien compris la technique du picking.
Je récupère le point d'intersection ? ou je cherche le rayon qui est retourné lors de cette intersection ?

[sylvain230]

Et j'ai également 2-3 questions qui sont peut être de débutant mais j'ai besoin de comprendre.

L'espace monde représente la totalité de la scène ? Donc mon canvas principal ?

L'espace objet représente une surface de mon cube ? Donc mon second canvas ?

Et que désigne tu par "graph de scène" ?

[sylvain230]

Voila deja une partie de solution

http://dl.dropbox.com/u/5095342/WebG...ngLesson2.html

Je vais essayer de la mettre en pratique

D'ailleurs si ça intéresse quelqu'un et s'il peut m'expliquer un peu ça serai sympa

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
function picking() {
 
 
 
    var vx, vy, vz, i, j;
 
    var rval = false;
 
 
 
    // Viewport Space to NDC to Clip Space
 
    vx = lastMouseX;
 
    vy = lastMouseY;
 
    vz = 0.0;                 // By setting vz to 0 we will compute a ray passing through v
 
 
 
    // NDC coordinates
 
    var nx = 2.0*vx/(gl.viewportWidth) - 1.0;
 
    var ny = 1.0 - 2.0*vy/(gl.viewportHeight);
 
    var nz = 2*vz - 1.0;
 
    var nw = 1.0;
 
 
 
 
 
    var c = Vector.create([nx, ny, nz, nw]);      // Clip coordinates same as NDC coordinates
 
 
 
    // Clipping Space to View Space
 
    var v = pMatrixInv.x(c);
 
 
 
    // Rescale
 
    v.elements[0] = v.elements[0] / v.elements[3];
 
    v.elements[1] = v.elements[1] / v.elements[3];
 
    v.elements[2] = v.elements[2] / v.elements[3];
 
    v.elements[3] = 1.0;
 
 
 
 
 
    // View Space to Model Space    
 
 
 
    var R = mvPickMatrix.minor(1,1,3,3);
 
 
 
    var Rt = R.transpose();
 
 
 
    var tc = mvPickMatrix.col(4);
 
 
 
    var t = Vector.create([ tc.e(1), tc.e(2), tc.e(3) ]);
 
 
 
    var tp = Rt.x(t);
 
 
 
    var mvPickMatrixInv = Matrix.I(4);
 
 
 
    for (i=0; i < 3; i++) {
 
        for (j=0; j < 3; j++) {
 
            mvPickMatrixInv.elements[i][j] = Rt.elements[i][j];
 
        }   
 
        mvPickMatrixInv.elements[i][3] = -1.0 * tp.elements[i];
 
    }
 
 
 
 
 
    var ray_start_point = Vector.create([ 0.0, 0.0, 0.0, 1.0 ]);      // camera position in Viewspace
 
 
 
    // v = point in view space
 
    // w = point in world space
 
 
 
    v.elements[3] = 0;                 // Make v a ray in view coordinates
 
    var w = mvPickMatrixInv.x(v);      // w is now a ray in world coordinates
 
 
 
    var a = mvPickMatrixInv.x(ray_start_point);
 
 
 
    var anchor = Vector.create([ a.e(1), a.e(2), a.e(3) ]);
 
    var direction = Vector.create([ w.e(1), w.e(2), w.e(3) ]);
 
 
 
    // Perform intersection test between ray l and world geometry (cube)
 
    var l = Line.create(anchor, direction.toUnitVector());
 
 
 
    // Geometry in our case is a front plane of cube at z = 1;
 
    anchor = Vector.create([ 0, 0, 1 ]);    // Point on the front face of cube
 
    var normal = Vector.create([0, 0, 1 ]);  // Normal of front face of cube
 
 
 
    var p = Plane.create(anchor, normal);   // Plane representing a cubes front face
 
 
 
    // Check if line l and plane p intersect
 
    if (l.intersects(p)) {
 
        var intersectionPt = l.intersectionWith(p);
 
        if ((intersectionPt.e(1) >= -1.0) && (intersectionPt.e(1) <= 1.0) &&
 
            (intersectionPt.e(2) >= -1.0) && (intersectionPt.e(2) <= 1.0) ) {
 
            rval = true;        // intersection point is on the cubes front face
 
        }
 
    }
 
 
 
    return rval;
 
  }