OpenGL ES とコードを使用して FSGL ライブラリを操作した結果:
次に、すべてがどのようにプログラムされ、 さまざまな興味深い問題が解決されたかを説明します。
最初に、前の投稿で書いたように、OpenGL ES コンテキストを初期化します。さらに、コードのレンダリングと簡単な説明のみを考慮します。
マトリックスがあなたを見ています
ビデオ内のこのミクの図は三角形で構成されています。 OpenGL で三角形を描くには、座標 x、y、z で 3 つの点を指定する必要があります。 OpenGL コンテキストの 2D 座標で。
3D 座標を含む図形を描画する必要があるため、射影行列を使用する必要があります。また、モデルを回転したり、ズームインしたり、その他の操作を行う必要もあります。この目的のためにモデル マトリックスが使用されます。実際、OpenGL にはカメラの概念がありません。オブジェクトは静的なカメラの周りを回転します。このために、ビュー マトリックスが使用されます。
OpenGL ES の実装を簡素化するため –行列データは含まれません。 GLM など、不足している機能を追加するライブラリを使用できます。
シェーダー
開発者があらゆる方法であらゆるものを描画できるようにするには、OpenGL ES は頂点シェーダーとフラグメント シェーダーを実装する必要があります。頂点シェーダーは、レンダリング座標を入力として受け取り、行列を使用して変換を実行し、その座標を gl_Position に渡す必要があります。フラグメントまたはピクセル シェーダ –すでにカラー/テクスチャを描画し、オーバーレイを適用しています。
GLSL でシェーダーを作成しました。現在の実装では、シェーダはメイン アプリケーション コードに C-string として直接組み込まれています。
バッファ
頂点バッファには頂点 (頂点) の座標が含まれており、このバッファにはテクスチャリング用の座標やシェーダに必要なその他のデータも含まれています。頂点バッファーを生成した後、ポインターを頂点シェーダーのデータにバインドする必要があります。これは、glVertexAttribPointer コマンドを使用して行われます。このコマンドでは、要素の数、データの先頭へのポインター、およびバッファーをトラバースするために使用されるステップ サイズを指定する必要があります。私の実装では、ピクセル シェーダの頂点座標とテクスチャ座標のバインドが行われます。ただし、フラグメント シェーダーへのデータ (テクスチャ座標) の転送は頂点シェーダーを通じて実行されることは言うまでもありません。これを実現するために、 座標は変数を使用して宣言されます。
これにより、OpenGL は三角形の点をどの順序で描画するかを認識できるようになります –インデックスバッファ(インデックス)が必要になります。インデックス バッファには、そのような 3 つのインデックスを使用して配列内の頂点番号が含まれており、三角形が取得されます。
テクスチャ
まず、OpenGL 用のテクスチャをロード/生成する必要があります。このために、テクスチャは bmp ファイルからロードされる SDL_LoadBMP を使用しました。ただし、24 ビット BMP のみが適切であり、その色は通常の RGB 順序ではなく BGR で保存されることに注意してください。つまり、ロード後に赤チャンネルを青チャンネルに置き換える必要があります
。テクスチャ座標は の形式で指定します。 UV、つまり、2 つの座標を転送するだけで済みます。テクスチャの出力はフラグメント シェーダーで行われます。これを行うには、テクスチャをフラグメント シェーダにバインドする必要があります。
余分なものは何もありません
私たちの指示によれば、OpenGL は 2D を通じて 3D を描画するため、–次に深度を実装し、非表示の三角形を選択します –カリングと深度バッファ (Z バッファ) を使用する必要があります。私の実装では、glEnable(GL_DEPTH_TEST); という 2 つのコマンドを使用して、深度バッファの手動生成を回避できました。および選択 glEnable(GL_CULL_FACE);
また、射影行列の近平面がゼロより大きいことも必ず確認してください。ヌル近傍平面を使用した深さのチェックは機能しません。
レンダリング
頂点バッファ、インデックス バッファを意識的なもの (ミク モデルなど) で埋めるには、このモデルをロードする必要があります。このために、assimp ライブラリを使用しました。ミクは Wavefront OBJ 形式ファイルに配置され、assimp を使用してロードされ、assimp から頂点およびインデックス バッファーへのデータ変換が実装されました。
レンダリングはいくつかの段階で行われます:
<オル>
次のステージ – Emscripten を使用した WebGL でのレンダリングの実装。
ソースコード:
https://github.com/demensdeum/OpenGLES3-Experiments/tree/master/8-sdl-gles-obj-textured-assimp-miku
モデル:
https://sketchfab.com/models/7310aaeb8370428e966bdcff414273e7






















