Comment puis-je implémenter une vue FPS avec WebGL à l'intérieur d'un navigateur?
j'utilise Copperlicht , et je veux créer un FPS utilisable. La démo contrôles montre pourquoi le navigateur de l'environnement, rend cette douleur.
pour mettre en œuvre le contrôle de la caméra FPS, vous devez suivre la position relative de la souris - en d'autres termes, son mouvement, pas ses coordonnées absolues de l'écran. La souris peut quitter le navigateur à tout moment (à juste titre) et ne peut pas être suivie, à moins que l'utilisateur n'initie un événement de traînée à l'intérieur de la page. Cliquez sur events change focus et empêche l'application d'utiliser les données de la souris comme entrée.
la position de la souris peut être tracée pendant la traînée, mais cela nécessite que l'utilisateur maintienne le bouton gauche de la souris enfoncé. Ce n'est pas bon puisque le clic gauche est habituellement utilisé pour d'autres choses. Maintenir le bouton vers le bas est également fatigant et encombrant.
la seule chose à laquelle je pense est d'automatiser le bouton du milieu de la souris. Un bouton du milieu de la souris appuie sur garde focus dans le navigateur, et garde le clic gauche/droit événements à l'extérieur de la fenêtre du navigateur dans la mise au point du navigateur. Est-il possible de maintenir enfoncé le bouton du milieu de la souris en utilisant JavaScript?
dans la négative, y a-t-il une solution "pure"? Je préfère ne pas aller à flash ou Java ou un plugin comme une réponse.
8 réponses
Ce thread est d'une lecture agréable sur ce sujet. Il semble que des prototypes pour cette fonctionnalité sont au moins suggérés pour Firefox et Chrome .
Que Diriez-vous de faire le plein écran de la fenêtre et puis d'arrêter le jeu si le curseur sort de la fenêtre? Je sais que cela ne résout pas vraiment le problème, mais c'est le mieux que je puisse penser, sans utiliser un plugin d'une sorte.
c'est une sorte de tricherie, mais aller à about:flags dans Chrome et activer" FPS counter " fonctionne pour moi, :) (mais il ne le fait pas pour tous les navigateurs ni à l'intérieur de votre application WebGL).
j'ai trouvé ce code d'exemple à http://bitdaddys.com/javascript/example3run.html
<html>
<head>
<title>JavaScript Example of Mouse Position Tracking</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name=thisform>
<table border=0>
<tr><td colspan=2>Position Of Cursor</td></tr>
<tr><td>X <input type=text name=x value=""></td>
<td>Y <input type=text name=y value=""></td>
</tr>
</table>
</form>
<script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
function getMousePosition(mp) {
var _x;
var _y;
if (!isIE) {
_x = mp.pageX;
_y = mp.pageY;
}
if (isIE) {
_x = event.clientX + document.body.scrollLeft;
_y = event.clientY + document.body.scrollTop;
}
document.thisform.x.value=_x;
document.thisform.y.value=_y;
return true;
}
</script>
</body>
</html>
nous avons besoin de la fenêtre pour être en mesure de capturer la souris, comme il est vu avec certains plugins de navigateur, peut-être en Java. Flash n'a pas ce pouvoir, AFAIK.
en tant que sidenote, lorsque capturé pour" récupérer la souris " vous devez appuyer sur ESC, et cela peut être ennuyeux lorsque l'application n'informe pas correctement l'utilisateur.
(c'est la seule solution que j'ai vu jusqu'à présent pourrait fonctionner pour mon projet de jeu, faire un FPS aussi)
implémenter un Plugin pour chaque navigateur que vous avez l'intention de prendre en charge. AFAIK, c'est comme ça qu'ils ont résolu le problème avec "Quake Live".
Chrome / Chrome - > PPAPI
Firefox & Opera - > NPAPI
IE - > ActiveX
Safari -> Safari développement d'un plugin
Btw, le lien Daniel Baulig vous a donné un bon pointeur et résout ce problème (sur le long terme).
À ce point dans le temps (Oct 2011) la seule façon d'obtenir de véritables Tir à la Première Personne-les contrôles de style est par l'intermédiaire d'un plug-in de navigateur. Selon vos besoins, vous pourriez également être en mesure de s'en tirer avec un simple clic-et-glisser comme je suis actuellement en train d'utiliser dans mon Quake 3 Démo , mais si vous construisez un jeu réel et pas une belle démo technique, ce n'est probablement pas suffisant.
(Note: C'est en fait ce que Google a fait pour leur port GWT de Quake 2. Vous vous devez utiliser la touche CTRL pour démarrer, car le clic est utilisé pour déplacer votre vue.)
dans un proche avenir, cependant, nous devrions recevoir une API" MouseLock " qui est essentiellement construit sur mesure à cet effet. Vous pouvez vous renseigner sur son état d'avancement au sur le Blog de Seth Ladd . Une fois que cela sortira, nous aurons beaucoup plus d'options pour les contrôles de jeu disponibles pour nous. (Seraient également aider avec des choses comme les jeux RTS)
ici et maintenant:
j'en fais un avec push/pop matrix avec glmatrix 0.9 aussi version 2.0 webgl & glmatrix . Secret - doit traduire à zéro , tourner et puis traduire à la position de la carte. Vous avez tous les paramètres pour le contrôleur de première personne.
voir: opengles 1.1. / webgl 1.0 / glmatrix 0.9 ou voir cet exemple avec colizion complet.
WebGl 2 / glmatrix 2 Exemples (également contrôleur à la première personne):
Télécharger à partir de bitBucket
hors contexte:
////////////////////////////////////////////////////////
// Somewhere in draw function ....
////////////////////////////////////////////////////////
mat4.identity(object.mvMatrix);
this.mvPushMatrix(object.mvMatrix,this.mvMatrixStack);
////////////////////////////////////////////////////////
if (App.camera.FirstPersonController==true){camera.setCamera(object)}
////////////////////////////////////////////////////////
mat4.translate(object.mvMatrix, object.mvMatrix, object.position.worldLocation );
mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(object.rotValue), object.rotDirection.RotationVector );
.... Fonction de fin de Tirage
contenu de SetCamera:
var camera = new Object();
/* Set defaults */
camera.pitch = 0;
camera.pitchRate = 0;
camera.yaw = 0;
camera.yawRate = 0;
camera.xPos = 0;
camera.yPos = 0;
camera.zPos = 0;
camera.speed = 0;
camera.yawAmp = 0.05;
camera.pitchAmp = 0.007;
keyboardPress = defineKeyBoardObject();
camera.setCamera = function(object) {
/* Left Key or A */
if (keyboardPress.getKeyStatus(37) || keyboardPress.getKeyStatus(65) || App.camera.leftEdge == true) {
camera.yawRate = 20;
if (App.camera.leftEdge == true) camera.yawRate = 10;
}
/* Right Key or D */
else if (keyboardPress.getKeyStatus(39) || keyboardPress.getKeyStatus(68) || App.camera.rightEdge == true) {
camera.yawRate = -20;
if (App.camera.rightEdge == true) camera.yawRate = -10;
}
else {
// camera.yawRate = 0;
}
/* Up Key or W */
if (keyboardPress.getKeyStatus(38) || keyboardPress.getKeyStatus(87)) {
camera.speed = 0.03;
}
/* Down Key or S */
else if (keyboardPress.getKeyStatus(40) || keyboardPress.getKeyStatus(83)) {
camera.speed = -0.03;
}
else {
camera.speed = 0;
}
/* Page Up
if (keyboardPress.getKeyStatus(33)) {
camera.pitchRate = 100;
}
/* Page Down
else if (keyboardPress.getKeyStatus(34)) {
camera.pitchRate = -100;
}
else {
camera.pitchRate = 0;
}
*/
/* Calculate yaw, pitch and roll(x,y,z) */
if (camera.speed != 0) {
camera.xPos -= Math.sin(degToRad(camera.yaw)) * camera.speed;
camera.yPos = 0;
camera.zPos -= Math.cos(degToRad(camera.yaw)) * camera.speed;
}
camera.yaw += camera.yawRate * camera.yawAmp ;
camera.pitch += camera.pitchRate * camera.pitchAmp ;
mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(-camera.pitch), [1, 0, 0]);
mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(-camera.yaw), [0, 1, 0]);
// mat4.translate(object.mvMatrix, object.mvMatrix, [camera.yaw, -camera.pitch, 0]);
mat4.translate(object.mvMatrix, object.mvMatrix, [-camera.xPos , -camera.yPos , -camera.zPos ]);
camera.yawRate = 0;
camera.pitchRate = 0;
};
ce code vous permet pour dessiner des objets 3D et des dossiers facilement et rapidement.Selon le principe d'un objet, une ligne. webgl 3d wourld moteur cadre zlatnaspirala Première personne du site web de look. Utilisé lib : Opérations matricielles et vectorielles de haute performance pour WebGL