Keskustelu: Yleinen keskustelu: HTML5 ja Canvas ?

Hei!

Käytössäni on vain Linux tällä hetkellä ja Windows lisensseistäkin omistan vain tämän vanhan asentamattoman WinXPn.

Kuitenkin kiinnostaisi kysyä hieman Win7 ja IE9 kyvyistä käyttää HTML5 Canvas pintaa.

Kuinka nopea tuo Win7 IE9 HTML5 Canvas on esim jos sitä vertaa Java Applettiin ?
( drawimage, drawrect, jne.. )

Entä, milloinka Linux puoleen voi odottaa kunnon tehoja HTML5 Canvas pinnalle ?

------

kpzpt kirjoitti:

Entä, milloinka Linux puoleen voi odottaa kunnon tehoja HTML5 Canvas pinnalle ?

Ajelinpa uteliaisuuttani vähän ekaa Canvas-benchmarkkia, minkä löysin: http://www.kevs3d.co.uk/dev/asteroidsbench/ (Täysin epätieteellisesti, yks ajo, Civ5 ym. mömmöä taustalla päällä):

Opera 11.01
Benchmark Score: 1114
Average FPS: 24

Firefox 3.6.15
Benchmark Score: 470
Average FPS: 10

Chromium 10.0.648.127
Benchmark Score: 2841
Average FPS: 60

Opera oli pelattavan oloinen, Chromium ihanan sulava. Vain Firefox oli käyttökelvoton.

Edit: tämä kaikki siis Linuxilla, jos en ollu tarpeeks selkee.

HTML5!

Minulla on tuo Chromium Linuxissa antoi 10fps, vastaavat Java Appletit pyörisivät jotain 30-50 fps.
Mitä nämä viralliset tahot sanovat Canvaksesta, ilmeisesti tehon lisäystä ja toiminnallisuutta on vielä odotettavissa ?

---

Mitenkä täällä forumilla muuten tunnetta Javascript ohjelmointia ?
Minulla on pelejä rakenteilla, ja olen päättänyt siirtyä HTML5 käyttöön, heti kunhan sitten toimii edes melkein vastaavien Applettien nopeudella ?
Lähinnä minua ihmetyttää erillaisten peli viiveitten hallinta ja myös mahdollisten threadien käyttäminen ?
Javascript kun ei taida tietää sleep() taikka delay() funktioita, niin, kuinka peleistä voi rakentaa pehmeän ilman että on 100% tehot koko ajan ? ( esim. while loop joka tarkistaa kelloa )

-----

Javascriptissä voi rakentaa eräänlaisia viiveitä setTimeout-ajastuksella. Threadeja Javascriptissä ei ole. Toisaalta HTML5:n kokonaisuuteen (väljästi) kuuluva Web Workers API, johon sisältyy koodin suorittaminen tausta-ajona, voisi tarjota jotain käyttökelpoista – olisi kiva kuulla, mitä sillä käytännössä voisi saada aikaan pelialalla. Speksiluonnos:
http://www.w3.org/TR/workers/

Voit ainakin laskemista nopeuttaa todella rajusti käyttämällä typearrayta normaalin javascript arrayn sijaan. Jos laskut on vielä tämänkin jälkeen liian hitaita niin ne voi myös suorittaa erillisessä threadissa web workersin avulla. Ei oo ollu tarvetta niiden käyttöön niin ei oo käytännön kokemusta niistä.

Jos tavoite on vaikka 30 kehystä sekunnissa niin pääthreadin piirtofunktiot on kaikki yhessä intervalli funktiossa jota kutsutaan 30 kertaa sekunnissa. Karu esimerkki:

var peli = function(){
	var
	timerid = 0,
	piirto1 = function(){},
	piirto2 = function(){},
	piirto3 = function(){},
	pelimain = function(){
	piirto1();
	piirto2();
	piirto3();
	};

	return {
		aloita: function(){
		timerid = setInterval(pelimain, 33); //Kutsutaan piirrot 33 ms välein (30 kertaa sekunnissa)
		},
		tauko : function(){
		clearInterval(timerid); //Pysäyttää ajastimen
		// tähän joku taukoilmotuskoodi
		},
		jatka: function(){
		// tähän koodia joka poistaa taukoilmotuksen jne
		this.aloita();

		}
	};
}();

peli.aloita();
peli.tauko();
peli.jatka();

setInterval !

Mikä näytönohjain teillä on käytössä, kun setIntervalin pystyy asettamaan 30 fps nopeudelle, minulla on aika vanha NVidia, ja se kykenee vain noin 5-10 max framen vauhtiin jos ruudulle aikoo laittaa vähänkään grafiikkaa, ja vielä tämä 5-10 fps on Google selaimessa, Firefox ja Opera eivät pyöritä kunnolla edes 1-2 fps vauhdilla, käytössä Linux Mint 10 ja WinXP.

