Wire GPU Tutorial: by Drunkie

[Drunkie]

Very nice! I expect alot of people to benefit with this tutorial, especially with the E2 wirelink section.

[mattwd0526]

I've been looking for how to link data up to it for sooo long.
Why do you start the cell at such a high number? Could you just use 1 or 2, or are those used for different things?
Maso: That drawing is amazing.

[Drunkie]

Why do you start the cell at such a high number? Could you just use 1 or 2, or are those used for different things?

The answer is no. To my knowledge you cannot use anything below address 63488 because that is reserved for the GPU exclusively. (Unless someone can confirm otherwise)

[Unsmart]

Great tutorial, but really, is there no way how to rotate shapes?

(and by great, I really mean it, as I never understood why do you declare variables under dexit etc)

[Black Phoenix]

The answer is no. To my knowledge you cannot use anything below address 63488 because that is reserved for the GPU exclusively. (Unless someone can confirm otherwise)

Look in your console. It said "242 bytes written". That means you wrote 242 bytes of your code and data in data/code range of 0...63487.

Obviously the rest of cells are unused, and you can freely use those for any kind of data transfers. I'm usually reserving 32768 .. 63487 for external data area.

Note two: if you attach external device to IOBus (which is mapped to 63488..64511), such as some RAM, it will automatically send contents of that RAM (without need for manual flushing).
GPU flushing is required if you're writing data yourself, it's a way for you to assure that data is sent as recently as possible, if you don't flush it, you'll loose some of last sent bytes (they will be delayed).

Polygons can only be convex, those are the only ones officially supported. Do not use non-convex polygons.

Recent GMOD updates have fixed alpha, so you can use alpha value as well now - to add some transparency.

There are two registers you should mentoin - one is called HALT (it freezes GPU, and the image drawn on it will remain there FOREVER).
Another one is called HWClear (regHWClear) - it's best one, cause it disables background clearing in GPU. Which means you can draw stuff like this:
[ame="http://www.youtube.com/watch?v=8o5wflseq1A"]YouTube- Wire GPU - Demand the impossible[/ame]

This code can be used to make GPU draw image just once, and not do any further updates:

mov #regHWClear,0;
cmp #isDrawn,0;
je Main;
dexit;
alloc isDrawn;
Main:

This code will decrease your actual GPU FPS, making it much less laggy (you SHOULD use this code for dynamically updating screens! Especially heavy ones like artiftical horizon!):

mov #regHWClear,0; inc #Frame; cmp #Frame,2; jge Main;
mov #Frame,0; dexit; alloc Frame;
Main:

It will draw only once in two frames.

You can also change circle quality, and make it smaller for smaller radius circles. It can also be used to draw triangles and rectangles.

dwritefmt is also nice, it allows you to turn "%i feet, %f km/h" into "10002 feet, 104.19 km/h", and many other things.

Oh yeah, all complex GUI's should draw in more than 1 frame - for example this GUI draws in 8 frames, and updates only areas which change. It is very very fast:

mov #regHWClear,0; //Dont use hardware clear
  call Draw.EditInterface;
  //call Draw.EnvelopeInterface;
dexit;

//Draw primary interface
Draw.EditInterface:
  mov #MainPanel.Status,MainPanel.Status.Edit;
  call Draw.PatternEditor;
  call Draw.MainPanel;
ret

//Draw envelope interface
Draw.EnvelopeInterface:
  mov #MainPanel.Status,MainPanel.Status.Envelope;
  call Draw.PrepareEnvelopes;
  call Draw.EnvelopeEditor;
  call Draw.MainPanel;
ret



//==============================================================================
// Draw envelope editor
//==============================================================================
alloc EnvelopeEditor.Redraw;

