xcx's blog

Blogi vaihtuu

2009-04-07T10:31:00.000-07:00

Tämä blogi vaihtuu uuteen. Uusi blogi löytyy osoitteesta

http://www.verajankorva.com/openblog/

Tämän blogin artikkelit löytyvät myös uudelta blogilta.

Lisää custom dataa .NET ListViewItem olioon.

2009-04-06T05:19:00.000-07:00

Usein tulee vastaan tilanne, että ListViewItem tai TreeViewItem pitäisi sisältää dataa, joka ei näy itse komponentissa esim. jokin tunnisteguid.

Oman tiedon kirjoittaminen ListViewItemiin ei ole lainkaan vaikeaa. Näin se käy.

Luodaan luokka, joka perii ListViewItem luokan.


 public class MyListViewItem : ListViewItem
 {
     private Guid m_guid;

     public MyListViewItem()
     {
     }

     public Guid Guid
     {
         set
         {
             m_guid = value;
         }

         get
         {
             return m_guid;
         }
     }
 }

Ja nyt voit käyttää luokkaasi ihan normaalisti.


MyListViewItem mlvi = MyListViewItem();
mlvi.Text = "TEST TEXT";
mlvi.Guid = Guid.NewGuid();

this.listView1.Items.Add( mlvi );

Ja kun nyt haluat päästä käsiksi omaan dataasi.


MyListViewItem mlvi = (MyListViewItem)this.listView1.Items[0];
Console.Out.WriteLine( mlvi.Guid.ToString() );

Siinä se. Helppoa, nopeaa ja käytännöllistä.

Scanline rendaaja Flashille

2009-03-30T01:49:00.000-07:00

Pitkään on pitänyt tätä kokeilla ja loputakin löysin aikaa tämän tekemiseen.

Katso esimerkki

Eli scanline rendaaja Flash 10:lle. Tärkeintä tässä on se, että enginessä on oikea zbuffer. Eli joka pikselillä on z arvo jota vasten voidaan tarkistaa mikä pikseli on minkäkin pikselin etu- vai takapuolella.
Tavallisesti Flash 3d-enginet eivät tee näin, koska polygonien rasterointi on flashilla hidasta, puhumattakaa pikselin piirtämisestä. Kuitenkin nykyisin alkaa vaikuttaa siltä, että pikselin piirto alkaa olla sen verran nopeaa, että jonkinlaiseen käyttöön sitä voisi jo käyttää. Edelleen olisi nopeampaa tehdä, kuten Papervision, Sandy3d tai Away3d eli käyttää Flashin omaa polygonin piirtoapia ja sorttaa polyt esim zsortilla. Ongelma kuitenkin on, että polyt voivat joissain tilanteissa piirtyä väärässä järjestyksessä, koska z arvot lasketaan vain polyn keskipisteen mukaan, jolloin tulos ei ole aina oikein. Lisäksi zsort ei voi piirtää leikkaavia polygoneja okein. Pikselipohjainen zbuffer on melkoisesti hitaampi, mutta polyt piirtyy aina oikein myös silloin jos polyt leikaavat toisiaan.

Lähdekoodit

XNA

2008-11-28T10:05:00.000-08:00

Microsoft XNA on ilmainen "peliohjelmointikirjasto", jonka tarkoitus on olla helppokäyttöinen Direct X rajapinnan päälle rakennettu Framework. XNA ei kuitenkaan eroa kovinkaan paljoa Direct X:stä. Se on kuitenkin selkeämpi ja siitä on poistettu epäolennaisia osia. XNA ohjelmia voidaan ohjelmoida .NET kielillä ja tässä käytetämme C# kieltä, mutta voisit käyttää muitakin .NET kieliä oman valintasi mukaan.

XNA käytännössä korvaa Managed Direct X:n.

XNA on melko pieni paketti, jonka voi ladata täältä http://creators.xna.com/en-US/downloads

Tarvitset kuitenkin myös DirectX SDK:n ja Visual Studion tai Visual C# 2008 Express Edition.

Kolmio

Värillinen kolmio on melkein "Hello world" ohjelma, kun aloitetaan opiskelemaan 3d-grafiikkaohjelmointia. Tällä kertaa aionkin esitellä miten kolmio luodaan XNA:lla.

Käynnistä Visual C# ja luo uusi XNA projekti. XNA projekti on hämäävästi nimetty Windows Game ja XBox360 Game.

Tämä luo sinulle projektin, jossa on valmiiksi tehtynä pari perusjuttua peliä tehdessä, kuten ikkuna ja pääsilmukka. Nämä mm. ovat asioita, jotka teet aina likimain samalla tavalla. On siis varsin mukavaa, että XNA projekti tekee nämä valmiiksi.


#region Using Statements
using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Storage;
#endregion

namespace BlogExample01
{

public class Game1 : Microsoft.Xna.Framework.Game
{
 GraphicsDeviceManager graphics;
 ContentManager content;


 public Game1()
 {
     graphics = new GraphicsDeviceManager(this);
     content = new ContentManager(Services);
 }

 protected override void Initialize()
 {
     base.Initialize();
 }

 protected override void LoadGraphicsContent(
     bool loadAllContent)
 {
     if (loadAllContent)
     {         
     }
 }

 protected override void UnloadGraphicsContent(
     bool unloadAllContent)
 {
     if (unloadAllContent)
     {
         content.Unload();
     }
 }

 protected override void Update(GameTime gameTime)
 {
     base.Update(gameTime);
 }

 protected override void Draw(GameTime gameTime)
 {
     graphics.GraphicsDevice.Clear(Color.CornflowerBlue); 

     base.Draw(gameTime);
 }
}
}

Jos käännät koodin saat eteesi ikkunan sinisellä pohjalla.

Haluamme kuitenkin sen kolmion ruudulle, joten meidän pitää kertoa millaisista pisteistä kolmio koostuu. Näitä pisteitä sanotaan vertekseiksi. XNA:ssa verteksit voivat sisältää paljonkin tietoa. Se mitä tietoa verteksillä on kerrotaan verteksiformaatissa. Näitä formaatteja voi tehdä itse tai käyttää XNA:n valmiita formaatteja, kuten tässä.
Käytämme verteksiformaattia VertexPositionColor, johon voidaan siis kirjoittaa paikka- ja väridata. Luodaan siis luokalle uusi member muuttuja (kaamea suomennos "jäsenmuuttuja") private VertexPositionColor[] m_vertices.


