Heim Datenbank MySQL-Tutorial cocos2dx 离屏渲染

cocos2dx 离屏渲染

Jun 07, 2016 pm 03:32 PM
发现 天才 渲染

今天才发现 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.


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So rendern Sie eine orthogonale Draufsicht in Kujiale_Tutorial zum Rendern einer orthogonalen Draufsicht in Kujiale So rendern Sie eine orthogonale Draufsicht in Kujiale_Tutorial zum Rendern einer orthogonalen Draufsicht in Kujiale Apr 02, 2024 pm 01:10 PM

1. Öffnen Sie zunächst den Entwurfsplan, der in Kujiale gerendert werden soll. 2. Öffnen Sie dann das Rendering der Draufsicht im Rendering-Menü. 3. Klicken Sie dann in den Parametereinstellungen in der Renderoberfläche der Draufsicht auf Orthogonal. 4. Klicken Sie abschließend nach dem Anpassen des Modellwinkels auf Jetzt rendern, um die orthogonale Draufsicht zu rendern.

Ist das Rendern von Vue-Seiten synchron oder asynchron? Ist das Rendern von Vue-Seiten synchron oder asynchron? Dec 13, 2022 pm 07:26 PM

Das Rendern von Vue-Seiten erfolgt asynchron. Vue verwendet asynchrones Rendering, das die Leistung verbessern kann. Wenn keine asynchronen Aktualisierungen verwendet werden, wird die aktuelle Komponente bei jeder Datenaktualisierung neu gerendert. Aus Leistungsgründen aktualisiert Vue die Ansicht nach dieser Datenaktualisierungsrunde.

Vue-Fehler: V-HTML kann nicht korrekt zum Rendern von HTML-Code verwendet werden. Wie kann das Problem behoben werden? Vue-Fehler: V-HTML kann nicht korrekt zum Rendern von HTML-Code verwendet werden. Wie kann das Problem behoben werden? Aug 26, 2023 am 11:25 AM

Vue-Fehler: V-HTML kann nicht korrekt zum Rendern von HTML-Code verwendet werden. Wie kann das Problem behoben werden? Vue ist ein beliebtes JavaScript-Framework, das uns beim Erstellen interaktiver Benutzeroberflächen helfen kann. In Vue können wir die v-html-Direktive verwenden, um HTML-Code in Vorlagen zu rendern. Allerdings kann es manchmal zu einem Problem kommen: Der HTML-Code kann mit v-html nicht korrekt gerendert werden. In diesem Artikel werden einige häufige Ursachen und Lösungen beschrieben, die Ihnen bei der Lösung dieses Problems helfen sollen. Der erste mögliche Grund ist, dass die

Vue-Fehler: V-HTML kann nicht korrekt zum Rendern dynamischen HTML-Codes verwendet werden. Wie kann das Problem behoben werden? Vue-Fehler: V-HTML kann nicht korrekt zum Rendern dynamischen HTML-Codes verwendet werden. Wie kann das Problem behoben werden? Aug 19, 2023 pm 12:27 PM

Vue-Fehler: V-HTML kann nicht korrekt zum Rendern dynamischen HTML-Codes verwendet werden. Wie kann das Problem behoben werden? Einführung: In der Vue-Entwicklung müssen wir häufig HTML-Code dynamisch rendern, um Rich-Text-Inhalte oder dynamisch generierte Benutzereingaben anzuzeigen. Vue stellt die v-html-Direktive zur Implementierung dieser Funktion bereit. Manchmal können jedoch Probleme auftreten, die dazu führen, dass dynamischer HTML-Code mit v-html nicht korrekt wiedergegeben werden kann. In diesem Artikel werden die Ursachen dieses Problems untersucht und Lösungen bereitgestellt. Problembeschreibung: Wenn wir in Vue v

v-for-Funktion in Vue3: perfekte Lösung zum Rendern von Listendaten v-for-Funktion in Vue3: perfekte Lösung zum Rendern von Listendaten Jun 19, 2023 am 08:04 AM