Draw.EnvelopeEditor:
  cmp #EnvelopeEditor.Redraw,0;
  je @SkipEnv;
    ret
  @SkipEnv:
  
  mov #EnvelopeEditor.Redraw,1;
  
  dmove PatternEditor.Offset;
  
  dcolor Text.Background; //Erase bg
  drectwh EnvelopeEditor._RectOffset,EnvelopeEditor._RectWH;
  
  dcolor Text.Foreground; dsetsize 32; dsetfont 0;
  dwritefmt EnvelopeEditor.Title,EnvelopeEditor._Title;
  
  dsetsize 16;
  dwrite EnvelopeEditor.Pitch,EnvelopeEditor._Pitch;
  dwrite EnvelopeEditor.Volume,EnvelopeEditor._Volume;
  
  //Pitch envelope
  mov EAX,210;
  mov EBP,EnvelopeEditor._Title;
  mov ECX,3;
  call Draw.Envelope;
  
  //Volume envelope
  mov EAX,370;
  mov EBP,MainPanel._Title;
  call Draw.Envelope;
    
  dmove 0;
ret

//EAX - Envelope Y
//EBP - Envelope data
//ECX - Envelope position
Draw.Envelope:
  //Draw background grid
  dcolor Text.Foreground; dshade 0.5;
  mov #EnvelopeEditor.WaveForm.X,#EnvelopeEditor.WaveFormStart.X;
  mov EDX,0;
  @DrawEnvelopeGrid:
    mov #EnvelopeEditor.Line1.X,#EnvelopeEditor.WaveForm.X;
    mov #EnvelopeEditor.Line2.X,#EnvelopeEditor.Line1.X;
    mov #EnvelopeEditor.Line1.Y,EAX;
    mov #EnvelopeEditor.Line2.Y,EAX;
    sub #EnvelopeEditor.Line2.Y,#EnvelopeEditor.WaveFormEnd.Y;
    

    dsetwidth 0.5;
    cmp EDX,ECX;
    jne @EnvelopeCursor;
      dsetwidth 5;
    @EnvelopeCursor:

    dline EnvelopeEditor.Line1,EnvelopeEditor.Line2;
    
    inc EDX;
    add #EnvelopeEditor.WaveForm.X,#EnvelopeEditor.WaveFormStep;
  cmp #EnvelopeEditor.WaveForm.X,#EnvelopeEditor.WaveFormEnd.X;
  jle @DrawEnvelopeGrid;
  
  //Compute and draw border
  dsetwidth 0.5; dcolor Text.Foreground;
  mov #EnvelopeEditor.WaveFormBorderOffset.X,#EnvelopeEditor.WaveFormStart.X;
  sub #EnvelopeEditor.WaveFormBorderOffset.X,16;
  mov #EnvelopeEditor.WaveFormBorderOffset.Y,EAX;
  sub #EnvelopeEditor.WaveFormBorderOffset.Y,#EnvelopeEditor.WaveFormEnd.Y;

  vmov EnvelopeEditor.WaveFormBorderWH,EnvelopeEditor.WaveFormEnd;
  vsub EnvelopeEditor.WaveFormBorderWH,EnvelopeEditor.WaveFormStart;
  add #EnvelopeEditor.WaveFormBorderWH.X,32;

  dsetwidth 1;
  dorectwh EnvelopeEditor.WaveFormBorderOffset,EnvelopeEditor.WaveFormBorderWH;
  
  //Draw envelope
  dsetwidth 2; dcolor Text.Foreground;
  
  mov EDX,#EBP; inc EBP;
  div EDX,128; min EDX,1; max EDX,0;

  mul EDX,#EnvelopeEditor.WaveFormEnd.Y;
  mov #EnvelopeEditor.WaveForm_.Y,EAX;
  sub #EnvelopeEditor.WaveForm_.Y,EDX;
  
  mov #EnvelopeEditor.WaveForm.X,#EnvelopeEditor.WaveFormStart.X;
  mov #EnvelopeEditor.WaveForm_.X,#EnvelopeEditor.WaveForm.X;
  @DrawEnvelope:
    mov EDX,#EBP; inc EBP;
    div EDX,128; min EDX,1; max EDX,0;
  
    mul EDX,#EnvelopeEditor.WaveFormEnd.Y;
    mov #EnvelopeEditor.WaveForm.Y,EAX;
    sub #EnvelopeEditor.WaveForm.Y,EDX;
    
    add #EnvelopeEditor.WaveForm.X,#EnvelopeEditor.WaveFormStep;

    dline EnvelopeEditor.WaveForm_,EnvelopeEditor.WaveForm;
    vmov EnvelopeEditor.WaveForm_,EnvelopeEditor.WaveForm;
    
  cmp #EnvelopeEditor.WaveForm.X,#EnvelopeEditor.WaveFormEnd.X;
  jl @DrawEnvelope;
