Autor Zpráva
1Pupik1989
Profil
Zdravím, opět budu otravovat.



Znám všechny vrcholy objektu (x,y,z) a vzdálenost perspektivy. No a potřeboval bych podle všech třech úhlů transformovat obrázek. U setTransform jsem se tak strašně zamotal, že dva dny stojím na místě.

Nemá někdo s tímto zkušenost nebo nějaký nápad? Samozřejmě to nemusí být přímo kód, úplně postačí postup výpočtu nebo nějaká nápověda.
Jan Tvrdík
Profil
Nemůžeš prostě prostředky analytické geometrie přepočítat souřadnice jednotlivých vrcholů?
1Pupik1989
Profil
Souřadnice jednotlivých bodů mám spočítané.

var rotate = {
  X:function(point, degree)
  {
    y = point[1];
    z = point[2];
    yA = (y * Math.cosDeg(degree)) + (z * Math.sinDeg(degree) * -1.0);
    zA = (y * Math.sinDeg(degree)) + (z * Math.cosDeg(degree));
    return [point[0],yA,zA];
  },
  Y:function(point, degree)
  {
    x = point[0];
    z = point[2]
    xA = (x * Math.cosDeg(degree)) + (z * Math.sinDeg(degree) * -1.0);
    zA = (x * Math.sinDeg(degree)) + (z * Math.cosDeg(degree));
    return [xA,point[1],zA];
  },
  Z:function(point, degree)
  {
    x = point[0]
    y = point[1];
    xA = (x * Math.cosDeg(degree)) + (y * Math.sinDeg(degree) * -1.0);
    yA = (x * Math.sinDeg(degree)) + (y * Math.cosDeg(degree));
    return [xA,yA,point[2]];
  },
  angleX:0,
  angleY:45,
  angleZ:0
};

Nenapadá mě však, jak tam vykreslit ten obrázek podle vypočítaných bodů
Jan Tvrdík
Profil
1Pupik1989:
Takže vlastně řešíš, jak vykreslit bod, jehož 3D souřadnice znáš, do 2D canvasu?
1Pupik1989
Profil
Bod vykreslím, právě přes ty funkce. Nejdřív otočím po ose X, pak Y a nakonec Z. Objekt mám uložený následovně.

Array(
  Array(-50,-20,-40),
  Array(50,-20,-40),   //základy
  Array(50,20,-40),
  Array(-50,20,-40)
),

To jsou pevně dané body, které v cyklu přepočítám. Já potřebuji obrázek vykreslit třeba otočený o 10° po ose X a 22° po ose Y.

Cyklus na jednotlivé obrazce mám následnovný:

for(j=0;j<points.length;j++){
      p = points[j];
      
      rot = p;
      rot = rotate.X(rot,rotate.angleX);
      rot = rotate.Y(rot,rotate.angleY);
      rot = rotate.Z(rot,rotate.angleZ);
      
      x = projection(rot[0], rot[2], 100.0, distance);
      y = projection(rot[1], rot[2], 100.0, distance);
      
      if(j == 0){
        c.beginPath();
        c.moveTo(x,y);
      }else{
        c.lineTo(x,y);
        if(j == points.length-1){
          c.closePath();
          c.stroke();
        }
      }
    }

Vykreslování 3D do 2D mám vlastně hotové.

Viz.:

1Pupik1989
Profil
Opravdu nikdo neví? Nejlepší by byla transformace dle čtyř zadaných souřadnic rohů.
Jan Tvrdík
Profil
1Pupik1989:
Zkus si přečíst http://www.mrspeaker.net/2009/08/13/3d-html5-part-2/ a kouknout na výsledný příklad http://www.mrspeaker.net/dev/canvas3d/canvas3d_part2.html.
1Pupik1989
Profil
To už mám hotové. Já potřebuji jen renderování objektu. Transformační matice mi ale nějak neleze do hlavy, abych spočítal jak budou jednotlivé obrázky vykreslené. Třeba [[-100,-27.5],[-20,-10.25],[-80,30],[-20,30]] (to je jen příklad čtyř rohů obrázků).
1Pupik1989
Profil
Lepší bude náčrt.



Potřebuji transformovat dle červených bodů, které znám.
Chamurappi
Profil
Reaguji na 1Pupika1989:
Obávám se, že 2D transformace na podobný efekt nestačí. Ty dokážou jen otáčet, roztahovat a zkosovat… rovnoběžník zůstane rovnoběžníkem.
1Pupik1989
Profil
Ještě by byla možnost vykreslit to v cyklu, to mě ale připadá jako humus a zdržování vykreslení. Někde jsem transformaci obrázků v pseudo 3D viděl. Teď to ale zaboha nenajdu. Nenapadá mě jiný způsob jak to ve 2D zrealizovat.
peta
Profil
1Pupik1989: Je to jen mesic zpet a snadne najit.
google = site:diskuse.jakpsatweb.cz 3d transformace javascript
Rotace mapy podle zadaneho uhlu
1Pupik1989
Profil
Tam jsem ale neměl perspektivu.
_es
Profil
1Pupik1989:
Tam jsem ale neměl perspektivu.
Tak potom robiť transformáciu všetkých bodov. Zdá sa, že ti nedošlo, že to, pre vyriešenie tvojho dotazu, treba. Lebo trebárs úsečka v takej transformácii už nemusí byť úsečkou.
1Pupik1989
Profil
Transformaci všech bodů už mám i s tou perspektivou. U obrázku té krychle znám přesně ty červené body a vykreslím je. 3D body do 2D vykreslím.

