Maison base de données tutoriel mysql cocos2dx 离屏渲染

cocos2dx 离屏渲染

Jun 07, 2016 pm 03:32 PM
发现 génie 渲染

今天才发现 cocos2dx 有一个类叫做 CCRenderTexture,封装了 opengl render to texture 的 细节。 这个类的是采用 FBO ,把图像渲染到 自己新建的 frame buffer 来实现的。 如果写一个 shader ,比如让图像变成灰色,如果只给一个 CCSprite setShaderProgram()

今天才发现 cocos2dx 有一个类叫做 CCRenderTexture,封装了 opengl render to texture 的 细节。

这个类的是采用 FBO ,把图像渲染到 自己新建的  frame buffer 来实现的。


如果写一个 shader ,比如让图像变成灰色,如果只给一个 CCSprite  setShaderProgram()的话,只能让单独的 Sprite 变成灰色,

但是如果想让整个游戏场景变成灰色,或者让其中一部分变成灰色,就需要使用 FBO 离屏渲染技术,把一些渲染的内容放到一个 FBO上,

然后绘制完成后,再放回到 最终的 frame buffer 中。


cocos2dx 封装了这些操作,具体用法是

1.实例化一个 CCRenderTexture* m_pRtt;

2.初始化时候,设置它的大小  m_pRtt = CCRenderTexture::create( width,height );

3.在 m_pRtt->begin() 和 m_pRtt->end() 之间,执行 opengl 绘制指令。

比如在当前场景的 update() 中,这样写:

m_pRtt->begin();

this->visit();

m_pRtt->end();

这样整个场景就绘制到了 m_pRtt 这个 RenderTexture 中

4. 如果需要给整个场景设置 shader ,则调用

m_pRtt->getSprite() ,给这个 Sprite  setShaderProgram()即可。


这样,就可以实现 全屏高斯模糊 ,全屏变灰等 shader 的效果, 也可以用它实现屏幕截屏,保留上一帧图像等功能。

今天参考了这篇文章,才了解到 CCRenderTexture 的用法的

http://www.cocoachina.com/bbs/read.php?tid=237495


自己欠缺的是对  opengl FBO 真正的理解, 和对 shader 算法知识匮乏。

如果知识应用的话,利用这个方法,就可以在 cocos2dx 中写出一些漂亮的效果了。


按照自己上面说的做法,在 cocos2dx 3.0里面, 一旦给 render texture 增加自己写的 shader 后 ,出现了绘制不出来的情况。

暂时还不知道问题出在哪,初步感觉是自己写的 fragment shader 是存在错误的。。。但是还没查明错在哪里。

还是应该多去学习 opengl 底层知识才能解决这种 bug.


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment rendre une vue de dessus orthogonale dans Kujiale_Tutorial sur le rendu d'une vue de dessus orthogonale dans Kujiale Comment rendre une vue de dessus orthogonale dans Kujiale_Tutorial sur le rendu d'une vue de dessus orthogonale dans Kujiale Apr 02, 2024 pm 01:10 PM

1. Ouvrez d'abord le plan de conception à rendre dans Kujiale. 2. Ensuite, ouvrez le rendu de la vue de dessus dans le menu de rendu. 3. Cliquez ensuite sur Orthogonal dans les paramètres des paramètres de l'interface de rendu de la vue de dessus. 4. Enfin, après avoir ajusté l'angle du modèle, cliquez sur Rendu maintenant pour afficher la vue de dessus orthogonale.

Le rendu de la page vue est-il synchrone ou asynchrone ? Le rendu de la page vue est-il synchrone ou asynchrone ? Dec 13, 2022 pm 07:26 PM

Le rendu des pages Vue est asynchrone. Vue utilise le rendu asynchrone, ce qui peut améliorer les performances ; si les mises à jour asynchrones ne sont pas utilisées, le composant actuel sera restitué à chaque fois que les données sont mises à jour. Pour des raisons de performances, Vue mettra à jour la vue de manière asynchrone après cette série de mises à jour des données.

Erreur Vue : v-html ne peut pas être utilisé correctement pour restituer du code HTML dynamique. Comment le résoudre ? Erreur Vue : v-html ne peut pas être utilisé correctement pour restituer du code HTML dynamique. Comment le résoudre ? Aug 19, 2023 pm 12:27 PM