ret

Draw.PrepareEnvelopes:
  mov #EnvelopeEditor.WaveFormStep,#EnvelopeEditor.WaveFormEnd.X;
  sub #EnvelopeEditor.WaveFormStep,#EnvelopeEditor.WaveFormStart.X;
  div #EnvelopeEditor.WaveFormStep,16;
ret

vector2f EnvelopeEditor.Line1;
vector2f EnvelopeEditor.Line2;

vector2f EnvelopeEditor.WaveForm,0,0;
vector2f EnvelopeEditor.WaveForm_,0,0;
vector2f EnvelopeEditor.WaveFormStart,32,0;
vector2f EnvelopeEditor.WaveFormEnd,456,128;  //Y = Height
float    EnvelopeEditor.WaveFormStep;

vector2f EnvelopeEditor.WaveFormBorderWH;
vector2f EnvelopeEditor.WaveFormBorderOffset;

vector2f EnvelopeEditor._RectOffset,0,0;
vector2f EnvelopeEditor._RectWH,488,512;

vector2f EnvelopeEditor.Title,8,8;
vector2f EnvelopeEditor.Pitch,32,65;
vector2f EnvelopeEditor.Volume,32,225;

string EnvelopeEditor._Title,'Instrument envelope #%.2i';
float EnvelopeEditor.Instrument;

string EnvelopeEditor._Pitch,'Pitch envelope';
string EnvelopeEditor._Volume,'Volume envelope';






//==============================================================================
// Draw main panel
//==============================================================================
alloc MainPanel.CopyrightDrawn;

Draw.MainPanel:
  dmove PatternEditor.GUIOffset;
  
  cmp #MainPanel.CopyrightDrawn,1;
  je MainPanel.NoDraw;
    mov #MainPanel.CopyrightDrawn,1;

    dcolor Text.Background; //Erase
    drectwh MainPanel._RectOffset1,MainPanel._RectWH1;
    //Draw borders
    dcolor Text.Foreground;
    dsetwidth 1;
    dorectwh MainPanel._RectOffset1,MainPanel._RectWH1;
    dsetwidth 0.5;
    dline MainPanel._LinePos1,MainPanel._LinePos2;

    dsetsize 12; dsetfont 3; dshade 0.5; //Copyright
    dwrite MainPanel.Title,MainPanel._Title;
  MainPanel.NoDraw:
  
  //Draw dynamic interface
  dcolor Text.Background; //Erase background
  drectwh MainPanel._RectOffset2,MainPanel._RectWH2;
  drectwh MainPanel._RectOffset3,MainPanel._RectWH3;

  dcolor Text.Foreground; dshade 0.8;
  dsetsize 16; dsetfont 0;
  dwritefmt MainPanel.Info,MainPanel._Info;
  
  //Draw waveform
  cmp #TotalAmp,0; jne @AmpNotZero; ret; @AmpNotZero:
  timer EBX; mul EBX,64;
  
  dcolor Text.Foreground; dshade 0.8; dsetwidth 1;
  mov #MainPanel.WaveForm.X,#MainPanel.WaveFormStart.X;
  
  call Draw.MainPanel.ComputeWaveform;
  mov #MainPanel.WaveForm_.Y,EAX;
  mov #MainPanel.WaveForm_.X,#MainPanel.WaveForm.X;
  @DrawWaveform:
    call Draw.MainPanel.ComputeWaveform;
    mov #MainPanel.WaveForm.Y,EAX;
    add #MainPanel.WaveForm.X,4;
    
    dline MainPanel.WaveForm_,MainPanel.WaveForm;
    vmov MainPanel.WaveForm_,MainPanel.WaveForm;
    
    cmp #MainPanel.WaveForm.X,#MainPanel.WaveFormEnd.X;
    jl @DrawWaveForm;
  
  dmove 0;
