| Autor | Zpráva | ||
|---|---|---|---|
| 1Pupik1989 Profil |
#1 · Zasláno: 8. 6. 2012, 15:14:32
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 |
#2 · Zasláno: 8. 6. 2012, 16:57:42
Nemůžeš prostě prostředky analytické geometrie přepočítat souřadnice jednotlivých vrcholů?
|
||
| 1Pupik1989 Profil |
#3 · Zasláno: 8. 6. 2012, 17:10:22
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 |
#4 · Zasláno: 8. 6. 2012, 17:26:22
1Pupik1989:
Takže vlastně řešíš, jak vykreslit bod, jehož 3D souřadnice znáš, do 2D canvasu? |
||
| 1Pupik1989 Profil |
#5 · Zasláno: 8. 6. 2012, 17:44:58
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 |
#6 · Zasláno: 10. 6. 2012, 11:20:12
Opravdu nikdo neví? Nejlepší by byla transformace dle čtyř zadaných souřadnic rohů.
|
||
| Jan Tvrdík Profil |
#7 · Zasláno: 10. 6. 2012, 11:36:48
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 |
#8 · Zasláno: 10. 6. 2012, 13:10:17
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 |
#9 · Zasláno: 11. 6. 2012, 14:06:45
Lepší bude náčrt.
Potřebuji transformovat dle červených bodů, které znám. |
||
| Chamurappi Profil |
#10 · Zasláno: 11. 6. 2012, 14:25:18
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 |
#13 · Zasláno: 11. 6. 2012, 14:46:51
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 |
#16 · Zasláno: 11. 6. 2012, 16:05:54
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 |
#17 · Zasláno: 11. 6. 2012, 16:10:00
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 |
#18 · Zasláno: 11. 6. 2012, 16:28:44
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. |
||
|
Časová prodleva: 1 měsíc
|
|||
| 1Pupik1989 Profil |
#19 · Zasláno: 19. 7. 2012, 15:46:45
Opravdu nikdo neví? Dostal jsem se do mrtvého bodu.
|
||
| _es Profil |
#20 · Zasláno: 20. 7. 2012, 08:42:49
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 |
#21 · Zasláno: 20. 7. 2012, 10:26:15
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 |
#22 · Zasláno: 20. 7. 2012, 10:30:50
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 |
#24 · Zasláno: 20. 7. 2012, 12:11:49
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 |
#25 · Zasláno: 20. 7. 2012, 12:30:41
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 |
#26 · Zasláno: 20. 7. 2012, 12:35:19
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 |
#27 · Zasláno: 20. 7. 2012, 12:52:33
Ano, vytvářím vždy nový, dokonce 2, ještě podklad.
Škoda, že canvas nemá libovolnou transformaci. |
||
|
Časová prodleva: 12 let
|
|||
0