Valitettavasti taas tuo IE9 on sitten ilmeisesti vain Win7 ja tuleville uudemmille, vai oliko se vielä Vistaankin, IE9:ssähän olisi kiihdytettynä tuo koko selain tila ?

Minulla on tässä yksinkertainen rakennelma joka toimii ainakin google chrome/chromium -> http://temp4322.dy.fi/testi/index.html
( Älä kirjoita domainiani minnekkään, en halua selain osumia ;) )

Jos on aikaa niin copy/pastea html5 koodi, ja testaa laittaa ruudunpäivitystä hieman korkeammalle, minulla jo tämä yllä oleva esimerkki heittää tehot reippaasti 100% ja siellä pysyvät koko ajon ajan.
Ja jos on tieto taitoa hieman enemmän niin vielä jos joku voisi hieman kommentoida jos minun koodissani on kohtia jotka hidastavat ohjelman ajoja taikka jotka tulisi rakentaa hieman toisin ?

Tuossa minun koodissani kaikki imaget piirretään joka piirtokerta, olisiko parempi jotenkin rakentaa jonkinlainen dirty rectangle systeemi ? liekö se silti nopeuttaisi ohjelman kulkua, tuo tausta lauta on 1024x1024 ja nuo napit ovat 256x256, eipä taitaisi nopeutua juurikaan, saattaisi jopa hidastua ?

Edit.
Onko tuossa HTML5 kielessä erikseen jotain jolla aktivoida hardware kiihdytys näytönohjaimeen ?

------

kpzpt kirjoitti:

se [NVidia] kykenee vain noin 5-10 max framen vauhtiin jos ruudulle aikoo laittaa vähänkään grafiikkaa

Ei kuulosta kovin uskottavalta. Kokeilepa huviksesi tätä nuolilla ohjattavaa 3D-peliä. Koodi on taatusti raskaampi kuin sinun yksinkertainen piirtosi, ja minulla FPS on tuosta 10 millisekunnin delaysta huolimatta tasaisesti 40 useita vuosia vanhalla Intelin integroidulla näytönohjaimella (jos nyt Chromium edes yrittää sitä käyttää).

kpzpt kirjoitti:

Ja jos on tieto taitoa hieman enemmän niin vielä jos joku voisi hieman kommentoida jos minun koodissani on kohtia jotka hidastavat ohjelman ajoja taikka jotka tulisi rakentaa hieman toisin ?

Ymmärrätkö itsekään koodiasi? Siinä on niin monta virhettä, että en viitsi edes listata. Mutta mieti nyt ainakin, millaisia aikoja setTimeout-funktiolle menee ja mikä niiden perusteella voi enintään tulla FPS:ksi.

Tässä on yksinkertainen silmukka, jossa itse peli pyörii vakionopeudella ja piirtäminen tehdään mahdollisimman usein.

function Silmukka(liike, piirto, fps) {
	// Tallennetaan funktiot. Luodaan tyhjät puuttuvien paikalle.
	this.liike = liike || function(){};
	this.piirto = piirto || function(){};

	// Lasketaan, montako millisekuntia kierros kestää.
	this.kierrosaika = 1000 / fps;

	// Näitä jäseniä käytetään myöhemmissä funktioissa..
	this.timeout_id = null;
	this.aika = 0;
	this.alku = null;

	// setTimeoutille tarvitaan kutsuttava funktio.
	var _ = this;
	this.timeout_callback = function() {
		_.timeout();
	};
}

Silmukka.prototype.lopeta = function() {
	if (!this.timeout_id) return;
	clearTimeout(this.timeout_id);
	this.timeout_id = null;
	this.aika += (new Date()).getTime() - this.alku.getTime();
	this.alku = null;
};

Silmukka.prototype.aloita = function(aika) {
	if (this.timeout_id) return;
	this.timeout_id = setTimeout(this.timeout_callback, 1);
	this.alku = new Date();
};

Silmukka.prototype.timeout = function() {
	if (!this.timeout_id) return;

	// Lasketaan, kauanko on kulunut, ja otetaan nykyhetki muistiin.
	var aika = new Date();
	this.aika += aika.getTime() - this.alku.getTime();
	this.alku = aika;

	// Jos aikaa on kulunut tarpeeksi, pyöritetään liikesilmukkaa ja lopuksi piirretään.
	if (this.aika >= this.kierrosaika) {
		while (this.aika >= this.kierrosaika) {
			this.liike(this.kierrosaika);
			this.aika -= this.kierrosaika;
		}
		this.piirto();
	}

	// Laitetaan seuraava kierros alkamaan pienen hetken päästä.
	this.timeout_id = setTimeout(this.timeout_callback, 1);
};

