webgl FBO texture

webgl FBO texture - HTML/CSS - Programmation

Marsh Posté le 11-09-2012 à 23:52:20    

Bonsoir à tous,
 
Je vous expose mon problème.
 
Je suis en train de me faire une lib webgl. shader, fonction javascript ect...
Jusqu'à la tout se passe bien. Mais voila mon premier obstacle.
 
J’enregistre le rendu d'une scène dans une texture via gl.createFramebuffer();
La scène est correctement enregistrée et la texture peut être utilisée dans des shaders pour générer des effets comme le shadow mapping, le glow, ect ...  :love:  
 
Le problème est le suivant:  
En fonction de la position du point d'observation la textures s’altère et ne laisse apparaître que le backgound de celle-ci. (exemple : un rond rouge dans une fond vert, le rond rouge disparaît)
Cas concret, je souhaitre rendre ma texutre dans un rectangle en fullscreen. Si le rectangle s'approche trop du point du vue, ou si celui-ci prend tout l'ecran la texture bug.
De meme en vu ortho, si les dimention du rectangle se rapproche trop des bords de l'écran, les éléments affichés dans la texture disparaissent.  
juste avant que la texture s'efface, on commence à voir uniquement les details sur les arretes du rectangle, puis finalement tout disparait.
 
La scène étant enregistrée en tant que texture dans le buffer, pourquoi celle si se transforme en fonction de la distance d'observation. si je remplace la texture par une texture png en dure, tout fonctionne correctement.
qu'est qui m'échape?
 
merci.  

Reply

Marsh Posté le 11-09-2012 à 23:52:20   

Reply

Marsh Posté le 12-09-2012 à 00:22:36    

ça vient probablement du depth buffer que tu as mal enregistré dans ton framebuffer, fais voir ton code :D

Message cité 1 fois

---------------
Perhaps you don't deserve to breathe
Reply

Marsh Posté le 12-09-2012 à 00:46:59    

Terminapor a écrit :

ça vient probablement du depth buffer que tu as mal enregistré dans ton framebuffer, fais voir ton code :D


 
^^ en effet, à part la manipulation des matrices, les notions de buffering m’échappent.
en gros j'ai fais une petite fonction me permettant de stocker dans un tableau mes textures générées.
 

Code :
  1. function createFBO(width,height,type,textureSize){
  3. var buffer = {};
  4. buffer.framebuffer = type=="screen"? null:gl.createFramebuffer();
  5. buffer.height = parseInt(height);
  6. buffer.width = parseInt(width);
  7. buffer.textureSize = textureSize
  8. if(buffer.framebuffer){
  9. initTextureFramebuffer(buffer)
  10. buffer.storeToMap = function(){
  11.   gl.bindTexture(gl.TEXTURE_2D, this.map);
  12.   gl.generateMipmap(gl.TEXTURE_2D);
  13.   gl.bindTexture(gl.TEXTURE_2D, null);
  14.   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  15. }
  16. }
  17. return buffer;
  18. }
  22. function initTextureFramebuffer(buffer) {
  24. gl.bindFramebuffer(gl.FRAMEBUFFER,  buffer.framebuffer);
  26. var s = buffer.textureSize?buffer.textureSize:buffer.width;
  28.  buffer.map = gl.createTexture();
  30.  gl.bindTexture(gl.TEXTURE_2D, buffer.map);
  31.  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, s, s, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  32.  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  33.  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  34.  gl.generateMipmap(gl.TEXTURE_2D);
  37.  var renderbuffer = gl.createRenderbuffer();
  38.  gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
  39.  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, s, s);
  42.  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, buffer.map, 0);
  43.  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);
  45.  gl.bindTexture(gl.TEXTURE_2D, null);
  46.  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  47.  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  49. }

Reply

Marsh Posté le 13-09-2012 à 10:26:11    

Hello !!
 
Je relance mon sujet. :)
 
Alors je récapitule : Lors ce que j'affiche des textures du framebuffer sur un objet, celles-ci disparaissent quand le point d’observation s'approche ou que l'objet prend tout l'écran.
En fait les textures ne disparaissent pas. elles prennent la couleur de leur background.
 
Pour chaque frame, la ProjectionMatrix, la ViewMatrix et la MVMatrix  sont dé-corrélées. Je ne comprend pas pourquoi le modification d'une matrice dans le dernier rendu peut influencer les pixels d'une texture déjà rendu.  
 
Recap du code de la création des textures  :  
 

Code :
  1. buffer.map = gl.createTexture();
  2.  gl.bindTexture(gl.TEXTURE_2D, buffer.map);
  3.  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  4.  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  5.  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  8.         buffer.framebuffer = gl.createFramebuffer();
  9. gl.bindFramebuffer(gl.FRAMEBUFFER, buffer.framebuffer);
  10. var renderbuffer = gl.createRenderbuffer();
  11. gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
  12. gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 512, 512);
  15. gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, buffer.map, 0);
  16. gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);


 
voila. tout me semble normal...  :(

Reply

Marsh Posté le 13-09-2012 à 12:39:30    

C'est bon, j'ai trouvé !!  
 
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
mal placés.  
 

Reply

Marsh Posté le 18-09-2012 à 20:26:07    

Merci d'avoir partagé j'avais un problème similaire!
 
Will
http://webgl.tv

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed