Relief objet 3D.

Version imprimable

22/04/2013, 11h49
Jorjor

Relief objet 3D.

Bonjour,

J'ai réalisé une application Web en WEBGL/javascript me permettant de charger et d'afficher des objets *.obj/stl.
Le problème c'est que lorsque j'affiche mon objet, aucun relief n'apparait comme peut le montrer l'image ci-dessous :
https://www.dropbox.com/s/39fcwvrcdwf03pc/boule.png
J'ai essayé de jouer avec les lumières sans résultats sur le relief de l'objet.

Est-ce que quelqu'un à une idée qui pourrait m'aider à résoudre ce problème ?

Merci.
23/04/2013, 08h05
LittleWhite

Bonjour,

Il peut y avoir plusieurs réponses et avec aussi peu d'informations il sera difficile de dire ce qui se passe vraiment.
Si vous utilisez des shaders (et que ceux ci sont corrects), c'est que vous avez un problème dans le transfert des couleurs au GPU.
Sinon, essayez en désactivant l'éclairage.

Bonjour LittleWhite,

Voici mon fragment shader :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    <script id="fragment-shader" type="x-shader/x-fragment" charset="utf-8">
 
		#ifdef GL_ES
		precision highp float;
		#endif
 
		uniform vec4 uColor;
		uniform vec3 uLight;
 
		varying vec3 vNormal;
 
		const float alpha = 0.7;
 
		void main(void) {
 
		float val = dot( vNormal, uLight ) * 0.4 + 0.6;
 
		gl_FragColor = vec4( uColor.x * val, uColor.y * val, uColor.z * val, uColor.w);
 
		}
 
</script>

Et voici le code pour initialiser la scène :

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
 
    function initScene() {
 
	canvas.width = window.innerWidth, canvas.height = window.innerHeight;
 
	gl.clearColor(0, 0, 0, 1.0);
	gl.viewport(0, 0, canvas.width, canvas.height);
 
	// gl.blendFunc( gl.ZERO, gl.ONE_MINUS_SRC_COLOR );
 
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
	gl.enable(gl.CULL_FACE);
	gl.enable(gl.DEPTH_TEST);
	gl.enable(gl.STENCIL_TEST);
 
	//gl.enable(gl.SMOOTH);
	//gl.enable(gl.FLAT);
 
	shader = initShader(gl, "vertex-shader", "fragment-shader");
 
	var light = [ 3.0, 4.0, 5.0 ];
	vec3.normalize(light);
 
	gl.uniform3fv(shader.lightUniform, light);
	gl.uniform1f(shader.normalDirectionUniform, 1.0);
 
	pMatrix = mat4.create();
 
	container = document.createElement('div');
	document.body.appendChild(container);
 
	mat4.perspective(distanceCamera, canvas.width / canvas.height, 0.1, 1000, pMatrix);
	//mat4.translate(pMatrix, [0, 0, -distanceCamera]);
 
	gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
 
	center = [ 0, 0, 0 ], eye = [ distanceCamera, 0, 250 ];
 
	up = [ 0, 0, 1 ];
	axis = [ 0, -1, 0 ];
 
	mvMatrix = mat4.lookAt(eye, center, up);
 
};

A l'intérieur de cette fonction, je suis supposé utiliser les fonctions : gl.SMOOTH et gl.FLAT pour mettre du relief sur l'objet. Mais, ces fonctions me retournent l'erreur suivante : invalid capability.

Ais-je fais une erreur dans mon code ?

Merci.

24/04/2013, 10h21
LittleWhite

Moi, je tenterai de déboguer le shader. Pour ce faire, vous allez remplir gl_FragColor avec les variable en entrée du shader. Ainsi, il affichera des couleurs selon le contenu des variables (permettant de savoir si certains ne contiennent que des 0, par exemple).

Sinon, je pense qu'il y a un problème de normalisation. Essayez en normalisant vLight, ou vNormal (ok, elle doit être normalisée celle-ci, mais ne sait-on jamais)). Actuellement, je pense que là est le problème ;)

(Pourquoi vous ne m'avez pas donner le vertex shader ?)