javascript - gratis - ¿Cómo puedo implementar una vista de FPS con WebGL dentro de un navegador?

como activar javascript en mi celular

Question

Estoy usando Copperlicht , y quiero crear un FPS utilizable. Los controles de demostración muestran por qué el entorno del navegador hace que esto sea un problema.

Para implementar el control de la cámara FPS, necesita rastrear la posición relativa del mouse, en otras palabras, su movimiento, no sus coordenadas absolutas de pantalla. El mouse puede salir del navegador en cualquier momento (con razón) y no se puede rastrear, a menos que el usuario inicie un evento de arrastre dentro de la página. Los eventos de clic cambian el foco y evitan que la aplicación use datos del mouse como entrada.

La posición del mouse se puede rastrear durante el arrastre, pero esto requiere que el usuario mantenga presionado el botón izquierdo del mouse. Esto no es bueno ya que el clic izquierdo generalmente se usa para otras cosas. Manteniendo presionado el botón también es agotador y engorroso.

Lo único que se me ocurre es automatizar el botón central del mouse. Una pulsación del botón central del mouse mantiene el foco en el navegador y mantiene los eventos de clic izquierdo / derecho fuera de la ventana del navegador en el foco del navegador. ¿Es posible hacer que el botón central del mouse se mantenga presionado usando JavaScript?

Si no, ¿hay una solución "pura" para esto? Prefiero no ir a flash o Java o un plugin como respuesta.

Answer 1

¿Qué hay de hacer la ventana de pantalla completa y luego pausar el juego si el cursor se mueve fuera de la ventana? Sé que esto realmente no resuelve el problema, pero es lo mejor que puedo pensar, sin usar un plugin de algún tipo.

Answer 2

(Esta es la única solución que he visto hasta ahora podría funcionar para mi proyecto de juego, haciendo un FPS también)

Implementa un complemento para cada navegador que pretendas admitir. AFAIK, esta es la forma en que resolvieron el problema con "Quake Live".

Chrome / Chromium -> PPAPI

Firefox y Opera -> NPAPI

IE -> ActiveX

Safari -> desarrollo de plugins Safari

Por cierto, el enlace que Daniel Baulig le dio tiene un buen puntero y resuelve este problema (en el largo plazo).

Answer 3

Aquí y ahora :

Hago uno con matriz push / pop con glmatrix 0.9 también versión 2.0 webgl & glmatrix. Secreto: debe traducirse a cero , rotar y luego traducir a la posición del mapa. Usted tiene todos los parámetros para el controlador de primera persona.

Ver: opengles 1.1. / webgl 1.0 / glmatrix 0.9 o vea este ejemplo con colizion completa.

Ejemplos de WebGl 2 / glmatrix 2 (también controlador en primera persona):

Descargar de bitBucket

Ejemplo en vivo

Fuera de contexto :

////////////////////////////////////////////////////////
// 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 );

.... Función de fin de dibujo

Contenido 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;
};

Este código le permite dibujar objetos 3D y carpetas de forma fácil y rápida. Debajo del principio de un objeto, una línea. webgl 3d wourld engine framework zlatnaspirala Mirada del sitio web en primera persona. Used lib: Matriz de alto rendimiento y operaciones vectoriales para WebGL

Answer 4

En este momento (octubre de 2011) la única forma de obtener controles reales de First Person Shooter es a través de un complemento de navegador. Dependiendo de sus necesidades, también podría salirse con la suya con un simple clic y arrastrar como lo estoy haciendo actualmente en mi demo de Quake 3 , pero si está compilando un juego real y no una demostración bastante tecnológica, esto es probablemente insuficiente.

(Nota: Eso es en realidad lo que hizo Google para su puerto GWT de Quake 2. Tienes que usar la tecla CTRL para disparar, ya que hacer clic se usa para mover tu vista).

En un futuro cercano, sin embargo, deberíamos recibir una API "MouseLock" que básicamente está hecha a medida para este propósito. Puede leer sobre su progreso en el blog de Seth Ladd . Una vez que eso salga, tendremos muchas más opciones para controles de juego disponibles para nosotros. (También ayudaría con cosas como juegos RTS)

Answer 5

Encontré este código de ejemplo en 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>

Answer 6

Este thread es una buena lectura sobre este tema. Parece que los prototipos de esta funcionalidad se sugieren al menos para Firefox y Chrome .

Answer 7

Necesitamos la ventana para poder capturar el mouse, como se ve con algunos complementos del navegador, tal vez en Java. Flash no tiene esta habilidad, AFAIK.

Como nota al margen, cuando se captura para "recuperar el mouse", tiene que presionar ESC, y esto puede ser molesto cuando la aplicación no informa al usuario correctamente.

Answer 8

Es una especie de trampa, pero vamos a about:flags en Chrome y habilitar el "contador FPS" funciona para mí, :) (pero no lo está haciendo para todos los navegadores ni dentro de su aplicación WebGL).