Napadlo mě ještě použít transform přes CSS3.
Chamurappi
Profil
Reaguji na 1Pupika1989:
Napadlo mě ještě použít transform přes CSS3.
To jsi pořád u toho samého problému, dvojrozměrnou maticí nejde perspektiva dodělat a trojrozměrné transformace mají slabší podporu.
_es
Profil
1Pupik1989:
Transformaci všech bodů už mám i s tou perspektivou.
No tak v čom je problém? Pre všetky hrany, teda aj pre dostatočný počet bodov medzi vrcholmi, spravíš transformáciu a máš to vykreslené.
1Pupik1989
Profil
Houby transformaci (omyl),ale body, to jsem měl na mysli. Přes CSS3 dle podpory by to bylo řešitelné akorát v Chromu, škoda.

Jde o problém co zmínil Chamurappi. Obrázek bude mít prostě pořád stejný rozměr. Takže se asi přikloním k těm dvěma cyklům.
1Pupik1989
Profil
Opravdu nikdo neví? Dostal jsem se do mrtvého bodu.
_es
Profil
1Pupik1989:
Nechápem, čo stále riešiš. Pôvodný 3D model rozdelíš na dostatočný počet bodov s dostatočnou hustotou - trebárs 1 000 bodov, pre každý spravíš príslušnú transformáciu do 2D zobrazenia a máš to.
1Pupik1989
Profil
No právě každou část objektu proháním funkcí s vnořeným cyklem, ale při více objektech je to celkem náročné na cpu.

Nebo nechápu jak si to myslel.
_es
Profil
1Pupik1989:
No právě každou část objektu proháním funkcí s vnořeným cyklem, ale při více objektech je to celkem náročné na cpu.
No výsledok je teda správny? Ak to moc zaťažuje, tak skús najprv spraviť výpočet všetkých bodov a až potom všetky vykresliť. Z kódu v [#5] to vyzerá, že sa pokúšaš vykresľovať priebežne.
1Pupik1989
Profil
Ano, vykresluji průběžně, čili

Objekt{
 První_čtverec{
  Jeden_bod[hodnota,hodnota,hodnota],
  Druhý_bod[hodnota,hodnota,hodnota],
  Třetí_bod[hodnota,hodnota,hodnota],
  Čtrvtý_bod[hodnota,hodnota,hodnota]
 }
 
 Druhý_čtverec{
  Jeden_bod[hodnota,hodnota,hodnota],
  Druhý_bod[hodnota,hodnota,hodnota],
  Třetí_bod[hodnota,hodnota,hodnota],
  Čtrvtý_bod[hodnota,hodnota,hodnota]
 }

 ...
}

Já vykreslím čtverec po čtverci a při výpočtu všech bodů každého čtverce, ho proháním přes funkci na transformaci.

Mám vlastně pořád jedno pole napevno, kde se xyz nemění a jedno, kam zapisují momentálně transformované čtverce a to odesílám do funkce.

Kdybych vypočetl všechny body a pak to odeslal do funkce, tak stejně budu muset to pole rozsekat, čili by to bylo téměř stejné.
_es
Profil
1Pupik1989:
Vyskúšaj pracovať s objektom canvas nepripojeným k stromu DOM a až keď bude ukončené vykreslenie všetkých bodov ho k dokumentu pripojiť. Alebo sa skús nejako inšpirovať v https://developer.mozilla.org/en/Canvas_tutorial/Optimizing_canvas.
1Pupik1989
Profil
No to vlastně mám. Na konci funkce "draw" mám vkládání do divu s nastavenými rozměry. Při dalším vykreslování ho zase smažu a tak dál dokola. O těch více vrstvách ale budu přemýšlet, teoreticky by se taky rychlost mohla pohnout. To ale až ve výsledku.

Pak mě ještě napadlo to udělat systémem několika divů jako to je na dev.opera.com
_es
Profil
1Pupik1989:
No to vlastně mám.
Myslel som pracovať s objektom vráteným z document.createElement("canvas"), ktorý by bol neskôr pripojený do dokumentu. Máš to tak?
1Pupik1989
Profil
Ano, vytvářím vždy nový, dokonce 2, ještě podklad.

Škoda, že canvas nemá libovolnou transformaci.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: