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


Estoy usando Copperlichty quiero crear un FPS utilizable La demo controles muestra 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.


32
2018-04-24 05:17


origen


Respuestas:


Esta hilo es una buena lectura sobre este tema. Parece que los prototipos de esta funcionalidad son al menos sugeridos para Firefox y Cromo.


4
2018-05-14 20:28



¿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.


3
2018-05-14 10:23



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


1
2018-05-20 22:18



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>

0
2018-05-17 09:42



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.


0
2018-05-17 15:20



(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).


0
2018-06-17 15:01



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ás construyendo un juego real y no una demostración bastante tecnológica, esto probablemente no sea suficiente.

(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 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)


0
2017-10-03 22:37



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 carrera

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 fácilmente y rápidamente. Bajo el principio de un objeto, una línea. webgl 3d wourld engine framework zlatnaspirala El aspecto del sitio web en primera persona. Usado lib: Operaciones de matrices y vectores de alto rendimiento para WebGL


0
2018-06-23 14:06