Discussion :

[Jorjor]

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.

[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.

[Jorjor]

Bonjour LittleWhite,

Voici mon fragment shader :

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
 
    <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 :

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
 
    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.

[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 ?)