...
{

public class Game1 : Microsoft.Xna.Framework.Game
{
 GraphicsDeviceManager graphics;
 ContentManager content;

 private VertexPositionColor[] m_vertices;

 public Game1()
 {
...

Seuraavaksi luodaan taulukkoon ne verteksit.


...
 protected override void LoadGraphicsContent(
     bool loadAllContent)
 {
     if (loadAllContent)
     {
         m_vertices = new VertexPositionColor[3];

         m_vertices[0].Position = new Vector3(
             -0.5f, -0.5f, 0f);
         m_vertices[0].Color = Color.Red;
         m_vertices[1].Position = new Vector3(
             0, 0.5f, 0f);
         m_vertices[1].Color = Color.Green;
         m_vertices[2].Position = new Vector3(
             0.5f, -0.5f, 0f);
         m_vertices[2].Color = Color.Yellow;
     }
 }
...

Nyt meillä on verteksit, joilla voidaan piirtää kolmio, mutta näytönohjaimelle on kerrottava millaista vertexdataa on tulossa ja XNA:ssa se tehdään luomalla VertexDeclaration olio. VertexDeclaration tarvitsee myös pääsyn näytönohjaimeen, joka onnistuu XNA:n GraphicsDevice luokan kautta. Meidän pitää siis luoda oliot VertexDeclaration ja GraphicsDevice.


...
public class Game1 : Microsoft.Xna.Framework.Game
{
 GraphicsDeviceManager m_graphics;
 ContentManager m_content;
 GraphicsDevice m_device;

 private VertexPositionColor[] m_vertices;
 private VertexDeclaration m_vd;

 public Game1()
 {
...

...
 protected override void LoadGraphicsContent(
     bool loadAllContent)
 {
     if (loadAllContent)
     {
         m_device = m_graphics.GraphicsDevice;

         m_vertices = new VertexPositionColor[3];

         m_vertices[0].Position = new Vector3(
             -0.5f, -0.5f, 0f);
         m_vertices[0].Color = Color.Red;
         m_vertices[1].Position = new Vector3(
             0, 0.5f, 0f);
         m_vertices[1].Color = Color.Green;
         m_vertices[2].Position = new Vector3(
             0.5f, -0.5f, 0f);
         m_vertices[2].Color = Color.Yellow;

         m_vd = new VertexDeclaration(m_device, VertexPositionColor.VertexElements);
...

Emme ole vieläkään valmiit piirtämään mitään :(, mutta olemme jo puolivälissä :).
XNA piirtää kaiken kaman ruudulle shaderien kautta. Eli meidän kirjoitettava Vertex- ja PixelShader voidaksemme piirtää jotain. Niiden kirjoittaminen on kuitenkin oma asiansa ja voimme tässä vaiheessa aivan hyvin tyytyä käyttämään jotain valmista shaderia ja murehtia niiden tekemisestä sitten joskus myöhemmin. Halutessasi voit lukea shadereistä lisää Direct X SDK:n dokuista tai vaikka Riemersin tutoriaaleista, joista meidän käyttämämme shader on otettu linkki. Tässä vaiheessa on kuitenkin tarpeen tietää miten shadereitä käytetään.
Shadereitä hallitaan Effect luokan kautta. Eli luomme Effect olion, johon ladataan HLSL tiedosto. Itse lataaminen suoritetaan Content luokan avulla, jonka XNA projekti on jo valmiiksi alustanut ohjelman käytettäväksi.
Shader tiedosto on normaali tekstitiedosto, jonka pääte tavallisesti on .fx. Tässä ohjeessa käytän simpleshader.fx shaderia. Se on äärimmäisen yksinkertainen shaderi, mutta se riittää meidän tarpeisiimme.
Lisää shader tiedosto projektiisi ja lataa shader Content luokan avulla käyttäen Visual C#:pin shaderille antamaa Asset Name nimeä. Se on yleensä tiedoston nimi ilman päätettä.


...
public class Game1 : Microsoft.Xna.Framework.Game
{
 GraphicsDeviceManager m_graphics;
 ContentManager m_content;
 GraphicsDevice m_device;

 private Effect m_effect;
 private VertexPositionColor[] m_vertices;
 private VertexDeclaration m_vd;
...

...
protected override void LoadGraphicsContent(
bool loadAllContent)
 {
     if (loadAllContent)
     {
         m_device = m_graphics.GraphicsDevice;
         m_effect = m_content.Load("simpleshader");

         m_vertices = new VertexPositionColor[3];
...

Nyt meillä on kolmion verteksit, verteksiformaatti ja shaderi, jolla piirtää. Mitä vielä tarvitaan? Matriisi tai oikeastaan matriisit. Matriisi on taulukko numeroita, joiden selittäminen ei ole tässä juuri nyt tarpeen. Oikeastaan ne ovat melkoisen yksinkertaisia ja selkiintyvät kuin itsestään. Voimme kuitenkin käyttää niitä aivan hyvin vaikka emme niiden toimintaa ymmärtäisikään. Tarvitsemme kaksi matriisia. Näkymämatriisin ja projektiomatriisin. Yleensä tarvitaan matriiseja enemmänkin, mutta juuri nyt nuo kaksi riittävät. Näkymämatriisi on matriisi, joka kertoo XNA:lle missä ja missä asennossa katsojan silmä, eli kamera, on. Projektiomatriisi kertoo millainen kamera. Eli minkälainen FOV, lähi -ja kaukoleikkaus ja millainen aspect ratio näkymässä on.
Tarvitsemme kaksi uutta memberiä luokkaamme.


...
public class Game1 : Microsoft.Xna.Framework.Game
{
 GraphicsDeviceManager m_graphics;
 ContentManager m_content;
 GraphicsDevice m_device;

 private Effect m_effect;
 private VertexPositionColor[] m_vertices;
 private VertexDeclaration m_vd;

 private Matrix m_matView;
 private Matrix m_matProj;

 public Game1()
...

Ja asetamme näille asetukset, jotka sopivat ko. tilanteeseen.


...
 protected override void LoadGraphicsContent(
     bool loadAllContent)
 {
     if (loadAllContent)
     {
         m_device = m_graphics.GraphicsDevice;
         m_effect = m_content.Load("simpleshader");

         m_vertices = new VertexPositionColor[3];

         m_vertices[0].Position = new Vector3(
              -0.5f, -0.5f, 0f);
         m_vertices[0].Color = Color.Red;
         m_vertices[1].Position = new Vector3(
             0, 0.5f, 0f);
         m_vertices[1].Color = Color.Green;
         m_vertices[2].Position = new Vector3(
             0.5f, -0.5f, 0f);
         m_vertices[2].Color = Color.Yellow;

         m_vd = new VertexDeclaration(
              m_device,
              VertexPositionColor.VertexElements);

         m_matView = Matrix.CreateLookAt(new Vector3(
                0.0f, 0.0f, 2.0f),
                new Vector3(0.0f, 0.0f, 0.0f),
                new Vector3(0.0f, 1.0f, 0.0f));
         m_matProj = Matrix.CreatePerspectiveFieldOfView(
             MathHelper.PiOver4,
             (float)m_device.Viewport.Width /
             (float)m_device.Viewport.Height,
             1.0f, 100.0f);
     }
 }
...

Ja lopultakin olemme valmiit piirtämään!


...
 protected override void Draw(GameTime gameTime)
 {
     m_graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

     m_device.RenderState.CullMode = CullMode.None;
     m_device.RenderState.FillMode = FillMode.Solid;
...

Asetetaan piilopintojen poisto pois päältä, jotta kolmio näkyy vaikka se olisi "väärin päin" ja asetetaan kolmion piirto fill moodiin. Eli kolmiot täytetään eikä piirretä niistä vain reunoja tai kärkipisteitä.


...
     m_effect.CurrentTechnique = m_effect.Techniques["Simplest"];
     m_effect.Parameters["xViewProjection"].SetValue(
         m_matView * m_matProj);
     m_effect.Begin();
...

Otetaan shaderista käyttöön Simplest tekniikka. Eli tämä on shaderiin kirjoitettu efekti, joka voi olla melkin mitä tahansa. Tällä kertaa se on hyvin yksinkertainen värien interpolointi verteksien välillä.
Shader myös sisältää muuttujan, joka on xViewProjection matriisi. Sinun tulee antaa tämä matriisi jotta shader osaa projisoida verteksit oikein.


...
     foreach (EffectPass pass in
         m_effect.CurrentTechnique.Passes)
     {
         pass.Begin();
...

Koodi käy kaikki shaderin "passit" läpi. Tässä shaderissa passeja on vain yksi, mutta niitä voi olla enemmänkin.


...
         m_device.VertexDeclaration = m_vd;         
         m_device.DrawUserPrimitives(
             PrimitiveType.TriangleList,
             m_vertices, 0, 1);

         pass.End();
     }
     m_effect.End();

     base.Draw(gameTime);
 }
...

Kerrotaan näyttökortille, millaista verteksidataa olemme lähettämässä. Lähetetään polygoni kortille ja lopuksi piirretään näyttökortin muistissa oleva data. Ja tulos näyttää tältä.

Imuroi lähdekoodi

C# ja JavaScript

2008-11-16T02:48:00.000-08:00

Usein tulee vastaan tilanteita jolloin selainohjelman tekeminen esim. yrityksen sisäiseen käyttöön tuntuu järkevältä. Selaimet ovat mm. erittäin hyviä käsittelemään isoja määriä kuvia. Ne mukavasti lataavat kuvat streamaamalla ja pysyvät interaktiivisina isojenkin kuva määrien kanssa.

Nettiselain on kuitenkin tehty turvalliseksi ja niistä ei ole pääsyä asiakaskoneeseen. Paikallisessa käytössä se on kuitenkin usein toivottua ja tarpaallista.
Internet Explorer kylläkin tarjoaa ActiveX:n kautta pääsyn Windowsiin, mutta siihen on myös toinenkin keino.

C# tai ylipäätään kaikki .NET kielet tarjoavat WebBrowser komponentin, jolla voidaan omaan .NET ohjelmaan upottaa webbiselain ja kirjottaa sen päälle omaa koodia. Kuitenkin on lievästi hankalaa saada HTML sivulta tietoa .NET ohjelmaasi. Usein varmasti haluaisit saada tiedon esim. siitä onko käyttäjä painanut nappia ja mitä asetuksia hän on sivulle laittanut.

Eli voidaksemme käyttää .NET:iä laajentamaan selaimen toimintaa pitää meidän kirjoittaa oma .NET ohjelma. Ohjelman pitää sisältää WebBrowser komponentti, joka löytyy System.Windows.Forms.WebBrowser
http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.aspx

C# koodia


using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;

namespace WebpageTest
{
 public partial class MainForm : Form
 {  
  WebBrowser m_wb = new WebBrowser();
  
  public MainForm()
  {
   InitializeComponent();
      
   m_wb.DocumentCompleted += 
      new WebBrowserDocumentCompletedEventHandler( 
          this.wb_OnDocumentComplete );
   m_wb.ObjectForScripting = new JavaScript();
   m_wb.Dock = DockStyle.Fill;  
   this.Controls.Add( m_wb );
   
   try
   {    
    m_wb.Url = new Uri( Application.StartupPath + 
        "/example.html");    
   }
   catch ( Exception e )
   {
    MessageBox.Show ( e.Message );
   }
  }
  
  public void wb_OnDocumentComplete(object sender, 
      System.EventArgs e)
  {
   m_wb.Document.InvokeScript ("testDotNet", null );
  }  
 }
}

Ohjelma on yksinkertainen, mutta käydään silti joitain kohtia läpi.

m_wb.DocumentCompleted += 
    new WebBrowserDocumentCompletedEventHandler( 
        this.wb_OnDocumentComplete );

Kun HTML tiedosto on ladattu siitä lähetetään DocumentCompleted tapahtuma. Tämä rivi kertoo ohjelmalle, että haluamme tapahtuman käsiteltävän funktiossa wb_OnDocumentComplete(). Tämä on tärkeää, koska emme halua yrittää kutsua JavaScript funktioita ennen, kuin sivu on ladattu.

m_wb.ObjectForScripting = new JavaScript();

Rivi kertoo WebBrowser komponentille, että mihin olioon internet sivulla oleva scripti voi päästä käsiksi.

m_wb.Document.InvokeScript ("testDotNet", null );

DocumentComplete tapahtuman käsittelevässä funktiossa oleva rivi. Komentaa WebBrowseria ajamaan scriptiä. Tässä tapaauksessa ajamme testDotNet() funktion ilman funktioparametreja.

.NET ohjelma tarvitsee vielä JavaScript olion. Eli olion, joka näkyy nettisivulla olevalle JavaScriptille. Olion nimi voi olla mitä vain, mutta itse käytän nimeä JavaScript.

C# koodia


using System;
using System.Windows.Forms;

namespace WebpageTest
{
 [System.Runtime.InteropServices.ComVisible(true)]
 public class JavaScript
 {
  public JavaScript()
  {
  }
  
  public void testJS( int iId )
  {
   MessageBox.Show( iId.ToString() );
  }
 }
}

Luokka on simppeli, jossa on vain yksi methodi testJS( int id ). Tätä methodia voidaan kutsua nettisivulta. Huomaa, että luokan pitää olla näkyvissä COM:lle.

[System.Runtime.InteropServices.ComVisible(true)]

Lopuksi vielä pieni nettisivu, joka osaa käyttää .NET koodia. Huomaa, että sivu on ajettava .NET ohjelmasi kautta, jotta oma koodisi toimii.

HTML koodia


<html>
 <head>
  <title>.NET example</title>
  <style type="text/css">
  p.option 
  { 
   cursor:pointer;
  }
  </style>
  <script type="text/javascript">
  function testDotNet()
  {
   alert ("Dot net made this function call.");
  }

  function OnClick(id)
  {
   window.external.testJS( id )
  }
  </script>  
 </head>
 <body>
  <p class="option" onClick="OnClick(1);">Option 1</p>
  <p class="option" onClick="OnClick(2);">Option 2</p>
  <p class="option" onClick="OnClick(3);">Option 3</p>
 </body>
</html>

Flash 10 beta

2008-05-18T12:48:00.000-07:00

Flash 10:nen ei vielä ole virallisesti julkaistu, mutta nyt jo hätäisemmät pääsevät sitä kokeilemaan. Tätä varten tarvitaan Flex3 Nightly Build Thu May 15, 2008 tai uudempi linkki. Muista myös ennen asennusta poistaa vanha flash koneestasi linkki. Asenna vanhan poistamisen jälkeen uusi Flash 10 beta player linkki. Pura sdk paketti haluamaasi hakemistoon ja varmista, että sieltä löytyy seuraavaa filu FLEX_SDK/frameworks/libs/player/10/playerglobal.swc.

Sitten vaikeampi osuus :).

Sinun pitää käsin muuttaa flex-config.xml tiedostoa. Se löytyy [flex_root]\frameworks\flex-config.xml. Tee tiedostosta varmuuskopio ja avaa alkuperäinen xml tiedosto johonkin tekstieditoriin.
Muuta tiedostoa seuraavasti.

Muuta target-player tagi arvoon 10.0.0. Muuta viittaukset playeriin 9 arvoon {targetPlayerMajorVersion}. Eli libs/player/9/playerglobal.swc rivi libs/player/{targetPlayerMajorVersion}/playerglobal.swc. Näitä kohtia on tiedostossa kaksi external-library-path ja library-path.

Nyt Flex on valmis kääntämään Flash 10 sälää. Jos haluat käyttää Flash Developia tarvitset uuden FD buildin FlashDevelop 3 SVN build from rev. 2297. Aseta se käyttämään uutta Flexiä ja lisää projektin External Libraries listaan [flex_root]\frameworks\libs\player\10\playerglobal.swc tiedosto. Tarvitset enää Flash 10 playerin IE:lle ja voit tehdä Flash 10 ohjelmia Flash Developilla.

Ohje englanniksi Flash Developin foorumilla.

PaperVision 3D

2008-05-12T14:09:00.000-07:00

Koska rasterointi pikseli pikseliltä on Flashilla erittäin hidasta pitää Flashin kanssa kikkailla, jotta pystytään renderoimaan 3d kamaa ruudulle. Tähän tarkoitukseen on olemassa useita 3d-moottoreita, jotka suoriutuvat tehtävästä jotakuinkin. Yksi näistä on suosittu PV3D, joka on ns. "skew rendaaja". Useimmat Flash 3d-enginet ovat skew rendaajia. Tämä on matemaattisesti oikeaa 3d:tä, mutta se on silti "huijausta". Mitään ei oikeasti rasteroida, joten emme tiedä pikselien 3d koordinaatteja paitsi verteksien kohdalla. Tästä johtuen emme voi mm. perspektiivikorjata tekstuureita. Syvyysdatan puute aiheuttaa myös paljon muitakin rajoituksia joita tosin joitain voidaan kiertää. Skew nimitys tulee tavasta jolla tekstuurit rendataan. Flash ei tue perspektiivitekstuureja, mutta spritejä voidaan skewata. Eli rotaatoimme ja skewaamme spriten sopivaan asentoon ja leikkaamme siitä polyn tarvitsevan osan ja piirrämme tämän polyn kohdalle. Näin saadaan aikaan tektuurit, mutta ilman perspektiivikorjausta, joka näkyy isoissa polyissa teksturen vääristymisenä. Jotkut enginet tosin dynaamisesti tesselloi polyja jolloin vääristyminen vähenee, mutta ei kuitenkaan kokonaan katoa. Oikea tapa tehdä 3d-moottori olisi rasterointi, josta olemmekin tässä blogissa puhuneet, mutta flashin tehot eivät siihen vielä riitä. Tässä kuitenkin tulevaisuuden varalle open source 3d rasteroija http://drawlogic.com/2008/04/11/as3-swfz-source-code-goes-open-source/.

Tällä kertaa kuitenkin on tarkoitus kokeilla PaperVisionia. Teemme sillä upean pyörivän laatikon :). Olen varma, että tulette hämmästymään lopputuloksen upeutta, mutta tarkoitus on kokeilla miten PV3D saadaan käyttökuntoon ei pörhistellä graafisilla hienouksilla.

http://www.verajankorva.com/blog/HelloCube.swf

Kuten huomaatte tekstuurit vääristyvät laatikon pyöriessä. Tämä johtuu juuri mainituista syistä ja laatikkoa ei dynaamisesti tesselloida pienempiin polyihin niin vääristyminen näkyy hyvin selvästi.

Koodi tähän on erittäin simppeliä ja suurempi haaste on saada PV3D sorsat donattua :).

Lähdekoodi http://www.verajankorva.com/blog/HelloCube.as

Flashin suorituskyky

2008-05-07T03:07:00.000-07:00

AS3 on sanottu olevan nopemapi kuin AS2. Se on totta, mutta AS3 ei silti tee Flashista nopeaa. Se on edelleen hidas ja jää pahasti jalkoihin vaikka Javalle. Tästä huolimatta Flash tuntuu olevan suositumpi (jumala yksin tietää miksi). No kun kerran Flashia halutaan niin koodataan sitten sitä. Ensin on kuitenkin syytä tietää missä pullonkaulat ovat.

Kokeilin ensin perus matikkakamat. Laskutoimitukset tehty 10 000 000 kertaa ja katsottu miten kauan meni. Tuloksia.

Kertolasku: 858ms
Jakolasku: 809ms
Potenssilasku: 931ms
Bittien siirto: 932ms
Miinuslasku: 821ms
Pluslasku: 817ms
Pluslasku integer: 815ms

Tulokset ovat varsin hämmentäviä ja varsinkin jakolaskun nopeus. Tämä ei vertaa mittaa toimitusten nopeutta esim. verrattuna Javaan tai C++:aan, mutta tämä kertoo mikä on hidasta ja nopeaa Flashin sisällä. Yleisesti jakolasku on hidas, mutta Flashissa se tuntuu olevan nopein. Samoin myös bittien siirto ja pontessilasku on liki samalla viivalla mikä on myös melko erikoista. Flash tekee selvästi jotain hyvin eri tavalla kuin useimmat ohjelmointikielet, mutta tämän testin valossa plus, miinus, kerto ja jakolasku ovat kaikki yhtä kalliita flashille. Bittien siirtely ei myöskään tuo lisänopeutta potenssilaskuun nähden. Erityisen harmillista koska nyt koodin optimointi on taas vähän vaikeampaa. Oikeastaan tämän testin valossa pitäisi suosia jakolaskua, joka kuulostaa hyvin väärältä, mutta siltä se vaikuttaisi :).

Sanotaan selvyyden ja pahan olon vuoksi, että kertolasku testi kestää C#:lla 16ms ja Flashilla siis 858ms. Eli C# on tässä noin 53 kertaa nopeampi. Voisi tuon perusteella sanoa, että esim. peli joka pyörii 20fps flashilla pyörisi noin 1060fps C#:lla. Ei ole yhtään kivaa, että Flash on niin suosittu :(.

Nopeuksia ehtolauseiden käytöstä. Tässä sama juttu kuin yllä eli operaatiot on tehty 10 000 000 kertaa ja mitattu niiden viemä aika.

1 kierron mittainen for lause: 905ms
If lause: 822ms
Switch/Case lause: 1271ms

Dynaaminen muistin varaus. Mitattu samalla tavalla kuin aikaisemminkin.

2 muuttujan luominen: 1199ms
2 muuttujan arvon vaihtaminen: 1193ms
Luokan luominen, jossa 2 muuttujaa: 9586ms

Tässä kohtaa on erityisen tärkeää huomata, että luokan luonti on todella runsaasti hitaampaa. Eli jos olet ajatellut tehdä vaikka XY luokan, jota käytät joka pikselissä niin se on todella huono idea :). Kannattaa enemmin tehdä kaksi muuttujaa X ja Y. Eli vältä pieniä luokkia aina kun se on mahdollista. Ei kuitenkaan kannata mennä liiallisuuksiin ja tehdä koodista epäselvää vain siksi, että yrittää välttää luokkia. Muuttujan luomisella tai muuttujan arvon asettamisella ei tunnu olevan juuri eroja.

Kolmion rasterointi

2008-05-06T13:09:00.000-07:00

Kuvan mukaisen kolmion täyttäminen yhdellä värillä ei ole niin helppoa miltä se kuulostaa. Toki Flash tarjoaa tähän valmiin funktion, mutta se funktio ei kelpaa meille enää siinä vaiheessa kun haluamme täyttää polygonin tekstuurilla perspektiivikorjattuna. Tästä syystä meidän on kirjoitettava oma poly filleri, jota voimme kehittää eteenpäin.
Tähän on monia tapoja, mutta tässä esittelen tavallisemman tavan, jossa polygoni täytetään vetämällä polygonin reunasta reunaan vaakaviivoja (scanline). En oikeastaan tiedä millä nimellä tätä algoritmia kutsutaan, mutta sanon sitä nyt vaikka scanline rasteriksi.
Eli kolmio on muoto jossa on kolme sivua (edge) ja kolme kärkipistettä (vertex).

Homma toimii siten, että interpoloimme A->B välin jolloin saamme AB reunan ja interpoloimme A->C välin jolloin saamme AC reunan ja interpoloimme B->C ja saadaan BC reuna. Sitten vedellään vaakaviivoja AB ja AC reunojen välille ja saadaan täytetty yläosa.

Sama BC ja AC välille ja saadaan myös fillattu alaosa. Näin koko kolmio on täytetty.

Tämän toiminnallisuuden kirjoittaminen koodilla ei ole aivan triviaalia, mutta se ennemminkin hiukan työlästä ja ikävää kuin vaikeaa.
Kolmio siis rasteroidaan kahdessa osassa. Tämä siksi että haluamme kolmion yhden sivun olevan suora, joka helpottaa vaakaviivojen piirtoa ja ennen kaikkea nopeuttaa niiden piirtoa. Vaakaviivahan on hyvin helppo piirtää. Meidän pitää vain kasvattaa X arvoa yhdellä kunnes ollaan loppupisteessä. Tämä on siis yksinkertainen plus lasku.
Eli aloitetaan kolmion halkaisusta. Tässä ei oikeastaan ole mitään hankalaa. Meidän pitää vain varmistaa, että verteksit ovat y suunnassa laskevassa järjestyksessä eli A on ylin piste ja C alin piste. Itse halkaisu käy ikään kuin itsestään.


var t:Point = null;
if (A.y > B.y)
{
 t = A;
 A = B;
 B = t;
}

if (B.y > C.y)
{
 t = B;
 B = C;
 C = t;
}

if (A.y > C.y)
{
 t = A;
 A = C;
 C = t;
}

Kun tiedämme, että pisteet ovat oikeassa järjestyksessä voimme laskea polyn yläosan.


if (t.A.y != t.B.y)
{
 var aex:Number = t.A.x;
 var aed:Point = new Point(t.B.x - t.A.x, t.B.y - t.A.y);
 var aes:Number = aed.x / aed.y;
 
 for (var i:int = t.A.y; i < t.B.y; i++)
 {
  aex += aes;
  cex += ces;
  
  var x1:int = aex;
  var x2:int = cex;
  drawScanline(new Point(x1, i), new Point(x2, i), _bmp);
 }
}

Loogisesti jatkamme tästä piirtämällä myös alaosan.


if (t.B.y != t.C.y)
{
 var bex:Number = t.B.x;
 var bed:Point = new Point(t.C.x - t.B.x, t.C.y - t.B.y);
 var bes:Number = bed.x / bed.y;
 
 for (i = t.B.y; i < t.C.y; i++)
 {
  bex += bes;
  cex += ces;
  
  x1 = bex;
  x2 = cex;
  drawScanline(new Point(x1, i), new Point(x2, i), _bmp);
 }
}

Ja tässä koko koodi, joka näyttää kaikki tarpeelliset yksityiskohdat.

Lataa lähdekoodi

Pikselin piirtoa

2008-01-25T09:32:00.000-08:00

Kun nyt olemme alkaneet puhua 3d:stä niin meidän pitää puhua myös pikseleistä, koska ilman niitä emme saa aikaan kunnon 3d:tä. Toki jonkinlaista saadaan rendattua ilman pikseleitäkin, mutta ongelmia tulee. Varsinkin teksturoidessa ja Z-bufferin kanssa. Teksturointi vielä joten kuten onnistuu, mutta Z-Buffer on mahdoton ilman pikseleitä ja vaihtoehdoksi jää Z-Sort, joka ei toimi kunnolla. Tästä syystä Sandyn ja Papervisionin polyt napsahtelee eikä piirry aina oikein.

Ongelma kuitenkin on, että flash on hidas tuhertamaan pikseleitä. Nyt kuitenkin meillä on AS3 ja sen kehuttu huima nopeus käytössämme, joten testataan millä vahudilla pikseliä ruutuun saadaan ja millä tavalla saadaan niitä sinne nopeitein.

Tässä siis testiä parista eri tavasta piirtää pikseleitä. Testit piirtää kuvan mukaisen kuvan 10 kertaa ja laskee keskiarvon kokonaispiirtoajasta. Testikoneena Intel dual core 1.86GHz, 2GB ja GeForce 7600 GT.

Testi 1: Pikselin piirtoa joka pikselille setPixel() methodilla.
pixelBench1.swf
pixelBench1.fla

Keskimääräinen piirtoaika: 24.4ms
FPS: 40.98

Testi 2: Pikselit kirjoitetaan ensin byteArray objektiin josta se piirretään kerralla bitmapData objektiin ja näytetään ruudulla.
pixelBench2.swf
pixelBench2.fla

Keskimääräinen piirtoaika: 22.6ms
FPS: 44.25
Parannusta testiin 1: 7.38%
Tämä testi koossa 640*480 vei aikaa 92ms eli fps oli 10.87.
Jos poistamme jakolaskut for-looppien sisältä saamme nipistettyä piirtoajan 68.6ms fps 14.58.

Testi 3: Sama kuin testi 2, mutta tällä kertaa emme luo bytearrayta joka kerta uudestaan vaan käytämme samaa arrayta. Tämä ei yllättäen nopeuttanut mitään. Tosin matikkaa tarvittiin vähän lisää, josta johtunee tuo hidastuminen. Yleensä kuitenkin muistin varaaminen dynaamisesti on hidasta ja jota pitäisi välttää, mutta tässä kohtaa ei niin näytä olevan. Kenties flash sisäisesti käsittelee bytearrayta niin ettei tästä ole hyötyä.
pixelBench3.swf
pixelBench3.fla

Keskimääräinen piirtoaika: 28.6ms
FPS: 34.97

Huomaamme että versio 2 on nopein, mutta sekin on kuitenkin todella hidas ja aivan liian hidas jotta voisimme piirtää sillä oikeaa 3d grafiikka reaaliaikaisesti. Eli joudumme edelleen AS3 ajallakin välttelemään pikselin piirtoa ainakin minun koneellani :(.

3D-grafiikkaohjelmointia Flashilla.

2008-01-18T11:21:00.000-08:00

Tämä on varsinainen mammuttiaihe, joten tulemme puhumaan tästä osissa aika ajoin tällä blogilla.

Oletan että kaikki lukijat tietävät mitä on 3d, joten ei juuri yritä selittää mikä on kolmiuloitteinen avaruus tai -malli. Myös perustieto 3d grafiikasta on erittäin suositeltavaa.

3D

Tietokoneen monitori on 2d-taso eli siihen ei voi piirtää 3d-pistettä. Tästä syystä 3d-piste on ensin projisoitava 2d-tasolle, jotta voit piirtää sen ruudulle. Piste pitää kuitenkin ensin transformoida eli siirtää oikeaan paikkaan ennen projisointia. Tämä projisointi tehdään 3d-mallin jokaiselle geometria verteksille, jonka jälkeen saisimme aikaan mallin josta osaamme piirtää verteksit.

Jos yhdistät pisteet viivalla oikeassa järjestyksessä saat aikaan wireframe mallin eli rautalankamallin.

Jos täytät viivojen rajaamat alueet saat solidface mallin. Tällöin mallisi olisi kuitenkin tasaisen yksi värinen.

Jos lisäät ohjelmaasi varjostuslaskentaa saat aikaan varjostetun 3d-mallin. Varjostustapoja onkin sitten monia, mutta alkuun kannattaa opetella joku yksinkertainen kuten esim. Z-Flat.

Varjostuksesta on luonnollista siirtyä tekstuureihin, joka on Flashilla hankala toteuttaa. Se on kuitenkin mahdollista rotailemalla ja skewaamalla kuvaa sopivasti. Tästä tulee kuitenkin ongelmia isojen polygonien kanssa johon palaamme myöhemmin. Sanotaan kuitenkin, että ongelmana on ettei tekstuureja ole perspektiivikorjattu. Ongelmaa voidaan vähentää tesseloimalla polygonia, mutta tämä on kuitenkin vain purkkaviritelmä, joka ei oikeasti kunnolla toimi, mutta korjaa kyllä ongelmaa jonkin verran. Palataan tähän aiheeseen kun oikeasti asiaa käsittelemme.

Kun olemme käsitelleet yllä olevat asiat alkaa sinulla ollakin jo melko hyvä pohja 3d-ohjelmoinnissa. Paljon kuitenkin jää asioita opittaviksi tämänkin jälkeen, mutta aloitetaan ensin aivan alusta.

Pisteen projisointi

Pisteen projisointi 2d-tasolle on helppoa. Se vaatii vain kaksi yksinkertaista laskukaavaa.
sx = x*256/z
sy = y*256/z

Näin siis projisoimme 3d pisteen 2d pisteeksi. Luku 256 on katselupisteen etäisyys projisoitavasta pinnasta.

Nyt periaatteessa osaisit tehdä 3d starfieldin. :)

Starfield.fla

Starfield on varmasti yksinkertaisin 3d-ohjelma mitä on, mutta siinä tulee projisio hyvin tutuksi. Jatketaan tästä seuraavalla kerralla.

Binääritiedostojen lukeminen Flashilla.

2008-01-16T23:08:00.001-08:00

Jatketaan binääritiedostoilla. Virheellisesti viime postauksessa väitin ettei binääritiedostoja voi lukea Flashilla. Kyllähän niitä voikin ja se helpottaa taas kummasti elämää.

Binääritiedoston lukeminen on jonkin verran vaikeampaa, kuin normaalin ascii muotoisen tiedoston lukeminen, joita ovat mm. tekstitiedostot ja xml-tiedostot. Tekstitiedostoissa ei sinänsä ole mitään vikaa, mutta ne alkavat viedä melkoisesti tilaa, jos niihin tallennetaan paljon dataa. Binääritiedostot on taas mahdollista saada paljon pienempään tilaan ja sitä pidän erityisen tärkeänä varsinkin internetissä.

Binääritiedostoa ei kuitenkaan voi lukea, jos et tiedä tiedostoformaattia. Tässä tapauksessa teemme formaatin itse joten tietysti myös tiedämme millainen se on. En käy tässä varsinaisesti läpi miten hoidamme homman UV rendaajassa vaan käydään läpi ihan perustasolla miten nämä binääritiedostot toimivat Flashissa. Palaamme UV rendaajaan vielä myöhemmin tässä blogissa.

Tein scriptin 3dsmaxissa, joka kirjoittaa yksinkertaisen binääritiedoston.
00h 4 byte integer
04h 4 byte integer
08h 4 byte float
0Ch 4 byte float
Tällaisen binääritiedoston lukeminen Flashilla ei ole erityisen vaikeaa.



// ActionScript 3.0

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.utils.ByteArray;

var cURLLoader:URLLoader = new URLLoader(null);
var cURLRequest:URLRequest = new URLRequest(null);

cURLLoader.addEventListener(Event.COMPLETE, cURLLoader_onComplete);

cURLLoader.dataFormat = URLLoaderDataFormat.BINARY;
cURLRequest.url = "test.bin";

cURLLoader.load(cURLRequest);

function cURLLoader_onComplete(event:Event):void
{
    var byteArray:ByteArray = cURLLoader.data;
    byteArray.endian = Endian.LITTLE_ENDIAN;
    byteArray.position = 0;
    trace (byteArray.readInt());
    trace (byteArray.readInt());
    trace (byteArray.readFloat());
    trace (byteArray.readFloat());     
}

Ellet kuitenkaan ole tutustunut juurikaan binääritiedostojen lukemiseen flashilla niin tuo voi näyttää vähän mystiseltä. Eli käydään koodi läpi.

Importoidaan tarvittavat kirjastot.

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.utils.ByteArray;

Luodaan URLLoader -ja URLRequest oliot, jota käytämme tiedostomme lataamiseen. URLLoader osaa ladata tiedostot binäärimuotoisena. URLRequest on URLLoaderin vaatima luokka, jolla määritellään URL osoite. Alustamme kummankin luokan muodostimen parameterin arvolla null.

var cURLLoader:URLLoader = new URLLoader(null);
var cURLRequest:URLRequest = new URLRequest(null);

Lisätään cURLLoader oliolle tapahtumakuuntelija tapahtumaan COMPLETE, joka lähetetään kun tiedosto on ladattu.

cURLLoader.addEventListener(Event.COMPLETE, cURLLoader_onComplete);

Asetetaan cURLLoader olion data tyypiksi tai formaatiksi binääri ja cURLRequest oliolle kerrotaan URL, josta ladattava tiedosto löytyy.

cURLLoader.dataFormat = URLLoaderDataFormat.BINARY;
cURLRequest.url = "test.bin";

Ladataan tiedosto cURLLoader oliolla.

cURLLoader.load(cURLRequest);

Function cURLLoader_onCompelete määrittely. Tätä funktiota kutsutaan kun tiedosto on ladattu muistiin.

function cURLLoader_onComplete(event:Event):void

Pyydetään cURLLoader luokalta sen ByteArray olio, joka sisältää tiedoston datan binäärimuodossa. Asetetaan endian vastaamaan tiedoston endiania, joka tässä tapauksessa on little endian. Lopuksi varmistetaan, että ollaan datan alussa.

var byteArray:ByteArray = cURLLoader.data;
byteArray.endian = Endian.LITTLE_ENDIAN;
byteArray.position = 0;

Sitten luetaan tiedostoformaatin mukaisesti ensin kaksi 4 tavuista inttiä ja sitten kaksi 4 tavuista floattia.

trace (byteArray.readInt());
trace (byteArray.readInt());
trace (byteArray.readFloat());
trace (byteArray.readFloat());

Siinäpä se olikin.

UV datan pakkaaminen kuvaan

2008-01-08T12:54:00.001-08:00

Haluaisitko flash ohjelman jossa 3d-animaation pintatekstuureja voisi muuttaa. Voisit esim. tehdä renderoidun kuvan huoneesta ja muuttaa huoneen seinien tapetit ja vaihtaa lattian. Mikä olisi erityisen hienoa voisit laittaa seinälle minkä tahansa tapettikuva tai vaikka oman naamasi jos siltä jostain syystä tuntuu :).

Koska flashin tehot eivät riitä "kunnolliseen" oikeaan 3d-renderointiin (joka olisi tietysti ideaalista) olisi erityisen mieluisaa saada edes 3d-mallin tai scenen UV-koordinaatit flashiin per pikseli. Tämä mahdollistaisi 3d-mallien tekstuurien vaihtamisen ilman, että 3d-mallia tarvitsee oikeasti renderoida ja vieläpä perspektiivi korjattuna. Lisäksi tällä tavalla 3d-mallin polygonimäärällä ei ole merkitystä, joten 3d-malli voi sisältää miljoonia polygoneja, jos niin tahdot.

Niinpä tein 3D Studio Maxilla scriptin, joka tallensi renderoidun kuvan jokaisen pikselin UV-koordinaatit ja kirjoitti ne tekstitiedostoon. Ongelmaksi tuli hyvin nopeasti tekstitiedoston kasvava koko, joten aloin kirjoittaa data binäärimuotoisena. Tämä korjasi koko ongelmaa jossain määrin, mutta yllätyin melkoisesti huomatessani ettei flashilla voinut lukea binäärimuotoisia tiedostoja. Niinpä päätin pakata UV-datan kuvaan, joita flash lukee kiltisti eikä minun edes tarvitse kirjoittaa omaa tiedostoformaattia.

Itse UV-koordinaattien pakkaaminen kuvaan ei ole kovin hankalaa. Periaatteessa normaaliin PNG kuvaan voi tallentaa mitä tahansa 32 bittistä tietoa, koska jokainen neljä kanavaa (ARGB) on 8 bittisiä. ARGB kuvat kuitenkin alkavat viedä ikävästi tilaa ja kestävät ladata palvelimelta, joten päätin tyytyä 24 bittiseen tarkkuuteen eli R, G ja B kanaviin.

Ajatellaan UV-koordinaatistoa 24bit 2d-matriisina jolloin sen koko on 256^3 = 16777216. Koska haluamme matriisista yhtä leveän kuin korkeankin saamme leveyden laskettua seuraavasti Math.sqrt(16777216) = 4096. Tämän perusteella voimme sanoa, että maksimi tektuuriresoluutio on 4096*4096 pikseliä. Toki sen kokoinen tekstuuri veisi melkoisesti tilaa, mutta se on tällä systeemillä maksimi koko.
Meillä on siis 4096*4096 kokoinen matriisi eli 4096 numeroa U koordinaatille ja 4096 numeroa V koordinaatille. UV:t on kuitenkin usein yksikkövektoreita joten ne pitää skaalata meidän rangellemme U*4096 ja V*4096. Lopuksi vielä pyöristämme U:n ja V:n kokonaisluvuksi. Näin meillä on kaksi kokonaislukua jotka voimme pakata yhdeksi luvuksi näin V*4096+U. Nyt meillä on yksi luku jonka voimme jo kirjoittaa kuvaan. Kuvaformaattien lukijat tietysti luulevat, että numero tarkoittaa RGB arvoa ja piirtää siksi melko erikoisia kuvia.

UV koordinaatit pakattuna kuvaan.

Meitä ei kuitenkaan kiinnosta miltä kuva näyttää vaan data jota kuvassa on. Lukemalla pikselin arvon voimme purkaa siitä UV:t seuraavasti.
V = Math.floor(pikselin_arvo / 4096.0)
U = (pikselin_arvo / 4096.0) - V
V = V / 4096.0
Näin meillä on jälleen samat UV:t (pienin pyöristyseroin), kuin alussa niitä kuvaan pakattaessa. Ja nyt voimme piirtää tekstuurin haluamastamme kuvasta.
X = U*tekstuurikuvan_leveys
Y = V*tekstuurikuvan_korkeus

Tekstuurikuva

Ja tein vielä ohjelman joka lukee UV arvot kuvasta piirtää kuvan teksturoimalla sen tekstuurikuvalla.

Pakatun UV datan mukaan piiretty kuva.

Koska itse renderointi on lineaarista tulee kuvaan pientä epätarkuutta, mutta ajatus kuitenkin näyttää toimivan. Seuraavaksi sitten on vuorossa enemmän itse koodia niin flashin kuin 3dsmax scriptinkin osalta. Tällä kertaa kuitenkin pysytellään näin teoriassa.

Blogi avattu

2008-01-08T12:46:00.000-08:00

Tarkoitus tällä blogilla ei ole keskittyä yhteen tarkasti rajattuun alueeseen vaan tarkoitus on puhua laajemmalta alueelta vastaan tulevista ongelmista ja niiden ratkomisesta. Mikään tässä blogissa esitetty ratkaisutapa ei välttämättä ole oikea tai paras tapa, mutta se on eräs vaihtoehto kyseisen asian tekemiseen.