けんごのお屋敷

2014-12-20

独学で 1 ヶ月間 OpenGL を学んで得た基礎知識のまとめ ~ 2D 編 ~

OpenGL。その単語の響きだけで素晴らしく魅力的に思える 3D コンピューターグラフィックスライブラリは、これまで何人もの駆け出しゲームプログラマーに幾度と無く挫折を味わわせてきた。「ゲーム作るならやっぱり高速に描画できる OpenGL でしょ。でも自分が作るゲームに 3D はいらないし、しかも難しそうだし、別に 2D 描画だけできればいいや」 と、軽い気持ちで手を出したのが運の尽き、世の中そんなに甘くはなかった。OpenGL というその難攻不落城は私達の進む道を阻むように高々とそびえ立っている。

OpenGL がコレほどまでに取っ付きにくいのは 気軽に Hello World できない からなんじゃないかと思う。OpenGL の場合だとそれは何かしら 1 つの図形を表示することにあたるのかな。でもたったそれだけなのに、覚えることが山ほどありすぎて全然本題にたどり着くことができないし、OpenGL には OpenGL ならではの複雑さがある。巷にあふれているサンプルコードについて「なぜそう書けばこう動くのか」という仕組みやその意味を、コードを読んだだけでしっかりと理解できる人はどれくらいいるだろうか。英語でも何でもとりあえず頑張って読んでみて、そういうところからソースコードをコピペして、コンパイルして、やったー動いたー、ってなったとしても、その先には闇しか見えない。基本を理解してないと応用はできないのです。でもね!それは仕方ないことなのです、たぶん。何を始めるにも基礎知識は必要になってくる。逆に言えば基礎がしっかりしていればあとはなんでもできる。

ということで、こういうインターネット上の情報はいくらあっても損はしないので、OpenGL で 2D を扱うために 3D の基礎を説明して、んで OpenGL 使うんだったら基礎おさえとけば 2D でも 3D でも難易度そんなに変わらなくね?ってとこに気付けたら、その知識を元にプログラミングができるところまでブログの記事にまとめてみようと思う。ちなみに本とかで体系的に勉強したわけではないので、間違いがあれば突っ込んでくれると喜びます。

前提

さて、前置きが少し長くなったけど、今回の記事の対象となるものは Android 向けの OpenGL ES 2.0 です。知ってる人もいるかもしれないけど OpenGL ES の 1.0 と 2.0 は 後方互換性がない別物になってる ので 1.0 と間違ってこの記事を読み進めるようなことがあったら、の〜みそぷ〜ですよ。今後、記事内で OpenGL というと OpenGL ES 2.0 のことを指すことにする。で、Android 向けなので記事中のソースコードも Android のソースコード、つまり Java。

ただ、基礎知識部分は OpenGL ES 2.0 に限らず 3D 表現を行う上で共通の部分が多く、2.0 以降は後方互換性を保たれているので将来的にもその知識はしっかり再利用できる。また Android 以外のプラットフォームでも同じような OpenGL の API は提供されている (たとえば iOS とか C++ とか JavaScript とか)。だから、Android 前提の記事とはいいつつも、他のプラットフォームではまったく役に立たないかというとそうでもないと思う。具体的に Java のソースコードが出てくるのは最後の記事くらいで、他はほぼ基本の説明みたいなものだから。

理由

どうしてこの記事の中で扱うのが Android 用の OpenGL ES 2.0 かというと

  1. OpenGL を勉強する時に Android を使ったから。
  2. 今の主流であるプログラマブルシェーダについても知識をつけたかったから。(プログラマブルシェーダは OpenGL ES 2.0 からの機能)

くらいの単純な理由。要するに勉強のためのプラットフォームは何でもよくて自分が好きなものでやればよいってことね。最近だと OpenGL ES の仕様に準拠した WebGL という仕様もあって、ブラウザで JavaScript から GPU を使える。ブラウザで動作確認できるってことでだいぶ敷居が低くなってるし、軽く始めたいのなら WebGL はうってつけじゃないだろうか。

対象

  • OpenGL で 2D または 3D ゲームを作ってみたい人
  • OpenGL の中でどういう処理がされているか知りたい人
  • OpenGL でドヤ顔したい人
  • OpenGL と共に歩んでいきたい人

目次

さすがにこの難攻不落城を 1 回で全て攻略しようとすると途中で「もう無理ぽ」する人がでてきそうなので、何回かに分けて少しずつ前進していきたい。そうだ、何事も突き詰めていけば単純だ。結局は OpenGL だって

どこに描画するのか教えてくださーい
どのように描画するのか教えてくださーい

という 2 つのことを私達に要求してきているだけ。それだけっす。

以下目次。

  1. OpenGL が世界を描画する仕組み
  2. 頂点情報とプリミティブ
  3. バーテックスシェーダによる座標系変換
  4. ラスタライザの画素生成と線形補間
  5. テクスチャマッピング
  6. Hello World in OpenGL!

付録

OpenGL ES 2.0 について勉強する際に、個人的に良いテキストだったと思ったもの (というと上から目線でテメーコノヤローですね、すみません。とてもお世話になりました)。有用な情報が詰まっているので、時間があれば熟読して知識を深めるのも良いかなーと。

  • OpenGL ES 2_X - The Standard for Embedded Accelerated 3D Graphics

    まずはやっぱりここやのぉ。OpenGL ES の仕様を策定しているクロノスグループのサイト。OpenGL ES 2.0 と GLSL の仕様書を PDF でダウンロードできる。ぜーんぶ英語だけどね…

  • A real Open GL ES 2.0 2D tutorial

    このブログと同じく 2D 描画を目的として解説していて、シリーズもので part1 から part8 まである。実際に動作するサンプルコードがあるのでめちゃくちゃ勉強になる。これもまた英語だけどね…

  • 床井研究室

    大学の先生だと思うけど、講義で使うようなテイストでたくさんの記事が書いてあってかなり勉強させてもらった。たまに「こういう課題をやってきてね」で締められてる記事もあって、あぁ学生君がんばれって気持ちになる。

  • wgld.org

    WebGL について膨大な量のテキストが書かれているサイト。基礎知識だけでなく高度な 3D 表現のテクニックもデモと共に丁寧に紹介されていてとてもためになるサイト。運営者が日本人で全部日本語なのはうれしい。

  • このエントリーをはてなブックマークに追加