Подтвердить что ты не робот

Как я могу реализовать FPS-представление с помощью WebGL внутри браузера?

Я использую Copperlicht, и я хочу создать полезную FPS. Элементы управления demo показывают, почему среда браузера делает это болью.

Чтобы реализовать управление камерой FPS, вам необходимо отслеживать относительную позицию мыши - другими словами, ее движение, а не его абсолютные координаты экрана. Мышь может покинуть браузер в любое время (по праву) и не может быть отслежена, если пользователь не инициирует событие перетаскивания внутри страницы. Нажатие событий изменяет фокус и не позволяет приложению использовать данные мыши в качестве входных данных.

Положение мыши можно отслеживать во время перетаскивания, но для этого требуется, чтобы пользователь удерживал левую кнопку мыши. Это не хорошо, поскольку щелчок левой кнопкой мыши обычно используется для других целей. Удержание кнопки вниз также утомительно и громоздко.

Единственное, о чем я могу думать, это автоматизировать среднюю кнопку мыши. Среднее нажатие кнопки мыши удерживает фокус в браузере и сохраняет события влево/вправо за пределами окна браузера в фокусе браузера. Возможно ли, чтобы средняя кнопка мыши оставалась нажатой с использованием JavaScript?

Если нет, существует ли "чистое" решение? Я бы предпочел не пойти на flash или Java или плагин в качестве ответа.

4b9b3361

ОТВЕТЫ

Ответ 1

Этот поток - хорошее чтение по этой теме. Похоже, прототипы для этой функциональности, по крайней мере, предлагаются для Firefox и Chrome.

Ответ 2

Как сделать окно полноэкранным, а затем приостановить игру, если курсор выйдет из окна? Я знаю, что это действительно не решает проблему, но это лучшее, что я могу придумать, не используя какой-либо плагин.

Ответ 3

Это своего рода обман, но переход в about:flags в Chrome и включение "FPS-счетчика" для меня работает:) (но это не делает его для всех браузеров и внутри вашего приложения WebGL).

Ответ 4

Я нашел этот пример кода в 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>

Ответ 5

Нам нужно окно, чтобы иметь возможность захватить мышь, как это видно с некоторыми плагинами браузера, возможно, на Java. Flash не обладает этой способностью, AFAIK.

В качестве опоры, когда для захвата "вернуть мышь" вам нужно нажать ESC, и это может раздражать, когда приложение не сообщает пользователю правильно.

Ответ 6

(это единственное решение, которое я видел до сих пор, может работать для моего игрового проекта, тоже делает FPS)

Внедрите плагин для каждого браузера, который вы собираетесь поддерживать. AFAIK, так они решили проблему с "Quake Live".

Chrome/Chromium → PPAPI

Firefox и Opera → NPAPI

IE → ActiveX

Safari → Разработка плагина Safari

Btw, ссылка Daniel Baulig дала вам хороший указатель и решает эту проблему (в конечном счете).

Ответ 7

В этот момент времени (октябрь 2011) единственный способ получить реальные элементы управления Shooter от First Person - через плагин браузера. В зависимости от ваших потребностей вы также можете уйти с простой схемой "щелчок и перетаскивание", как в настоящее время я использую в своем демо Quake 3, но если вы строите настоящую игру, а не довольно техническую демонстрацию, этого, вероятно, недостаточно.

(Примечание. Это действительно то, что Google сделал для своего GWT-порта Quake 2. Вам нужно использовать CTRL-ключ для запуска, так как щелчок используется для перемещения вашего представления.)

В ближайшем будущем мы должны получить API-интерфейс MouseLock, который в основном настраивается для этой цели. Вы можете прочитать о нем прогресс в Блог Сета Лэдда. Как только это выйдет, у нас будет больше возможностей для доступных игровых элементов. (Также поможет с такими вещами, как игры RTS)

Ответ 8

Прямо здесь прямо сейчас:

Я делаю одно с push/pop-матрицей с glmatrix 0.9 и версией 2.0 webgl и glmatrix. Секрет - Должен перевести на нуль, повернуть, а затем перевести на позицию карты. У вас есть все параметры для первого человека.

Смотрите: opengles 1.1./webgl 1.0/glmatrix 0.9 или см. этот пример с полным колизированием.

WebGl 2/glmatrix 2 Пример (также контроллер первого лица):

Загрузка с BitBucket

Пример в реальном времени

Вне контекста:

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

.... Функция End of Draw

Содержимое 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;
};

Этот код позволяет легко рисовать 3D-объекты и папки и быстро. По принципу одного объекта одна строка. webgl 3d wourld рамочная система zlatnaspirala Посмотрите на сайт первого человека. Используемый lib: Высокопроизводительные матричные и векторные операции для WebGL