Discussion :

[p3ga5e]

Bonjour,

Je travaille sur une extension de la balise HTML 5 canvas, cette extension, grâce à la technologie WebGL (basé sur OpenGL ES 2.0), me permet de contrôler, à partir du DOM, la zone de rendu du canvas par un PixelShader écrit en GLSL.

Je valide le principe de mon extension, en écrivant divers jeux de test, je ne rencontre aucun problème jusqu’à ce que je tente de porter l’exemple de texture HDR de la librairie SpiderGL.
J’obtiens ceci une sorte de LDR
Pourtant j’utilise la même image et presque le même FragmentShader. "presque" car, a la différence de l’exemple de SpiderGL, j’utilise un seul vertex buffer ne contenant que la position 2D :

Code JavaScript :

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

1
2
3
4
5
6
7
var QuadVertexBuffer = new Float32Array(
[ //  x     y
	-1.0, -1.0, //sommet bas gauche
	-1.0,  1.0, //sommet haut gauche
	 1.0, -1.0, //sommet bas droit
	 1.0,  1.0  //sommet haut droit 
]);

Alors que SpiderGL utilise 2 Vertex Buffer : un pour la position 2D et un autre pour les coordonnées de texture :

Code JavaSript :

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
var quadPositions = new Float32Array
([
	-1.0, -1.0,
	 1.0, -1.0,
	-1.0,  1.0,
	 1.0,  1.0
]);
 
var quadTexcoords = new Float32Array
([
	0.0, 0.0,
	1.0, 0.0,
	0.0, 1.0,
	1.0, 1.0
]);
 
var quad = new SglMeshGL(gl);
quad.addVertexAttribute("position", 2, quadPositions);
quad.addVertexAttribute("texcoord", 2, quadTexcoords);
quad.addArrayPrimitives("tristrip", gl.TRIANGLE_STRIP, 0, 4);

Ce qui m’oblige dans mon Shader à effectuer ce changement de repère :

Code GLSL :

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

1
2
vec2 p = (position + 1.0)/2.0;
vec4 color = texture2D(image, p);

Toutefois, Je ne pense pas que le problème provient de ce changement de repère, et j’espère qu’il s’agit que d’un renderstate obscure mal initialisé et, ainsi, ne remettant pas en cause l’architecture de ma librairie.

Je farfouille, actuellement, dans le code de SpiderGL pour trouver une différence d’initialisation du context GL , sans aucun résultat. Bref je sèche un peu ...

C’est pourquoi je sollicite votre aide ! merci.

[wax78]

Quand je lance ton propre exemple j'obtiens bien une image, mais celle ci est "pixelisée" (+ un bon effet de flou) c'est cela ton problème ?

[p3ga5e]

Oui c’est bien cela mon problème !
En fait mon shader semble fonctionner, car lorsque je change l’uniform "exposure" l’effet obtenu est correct, seule la fragmentation pixel est grossière lors de la rasterisation.

Existe-t-il un renderstate dans OpenGL permettant de contrôler la qualité de la fragmentation ? afin de forcer l’exécution du Shader pour chaque pixel rendu.

A noter que l’image n’a pas une hauteur en puissance de 2, sa résolution est de 512x758. Pourtant j’arrive à appliquer des shaders sur des vidéos de résolution 280x204 sans aucune dégradations.

[p3ga5e]

Mon Problème est résolu !

La balise canvas d’HTML 5 utilise un framebuffer par défaut de 300x150 … j’ai perdu mon temps à vouloir résoudre mon problème dans l’API WebGL, alors qu’il suffisait juste de forcer les propriétés width et height sur l’objet DOM HTMLCanvasElement pour définir la résolution de FrameBuffer