ret

//Wave parameters
float SquareWave.Freq,48;
float SquareWave.Amp,0.5;
float SineWave.Freq,5;
float SineWave.Amp,0.2;
float TotalAmp,0;

//Compute waveform for neat oscilloscope
Draw.MainPanel.ComputeWaveform:
  mov ESI,#MainPanel.WaveForm.X; add ESI,EBX; //Time
  mov EDX,0; //Total wave
  
  //Square wave
  mod EAX,#SquareWave.Freq; div EAX,#SquareWave.Freq; //FREQ
  frnd EAX; mul EAX,2; dec EAX;
  mul EAX,#SquareWave.Amp; //AMP
  add EDX,EAX;
  
  //Sine wave
  mov EAX,ESI; mul EAX,#SineWave.Freq; //Freq
  fsin EAX,EAX;
  mul EAX,#SineWave.Amp; //AMP
  add EDX,EAX;

  mov EAX,EDX;
  mul EAX,#MainPanel.WaveFormEnd.Y;
  add EAX,#MainPanel.WaveFormStart.Y;
ret

vector2f MainPanel.WaveForm, 0,36;
vector2f MainPanel.WaveForm_,0,36;
vector2f MainPanel.WaveFormStart,324,36; //Y = Offset
vector2f MainPanel.WaveFormEnd,468,16;   //Y = Height

vector2f MainPanel._RectOffset1,0,0;
vector2f MainPanel._RectWH1,488,64;
vector2f MainPanel._RectOffset2,304,15;
vector2f MainPanel._RectWH2,183,48;
vector2f MainPanel._RectOffset3,1,1;
vector2f MainPanel._RectWH3,301,62;

vector2f MainPanel._LinePos1,304,0;
vector2f MainPanel._LinePos2,304,64;

string   MainPanel._Title,'DampTracker 2009 by Black Phoenix';
vector2f MainPanel.Title,306,1;
vector2f MainPanel.Info,4,6;

MainPanel._Info:
  db 'Pattern [%.3i]      Row [%.2i]',10;
  db 'BPM     [%.3i]',10;//'xxxxxxxxxxxxxxxxxxxxxxxxxxx',10;
  db '%s',0,0;
//   |Pattern [000]      Row [00]|

float MainPanel.Pattern;
float MainPanel.Row;
float MainPanel.Status;

string MainPanel.Status.Edit,'Pattern editor';
string MainPanel.Status.Envelope,'Envelope editor';
//string MainPanel.Status.FileMenu,'Envelope editor';






//==============================================================================
// Pattern editor
//==============================================================================
alloc PatternEditor.Drawn;
alloc PatternEditor.PrevCursorRow;
alloc PatternEditor.PrevCursorCol;

Draw.PatternEditor.ProcessCursor:
  cmp #PatternEditor.PrevCursorRow,#CursorRow; jne @Redraw;
  cmp #PatternEditor.PrevCursorCol,#CursorCol; jne @Redraw;
  ret
  
  @Redraw:
    mov EAX,#CursorRow; mov EBX,EAX;
    call Draw.PatternEditor.RedrawLines;
    mov EAX,#PatternEditor.PrevCursorRow; mov EBX,EAX;
    call Draw.PatternEditor.RedrawLines;

    mov #PatternEditor.PrevCursorRow,#CursorRow;
ret

