2016-12-27 3 views
0

je tentais de recréer l'effet obtenu par ce code dans le contexte 2d:WebGL - ne pas toile vide sur chaque cadre

// frame background "repaint" 
ctx.fillStyle = 'rgba(0,0,0,.08)'; 
ctx.fillRect(0, 0, w, h); 

// draw rest of frame 

qui ajoute essentiellement une « piste ». Un exemple peut être vu ici: http://codepen.io/towc/pen/mJzOWJ

j'ai fini par apprendre que WebGL vous pouvez avoir la même « source sur » la transparence à l'aide des méthodes suivantes:

gl.blendFunc(gl.SRC_ALPHA, gl.ONE); 
gl.enable(gl.BLEND); 

et oui, je ne suis pas à l'aide tous les shaders de fantaisie et je n'essaie pas d'obtenir une semi-transparence 3D, je veux juste une composition simple basée sur la valeur alpha de la source et les valeurs de couleur de la destination. Le problème avec le code ci-dessus est que chaque image, il semble que tout ce qui était dans la toile sur l'image précédente est complètement supprimé, de sorte que la semi-transparence peut être vu dans chaque image, mais pas à travers les images, comme dans le cas du "trail" dans le canvas.getContext('2d'). En tant que solution à la semi-transparence croisée, je peux toujours revenir à fournir la trame courante en tant que texture et la dessiner au début de la nouvelle image, pour que le mélange se déroule comme je le souhaite à.

Mais évidemment tout cela pourrait être évité s'il y avait un moyen de dire à la toile de ne pas tout enlever à chaque image, ce que je suppose seulement est le problème.

Voici ce que j'ai essayé: https://jsfiddle.net/206Ltsgo/ Après semi-transparence inter-cadres, je devrais être en mesure d'obtenir quelque chose comme ceci: http://codepen.io/towc/pen/bNWyOq

La réponse peut inclure des suggestions aux bibliothèques, mais en fin de compte devrait être la vanille. Si j'ai fait la mauvaise hypothèse sur la question, idéalement, la réponse devrait d'abord énoncer le problème et, le cas échéant, fournir une solution. Si la seule solution est réellement d'envoyer une texture, il serait utile de savoir s'il existe des moyens très rapides/courts/efficaces d'envoyer la toile en tant que texture.

+0

Autres questions similaires ou des réponses connexes comprennent http://stackoverflow.com/questions/33327585/why-webgl-clear-draw -to-front-buffer et http://stackoverflow.com/questions/35493509/webgl-draw-in-event-handler-seems-to-clear-the-canvas, http://stackoverflow.com/questions/9491417/when-webgl-decide-de-mettre-à-jour-l'affichage, http://stackoverflow.com/questions/11546642/why-does-webgl-canvas-turn-white-on-the-second-frame-when-alpha -is-masqué, – gman

+0

@gman J'ai finalement été lié à la dernière réponse que vous avez postée. Je pense que cela vaut la peine de garder cette question, notant qu'elle est liée à tous ces autres, car elle couvre plus de possibilités de googler, étant donné que cette question est explicable à bien des égards. Je ne me dérange pas si vous ne changez pas d'avis, bien sûr – towc

+0

Pas de problème, c'est ce que le point d'interrogation de duplication est pour. Les gens peuvent chercher, trouver votre question à votre façon et être conduit à une réponse. – gman

Répondre

1

s'avère que le problème était effectivement que sur chaque trame, le drawingBuffer a été effacé. Cela peut être écrasé en ajoutant un attribut lors de la définition de votre gl, comme this mdn page souligne:

var gl = canvas.getContext('webgl', { preserveDrawingBuffer: true });