function piirto() {
	// Piirrä tässä pelitilanne.
}
function liike(aika_millisekunteina) {
	var aika = aika_millisekunteina / 1000;
	// Liikuta tässä peliä aika-muuttujan verran.
}

// Luo silmukka näin:
var s = new Silmukka(liike, piirto, 40);

// Aloita silmukka vaikka näin:
window.onload = function() {
	s.aloita();
};

5-10 fps!

Kyllä tuo minun esimerkkini todellakin pyörii vain alle 10 fps, vaikka pienennän viivettä, tuo raycaster esimerkki joka teillä oli niin pyöri koneessani parhaimmillaan 33 fps, tosin kuva koko oli jotain 1:16 osa.

Tässä on ekat testit vasta minulla Javascript koodeista, ja täytyy myöntää että en täysin vielä ymmärrä Javascript mahdollisuuksia, en ole lainkaan tutustunut 3D ominaisuuksiin, joita tuo raycaster taitaa käyttää.

Tuosta minun demostani, niin, minulla on nuo kuvat 256 formaatissa, liekö sitten touhu nopeutuu jos vaihdan kuvan RGB formaattiin ?

Tässä tämä minun vajaa 10 fps -> http://temp4322.dy.fi/testi/index.html
( Älkää kirjoittako domainiani mihinkään, en halua hakuosumia ;) )

Testaan vaihtaa nuo minun kuvani, RGBA formaattiin ja katson huomenna uudestaan.

En ole myöskään vielä edes vilkaissut Javascript API:iin en tunne vielä funktio taikka luokka taikka mitään muutakaan rakennetta millä Javascriptit rakentuvat.

Täytyy testata maanantaina.

-----

Kokeilin lisätä tuon oman esimerkkisivuni loppuun sinun koodisi ja omiin funktioihini (liike ja piirto) kutsut sinun funktioihisi (coord ja draw). FPS on tällöin nätisti noin 33, vain vähän pienempi kuin raycasterissani. Toisin sanoen teet edelleen itse tyhmyyksiä.

Raycasterini ei käytä mitään 3D-ominaisuuksia, vaan se on toteutettu perinteiseen Wolfenstein 3D -tyyliin piirtämällä yhden pikselin levyisiä pystysuoria, matemaattisesti lasketun etäisyyden mukaan venytettyjä suikaleita.

kpzpt kirjoitti:

Tässä tämä minun vajaa 10 fps -> http://temp4322.dy.fi/testi/index.html
( Älkää kirjoittako domainiani mihinkään, en halua hakuosumia ;) )

Tuollaisten uudelleenohjausten käyttö ei vaikuta lainkaan siihen, pääseekö Google / hakukoneet käsiksi sinun sivujesi oikeaan osoitteeseen.

Mitenköhän musta tuntuu, että ihan html:n "img-tägeillä" (diveillä yms.) ja jQueryllä tuo peli pyörisi paljon paremmin :)

The Alchemist kirjoitti:

kpzpt kirjoitti:

Tässä tämä minun vajaa 10 fps -> http://temp4322.dy.fi/testi/index.html
( Älkää kirjoittako domainiani mihinkään, en halua hakuosumia ;) )

Tuollaisten uudelleenohjausten käyttö ei vaikuta lainkaan siihen, pääseekö Google / hakukoneet käsiksi sinun sivujesi oikeaan osoitteeseen.

Hakukoneet!

Mutta se vaikuttaa siihen pääseekö hakukoneet tähän keskusteluun ;)

-----

lainaus:

Mitenköhän musta tuntuu, että ihan html:n "img-tägeillä" (diveillä yms.) ja jQueryllä tuo peli pyörisi paljon paremmin :)

Olen miettinyt ihan samaa, tuo Canvas ei vakuuta minua kovinkaan paljoa, vaikka Metabolix hieman tuulettaakin tuota 33 fps rutiiniaansa, mutta, ei hänkään tainnut mainita millä resoluutiolla tuo 33 fps on, minun 10fps rutiinissa on tuo koko <body> alue <canvas> käytössä, lisäksi minulla on kyllä hieman hidas tietokoneen näytönohjain.

Canvasta voi ajatella käyttää sitten kunhan on tarvetta erillaisille viivoille ja alue täytöille, taikka kuten tuossa raycaster esimerkissä, niin, raycasterille.

------

kpzpt kirjoitti:

