OpenGLで三角形描画

OpenGLを使って、色々な方法で、三角形を描画する方法を紹介します。
3頂点を結ぶ単純な方法から、シェーダを駆使した描画まで。
おまけでIBOとテクスチャの話も。

Transcript

1. ©2019 cddadr Draw △ by OpenGL OpenGLによる三角形描画の全て by @cddadr 1
2. ©2019 cddadr お前はだれだ 最近は、ゲーム開発に力を入れています。 • とし • パターン認識と機械学習講座(B4) • Rust, Common Lisp, JavaScript, TypeScript • 競技プログラミング 2 Profile tamamu cddadr
3. ©2019 cddadr OpenGLとは Khronos Groupの策定した、オープン標準規格のグラフィックスAPI。 • 様々なプラットフォームに、実装が存在する。 • C言語のヘッダーファイルが公開されている他、多くのプログラミング言 語向けバインディングが存在する。 • 実装の多くは、座標変換などのベクトル演算にGPUを利用するため、高 速な2D/3D描画が行える。 • 環境に応じて、利用可能バージョンが異なる。 3 About OpenGL ※ ここでは OpenGL 3.3 (Core Profile) を利用
4. ©2019 cddadr 簡単な使い方 クライアント(CPU)から、サーバ(GPU)にデータを転送し、結果を取得すること で描画が行なわれる。 1. 頂点データ格納用のポインタをサーバに作成。 2. クライアントからのデータを受け取るポインタをサーバに設定。 3. サーバへデータを転送する。 4. 描画に利用するポインタをサーバに設定する。 5. サーバへ描画命令を発行する。 4 How to Use Easily
5. ©2019 cddadr 簡単か？ 5 A. いいえ
6. ©2019 cddadr とりあえず△を描画してみよう 6
7. ©2019 cddadr 登場人物 OpenGLの世界に登場するものたち。 • シェーダ・・・描画されるもの全てに適用されるプログラム。 • Vertex Shader・・・頂点情報を司るシェーダ。 • Fragment Shader・・・色情報を司るシェーダ。 • VBO・・・頂点データを保持する。学生みたいなもの。 • VAO・・・VBOたちのまとめ役。担任の先生みたいなもの。 • IBO・・・VBOの持つ頂点を使って、効率良く頂点配列を構成する。学級 内のグループみたいなもの。 7 The Characters
8. ©2019 cddadr いちばん普通の三角形描画: シェーダ編 Vertex ShaderとFragment Shaderを用意する。 8 The Standard Method of Drawing A Triangle: Shader 頂 点 色
9. ©2019 cddadr いちばん普通の三角形描画: 準備編 バッファを用意し、頂点データをサーバへ転送する。 1. genVertexArrays(頂点配列オブジェクトの数) 2. genBuffers(頂点バッファオブジェクトの数) 3. bindVertexArray(頂点配列オブジェクト) 4. bindBuffer(ARRAY_BUFFER, 頂点バッファオブジェクト) 5. bufferData(ARRAY_BUFFER, 頂点配列の大きさ, 頂点配列へのポインタ, STATIC_DRAW) 6. vertexAttribPointer(シェーダ内変数位置, 頂点数, 変数型, 正規化, 1頂点辺り 配列幅, 配列内先頭位置) // ここでVAOに紐付く 7. enableVertexAttribArray(シェーダ内変数位置) 8. bindBuffer(ARRAY_BUFFER, 0) // 解放 9. bindVertexArray(0) // 解放 9 The Standard Method of Drawing A Triangle: Preparation GPU VAO VA VBO VB VA VB Shader [-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, 0.0, 0.5, 0.0 ]
10. ©2019 cddadr いちばん普通の三角形描画: 描画編 転送した頂点データをもとに、三角形を描画する。 1. useProgram(シェーダプログラム) 2. bindVertexArray(頂点配列オブジェクト) 3. drawArrays(TRIANGLES, 配列内先頭位置, 頂点数) 4. bindVertexArray(0) // 解放 10 The Standard Method of Drawing A Triangle: Drawing bufferDataの時にDYNAMIC_DRAWを指定し、 頂点座標を毎フレーム bufferSubDataで動かした例
11. ©2019 cddadr 番外 - 頂点インデックスを用いた描画: 準備編 転送済み頂点で、描画に使用したい頂点番号を指定し、描画を行う。 インデックスバッファは、VAOに対して1つだけ。 1. genBuffers(インデックスバッファオブジェクトの数) 2. bindVertexArray(頂点配列オブジェクト) 3. bindBuffer(ELEMENT_ARRAY_BUFFER, インデックスバッファオブジェクト) // こ こでVAOに紐付く 4. bufferData(ELEMENT_ARRAY_BUFFER, インデックス配列の大きさ, インデック ス配列へのポインタ, STATIC_DRAW) 5. bindVertexArray(0) // 解放 6. bindBuffer(ELEMENT_ARRAY_BUFFER, 0) // 解放 11 Extra - Method of Drawing with Vertex Indices: Preparation ※順番に気を付ける！
12. ©2019 cddadr 番外 - 頂点インデックスを用いた描画: 描画編 転送した頂点インデックスデータをもとに、図形を描画する。 1. useProgram(シェーダプログラム) 2. bindVertexArray(頂点配列オブジェクト) 3. drawElements(TRIANGLE_STRIP, 頂点数, インデックス型, 頂点インデックス配 列へのポインタ) // VAOに紐付いてる時、ポインタはnullで良い 4. bindVertexArray(0) // 解放 12 Extra - Method of Drawing with Vertex Indices: Drawing
13. ©2019 cddadr 閑話休題 13
14. ©2019 cddadr シェーダを駆使した三角形描画: シェーダ編 点の、三角形の内外判定を利用して、矩形内に三角形を描画する。 14 The Method of Drawing A Triangle With A Fragment Shader: Shader 一部抜粋
15. ©2019 cddadr シェーダを駆使した三角形描画: 描画編 描画の前に、Uniform変数にデータを送信する。 あとは、先程と同様に描画する。 1. useProgram(シェーダプログラム) 2. uniform1f(シェーダ内変数名, 値) 3. bindVertexArray(頂点配列オブジェクト) 4. drawArrays(TRIANGLES, 配列内先頭位置, 頂点数) 5. bindVertexArray(0) // 解放 15 The Method of Drawing A Triangle With A Fragment Shader: Drawing クライアント経過時間から、シェーダ内で頂点を生成し、 三角形の内外判定により色付けを行った例
16. ©2019 cddadr 補足: Vertex Array Objectに関して WebGL 1.0は、OpenGL ES 2.0系列のため、Vertex Array Object (VAO)が 標準で使えない。 • WebGL 1.0でも、拡張機能として、VAO実装は存在する。 • WebGL 2.0は、OpenGL ES 3.0系列のため、VAOが利用可能。 • OpenGL 3.0 Core Profile以降では、VAOの使用が必須。 • 基本的に、VAOを使う方針で良い。 16 Appendix of Vertex Array Object
17. ©2019 cddadr 番外 - 三角形にテクスチャを貼る: シェーダ テクスチャと、テクスチャ内座標が必要。 17 Extra - Map Texture on A Triangle: Shader
18. ©2019 cddadr 番外 - 三角形にテクスチャを貼る: 準備編 画像を読み込み、テクスチャとしてサーバへ転送する。 IBO・VBOとは異なり、VAOには紐付かない。 1. どうにかして画像のN次元色素配列を取得 2. genTextures(テクスチャ枚数) 3. bindTexture(TEXTURE_2D, テクスチャオブジェクト) 4. texParameteri(TEXTURE_2D, パラメータ名, パラメータ) 5. texImageND(TEXTURE_2D, ミップマップレベル, 色順番, 幅, 高さ, 0, 色の使い 方, 色素値の型, 色素配列へのポインタ) 6. generateMipmap(TEXTURE_2D) // MIPMAP補間オプションで有効 18 Extra - Map Texture on A Triangle: Preparation
19. ©2019 cddadr 番外 - 三角形にテクスチャを貼る: 描画編 転送したテクスチャを用いて、三角形を描画する。 1. useProgram(シェーダプログラム) 2. bindTexture(TEXTURE_2D, テクスチャオブジェクト) 3. bindVertexArray(頂点配列オブジェクト) 4. drawArrays(TRIANGLES, 配列内先頭位置, 頂点数) 5. bindVertexArray(0) // 解放 19 Extra - Map Texture on A Triangle: Drawing デモします
20. ©2019 cddadr Thanks! 20 • https://www.khronos.org/opengl/wiki/Main_Page • https://github.com/JoeyDeVries/LearnOpenGL • https://github.com/bwasty/learn-opengl-rs • https://docs.rs/crate/gl/0.11.0