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.


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Kujiale で直交上面ビューをレンダリングする方法_Kijiale で直交上面ビューをレンダリングするチュートリアル Kujiale で直交上面ビューをレンダリングする方法_Kijiale で直交上面ビューをレンダリングするチュートリアル Apr 02, 2024 pm 01:10 PM

1. まず、Kijiale でレンダリングするデザインプランを開きます。 2. 次に、レンダリング メニューでトップ ビュー レンダリングを開きます。 3. 次に、トップ ビュー レンダリング インターフェイスのパラメーター設定で [直交] をクリックします。 4. 最後に、モデルの角度を調整した後、[今すぐレンダリング]をクリックして直交上面ビューをレンダリングします。

vue ページのレンダリングは同期ですか、それとも非同期ですか? vue ページのレンダリングは同期ですか、それとも非同期ですか? Dec 13, 2022 pm 07:26 PM

Vue ページのレンダリングは非同期です。 Vue は非同期レンダリングを使用します。これにより、パフォーマンスが向上します。非同期更新が使用されない場合、データが更新されるたびに現在のコンポーネントが再レンダリングされます。パフォーマンス上の理由から、Vue はこの一連のデータ更新後にビューを非同期的に更新します。

Vue エラー: v-html を使用して動的 HTML コードをレンダリングできません。解決方法は? Vue エラー: v-html を使用して動的 HTML コードをレンダリングできません。解決方法は? Aug 19, 2023 pm 12:27 PM

Vue エラー: v-html を使用して動的 HTML コードをレンダリングできません。解決方法は?はじめに: Vue 開発では、リッチ テキスト コンテンツや動的に生成されたユーザー入力を表示するために、HTML コードを動的にレンダリングする必要があることがよくあります。 Vue は、この関数を実装するための v-html ディレクティブを提供します。ただし、v-html を使用して動的 HTML コードを正しくレンダリングできない問題が発生する場合があります。この記事では、この問題の原因を調査し、解決策を提供します。問題の説明: Vue で v を使用すると、

Vue3 の v-for 関数: リスト データ レンダリングの完璧なソリューション Vue3 の v-for 関数: リスト データ レンダリングの完璧なソリューション Jun 19, 2023 am 08:04 AM

Vue3 では、v-for がリスト データをレンダリングする最良の方法であると考えられています。 v-for は、開発者が配列またはオブジェクトを反復処理し、項目ごとに HTML コードを生成できるようにする Vue のディレクティブです。 v-for ディレクティブは、開発者が利用できる最も強力なテンプレート ディレクティブの 1 つです。 Vue3 では、v-for 命令がさらに最適化され、より使いやすく、より柔軟になりました。 Vue3 の v-for ディレクティブの最大の変更点は、要素のバインドです。 Vue2 では、v-for ディレクティブを使用します。

Vue エラー: v-html を正しく使用して HTML コードをレンダリングできません。解決方法は? Vue エラー: v-html を正しく使用して HTML コードをレンダリングできません。解決方法は? Aug 26, 2023 am 11:25 AM

Vue エラー: v-html を正しく使用して HTML コードをレンダリングできません。解決方法は? Vue は、インタラクティブなユーザー インターフェイスの構築に役立つ人気のある JavaScript フレームワークです。 Vue では、v-html ディレクティブを使用して HTML コードをテンプレートにレンダリングできます。ただし、v-html を使用して HTML コードを正しくレンダリングできないという問題が発生する場合があります。この記事では、この問題の解決に役立ついくつかの一般的な原因と解決策について説明します。まず考えられる理由としては、

サービスの登録と検出における Redis のアプリケーション サービスの登録と検出における Redis のアプリケーション Jun 20, 2023 am 08:39 AM

Redis は高性能のキーと値のデータベースであり、その高速なデータ ストレージとアクセス機能により、サービスの登録と検出のプロセスで広く使用されています。サービスの登録と検出は、分散システムにおいて非常に重要なプロセスです。マシン上で複数のサービスを実行する場合、クライアントがこれらのサービスを発見し、それらと対話する方法が必要です。完全な分散システムでは、数十のサービスが実行されている可能性があり、手動構成は現実的ではありません。現時点では、サービスの登録と検出を使用する必要があります。

Vue を使用して画像のグレーディングとレンダリング処理を実現するにはどうすればよいですか? Vue を使用して画像のグレーディングとレンダリング処理を実現するにはどうすればよいですか? Aug 19, 2023 pm 07:53 PM

Vue を使用して画像のグレーディングとレンダリング処理を実現するにはどうすればよいですか?概要 最新の Web アプリケーションの開発において、画像処理は非常に一般的な要件です。人気の JavaScript フレームワークである Vue.js を使用すると、画像のグレーディングとレンダリング処理を非常に簡単かつ効率的に実装できます。この記事では、Vue.js を使用して画像のグレーディングとレンダリング処理を実装する方法をコード例とともに示します。ステップ 1: Vue インスタンスを作成する まず、イメージのデータとロジックを管理するために Vue インスタンスを作成する必要があります。 HTで

再描画とリフロー: レンダリング フェーズにより重要な影響を与えるのはどちらですか? 再描画とリフロー: レンダリング フェーズにより重要な影響を与えるのはどちらですか? Jan 26, 2024 am 10:16 AM

再描画とリフローがレンダリング段階に及ぼす影響: 誰がより重要ですか? Web ページがレンダリングされるとき、ブラウザは一連の操作を特定の順序で実行して、ページのコンテンツを表示します。そのうち、再描画とリフローはレンダリング プロセスの 2 つの重要なステップです。この記事では、再描画とリフローがレンダリング段階に及ぼす影響を調査し、その重要性を分析します。再描画とリフローの意味と違い レンダリングに対する再描画とリフローの影響を理解する前に、まずそれらの意味と違いを理解しましょう。再描画とは、要素のスタイルが変更されることを指しますが、要素には影響しません。

See all articles