Hope is a Dream. Dream is a Hope.

非公開ブログは再開しました。

OpenGL初心者が3時間で基礎を学ぶ | その2

OpenGL初心者が3時間で基礎を学ぶ | その2

話している暇はありません。おそらくこのページを見に来た方はOpenGLを学ぶモチベーションがあることと思います。環境はPyOpenGL = Python + OpenGLです。前編はこちら

※ このページは「Python Programming in OpenGL」(PDF,英語)を日本語で解説してくのが目的です。

その2:点を描く

描くか描かせるかは使う人次第。

# -*- coding: utf-8 -*-
##################################################################
# 
# PyPoints.py
# Setting a coordinate system with central origin
# 
# Chapter 5 2Dimensional Graphics
# http://www.math.uiuc.edu/~gfrancis/illimath/StanBlank/PyOpenGL.pdf
# 
##################################################################

""" OpenGLパッケージをインポート """
from OpenGL.GL import *
from OpenGL.GLU import *
from OpenGL.GLUT import *
import sys

def init():
    """ 描画エリアの初期化関数 """
    glClearColor(0.0, 0.0, 0.0, 1.0)
    gluOrtho2D(-1.0, 1.0, -1.0, 1.0)


def plotpoints():
    glClear(GL_COLOR_BUFFER_BIT)
    glColor3f(1.0, 0.0, 0.0)

    """ 描画開始宣言(おまじない) """
    glBegin(GL_POINTS)

    glVertex2f(0.0, 0.0)

    """ 描画終了宣言(おまじない) """
    glEnd()

    glFlush()

def main():
    """ おまじない """
    glutInit(sys.argv)
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB)
    glutInitWindowSize(500,500)
    glutInitWindowPosition(100,100)
    glutCreateWindow("PyPoints.py | Plot Points")
    glutDisplayFunc(plotpoints)

    init()
    glutMainLoop()


main()
print u'画面の真ん中に赤い点が表示されていると成功です。'

結果。

スクリーンショット 2015-04-21 22.11.39

もはや見えない。。真ん中に赤の点が表示されます。

解説

初期化関数

def init():
    """ 描画エリアの初期化関数 """
    glClearColor(0.0, 0.0, 0.0, 1.0)
    gluOrtho2D(-1.0, 1.0, -1.0, 1.0)

init関数はmain関数から一度呼ばれます。

def main():
    """ おまじない """
    glutInit(sys.argv)
    ...

    init()

    glutMainLoop()
        ...

glClearColor(r,g,b,a): 背景色の指定

ここでは、glClearColor(R,G,B,A)を使って、背景色の指定をしています。今回は(R,G,B) = (0,0,0)なので黒を指定してます。最後のAは透過です。値はパーセンテージなので、0から1までを指定するだけで良いです。ちなみに背景を白にしたければglClearColor(1.0, 1.0, 1.0, 1.0)とすればできます。簡単ですね。

 gluOrtho2D(x-left, x-right, y-bottom, y-top): 2D座標の定義

二次元座標の定義です。難しくはありません大丈夫です。今回のコードではgluOrtho2D(-1.0, 1.0, -1.0,1.0)としていますよね。これは、画面の端から端までの座標は-1.0から1.0だよと指定してあげているのです。ですので、プログラムの途中にでてくるのですが、点を打つ座標を(-0.5, -0.5)と言うようにするだけで、この画面内で点を打つことができます。つまり、自分で作った座標を使えるわけで、画像のピクセルサイズ等を気にしなくて良いんです。(便利)

点を打つ関数

def plotpoints():
        """ 画面の初期化 """
        # init()で指定した色で塗りつぶされる
    glClear(GL_COLOR_BUFFER_BIT)

それでは点を打っていきます。まずglClear(GL_COLOR_BUFFER_BIT)を使って、点を打つ前にinit関数で指定した色で画面全体を塗りつぶします。ここらへんはおまじないです。(まだ)あまり深く考えなくても大丈夫です。

  """ 色の指定 """
    glColor3f(1.0, 0.0, 0.0)
    """ 描画開始宣言(おまじない) """
    glBegin(GL_POINTS)
    """ 描画させる """
    # 座標点をしてい
    glVertex2f(0.5, 0.0)

    # ここでいろいろ描かせる...

    """ 描画終了宣言(おまじない) """
    glEnd()