Erreur Vue : Impossible d'utiliser correctement v-html pour restituer du code HTML dynamique, comment le résoudre ? Introduction : Dans le développement de Vue, nous avons souvent besoin de restituer dynamiquement du code HTML pour afficher du contenu textuel riche ou des entrées utilisateur générées dynamiquement. Vue fournit la directive v-html pour implémenter cette fonction. Cependant, nous pouvons parfois rencontrer des problèmes qui ne permettent pas de restituer correctement le code HTML dynamique à l'aide de v-html. Cet article explorera les causes de ce problème et proposera des solutions. Description du problème : dans Vue, lorsque nous utilisons v

Erreur Vue : Impossible d'utiliser correctement v-html pour restituer le code HTML, comment le résoudre ? Erreur Vue : Impossible d'utiliser correctement v-html pour restituer le code HTML, comment le résoudre ? Aug 26, 2023 am 11:25 AM

Erreur Vue : Impossible d'utiliser correctement v-html pour restituer le code HTML, comment le résoudre ? Vue est un framework JavaScript populaire qui peut nous aider à créer des interfaces utilisateur interactives. Dans Vue, nous pouvons utiliser la directive v-html pour restituer le code HTML dans des modèles. Cependant, nous pouvons parfois rencontrer un problème : le code HTML ne peut pas être restitué correctement en utilisant v-html. Cet article décrit quelques causes courantes et solutions pour vous aider à résoudre ce problème. La première raison possible est que

Fonction v-for dans Vue3 : solution parfaite pour lister le rendu des données Fonction v-for dans Vue3 : solution parfaite pour lister le rendu des données Jun 19, 2023 am 08:04 AM

Dans Vue3, v-for est considéré comme le meilleur moyen de restituer les données d'une liste. v-for est une directive dans Vue qui permet aux développeurs de parcourir un tableau ou un objet et de générer un morceau de code HTML pour chaque élément. La directive v-for est l'une des directives de modèle les plus puissantes disponibles pour les développeurs. Dans Vue3, l'instruction v-for a été encore optimisée, la rendant plus facile à utiliser et plus flexible. Le plus gros changement de la directive v-for dans Vue3 est la liaison des éléments. Dans Vue2, utilisez la directive v-for

Application de Redis dans l'enregistrement et la découverte de services Application de Redis dans l'enregistrement et la découverte de services Jun 20, 2023 am 08:39 AM

Redis est une base de données clé-valeur hautes performances Grâce à ses capacités rapides de stockage et d'accès aux données, elle est largement utilisée dans le processus d'enregistrement et de découverte de services. L'enregistrement et la découverte des services sont un processus très important dans les systèmes distribués. Lorsque nous exécutons plusieurs services sur une machine, nous avons besoin d'un moyen pour que les clients découvrent ces services et comment interagir avec eux. Dans un système distribué complet, des dizaines de services peuvent être en cours d'exécution et la configuration manuelle est devenue irréalisable. À l’heure actuelle, nous devons utiliser l’enregistrement et la découverte des services.

Comment utiliser Vue pour réaliser l'étalonnage et le traitement du rendu des images ? Comment utiliser Vue pour réaliser l'étalonnage et le traitement du rendu des images ? Aug 19, 2023 pm 07:53 PM

Comment utiliser Vue pour réaliser l'étalonnage et le traitement du rendu des images ? Présentation Dans le développement d'applications Web modernes, le traitement d'images est une exigence très courante. En utilisant Vue.js, un framework JavaScript populaire, il devient très simple et efficace d'implémenter l'étalonnage et le traitement du rendu des images. Cet article montrera comment implémenter le traitement d'étalonnage et de rendu d'image via Vue.js, et est accompagné d'exemples de code. Étape 1 : Créer une instance Vue Tout d'abord, nous devons créer une instance Vue pour gérer les données et la logique de l'image. en HT

Redessiner ou redistribuer : lequel a l'impact le plus critique sur la phase de rendu ? Redessiner ou redistribuer : lequel a l'impact le plus critique sur la phase de rendu ? Jan 26, 2024 am 10:16 AM

L’impact du redraw et du reflow sur la phase de rendu : qui est le plus important ? Lorsqu'une page Web est affichée, le navigateur effectue une série d'opérations dans un certain ordre pour afficher le contenu de la page. Parmi eux, le redessinage et la redistribution sont deux étapes importantes du processus de rendu. Cet article explorera l'impact du redessin et de la redistribution sur la phase de rendu et analysera leur importance. La signification et la différence entre redessiner et redistribuer Avant de comprendre l'impact du redessin et de la redistribution sur le rendu, comprenons d'abord leur signification et leur différence. Repeindre fait référence au moment où le style d'un élément change, mais cela n'affecte pas le

See all articles