OpenGL comment dessiner des formes, textes, images, etc ?

[Shadow]

Salutation,

Pour commencer en OpenGL que je connais pas, je voudrais savoir comment
dessiner des forme simple, des lignes, du texte, et aussi des images, etc...

Je voudrais essayer de faire pour commencer de la 2D avec, donc pouvoir dessiner des forme en 2D.
OpenGL c'est comme un genre de canevas mais pour la 3D, mais c'est chaud à utiliser.

[falsam]

Ha mais Monsieur Shadow est candidat au suicide intellectuel
Nombreux ont essayés d'approcher OpenGL et beaucoup ont encore des séquelles phycologiques.

Quelques années plus tard je m'en remet toujours pas

[Micoute]

Pareil !!!

[Shadow]

Oui bha moi chui assez fou pour ça donc autant commencer
Si chacun y met un peu du sien je pourais peu etre en faire quelque chose !
Aller, aidez moi svp, petit à petit on va bien y arriver ?

[Shadow]

Personne ne veux m'aider, bha c'est pas grave car jvé le faire quand même !
Et ça prendra le temps que ça prendra, mais je le ferais je pense !

[kernadec]

/.../

[kernadec]

hi,
Ce n 'est pas qu'on ne veut pas aider.... Mais tu est sur les forums PB depuis un certain temps
alors que sur ses forums, il y a des exemples il suffit de chercher à OPENGL voir OpenglGadget()
en particulier ceux "d' ApplePi" sur Opengl du forum English
Cordialement

[threedslider]

Peut être c'est moi seul qui utilise OpenGL ou bien les Purebasiciens sont les minorité à utiliser cette bibliothèque 3D pourtant OpenGL est très puissant on peut tout faire avec aussi bien en 2D qu'en 3D

Je te conseille de voir les tutoriels OpenGL sur le net, y'en a pleins ^^

Je veux bien t'aider mais je dois apprendre plus sur Purebasic sur comment faire...

[falsam]

Peut être c'est moi seul qui utilise OpenGL ou bien les Purebasiciens sont les minorité à utiliser cette bibliothèque 3D

Le seul je ne pense pas. Y'en a qu'ont essayé, ils ont eu des problèmes !
https://www.youtube.com/watch?v=gNI9a-K1JoU

Je veux bien t'aider mais je dois apprendre plus sur Purebasic sur comment faire...

L'objectif de ce petit a pour objectif :
- Mettre en oeuvre l'API OpenGL'exemple dans un OpenGLGadget().
- Dessiner un polygone.
- Dessiner une ligne médiane.
- Dessiner le contour du polygone.

Code : Tout sélectionner

EnableExplicit

Enumeration window
  #mf  
EndEnumeration

Enumeration gadget
  #mfOpenGL  
EndEnumeration

; Plan de l'application
Declare Start()
Declare Draw()
Declare Exit()

Start()