Draw.PatternEditor:
  cmp #NeedRedraw.PatternEditor,0;
  je @SkipRedraw;
    mov #NeedRedraw.PatternEditor,0;
    mov #PatternEditor.Drawn,0;
  @SkipRedraw:
  
  cmp #NeedRedraw.PatternLine,0;
  je @SkipLineRedraw;
    mov EAX,#CursorRow; mov EBX,EAX;
    call Draw.PatternEditor.RedrawLines;
  @SkipLineRedraw:

  cmp #PatternEditor.Drawn,8;
  jl @Skip;
    //Draw cursor if required
    call Draw.PatternEditor.ProcessCursor;
    ret
  @Skip:
  
  //Draw row of 4 channels
  dsetsize 12; dsetfont 0; //Font
  cmp #PatternEditor.Drawn,0;
  jne @SkipChannels;
    dclrscr Text.Background;
    
    vmov VecTemp,PatternEditor.Offset;
    add #VecTemp.X,30;
    sub #VecTemp.Y,14;
    
    mov #VecTemp1.Y,#PatternEditor.Offset.Y; sub #VecTemp1.Y,16;
    mov #VecTemp2.Y,#PatternEditor.Offset.Y; add #VecTemp2.Y,384;
    
    dsetwidth 0.5;
    
    mov EDI,1;
    PatternChanLoop:
      dcolor Text.Foreground; dshade 0.8;
      mov #PatternEditor._Channel._0,EDI;
      dwritefmt VecTemp,PatternEditor._Channel;
      
      dcolor Text.Foreground; dshade 0.4;
      mov #VecTemp1.X,#VecTemp.X; sub #VecTemp1.X,9;
      mov #VecTemp2.X,#VecTemp.X; sub #VecTemp2.X,9;
      dline VecTemp1,VecTemp2;
        
      add #VecTemp.X,59; inc EDI;
      cmp EDI,8;
      jle PatternChanLoop;
  @SkipChannels:
  
  mov EAX,#PatternEditor.Drawn; mul EAX,4;
  mov EBX,EAX; add EBX,3;
  call Draw.PatternEditor.RedrawLines;
  inc #PatternEditor.Drawn;
ret

//EAX - Start line
//EBX - End line
Draw.PatternEditor.ComputeData:
  //Draw patterns
  max EAX,0; min EBX,63;

  //Compute pattern data offset
  mov EBP,PatternData;
  mov ESI,#CurrentLine; add ESI,EAX;
  mul ESI,8; //8 channels
  mul ESI,2; //2 bytes per channel
  add EBP,ESI;

  //Compute what part of screen is updated
  vmov VecTemp,PatternEditor.Offset;
  
//  mov EAX,#CurrentLine;
//  mov EBX,#PatternEditor.Drawn; mul EBX,4; //4 lines per iteration
//  add EAX,EBX;

  mov #VecTemp.Y,EAX;
  mul #VecTemp.Y,12; //height of a line
  add #VecTemp.Y,#PatternEditor.Offset.Y;

  mov ECX,EAX; //Draw from current line
  mov EDX,EBX; inc EDX;
  min EDX,63;  //And up to 63th line
ret

//EAX - Line to start from
//EDX - Line to end with
Draw.PatternEditor.RedrawLines:
  call Draw.PatternEditor.ComputeData;
  
  dsetsize 12; dsetfont 0; //Font
  PatternTableLoop.Y:
    //Output line number
    vmov PatternEditor._RectOffset,VecTemp; //Erase
    dcolor Text.Background;
    drectwh PatternEditor._RectOffset,PatternEditor._RectWH2;
  
    //Color for line numbers
    dcolor Text.Foreground; dshade 0.3;
    mov #PatternEditor_LineNumber._0,ECX;
    dwritefmt VecTemp,PatternEditor._LineNumber;
    add #VecTemp.X,26;

    //Draw row of 8 channels
    mov EDI,0;
    PatternTableLoop.X:
      vmov PatternEditor._RectOffset,VecTemp; //Erase
      dcolor Text.Background;
      drectwh PatternEditor._RectOffset,PatternEditor._RectWH1;
    
      //Shade current selected note
      dcolor Text.Foreground; dshade 0.7;
      cmp #CursorRow,ECX; jne @NoCursor; //Y
        dshade 1.5;
      cmp #CursorCol,EDI; jne @NoCursor; //X
        dshade 1.5;
      @NoCursor:
    
      //Read data
      mov EAX,#EBP; inc EBP; //Read instrument
      mov EBX,#EBP; inc EBP; //Read note
      
      max EAX,0; min EAX,99;
      max EBX,0; min EBX,97;

      cmp EBX,0;  je _DrawNull;  //Empty note
      cmp EBX,97; je _DrawNoteOff; //Note off
        //Note system
        //0 - NULL
        //1..12 - Octave 0
        //13..24 - Octave 1
        //97 - NOTE OFF

        dec EBX; //0..11 + X range
        mov ESI,EBX; mod ESI,12; //0..11 range
        div EBX,12; fint EBX; //Octave

        //Get text
        mul ESI,3; add ESI,PatternEditor.NoteText;

        mov #PatternEditor._Note.InstrumentNo,EAX;
        mov #PatternEditor._Note.NoteText,    ESI;
        mov #PatternEditor._Note.NoteOctave,  EBX;
        dwritefmt VecTemp,PatternEditor._Note;
      jmp _DrawEnd;
      _DrawNoteOff:
        dwritefmt VecTemp,PatternEditor._NoteOff;
      jmp _DrawEnd;
      _DrawNull: //Draw null note
        //Color for null note
        dshade 0.5;
        dwritefmt VecTemp,PatternEditor._NullNote;
      _DrawEnd:

      //Next column
      add #VecTemp.X,59;
      inc EDI; cmp EDI,8;
      jl PatternTableLoop.X;

    //Next row
    mov #VecTemp.X,#PatternEditor.Offset.X;
    add #VecTemp.Y,12;

    inc ECX;
    cmp ECX,EDX;
  jl PatternTableLoop.Y;
