Agosto 2015
Volume 30 numero 8
Il presente articolo è stato tradotto automaticamente.
Sviluppo del gioco - introduzione al 3D per giochi Web
Da Michael Oneppo | Agosto 2015
Aggiunta di una terza dimensione a un gioco veramente che porta alla vita. Si può guardare da qualsiasi punto di vista e vedere ogni angolo di un oggetto o una scena. Ma come si può effettivamente tirare questo fuori dietro le quinte? In questa serie di articoli, passeggiata attraverso i passaggi per la realizzazione di giochi 3D e mostrarvi come librerie come Three. js può aiutano a raggiungere il ricco ambiente 3D sta diventando così popolare sul Web. In questa prima rata, verrà mantenere le cose semplici e concentrarsi sulla costruzione di una versione 3D del gioco Ping in primo luogo descritto in "A Web gioco in an Hour" (msdn.microsoft.com/magazine/dn913185).
L'illusione di 3D
Qualsiasi rendering di grafica 3D ha un sorprendente trucco nella manica. Gli esseri umani non possono veramente vedere in 3D dimensioni — soprattutto sul monitor del computer. L'intero obiettivo del disegno 3D è quello di generare, o eseguire il rendering, una descrizione 3D di una scena in un'immagine 2D. Quando si aggiunge una terza dimensione per ottenere più coinvolgente e realistiche scene, devi buttare via alcuni dati per ottenere un'immagine da un punto di vista specifico. Questo concetto è chiamato proiezione. È un elemento essenziale di ciò che rende grafica 3D di lavoro, come mostrato nella scena 3D base in Figura 1.
.png "semplice scena 3D")
Figura 1 semplice scena 3D
In questa scena, l'asse Z si allontana verso l'alto e all'indietro. Se volevo davvero vederlo sullo schermo, ho potuto solo cadere le informazioni di Z da ogni oggetto come un modo semplice e valido per progetto 3D scena, come mostrato Figura 2.
.png "schiacciate scena 3D")
Figura 2 schiacciate scena 3D
Come potete vedere, questo non è esattamente Halo. Per il fotorealismo, una scena 3D richiede tre cose — una proiezione vera e propria fotocamera, la geometria e l'ombreggiatura. I'll coprire ognuno di questi concetti come ricostruire il gioco di Ping come un duello gioco in 3D.
Guida introduttiva
In primo luogo, io preparo la libreria Three. js. Si tratta di una configurazione abbastanza veloce, come quasi tutto quello che fai con Three. js accade in JavaScript. Ecco il codice HTML, di che avrai bisogno:
<html>
<head>
<title>Ping!</title>
<script src=
"//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="ping3d.js"></script>
</head>
<body>
</body>
</html>
Nella ping3d.js di file JavaScript, ho intenzione di impostare Three. js per eseguire il rendering di una scena semplice. In primo luogo, ho bisogno di inizializzare Three. js e aggiungere l'area di disegno alla pagina:
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
La scena è esattamente quello che sembra — un oggetto che descrive la nostra scena e tutti gli oggetti all'interno. Il renderer è denominato anche ovviamente. Quando somministrato una scena, il renderer attirerete sullo schermo. Questo dovrebbe essere simile ad alcuni dei 2D disegno di sistemi che ho descritto in articoli precedenti, "A Web gioco in an Hour," "Tecniche di disegno 2D e librerie per giochi Web" (msdn.microsoft.com/magazine/dn948109) e "Motori di gioco 2D per il Web" (msdn.microsoft.com/magazine/dn973016). Ora ho bisogno di aggiungere alcuni elementi sullo schermo.
Geometry
Quasi tutti gli elementi grafici 3D sono costruiti in poligoni. Superfici anche curve come una palla sono approssimate in faccette triangolari per approssimare la superficie. Quando assemblati, questi triangoli sono chiamati una mesh. Ecco come aggiungere la palla alla scena:
var geometry = new THREE.SphereGeometry(10);
var material = new THREE.BasicMaterial({color: 0xFF0000});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
Questo codice crea un gran numero di triangoli che rappresentano una sfera (la variabile di "geometria"), un semplice materiale rosso brillante (il "materiale") e un oggetto mesh (la "mesh"). Quindi si aggiungerà la maglia alla scena.
Il triangolo è il base fondamentale della grafica 3D. Come mai? Io indagare ulteriormente questo aspetto nel prossimo articolo di questa serie, ma le due ragioni principali sono le linee rette che compongono un triangolo sono facili da lavorare con e non puoi infrangere un triangolo in una superficie planare più di base. L'unità di elaborazione grafica (GPU) sul vostro computer o telefono cellulare ha dedicato hardware che può rapidamente convertire forme con linee rette in pixel. Si tratta di una buona parte di ciò che rende possibile la grafica 3D di alta qualità.
Modellazione
Posso passare qualsiasi geometria in tre. Costruttore Mesh. Questo include geometrie per creare forme personalizzate o anche i dati da file. Per il gioco di Ping, mi piacerebbe avere modelli 3D di ciascuno dei giocatori. Di conseguenza, ho preso la libertà di creazione geometria in un programma di modellazione 3D per questo esercizio. È sorprendentemente facile da usare il modello invece di una sfera, come Three. js fornisce uno strumento di caricamento per questo scopo:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('tank1.json', function (geometry) {
var material = new THREE.BasicMaterial({color: 0xFF0000});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Fotocamera
La fotocamera rappresenta il punto di vista della scena. Memorizza la posizione e l'angolo dello spettatore all'interno del gioco. Più importante, che la fotocamera rappresenta come la scena diventa appiattita, come descritto all'inizio di questo articolo.
Nel mio esempio, la telecamera è stata posizionata verso il basso e a destra. L'immagine finale è apparso come la vista da quella direzione. Tuttavia, utilizzando questo metodo di proiezione, non importa quanto lontano sono oggetti, rimarranno le stesse dimensioni dell'immagine finale. Si tratta di una proiezione ortografica. Questo è spesso utile per i giochi con angoli di vista non realistico come giochi di simulazione di città. Quello che davvero voglio raggiungere è quello di rendere gli oggetti appaiono più piccoli come essi si allontanano in lontananza.
Immettere la proiezione prospettica: Proiezione prospettica immagina il campo visivo di una macchina fotografica come una piramide che si estende dalla lente. Quando le posizioni sono mappate allo schermo, stai computate basata sulle loro distanze relative ai lati della piramide. Utilizzando questo modello, come gli oggetti si allontanano in lontananza, sembrano ridursi come nella vita reale.
Per fortuna, non devi fare questo mapping voi stessi perché Three. js che fa per voi e fornisce un oggetto che rappresenta la fotocamera nella scena (e l'aggiunta di un altro è semplice):
var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/window.innerHeight, 0.1, 1000 );
Il primo argomento è il campo di vista, che indica quanto di una distanza angolare di prendere orizzontale. Il secondo argomento è il rapporto della larghezza dello schermo all'altezza, che è necessario assicurarsi che le cose non sono troppo angusto perché lo schermo non è quadrato. I finali due parametri definiscono le distanze più vicina e più lontane per mostrare. Niente più vicino o più lontano di quei valori non è disegnato. Ora sono al punto dove possa effettivamente utilizzare la scena. Passiamo la fotocamera posteriore un po ' per visualizzare l'intera scena e iniziare a disegnare:
camera.position.z = 50;
renderer.render(scene, camera);
Materiali e luci
Successivamente, metterò la palla nell'arena in cui sarà rimbalzo:
var room = new THREE.BoxGeometry( 50, 30, 100 );
var material = new THREE.MeshPhongMaterial({
side: THREE.BackSide,
map: THREE.ImageUtils.loadTexture('arena.png')
});
var model = new THREE.Mesh(room, material);
model.position.y = 15;
scene.add(model);
Sto facendo qualcosa di diverso da solo facendo geometria rettangolo. Sto anche facendo un materiale. Un materiale è una definizione di come qualcosa dovrebbe riflettere la luce in una scena. Questo genera il suo aspetto generale. In questo caso, sto facendo un materiale Phong, che è un buon valore predefinito per oggetti luccicanti. Sto anche aggiungendo una texture per la scatola, che è semplice in Three. js utilizzando la funzione loadTexture.
Un altro aspetto notevole di questo codice è la riga che legge: lato: TRE. Sul retro. Questo indica che Three. js per disegnare solo i lati interni delle superfici casella, piuttosto che i lati esterni. Questo dà la camera per la palla a rimbalzare, invece di avere un parallelepipedo solido fluttuante nello spazio.
Se dovessi disegnare la scena ora, l'arena non sarebbe visibile. Che sarebbe disegnare solo nero. Questo è perché i materiali definiscono come luce riflessa da oggetti, e non ho ancora luce nella scena. Three. js fa aggiungendo luce in una scena semplice, come illustrato di seguito:
this.lights = [];
this.lights[0] = new THREE.PointLight( 0x888888, 1, 300 );
this.lights[0].position.set( 0, 10, 40 );
scene.add( this.lights[0] );
this.lights[1] = new THREE.PointLight( 0x888888, 1, 300 );
this.lights[1].position.set( 0, 20, -40 );
scene.add( this.lights[1] );
Ora se ne traggo la scena, l'arena eseguirà il rendering correttamente. Per rendere una vista migliore, impostiamo la posizione della telecamera a guardare al lato dell'arena prima di eseguire il codice:
camera.up.copy(new THREE.Vector3(0,1,0));
camera.position.copy(new THREE.Vector3(0,17, -80));
camera.lookAt(new THREE.Vector3(0,0,40));
La prima riga imposta la variabile fino, che dice semplicemente la fotocamera quale modo è alto. La funzione di lookAt fa esattamente come sembra — indica la telecamera nella posizione specificata.
Fare un 3D gioco
Ora che il gioco si è mosso in tre dimensioni, rendendo il resto dovrebbe essere abbastanza facile. Tuttavia, questo gioco sta salendo alla fine un po' più dettagliato rispetto alle implementazioni precedenti perché si compone di 3D invece di oggetti 2D. Così ti spacco il codice in file separati per rendere più facile per gestire il codice aggiuntivo.
Ti anche spostare gli stili di JavaScript per la definizione dell'oggetto al modello costruttore più tradizionale. Per dimostrare questo, io ho avvolto la casella arena e luci in un oggetto e che disposti in un unico file, come illustrato nella Figura 3.
Figura 3 l'oggetto Arena
function Arena(scene) {
var room = new THREE.BoxGeometry( 50, 30, 100 );
var material = new THREE.MeshPhongMaterial({
side: THREE.BackSide,
map: THREE.ImageUtils.loadTexture('arena.png')
});
var model = new THREE.Mesh(room, material);
model.position.y = 15;
scene.add(model);
this.lights = [];
this.lights[0]= new THREE.PointLight( 0x888888, 1, 300 );
this.lights[0].position.set( 0, 10, 40 );
scene.add( this.lights[0] );
this.lights[1]= new THREE.PointLight( 0x888888, 1, 300 );
this.lights[1].position.set( 0, 20, -40 );
scene.add( this.lights[1] );
}
Se voglio creare un'Arena, riesco a creare un nuovo oggetto utilizzando la funzione costruttore:
var arena = new Arena(scene);
Successivamente, farò un oggetto palla che può rimbalzare intorno all'arena. So come fare una palla rossa in Three. js, così verrà disposto che il codice in un oggetto, come pure:
function Ball(scene) {
var mesh = new THREE.SphereGeometry(1.5, 10, 10);
var material = new THREE.MeshPhongMaterial({
color: 0xff0000,
specular: 0x333333
});
var _model = new THREE.Mesh(mesh, material);
_model.position.y = 10;
scene.add(_model);
}
Ora definirò la fisica di base di rimbalzare la palla con l'aggiunta di una funzione all'oggetto palla, come mostrato Figura 4.
Figura 4 dell'oggetto palla funzione Update
// Create a private class variable and set it to some initial value.
var _velocity = new THREE.Vector3(40,0,40);
this.update = function(t) {
// Apply a little gravity to the ball.
_velocity.y -= 25 * t;
// Move the ball according to its velocity
var offset = _velocity.clone()
.multiplyScalar(t);
_model.position.add(offset);
// Now bounce it off the walls and the floor.
// Ignore the ends of the arena.
if (_model.position.y - 1.5 <= 0) {
_model.position.y = 1.5;
_velocity.y *= -1;
}
if (_model.position.x - 1.5 <= -25) {
_model.position.x = -23.5;
_velocity.x *= -1;
}
if (_model.position.x + 1.5 >= 25) {
_model.position.x = 23.5;
_velocity.x *= -1;
}
}
Three. js è necessario eseguire il rendering della scena ogni volta che si utilizza requestAnimationFrame. Questo dovrebbe essere un modello familiare:
var ball = new Ball(scene);
var Arena = new Arena(scene);
var render = function (time) {
var t = (time - lastTime) / 1000.0;
lastTime = time;
ball.update(t);
renderer.render(scene, camera);
requestAnimationFrame( render );
}
requestAnimationFrame(render);
Resta sintonizzato!
Ora ho un'arena con luci, una telecamera ben posizionata e una palla che rimbalza intorno alla scena. Che è tutto ciò che ho intenzione di coprire in questo articolo. Nella prossima puntata, ti spiego come 3D proiezione opere lasciando mira con il mouse. Farò anche spiegare più su texture e rendere liscio animazioni utilizzando una potente libreria chiamata tween.js. Nell'ultimo di questi tre articoli, io guardare sotto il cofano di Three. js e vedere come in realtà sta disegnando tale grafica ad alta fedeltà.
Michael Oneppo è un tecnologo creativo ed ex program manager presso Microsoft nel team Direct3D. Suoi sforzi recenti includono lavorando come CTO presso la tecnologia biblioteca per tutti senza scopo di lucro ed esplorare un Master presso la NYU Interactive Telecommunications Program.
Grazie all'esperto tecnica seguente per la revisione di questo articolo: Iano di Mohamed