In Vue3 gilt v-for als die beste Methode zum Rendern von Listendaten. v-for ist eine Direktive in Vue, die es Entwicklern ermöglicht, ein Array oder Objekt zu durchlaufen und für jedes Element einen HTML-Code zu generieren. Die v-for-Direktive ist eine der mächtigsten Vorlagendirektiven, die Entwicklern zur Verfügung stehen. In Vue3 wurde die v-for-Anweisung weiter optimiert, wodurch sie einfacher zu verwenden und flexibler ist. Die größte Änderung der v-for-Direktive in Vue3 ist die Bindung von Elementen. Verwenden Sie in Vue2 die v-for-Direktive

Anwendung von Redis bei der Dienstregistrierung und -erkennung Anwendung von Redis bei der Dienstregistrierung und -erkennung Jun 20, 2023 am 08:39 AM

Redis ist eine leistungsstarke Schlüsselwertdatenbank und wird aufgrund ihrer schnellen Datenspeicherung und Zugriffsfunktionen häufig bei der Registrierung und Erkennung von Diensten eingesetzt. Die Registrierung und Erkennung von Diensten ist ein sehr wichtiger Prozess in verteilten Systemen. Wenn wir mehrere Dienste auf einem Computer ausführen, benötigen wir eine Möglichkeit für Kunden, diese Dienste zu entdecken und mit ihnen zu interagieren. In einem vollständig verteilten System können Dutzende von Diensten ausgeführt werden, und eine manuelle Konfiguration ist nicht mehr möglich. Zu diesem Zeitpunkt müssen wir die Dienstregistrierung und -erkennung verwenden.

Wie kann ich mit Vue eine Bildkorrektur und Rendering-Verarbeitung erreichen? Wie kann ich mit Vue eine Bildkorrektur und Rendering-Verarbeitung erreichen? Aug 19, 2023 pm 07:53 PM

Wie kann ich mit Vue eine Bildkorrektur und Rendering-Verarbeitung erreichen? Überblick Bei der Entwicklung moderner Webanwendungen ist die Bildverarbeitung eine sehr häufige Anforderung. Mit Vue.js, einem beliebten JavaScript-Framework, wird die Implementierung der Bildkorrektur und Rendering-Verarbeitung sehr einfach und effizient. Dieser Artikel zeigt, wie Sie die Bildkorrektur und Rendering-Verarbeitung über Vue.js implementieren, und enthält Codebeispiele. Schritt 1: Erstellen Sie eine Vue-Instanz. Zuerst müssen wir eine Vue-Instanz erstellen, um die Daten und die Logik des Bildes zu verwalten. im HT

Neuzeichnen vs. Reflow: Welches hat einen kritischeren Einfluss auf die Rendering-Phase? Neuzeichnen vs. Reflow: Welches hat einen kritischeren Einfluss auf die Rendering-Phase? Jan 26, 2024 am 10:16 AM

Die Auswirkungen von Neuzeichnen und Reflow auf die Rendering-Phase: Wer ist wichtiger? Beim Rendern einer Webseite führt der Browser eine Reihe von Vorgängen in einer bestimmten Reihenfolge aus, um den Seiteninhalt anzuzeigen. Unter diesen sind Neuzeichnen und Reflow zwei wichtige Schritte im Renderprozess. In diesem Artikel werden die Auswirkungen von Neuzeichnen und Reflow auf die Rendering-Phase untersucht und ihre Bedeutung analysiert. Die Bedeutung und der Unterschied zwischen Neuzeichnen und Reflow Bevor wir die Auswirkungen von Neuzeichnen und Reflow auf das Rendern verstehen, wollen wir zunächst ihre Bedeutung und ihren Unterschied verstehen. Repaint bezieht sich auf Änderungen des Stils eines Elements, hat jedoch keine Auswirkungen auf das Element

See all articles