امروز چگونگی بارگزاری (Load) کردن عکس رو براتون میزارم و به شما یاد میدم که چگونه از عکس در OpenGL استفاده کنین.
در جلسات قبل با چگونگی رسم اشکال سه بعدی آشنا شدید اما در این قسمت با چند تابع OpenGL جدید آشنا میشوید.
فرض کنید که می خواهید یک موشک را روی صفحه به حرکت در آورید.حال برای رسم یک موشک ما باید بالهای موشک / دم موشم و ... را دونه دونه رسم کنید و بر حسب صلیغه رنگ های مختلفی به موشک خود بدهید . با اندکی فکر کردن میفهمید که عجب کار دشوار و زمان گیری است . حال فکر کنید که میخواهید تصویر یک موشک را در صفحه حرکت دهید . این کار بسیار ساده و مفید است.
خوب بگذریم و بریم سر آموزش:
در مثال زیر چگونگی Load کردن یک عکس (Texture) را بلد میشوید و عکس لود شده را به صورت سه بعدی در صفحه به نمایش می گذارید.
توجه: حدود ۸۰ درصد کدهایی که در این مثال آمده است تکراری است.
یک پروژه جدید بسازید . بعد از منوی Project زیر منوی Refrences را بزنید تا پنجره انتخاب DLL ها به نمایش در آید. سپس بعد از پیدا کردن VB OpenGL API 1.2 تیک کنار آن را فعال کرده و OK کنید. دوباره از منوی Project زیر منوی Project Propertis را بزنید تا تنظیمات پروژه شما به نمایش در آید.در قسمت StartUP Project با تغیر دادن Form1 به Sub Main کامپایل کردن کدها را به ماژول متصل کنید.
بر روی فرم خود یک PictureBox با خصوصیت های زیر قرار دهید:
خاصیت
مقدار خاصیت
Name
Picture1
AutoRedraw
True
AutoSize
True
HasDC
True
ScaleMode
3-Pixels
Width
6105
Height
5745
Visable
False
ابتدا تمامی توابع و روال هایی که در جلسات گذشته گفته بودم رو بنویسید که عبارتند از:
Sub Main , InitGL , CreateGLWindow , DrawGLScene , KillGLWindow , ...
حالا یک ماژول جدید دیگه باز کنین . برای این کار از منوی Project زیرمنوی Add Module را بزنید و خاصیت نام(Name) ماژول خود را برابر LoadTex قرار دهید.(این نام اختیاری است هر نامی که دلت میخواد می تونی بزاری.)
ابتدا در ماژول جدید خود باید چند تا متغیر عمومی تعریف کنید برای این کار کدهای زیر را به ماژول LoadTex اضافه کنید:
Public Hrc as long
public FullScreen as Boolean
Public Texture(0) as glInt
public Xrot as glFloat
Public Yrot as GLFloat
Public Zrot as GLFloat
خوب تا اینجا کار تعریف کردن متغیرها به پایان میرسد در ادامه باید فانکشن های بارگذاری تصویر را بنویسید.
بعد از تعریف کردن متغیر ها ما باید روال LoadBMP را بنویسیم که کار آن تعیین عکسی است که می خواهد به نمایش درآید.برای این کار کدهای زیر را به ماجول خود اضافه کنید:
Public Function LoadBMP(ByVal FileName as String , ByRef Texture() as GLInt , ByRef Height as Long , ByRef Width as Long) as Boolean
Form1.Picture1.Picture = LoadPicture(FileName) 'x
CreateMapImage Form1.Picture1 , Texture() , Height , Width
LoadBMP = True
End Function
مطمئنآ در قطعه کد بالا با تابع CreateMapImage آشنایی ندارید که در ادامه این ساب روتین را تعریف میکنیم. کار این ساب روتین ست کردن رنگ تصویر و نمایش دادن آن است. کد زیر را به ماژول خود اضافه کنید:
Public Sub CreateMapImage(Pict as PictureBox , ByRef TextureIMG() as GLByte , ByRef Height as long , ByRef Width as Long ) 'x
Pict.ScaleMode = 3
Height = Pict.ScaleHeight
Width = Pict.ScaleWidth
ReDim TextureIMG(2 , Height - 1 , Width - 1) 'x
Dim X , Y , C as Long
Dim Yloc as Long
For X = 0 to Width - 1
For Y = 0 To Height - 1
C = Pict.Point(X , Y) 'x
Yloc = Height - Y - 1
TextureIMG(0 , X , Yloc) = C And &HFF
TextureIMG(1 , X , Yloc) = (C 256) And &HFF
TextureIMG(2 , X , Yloc) = (C 65536) And &HFF
Next Y
Next X
End Sub
حالا باید تابع مربوط به بارگذاری و اجرای الگو ( که در اینجا یک عکس است) را بنویسیم. کار این کدها بارگذاری یک فایل تصویری(Bitmap) است. اگر تصویر در مسیر تعیین شده وجود نداشته باشد توسط یک شرط از برنامه خارج میشود.توجه داشته باشید که عکسی را که میخواهید به صورت ۳ بعدی به نمایش بگذارید باید توانی از ۲ باشد(مثلا ۲ به توان ۵ یا ۲ به توان ۷ و ...)که ما در اینجا یک فایل تصویری ۲۵۶ در ۲۵۶ پیکسل را به نمایش می گذاریم . توجه اگر عکسی که اندازه آن ۲۵۶ در ۲۵۶ است ندارید میتوانی با برنامه فوتوشاپ این کار را انجام دهید اگر میخواهید خوب یادبگیرین مطالب این وبلاگو بخونین:
آموزش مقدماتی تا حرفه ای فوتوشاپ
خوب حالا باید تابع LoadGLTextures رو بنویسیم که برای این کار کدهای زیر را به ماژول خود اضافه کنید:
Public Function LoadGLTextures() as Boolean
Dim Status as Boolean
Dim H , W as Long
Dim TextureImage() as GLByte
Status = False
If LoadBMP("D: 07.bmp" , TextureImage() , H , W) Then
Status = True
GLGenTextures 1 , Texture(0) 'X
GLBindTexture glTexture2D , Texture(0) 'X
glTexImage2D glTexture2D , 0 , 3 , W , H , 0 , GL_RGB , GL_UNSIGNED_BYTE , TextureImag(0 , 0 , 0 )
glTexParameteri glTexture2D , tpnTextureMinFilter , GL_LINEAR
glTexParameteri glTexture2D , tpnTextureMagFilter , GL_LINEAR
End IF
Erase TextureImage
LoadGLTexture = Status
End Function
بعد از نوشتن این کدها حالا باید یک چند خطی کد هم به تابع InitGL اضافه کنیم.در ادامه تابع InitGL را به صورت زیر تغیر دهید:
Public Function InitGL() as Boolean
If Not LoadGLTexture Then
InitGL = False
Exit Function
End If
glEnable glcTexture2D
glShadeModel smSmooth
glClearColor 0,0,0,0
glClearDepth 1
glEnable glcDepthTest
glDepthFunc cfLEqual
glHint htPersPectiveCorrectionHint , hmNicest
InitGL = True
End Function
تا اینجا شما کار بارگذاری و اجرای تصویر را انجام دادید اما با اجرا کردن این پروژه چیزی در صفحه نمایش داده نمیشود چرا که تابع DrawGLScene هنوز دست نخورده است و باید کدهای مربوط به نمایش تصویر را بنویسیم. پس تابع DrawGLScene را به این صورت تغییر دهید:
Public Function DrawGLScene() As Boolean
glPolygonMode faceFrontAndBack, pgmFILL
' Here's Where We Do All The Drawing
glClear clrColorBufferBit Or clrDepthBufferBit ' Clear Screen And Depth Buffer
glLoadIdentity ' Reset The Current Matrix
glTranslatef 0#, 0#, 0# ' Move Into The Screen 5 Units
glRotatef xrot, 1#, 0#, 0# ' Rotate On The X Axis
glRotatef yrot, 0#, 1#, 0# ' Rotate On The Y Axis
glRotatef zrot, 0#, 0#, 1# ' Rotate On The Z Axis
glBindTexture GL_TEXTURE_2D, Texture(0) ' Select Our Texture
glBegin GL_QUADS
' Front Face
glNormal3f 0, 0, 0.5
glTexCoord2f 0#, 0#: glVertex3f -0.5, -0.5, 0.5 ' Bottom Left Of The Texture and Quad
glTexCoord2f 0.5, 0: glVertex3f 0.5, -0.5, 0.5 ' Bottom Right Of The Texture and Quad
glTexCoord2f 0.5, 0.5: glVertex3f 0.5, 0.5, 0.5 ' Top Right Of The Texture and Quad
glTexCoord2f 0, 0.5: glVertex3f -0.5, 0.5, 0.5 ' Top Left Of The Texture and Quad
' Back Face
glNormal3f 0, 0, -0.5
glTexCoord2f 0.5, 0#: glVertex3f -0.5, -0.5, -0.5 ' Bottom Right Of The Texture and Quad
glTexCoord2f 0.5, 0.5: glVertex3f -0.5, 0.5, -0.5 ' Top Right Of The Texture and Quad
glTexCoord2f 0#, 0.5: glVertex3f 0.5, 0.5, -0.5 ' Top Left Of The Texture and Quad
glTexCoord2f 0#, 0#: glVertex3f 0.5, -0.5, -0.5 ' Bottom Left Of The Texture and Quad
' Top Face
glNormal3f 0, 0.5, 0
glTexCoord2f 0#, 0.5: glVertex3f -0.5, 0.5, -0.5 ' Top Left Of The Texture and Quad
glTexCoord2f 0#, 0#: glVertex3f -0.5, 0.5, 0.5 ' Bottom Left Of The Texture and Quad
glTexCoord2f 0.5, 0#: glVertex3f 0.5, 0.5, 0.5 ' Bottom Right Of The Texture and Quad
glTexCoord2f 0.5, 0.5: glVertex3f 0.5, 0.5, -0.5 ' Top Right Of The Texture and Quad
' Bottom Face
glNormal3f 0, -0.5, 0
glTexCoord2f 0.5, 0.5: glVertex3f -0.5, -0.5, -0.5 ' Top Right Of The Texture and Quad
glTexCoord2f 0#, 0.5: glVertex3f 0.5, -0.5, -0.5 ' Top Left Of The Texture and Quad
glTexCoord2f 0#, 0#: glVertex3f 0.5, -0.5, 0.5 ' Bottom Left Of The Texture and Quad
glTexCoord2f 0.5, 0#: glVertex3f -0.5, -0.5, 0.5 ' Bottom Right Of The Texture and Quad
' Right face
glNormal3f 0.5, 0, 0
glTexCoord2f 0.5, 0#: glVertex3f 0.5, -0.5, -0.5 ' Bottom Right Of The Texture and Quad
glTexCoord2f 0.5, 0.5: glVertex3f 0.5, 0.5, -0.5 ' Top Right Of The Texture and Quad
glTexCoord2f 0#, 0.5: glVertex3f 0.5, 0.5, 0.5 ' Top Left Of The Texture and Quad
glTexCoord2f 0#, 0#: glVertex3f 0.5, -0.5, 0.5 ' Bottom Left Of The Texture and Quad
' Left Face
glNormal3f -0.5, 0, 0
glTexCoord2f 0#, 0#: glVertex3f -0.5, -0.5, -0.5 ' Bottom Left Of The Texture and Quad
glTexCoord2f 0.5, 0#: glVertex3f -0.5, -0.5, 0.5 ' Bottom Right Of The Texture and Quad
glTexCoord2f 0.5, 0.5: glVertex3f -0.5, 0.5, 0.5 ' Top Right Of The Texture and Quad
glTexCoord2f 0#, 0.5: glVertex3f -0.5, 0.5, -0.5 ' Top Left Of The Texture and Quad
glEnd
xrot = xrot + 0.3 ' X Axis Rotation
yrot = yrot + 0.2 ' Y Axis Rotation
zrot = zrot + 0.4 ' Z Axis Rotation
DrawGLScene = True ' Keep Going
End Function
برای اینکه برای شما مشکلی پیش نیاید پیشنهاد میکنم کدهای بالا رو کپی و پست (Copy Past ) کنین.
حالا نوبت به اجرای برنامه میرسه . قبل از اجرای برنامه در تابع LoadGLTextures در خط ششم شما باید به جای "D: 07.bmp" مسیر فایل تصویری که اندازه آن ۲۵۶ در ۲۵۶ پیکسل است را بدهید اگر اندازه(Size) عکس شما مغایر با بالا باشد تصویری که ایجاد میشود مبهم است و رنگ های آن به هم میریزد.
خوب دیگه حالا با خیال راحت برنامه تون رو اجرا کنین.