Olen miettinyt ihan samaa, tuo Canvas ei vakuuta minua kovinkaan paljoa, vaikka Metabolix hieman tuulettaakin tuota 33 fps rutiiniaansa, mutta, ei hänkään tainnut mainita millä resoluutiolla tuo 33 fps on, minun 10fps rutiinissa on tuo koko <body> alue <canvas> käytössä, lisäksi minulla on kyllä hieman hidas tietokoneen näytönohjain.

Canvasta voi ajatella käyttää sitten kunhan on tarvetta erillaisille viivoille ja alue täytöille, taikka kuten tuossa raycaster esimerkissä, niin, raycasterille.

En ole canvakseen, enkä Metabolixin raycasterin toteutukseen tutustunut, mutta jos tuo raycaster ei käytä mitään kiihdytettyä rutiinia, jolla pystysuorat seinäviipale tekstuurit skaalataan ja piirretään ruudulle, vaan yksinkertaista dda rutiinia, jonka avulla seinäviipaleet piirretään ruudulle pikseli kerrallaan, niin luulisin sen olevan riittävän nopea kaikkeen yksinkertaiseen peruspiirtämiseen.

Metabolixin loop!

Laitoin tuon herra Metabolixin loopin omaan käyttöön, kun siinä kerran oli lupakin, lisäsin myös pienen google koodin, joka tarkistaa mitä resoluutiota selain ikkuna käyttää, jotta <canvas> on koko <body> kokoinen.

Toimii Opera ja Google selaimissa, mahdollisesti myös IE9, mutta, minulla on WinXP jotenka IE9:ä en pääse testaamaan.

tässä -> http://temp4322.dy.fi/testi/index3.html

Minulla on siis aika vanha tietokone ja siinä tuo on noin 5-20 fps riippuen resoluutiosta.

Your viewport size is 1598x1012 = n 5 fps.
Your viewport size is 1241x635 = n 11 fps.
Your viewport size is 776x500 = n 20 fps.

Olisi tosi mukavaa jos rullaisi jotain yli 40 fps, tuo grafiikka on aika yksinkertainen, pari kymmentä imagea ja siinä se, jotenka ei tämä mikään teho rulla ole tämä html5 <canvas> 2D, perus Java Applet pyörii vastaavalla grafiikkalla tuon yli 5 kertaisena.

-----

kpzpt kirjoitti:

ei hänkään tainnut mainita millä resoluutiolla tuo 33 fps on

Mainitsinpa. Sanoin, että kopioin sinun canvas-koodisi omaan silmukkaesimerkkiini. Silloin tietenkin resoluutio on sellainen, kuin itse olet säätänyt, eli kuva on koko ikkunan kokoinen.

Tuo viimeisin esimerkkisi toimii minulla tasan nopeudella 30 FPS, kuten olet koodiin laittanut. Ikkunan koko on sivun mukaan 1280x713.

Sille ei voi mitään, että 2D-canvas on hieman applettia hitaampi. Toisaalta yksinkertaisiin lautapeleihin et välttämättä suurta FPS:ää tarvitsekaan. 3D-ominaisuuksia (WebGL:ää) ei kannata vielä käyttää, koska tuki on uusimmissakin selaimissa vasta kehitteillä.

jalski: Yksittäisten pikselien käsittely olisi tarpeettoman vaivalloista eikä ole mitenkään tarpeen, kun seinät ovat pystysuoria. Koodini piirtää pikselin levyiset suikaleet valmiilla drawImage-funktiolla, joka näyttäisi kuitenkin toimivan ilman laitteistokiihdytystä.

kpzpt: Ihan mielenkiinnosta, oletko kokeillut tehdä tällä mitään?

Itse tutustuin sen verran jokunen kuukausi sitten, että porttasin tuolle kirjoitetun progressiivisen raytracerin Hollywoodille.

Processing !

Minä olen kyllä tietoinen että Javalle on aika monenmoista kirjastoa, osa varsin laadukastakin, tuon olen joskus nähnyt jossain selatessani, mutta ei varsin tuttu kuitenkaan ole.

En jaksa tällä kertaa innostua tuosta, uuden API:n opetteleminen on aina aika aikaa vievää touhua, useita tunteja ainakin jos ei useita päiviä..

---

Päätän tämän HTML5 ja Canvas ketjun osaltani tähän, kiitosta kaikille opin paljon uutta Javascriptistä.

---

Jatketaan nyt tätä HTML5 keskustelua sen verran, että näköjään Mark Sibly on saanut julkaistua Monkeyn pari viikkoa sitten.

Jos tykkää objektipohjaisesta BlitzMax tyylisestä Basic syntaksista, niin tuon kanssa touhuaa kyllä ihan mielellään. Ladattavana demo-versio, millä voi tehdä epäkaupalliseen käyttöön HTML5 sovelluksia.

Itse tulen tuolla varmaan jotain tekemäänkin.