さてここからが今日の本題です。

glColor3f(r,g,b): 色の指定

まず描画する色を指定します。ここで****3fとは色を3つの浮動小数点で宣言することを表していて、0から1までのパーセンテージ表示になります。今回は赤なので(1.,0.,0.)です。

glBegin(GL_POINTS): 描画の開始

glBegin(GL_POINTS)で点を描画する事を宣言します。

glVertex2f(x,y): 点の座標を宣言

また***2fとでてきました。2fとは2つの浮動小数点を表しているので、ここでは2Dの座標点を2つの浮動小数点で宣言してます。この座標に先ほど指定した色(赤)で点が打たれます。Vertexとは頂点のことです。

glEnd(): 描画の終了

描画開始を宣言したので、描画終了も同じく宣言して、無事終了です。

glFlush(): フラッシュ!!

フラッシュします。つまり、描きます。おまじないです。

main関数

def main():
    """ おまじない """
    glutInit(sys.argv)
    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB)
    glutInitWindowSize(500,500)
    glutInitWindowPosition(100,100)
    glutCreateWindow("PyPoints.py | Plot Points")
    glutDisplayFunc(plotpoints)

    init()
    glutMainLoop()

さて今回からmain関数を作りました。これは、OpenGLをセットアップするルーティン(おまじない)達をまとめてしようというのがもくろみです。これらはいつも使うので、まとめておきましょう。

拡張

先ほどは頂点が小さすぎて見えなかったので、サイズを大きくしましょう。

 """ 色の指定 """
    glColor3f(1.0, 0.0, 0.0)
    """ 頂点サイズの指定 """
    glPointSize(10.0)

    """ 描画開始宣言(おまじない) """
    glBegin(GL_POINTS)
    
    """ 描画させる """
    glVertex2f(0.0, 0.0)
    glVertex2f(0.5, 0.0)
    glVertex2f(-0.5, 0.0)

    """ 描画終了宣言(おまじない) """
    glEnd()

glPointSize(size) : 頂点のサイズの設定

頂点サイズは簡単にかえきれます。下は描画結果です。

スクリーンショット 2015-04-21 22.53.55

拡張:線の描画

    """ 点の描画 """
    glColor3f(1.0, 0.0, 0.0)
    glPointSize(20.0)

    glBegin(GL_POINTS)
    glVertex2f(0.5, -0.5)
    glVertex2f(-0.5, 0.5)
    glVertex2f(0.0, 0.0)
    glVertex2f(-0.5, -0.5)
    glVertex2f(0.5, 0.5)
    glEnd()

    """ 線の描画 """
    glColor3f(0.0, 1.0, 0.0)
    glLineWidth(5.)

    # glBegin(GL_LINES)
    # glBegin(GL_LINE_STRIP)
    glBegin(GL_LINE_LOOP)
    glVertex2f(0.5, -0.5)
    glVertex2f(-0.5, -0.5)
    glVertex2f(-0.5, 0.5)
    glVertex2f(0.5, 0.5)
    glEnd()

同じ要領で線も引けます。パターンがわかってきたでしょう。

スクリーンショット 2015-04-21 23.05.11

次にはこちら

OpenGLによる3次元CGプログラミング

OpenGLによる3次元CGプログラミング

GLUTによるOpenGL入門―「OpenGL Utility Toolkit」で簡単3Dプログラミング! (I・O BOOKS)

GLUTによるOpenGL入門―「OpenGL Utility Toolkit」で簡単3Dプログラミング! (I・O BOOKS)

OpenGLでつくる3次元CG&アニメーション - VC++ .NET,Cg言語によるアプリケーションの制作

OpenGLでつくる3次元CG&アニメーション - VC++ .NET,Cg言語によるアプリケーションの制作