WebGL 3D HTML5

Version imprimable

09/04/2013, 14h44
charles21.eg

WebGL 3D HTML5

Bonjour,

Je voudrais avoir des indications concernant la façon de couper plusieurs objets entre eux en utilisant les shaders (webgl + javascript).

Il existe les opérations booléennes (difference, union, intersection, etc.) mais je ne souhaite pas utiliser cette méthode.

Si quelqu' un à des idées ?

Merci.
10/04/2013, 08h26
LittleWhite

Bonjour,

Pouvez-vous préciser le résultat que vous voulez obtenir en "coupant" ?
10/04/2013, 09h11
charles21.eg

Bonjour,

Je souhaite réaliser la différence entre un cube et une sphère sans utiliser les opérations CSG (booléennes). Avec la librairire ThreeCSG.js effectivement il est facile d'effectuer cette opération (cube.substract(sphere)). Mais je souhaite faire autrement à l'aide de shaders.

Ici un exemple d'utilisation de shaders en webgl : http://egraether.com/demos/booleans.html

Si quelqu'un avait un exemple à me proposer, merci.

L'avantage c'est que l'on peut lire le code.
Ils n'utilisent pas les shaders, juste le stencil buffer afin de changer le rendu/recouvrement selon les cas d'intersections.
Les fonctions intéressantes à lire est :

Code:

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
function drawIntersection(meshA, meshB) {
 
        // write A in depth buffer
 
        gl.colorMask(false, false, false, false);
 
        meshA.draw(gl);
 
 
        // increment stencil each fragment where B is in front of A
 
        gl.depthMask(false);
        gl.disable(gl.CULL_FACE);
 
        gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
 
        meshB.draw(gl);
 
 
        // draw A where B hides it once
 
        gl.colorMask(true, true, true, true);
        gl.enable(gl.CULL_FACE);
 
        gl.depthFunc(gl.ALWAYS);
 
        gl.stencilFunc(gl.EQUAL, 1, 1);
        gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
 
        meshA.draw(gl);
 
 
        // reset buffer behavior
 
        gl.stencilFunc(gl.ALWAYS, 0, 0);
 
        gl.depthMask(true);
        gl.depthFunc(gl.LESS);
 
    };
 
    function drawSubtraction(meshA, meshB) {
 
        // write back of A in depth and stencil
 
        gl.colorMask(false, false, false, false);
        gl.cullFace(gl.FRONT);
 
        gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
 
        meshA.draw(gl);
 
 
        // draw back of B where it hides backside of A
 
        gl.colorMask(true, true, true, true);
        gl.uniform1f(shader.normalDirectionUniform, -1.0);
 
        gl.stencilFunc(gl.EQUAL, 1, 1);
 
        meshB.draw(gl);
 
 
        // draw front of A where it is falsly hiden by back of B
 
        gl.cullFace(gl.BACK);
        gl.uniform1f(shader.normalDirectionUniform, 1.0);
 
        gl.stencilFunc(gl.EQUAL, 2, 2);
        gl.depthFunc(gl.GREATER);
 
        meshA.draw(gl);
 
        gl.clear(gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
 
 
        // write front of B in depth
 
        gl.stencilFunc(gl.ALWAYS, 0, 0);
        gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
        gl.depthFunc(gl.LESS);
 
        gl.colorMask(false, false, false, false);
 
        meshB.draw(gl);
 
 
        // draw front of A
 
        gl.colorMask(true, true, true, true);
 
        meshA.draw(gl);
 
    };

10/04/2013, 10h36
charles21.eg

J'épluche du code, j'espère avoir trouver une solution avant vendredi :s
10/04/2013, 12h15
charles21.eg

En fait, ça correspond bien à ce que j'aimerais faire à quelques détails près.
Du coup, j'aimerais cacher la sphère (transparence) sans voir l'ombre du cube (les bords).

J'aimerais aussi adapter ce code pour des objets chargés (.obj) à l'aide d'une librairie. Est ce que c'est envisageable ?

Merci.
10/04/2013, 13h09
LittleWhite

Oui, je pense que tout cela est envisageable :)

1 pièce(s) jointe(s)

Bonjour,

J'ai cette fois-ci un problème avec ma coupe (qui utilise les shaders + webgl). En effet, l'objet n'est pas "coupé" complètement (cf. screenshot : http://www.developpez.net/forums/att...1&d=1366619221).

Si quelqu'un à une idée ?

Ci-joint le code de ma fonction de "coupe" :

Code:

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
function drawSubtraction(objet1, objet2) {
 
	// write back of A in depth and stencil
	// Spécifie, pour Gl.ColorMaski, l’indice du tampon de tracé auquel
	// appliquer le masque de couleur. STATIC SUB ColorMask ( Red AS Boolean,
	// Green AS Boolean, Blue AS Boolean, Alpha AS Boolean )
	// impacte sur la couleur de la partie coupé,
	gl.colorMask(false, false, false, false);
	// Spécifie le choix des facettes : de dos ou de face en ce qui concerne la
	// vision des faces
	gl.cullFace(gl.FRONT);
	// Set front and back stencil test actions.
	// Gl.KEEP Keeps the current value.
	// Gl.INCR Increments the current stencil buffer value. Clamps to the
	// maximum representable unsigned value.
	gl.stencilOp(gl.KEEP, gl.KEEP, gl.INCR);
 
	objet1.draw(gl, shader);
 
	// draw back of B where it hides backside of A
 
	// impact sur la couleur de l'objet coupé vue a travers l'objet coupant, ne
	// modifie pas la couleur
	gl.colorMask(true, true, true, true);
	gl.uniform1f(shader.normalDirectionUniform, -1);
	// Détermine les fonctions avant et arrière et la valeur de référence
	// pour le test de pochoir.
	gl.stencilFunc(gl.EQUAL, 1, 1);
 
 
	objet2.draw(gl, shader);
 
	// draw front of A where it is falsely hidden by back of B
 
	gl.cullFace(gl.BACK);
	gl.uniform1f(shader.normalDirectionUniform, 1.0);
 
	gl.stencilFunc(gl.EQUAL, 2, 2);
	// if our fragment has a Z value that is greater than the one that is
	// currently there, use our new one rather than the old one
	gl.depthFunc(gl.GREATER);
 
	objet1.draw(gl, shader);
 
	gl.clear(gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
 
	// write front of B in depth
	gl.stencilFunc(gl.ALWAYS, 0, 0);
	gl.stencilOp(gl.KEEP, gl.KEEP, gl.KEEP);
	// if our fragment has a Z value that is less than the one that is currently
	// there, use our new one rather than the old one
	gl.depthFunc(gl.LESS);
 
	gl.colorMask(false, false, false, false);
 
	objet2.draw(gl, shader);
 
	// draw front of A
 
	gl.colorMask(true, true, true, true);
 
	objet1.draw(gl, shader);
 
};