日本語

WebGLチュートリアル

WebGL アプリケーション

WebGLの例

属性とバッファオブジェクトの関連付け

こんにちは、将来のプログラマーさんたち！今日は、コンピュータグラフィックスプログラミングの世界への興味深い旅に出発します。あなたの近所の親切なコンピュータ先生として、属性をバッファオブジェクトに関連付けるプロセスをガイドします。これらの用語が今はよく分からないとしても、このチュートリアルの終わりまでに、プロのように使えるようになるでしょう！

Associating Attributes & Buffer Objects

基礎を理解する

本題に入る前に、一歩下がって、なぜこれをやるのかを理解しましょう。例えば、ビデオゲームのような仮想の世界を築いているとします。画面に見えるすべてのもの - キャラクター、木、建物 - は、3D空間の小さな点で構成されています。これらの点と、それに関する情報（色やライトの当たり方など）を「属性」と呼びます。そして、これらのデータを効率的に管理するために、「バッファオブジェクト」を使います。

では、主なトピックを以下の3つの主要なステップに分けてみましょう：

  1. 属性の場所を取得する
  2. 属性をVBO（頂点バッファオブジェクト）に指す
  3. 属性を有効にする

属性の場所を取得する

旅の最初のステップは、属性がどこに隠れているかを探すことです。大きな図書館で favoritな本を見つけるようなものです。正確な場所を知る必要があります。

OpenGL（人気のグラフィックスライブラリ）でどうやるかを以下に示します：

GLint positionAttribute = glGetAttribLocation(shaderProgram, "position");

これを分解すると：

  • GLint は、場所を保存するための変数の型です。
  • positionAttribute は、この場所に割り当てる名前です。
  • glGetAttribLocation は、場所を見つけるための関数です。
  • shaderProgram は、属性が定義されているプログラムです。
  • "position" は、探している属性の名前です。

図書館の司書に、「'position'という本をどこに見つけるか教えてください」と尋ねるようなものです。司書（OpenGL）が正確な場所を教えてくれます。

属性をVBOに指す

属性の場所が分かったら、そのデータがどこにあるかを教える必要があります。ここで登場するのが頂点バッファオブジェクト（VBO）です。VBOは、属性データを保存する大きな箱のようなものです。

属性をVBOに指す方法は以下の通りです：

glBindBuffer(GL_ARRAY_BUFFER, vbo);
glVertexAttribPointer(positionAttribute, 3, GL_FLOAT, GL_FALSE, 0, 0);

これは少し複雑ですが、分解してみましょう：

  1. glBindBuffer(GL_ARRAY_BUFFER, vbo): この特定のVBOを使いたいとOpenGLに伝えます。
  2. glVertexAttribPointer: この関数は主演です。これは、「 attribute! ここにデータがあるし、こんな風に読め」と言っています。
  • positionAttribute: 先ほど見つけた場所。
  • 3: 各ポジションは3つのコンポーネント（x、y、z）を持っています。
  • GL_FLOAT: データの型（浮動小数点数）。
  • GL_FALSE: データを正規化したくない。
  • 0: ストライド（データ間の距離）。
  • 0: バッファから読み始める場所。

本を読む方法を教えるようなものです：「最初から始めて、3つの単語ずつ読んで、ページを飛ばさないでください！」

属性を有効にする

最後のステップは、実際に属性を有効にすることです。創造物を電源オンにするようなものです。

以下のようにします：

glEnableVertexAttribArray(positionAttribute);

シンプルですね！「(attribute)、GO!」と伝えるだけです。

すべてを合わせる

それでは、すべてのピースがどのように組み合わさるかをみてみましょう：

// 属性の場所を取得する
GLint positionAttribute = glGetAttribLocation(shaderProgram, "position");

// 属性をVBOに指す
glBindBuffer(GL_ARRAY_BUFFER, vbo);
glVertexAttribPointer(positionAttribute, 3, GL_FLOAT, GL_FALSE, 0, 0);

// 属性を有効にする
glEnableVertexAttribArray(positionAttribute);

それで、属性をバッファオブジェクトに関連付けることができました。自分を褒めてください - 素晴らしいグラフィックスを作成するためのステップが一つ近づきました！

一般的なメソッド

以下に、簡単に参照できるように、使用した一般的なメソッドの表を示します：

メソッド 説明
glGetAttribLocation シェーダープログラム内の属性の場所を見つける
glBindBuffer 使用するバッファオブジェクトを選択する
glVertexAttribPointer バッファからのデータの読み方を定義する
glEnableVertexAttribArray 属性を有効にする

結論

おめでとうございます！コンピュータグラフィックスプログラミングの基本概念の一つを学びました。属性をバッファオブジェクトに関連付けることは、点を結びつけるようなものです。これにより、コンピュータが作成した素晴らしいビジュアルを理解することができます。

このまとめを終えるにあたり、私がこの内容を学び始めたときのことを思い出しています。ある日、コードをデバッグするために数時間を費やした後、属性を有効に忘れていたことに気づきました！ですから、間違えを気にしないでください - それらは学習プロセスの一部です。

練習を続け、探索を続けると、すぐに自分自身の素晴らしい3D世界を作成できるようになります。次回まで、ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
WebGL - シェーダー
次のチュートリアル:
WebGL - モデルを描画する