Procedure Start()      
  OpenWindow(#mf, 0, 0, 800, 600, "OpenGL Test", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  
  ; Ouverture d'une fenetre OpenGL
  OpenGLGadget(#mfOpenGL, 0, 0, 800, 600, #PB_OpenGL_NoDepthBuffer)
  SetGadgetAttribute(#mfOpenGL, #PB_OpenGL_SetContext, #True)
    
  ; La caméra. Utilisation de la matrice de projection
  glMatrixMode_(#GL_PROJECTION)
  glLoadIdentity_()    
  gluOrtho2D_(0, 800, 600, 0) ;Cone de visualisation (Gauche, Droit, Bas, Haut)
  
  ; Couleur d'arriere plan (RGBA Décimales)
  glClearColor_(0.5, 0.5, 0.5, 1.0)
  
  ; Visualisation du rendu
  
  ; Equivalent de ClearScreen()
  glClear_(#GL_COLOR_BUFFER_BIT | #GL_DEPTH_BUFFER_BIT)
  
  ; Dessin des différents éléments
  Draw()
  
  ; Equivalent de la commande FlipBuffers
  SetGadgetAttribute(#mf, #PB_OpenGL_FlipBuffers, #True)
  
  ; Déclencheur
  BindEvent(#PB_Event_CloseWindow, @Exit())
  
  Repeat : WaitWindowEvent() : ForEver
EndProcedure

Procedure Draw()
  ; Coordonnées x y 
  Protected sx = 300 
  Protected sy = 200
  
  ; Largeur hauteur 
  Protected sw = 200
  Protected sh = 200
  
  ;Initialiser la matrice de transformation
  glMatrixMode_(#GL_MODELVIEW)
  glLoadIdentity_()
    
  ;- Dessin d'un polygon plein.
  glColor3f_(20.870, 0.737, 0.270) ;Couleur du dessin. RGB Décimal 
  glBegin_(#GL_POLYGON) ;Debut du polygone  
    glVertex2i_(sx, sy)             ;Point haut gauche
    glVertex2i_(sx + sw, sy)        ;Point haut droit
    glVertex2i_(sx + sw, sy + sh)   ;Point bas droit
    glVertex2i_(sx, sy + sh)        ;Point bas gauche
  glEnd_()                          ;Fin du dessin
  
  ;- Une ligne pour la diagonale du carré
  glColor3f_(1, 0, 0) ;Couleur de la ligne. RGB Décimal
  glLineWidth_(2)     ;Epaisseur de la ligne  
  glBegin_(#GL_LINES);
    glVertex2f_(sx, sy);
    glVertex2f_(sx + sw, sy + sh);
  glEnd_()                     ;
    
  ;- Contour du polygone
  glLineWidth_(2) ;Epaisseur de la ligne
  glColor3f_(0, 0, 0.270) ;Couleur du dessin. RGB Décimal 
  glBegin_(#GL_LINE_LOOP) ;Debut du polygone  
    glVertex2i_(sx, sy)             ;Point haut gauche
    glVertex2i_(sx + sw, sy)        ;Point haut droit
    glVertex2i_(sx + sw, sy + sh)   ;Point bas droit
    glVertex2i_(sx, sy + sh)        ;Point bas gauche
  glEnd_()                          ;Fin du dessin    
EndProcedure

Procedure Exit()  
  End
EndProcedure

■ Résumé.
- OpenGl est une API conçu pour rendu 2D et 3D graphique.
- OpenGl étant une API, les différentes fonctions ne sont pas documentés dans PureBasic.
- Deux piles de matrices : l’une pour la projection (Caméra), l’autre pour la vue et la modélisation.
- Une primitive est décrite entre les fonction glBegin_() et glEnd_()

Shadow je ne sais pas ce que tu veux faire avec OpenGL. Mais je pense que avant tout, tu vas devoir créer un framework regroupant les fonctionnalités dont tu auras besoin.

[Shadow]

Salut falsam, merci.

Bha créer des fonctions pour pouvoir facilement dessiner des truc dedans, comme des ligne, des carrer, des ronds, etc, des image, du texte.
Je me concentre sur la partie 2D, la partie 3d ne m'intéresse pas pour le moment.

Merci de ton exemple, c'est un bon début
Je vais potasser tous ça

[falsam]

Je me concentre sur la partie 2D

2D Static ou 2D avec animation ? Jeu ou pas jeu ?

[Shadow]

Pour le moment statique, petit a petit chaque chose en sont temps.

[falsam]

Afficher des images et du texte. C'est ce que propose Toucan Static un module qui utilise l'API OpenGl pour afficher des images.

■ Les fonctionnalités.
glCreateSprite(Sprite, Width.f, Height.f) - Créer un sprite transparent.
glLoadSprite(Sprite, FileName.s) - Créer un sprite à partir d'une image.
glDisplaySprite(Sprite, x.f, y.f) - Afficher un sprite
glZoomSprite(Sprite, x.f, y.f) - Modifier la taille d'un sprite.
glRotateSprite(Sprite, Angle.f) - Effectuer une rotation d'un sprite

glRenderTexture(Sprite.i) - Actualiser la texture d'un sprite après avoir modifier l'image associée au sprite
glImageSprite(Sprite) - Obtenir l'identification d'une image associé à un sprite.

■ Toucan-Static.pbi

Code : Tout sélectionner

; Toucan-Static.pb - Version 0.2

; Affichage d'un sprite

EnableExplicit


DeclareModule Toucan 
  Declare glRenderTexture(Sprite.i)
  Declare glCreateSprite(Sprite, Width.f, Height.f)
  Declare glLoadSprite(Sprite, FileName.s)
  Declare glDisplaySprite(Sprite, x.f, y.f)
  Declare glZoomSprite(Sprite, x.f, y.f)
  Declare glRotateSprite(Sprite, Angle.f)
  Declare glImageSprite(Sprite)
EndDeclareModule

Module Toucan
  
  ; Vecteur
  Structure NewVector
    x.f
    y.f
  EndStructure
  
  ; Coordonnée et dimension d'un sprite
  Structure NewRect
    x.f
    y.f
    width.f
    height.f
  EndStructure
  
  ; Texture d'un sprite
  Structure NewTexture 
    id.i            ; Id Texture
    color.i         ; RGB
    opacity.f       ; 0.1 -> 1
  EndStructure
  
  Structure NewOrientation 
    angle.f
    anchor.NewVector
  EndStructure
  
  Structure NewSprite  
    imageId.i
    texture.NewTexture
    location.NewRect 
    scale.NewVector  
    rotate.NewOrientation
  EndStructure
  
  Global TextureId
  
  ; Chaque sprite est enregistré dans une map
  Global NewMap Sprites.NewSprite()
  
  ; Initialisation d'un sprite  
  Procedure SetupSprite(Sprite, ImageId)
    ; Mise à jour numéro de texture
    If Sprite <> #PB_Any
      If Sprite > TextureId
        TextureId = Sprite
      EndIf
    Else
      TextureId + 1
      Sprite = TextureId
    EndIf
    
    AddMapElement(Sprites(), Str(Sprite))
    
    With Sprites()
      \imageId          = ImageId
      \texture\id       = TextureId    
      
      ; Couleur et opacité
      \texture\color    = RGB(255, 255, 255)    
      \texture\opacity  = 1   
      
      ; Taille (\location\x = 0 \location\y = 0) 
      \location\width   = ImageWidth(\imageId)
      \location\height  = ImageHeight(\ImageId)
      
      ; Zoom sprite
      \scale\x          = 1
      \scale\y          = 1
      
      ; Point d'ancrage et rotation d'un sprite
      \rotate\anchor\x  = 0.5
      \rotate\anchor\y  = 0.5
      \rotate\angle     = #PB_Ignore    
    EndWith 
  EndProcedure
  
  ; Initialisation de la texture associée au sprite
  Procedure glRenderTexture(Sprite.i)
    Protected Result
    
    ; Selectionner le sprite
    Result = FindMapElement(Sprites(), Str(Sprite)) 
    If Result
      With Sprites()
        glBindTexture_(#GL_TEXTURE_2D, \texture\id) ;Selection de la texture
        
        ; Methode de placage 2D
        glTexParameteri_(#GL_TEXTURE_2D, #GL_TEXTURE_MAG_FILTER, #GL_LINEAR)
        glTexParameteri_(#GL_TEXTURE_2D, #GL_TEXTURE_MIN_FILTER, #GL_LINEAR)
        
        ; Création de la texture (32 ou 24 bits selon le type d'image)
        If StartDrawing(ImageOutput(\imageId))
          If ImageDepth(\imageId, #PB_Image_InternalDepth) = 32
            glTexImage2D_(#GL_TEXTURE_2D, 0, 4, ImageWidth(\imageId), ImageHeight(\imageId), 0, #GL_BGRA_EXT, #GL_UNSIGNED_BYTE, DrawingBuffer())
          Else
            glTexImage2D_(#GL_TEXTURE_2D, 0, 3, ImageWidth(\imageId), ImageHeight(\imageId), 0, #GL_BGR_EXT,#GL_UNSIGNED_BYTE, DrawingBuffer())
          EndIf     
          StopDrawing()
        EndIf
      EndWith
    EndIf
  EndProcedure 
  
  ; Créer un sprite vierge
  Procedure glCreateSprite(Sprite, Width.f, Height.f)
    Protected ImageId
    
    ; Création d'une image transparente
    ImageId = CreateImage(#PB_Any, Width, Height, 32, RGBA(255, 255, 255, 255))
    
    ; Initialisation du Sprite
    If ImageId          
      
      SetupSprite(Sprite, ImageId)
      
      With Sprites()
        StartDrawing(ImageOutput(\imageId))
        DrawingMode(#PB_2DDrawing_AlphaChannel)
        Box(0, 0, \location\width, \location\height, RGBA(0,0,0,0)) 
        StopDrawing()
        
        glRenderTexture(Sprite)      
      EndWith  
      
    Else
      Sprite = -1
    EndIf
    ProcedureReturn Sprite
  EndProcedure
  
  ; Création d'un sprite à partir d'une image
  Procedure glLoadSprite(Sprite, FileName.s)
    Protected ImageId
    
    ; Chargement de l'image
    ImageId = LoadImage(#PB_Any, FileName)
    
    ; Initialisation du Sprite
    If ImageId          
      SetupSprite(Sprite, ImageId)   
      glRenderTexture(Sprite.i)
    Else
      ; L'image n'est pas chargée
      Sprite = -1
    EndIf
    ProcedureReturn Sprite
  EndProcedure
  
  ; Affichage d'un sprite
  Procedure glDisplaySprite(Sprite, x.f, y.f)
    Protected Result
    
    ; Selectionner le sprite
    Result = FindMapElement(Sprites(), Str(Sprite))
    If Result
      With Sprites()
        ; Mise à jour des coordonnées du sprite
        \location\x = x
        \location\y = y
        
        ; Selection de la texture 
        glBindTexture_(#GL_TEXTURE_2D, \texture\id)
        
        ; Modelisation texture : Inversion de la texture 
        glMatrixMode_(#GL_TEXTURE)
        glLoadIdentity_()         
        glScalef_(1, -1, 1)       
        
        ; Modelisation objet     
        glMatrixMode_(#GL_MODELVIEW)    
        glLoadIdentity_();  
        
        ; Scale
        glTranslatef_(\location\x, \location\y, 0)  ;Translate to the object's position
        glScalef_(\scale\x, \scale\y, 1)    
        glTranslatef_(-\location\x, -\location\y, 0);Translate to the origin
        
        ; Rotation
        If \rotate\angle <> #PB_Ignore        
          glTranslatef_(\location\x + \location\width* \rotate\anchor\x, \location\y + \location\height * \rotate\anchor\y, 0)  
          glRotatef_(\rotate\angle, 0, 0, 1)       
          glTranslatef_(-\location\x - \location\width* \rotate\anchor\x, -\location\y - \location\height * \rotate\anchor\y, 0)
        EndIf
        
        ; Dessin du sprite 
        glBegin_(#GL_QUADS)
        
        ; Couleur du sprite
        glColor4f_(Red(\texture\color)/255, Green(\texture\color)/255, Blue(\texture\color)/255, \texture\opacity)
        
        ; Coin haut gauche 
        glTexCoord2f_(0, 0)
        glVertex2i_(\location\x, \location\y)
        
        ; Coin haut droit
        glTexCoord2f_(1, 0) 
        glVertex2i_(\location\x + \location\width, \location\y)
        
        ; Coin bas droit
        glTexCoord2f_(1, 1)
        glVertex2i_(\location\x + \location\width, \location\y + \location\height)
        
        ; Coin bas gauche 
        glTexCoord2f_(0, 1) 
        glVertex2i_(\location\x, \location\y + \location\height) 
        
        glEnd_()  
      EndWith 
    EndIf 
  EndProcedure
  
  ; Changer la taile d'un sprite 
  Procedure glZoomSprite(Sprite, x.f, y.f)
    Protected Result
    
    ; Selectionner le sprite
    Result = FindMapElement(Sprites(), Str(Sprite)) 
    If Result
      Sprites()\scale\x = x
      Sprites()\scale\y = y
    EndIf   
    ProcedureReturn Result
  EndProcedure
  
  ; Rotation d'un sprite
  Procedure glRotateSprite(Sprite, Angle.f)
    Protected Result
    
    ; Selectionner le sprite
    Result = FindMapElement(Sprites(), Str(Sprite)) 
    If Result
      Sprites()\rotate\angle = Angle
    EndIf   
    ProcedureReturn Result    
  EndProcedure
  
  ; Retourner l'image ID d'un  sprite
  Procedure glImageSprite(Sprite)
    Protected Result
    
    ; Selectionner le sprite
    Result = FindMapElement(Sprites(), Str(Sprite)) 
    If Result
      Result = Sprites()\imageId
    EndIf   
    ProcedureReturn Result
  EndProcedure
EndModule 

■ Code exemple.

Cette petite démonstration affiche des images et du texte.

Code : Tout sélectionner

EnableExplicit

XIncludeFile "Toucan-Static.pbi"
UseModule Toucan

Enumeration window
  #mf  
EndEnumeration

Enumeration gadget
  #mfOpenGL  
EndEnumeration

; Plan de l'application
Declare Start()
Declare Draw()
Declare Exit()

Start()

Procedure Start()        
  OpenWindow(#mf, 0, 0, 800, 600, "Démonstration Toucan Static", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  
  ; Ouverture d'une fenetre OpenGL
  OpenGLGadget(#mfOpenGL, 0, 0, 800, 600, #PB_OpenGL_NoDepthBuffer)
  SetGadgetAttribute(#mfOpenGL, #PB_OpenGL_SetContext, #True)
  
  ;- Activation textures et transparence
  glEnable_(#GL_TEXTURE_2D)
  glEnable_(#GL_BLEND)
  glBlendFunc_(#GL_SRC_ALPHA, #GL_ONE_MINUS_SRC_ALPHA)
  
  ;- Caméra. Utilisation de la matrice de projection
  glMatrixMode_(#GL_PROJECTION)
  glLoadIdentity_()    
  gluOrtho2D_(0, 800, 600, 0) ;Cone de visualisation (Gauche, Droit, Bas, Haut)
   
  
  ;- Visualisation du rendu
  ; Couleur d'arriere plan (RGBA Décimales)
  glClearColor_(0.5, 0.5, 0.5, 1.0)
 
  ;- ClearScreen()
  glClear_(#GL_COLOR_BUFFER_BIT | #GL_DEPTH_BUFFER_BIT)
  
  ;- Dessin des différents éléments
  Draw()
  
  ;- FlipBuffers
  SetGadgetAttribute(#mfOpenGL, #PB_OpenGL_FlipBuffers, #True)
  
  ; Déclencheur
  BindEvent(#PB_Event_CloseWindow, @Exit())
  
  Repeat : WaitWindowEvent() : ForEver
EndProcedure

Procedure Draw()
  UseJPEGImageDecoder()
  UsePNGImageDecoder()
  
  ; Police pour le texte qui sera afficher
  LoadFont(0, "", 40)
  
  ; Chargement, zoom et affichage background (Taille 256 x 256)
  ; La taille de l'image étant de 256x256 
  ; elle ne s'affichera pas sur toute la surface de l'OpenGLGadget
  ; Zoom du sprite aux dimensions de l'OpenGLGadget
  glLoadSprite(0, #PB_Compiler_Home + "Examples\3D\Data\Textures\clouds.jpg")
  glZoomSprite(0, 800/256, 600/256)  
  glDisplaySprite(0, 0, 0)
  
  ; Chargement, rotation et affichage  de la caisse.
  glLoadSprite(1, #PB_Compiler_Home + "Examples\3D\Data\Textures\Caisse.png")    
  glRotateSprite(1, 45)  
  glDisplaySprite(1, 100, 100)
  
  ; AFfichage d'un texte :  Création d'un sprite vierge, dessin du texte et affichage.
  glCreateSprite(2, 512, 64)
  
  ; Affichage du texte sur  l'image associé au sprite 
  StartDrawing(ImageOutput(glImageSprite(2)))
  DrawingMode(#PB_2DDrawing_AlphaBlend|#PB_2DDrawing_Transparent)
  DrawingFont(FontID(0))
  DrawText(0, 0, "Demo Toucan Static", RGBA(255, 255, 255, 255 ))
  StopDrawing()
  
  ; Mise à jour de la texture du sprite
  glRenderTexture(2)
  glDisplaySprite(2, 200, 100)
EndProcedure

Procedure Exit()  
  End
EndProcedure

Ajouter la bibliothéque sous syteme OpenGL dans les options de compilations. Ceci dit le code fonctionnera sans cette option mais si vous disposez d'un module graphique sur la carte mére de votre ordinateur et d'une carte graphique haut de gamme, c'est le module graphique de la carte mére qui sera prise en compte.

[threedslider]

Pas mal ! Ce sera un bon début pour Shadow à son projet

[Shadow]

Super merci beaucoup Falsam.
Avec tous ça j'ai de quoi faire quelque truc.