ret

//Lookup and strings
string PatternEditor._LineNumber,'%.2i';
alloc PatternEditor_LineNumber._0;
string PatternEditor._NullNote,'.. ...';
string PatternEditor._NoteOff,'   ---';
string PatternEditor._Note,'%.2i %s%i';
alloc PatternEditor._Note.InstrumentNo;
alloc PatternEditor._Note.NoteText;
alloc PatternEditor._Note.NoteOctave;
string PatternEditor._Channel,'CHAN%i';
alloc PatternEditor._Channel._0;
PatternEditor.NoteText:
  db 'C-',0,'C#',0,'D-',0,'D#',0,'E-',0,'F-',0;
  db 'F#',0,'G-',0,'G#',0,'A-',0,'A#',0,'B-',0;

vector2f PatternEditor._RectOffset,0,0;
vector2f PatternEditor._RectWH1,48,12;
vector2f PatternEditor._RectWH2,16,12;






//==============================================================================
//  Color scheme
//==============================================================================
color Text.Foreground,125,143,159; //223,255,155;//
color Text.Background,0,0,0;
vector2f PatternEditor.Offset,8,110;
vector2f PatternEditor.GUIOffset,8,16;



//==============================================================================
//  Variables and settings
//==============================================================================

//Current line in editor
//alloc CurrentLine;
//Cursor position
//alloc CursorRow; alloc CursorCol;
//Redrawing
//alloc NeedRedraw.PatternEditor;

define CurrentLine,             4091;
define CursorRow,               4092;
define CursorCol,               4093;
define NeedRedraw.PatternEditor,4094;
define NeedRedraw.PatternLine,  4095;
  
  
  
//==============================================================================
//  System data
//==============================================================================
vector2f VecTemp; vector2f VecTemp1; vector2f VecTemp2;
 
//PatternData:
define PatternData,4096;
//Two bytes
//[0] Instrument
//[1] Note

[Wizard of Ass]

You should add that GPU also can use alpha channel in colors.

[Tasuit]

2 words: Totally Win.
really, i thank you so much for this tutorial, thank you so much
+rep'ed

[Masogir]

Maso: That drawing is amazing.

Thanks

[Donkie]

For the LoL example part when we write strings from the E2. You said that we dident want to have the # as its more than one cell. But if i then use 2 strings and place that string directly after the first. How would the GPU know when the first string is done?

Is there also some short-cut-key to press the "QuickLoad" button in the Q menu?

[Drunkie]

@ Black Phoenix

Thank you!! The more concepts that are introduced here, the better it is for everyone. We need stuff like that to build a bigger amount of information or documentation about the GPU. Also, disabling hardware clearing is very fun to play with, and formatting strings is useful as well. I will add all of the information you stated to the tutorial soon.

Also why did my thread get moved? I think more people will see it sticked in the main section rather than the sub-forum.