JavaScript a böngészőben Szécsi László 3D Grafikus Rendszerek 2. előadás
HTML head az oldal kitölti az ablakot <!DOCTYPE html> <html> <head> <title>3D Grafikus Rendszerek</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> elemek stílusai itt lesznek folyt köv.
HTML body <body> <div id="container"> ez a cimke (tag) egy szakaszt definiál az oldalon ez egy HTML elem <body> <div id="container"> <canvas id="canvas"></canvas> <div id="overlay"></div> </div> <script src="js/keycodes.js"></script> <script src="js/vx.js"></script> <script src="js/shaders/shaderSource.js"></script> <script src="js/shaders/idle_vs.essl"></script> <script src="js/shaders/solid_fs.essl"></script> <script src="js/Shader.js"></script> <script src="js/Program.js"></script> <script src="js/QuadGeometry.js"></script> <script src="js/Texture.js"></script> <script src="js/Scene.js"></script> <script src="js/App.js"></script> </body> </html> vászon, erre rajzol a WebGL ezt a HTML szakaszt szeretnénk a vászon főlé rajzolni tartalmát a kódból módosítva könnyen jeleníthetünk meg szöveget JavaScript forráskód forrásfileok
CSS #container * { margin: 0; padding: 0; } #container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } töltse ki az oldalt nem kérünk scrollbart
CSS #canvas, #overlay #overlay { position: absolute; left: 10px; top: 10px; z-index: 20; } #canvas { width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; overflow: hidden; legyenek ugyanott felül a szöveg nem kérünk scrollbart
DOM Document Object Model HTML címkék hierarchiája mint szülő-gyerek kapcsolatban álló objektumok rendszere győkér: document firstChild nextSibling getElementById
Window window globális objektum ennek tulajdonsága minden globális a dokumentumot megjelenítő ablak absztrakciója > document.defaultView.document === document; < true
JavaScript belépési pont? valójában simán végrehajtódik az összes beágyazott script soronként, az elejétől kezdve változó- és függvénydefiníciók lefutnak de az oldal teljes betöltése után kezdődhet az érdemi kód futása
Oldal betöltése eseményfigyelő window.addEventListener('load', function() { var canvas = document.getElementById("canvas"); var overlay = document.getElementById("overlay"); overlay.innerHTML = "WebGL"; this.canvas.width = this.canvas.clientWidth; this.canvas.height = this.canvas.clientHeight; new App(canvas, overlay); }); innentől ez az objektum intéz mindent
App konstruktor – gl context var App = function(canvas, overlay) { this.canvas = canvas; this.overlay = overlay; this.gl = canvas.getContext("experimental-webgl"); if (this.gl == null) { console.log( "No WebGL!" ); return; } this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
App konstruktor – eseményfigyelők virtuális világot reprezentáló objektum this.scene = new Scene(this.gl, this.canvas); var theApp = this; document.onkeydown = function(event) { theApp.scene.keyDown(event); }; // onkeyup ugyanígy canvas.onmousedown = function(event) { theApp.scene.mouseDown(event); }; // többi egéresemény ugyanígy window.addEventListener('resize', function() { theApp.scene.windowResized(); }); lokális változó, hogy a zárvány elkapja ő itt a zárvány a zárványban a this == window
App konstruktor – update loop window.requestAnimationFrame(function() { theApp.update(); }); }
App update – update loop globális változó, betöltés alatt álló textúrák, modellek tárolója var pendingResources = {}; App.prototype.update = function() { var pendingResourceNames = Object.keys(pendingResources); if(pendingResourceNames.length === 0) { // animate and draw scene this.scene.update(this.gl); overlay.innerHTML = "Ready."; } else { overlay.innerHTML = "Loading: " + pendingResourceNames; } var theApp = this; window.requestAnimationFrame(function() { theApp.update(); }); ha minden betöltve, animáljuk és rajzoljuk a virtuális világot jöhet a következő frame
Billentyűesemények feldolgozása nem a lenyomásra (typematic rate!) vagy felengedésre akarunk reagálni hanem minden frameben tudni, mi van épp lenyomva keysPressed objektum tualjdonságértékek true/false: le van-e nyomva tulajdonságnév a gomb neve az S billentyű neve "S" legyen, ha lehet... de az onkeydown eventjében keyCode van (S: 83???) keyCodes.js : globális keyboardMap tömb elemek a string nevek, pl. "S", "DELETE", "SPACE", "F1"
Billentyűesemények feldolgozása var App = function(canvas, overlay) { ... this.keysPressed = {}; var theApp = this; document.onkeydown = function(event) { theApp.keysPressed[keyboardMap[event.keyCode]] = true; }; document.onkeyup = function(event) { theApp.keysPressed[keyboardMap[event.keyCode]] = false; }; ... } App.prototype.update = function() { ... this.scene.update(this.gl, this.keysPressed);