如何在浏览器中使用WebGL实现FPS视图？

I'm using Copperlicht, and I want to create a usable FPS. The demo controls shows why the browser environment makes this a pain.

我正在使用Copperlicht,我想创建一个可用的FPS。演示控件显示了为什么浏览器环境会让这很痛苦。

In order to implement FPS camera control, you need to track the relative mouse position - in other words, its motion, not its absolute screen coordinates. The mouse can leave the browser at any time (rightfully so) and can't be tracked, unless the user initiates a drag event inside the page. Click events change focus and prevent the application from using mouse data as input.

为了实现FPS摄像机控制,您需要跟踪相对鼠标位置 - 换句话说,它的运动,而不是其绝对屏幕坐标。除非用户在页面内启动拖动事件,否则鼠标可以随时离开浏览器(理所当然地)并且无法跟踪。单击事件会更改焦点并阻止应用程序使用鼠标数据作为输入。

The mouse position can be tracked during drag, but this requires the user to hold down their left mouse button. This isn't good since left clicking is usually used for other things. Holding the button down is also tiring and cumbersome.

拖动期间可以跟踪鼠标位置,但这需要用户按住鼠标左键。这不好,因为左击通常用于其他事情。按住按钮也很累,很麻烦。

The only thing I can think of is automating the middle mouse button. A middle mouse button press keeps focus in the browser, and keeps left/right click events outside the browser window in the browser's focus. Is it possible to cause middle mouse button to stay pressed using JavaScript?

我唯一能想到的是自动鼠标中键。鼠标中键按下可在浏览器中保持焦点,并在浏览器焦点中保持浏览器窗口外的左/右击事件。是否可以使用JavaScript使鼠标中键保持按下状态?

If not, is there a "pure" solution to this ? I'd rather not go to flash or Java or a plugin as an answer.

如果没有,是否有一个“纯粹”的解决方案呢?我宁愿不去flash或Java或插件作为答案。

8 个解决方案

#1

This thread is a nice reading on this topic. It seems like prototypes for this functionality are at least suggested for Firefox and Chrome.

这个主题是关于这个主题的一个很好的阅读。看起来这个功能的原型至少建议用于Firefox和Chrome。

#2

How about making the window fullscreen and then pausing the game if the cursor moves out of the window? I know this doesn't really solve the problem, but it's the best I can think of, without using a plugin of some sort.

如果光标移出窗口,如何使窗口全屏,然后暂停游戏?我知道这并没有真正解决问题,但它是我能想到的最好的,没有使用某种插件。

#3

It's kind of cheating, but going to about:flags in Chrome and enabling "FPS counter" works for me, :) (but it's not doing it for all browsers nor inside your WebGL app).

这是一种作弊行为,但是关于:Chrome中的标志和启用“FPS计数器”对我有用,但是(但它并不适用于所有浏览器或WebGL应用程序)。

#4

I found this example code at http://bitdaddys.com/javascript/example3run.html

我在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

We need the window to be able to capture the mouse, as it is seen with some browser plugins, maybe in Java. Flash doesn't have this ability, AFAIK.

我们需要窗口能够捕获鼠标,正如一些浏览器插件所见,可能是Java。 Flash没有这种能力,AFAIK。

As a sidenote, when captured to "get the mouse back" you have to press ESC, and this can be annoying when the app doesn't inform the user properly.

作为旁注,当捕获“让鼠标回来”时你必须按ESC,当应用程序没有正确通知用户时,这可能很烦人。

#6

(this is the only solution i've seen so far could work for my game project, doing an FPS too)

(这是我到目前为止看到的唯一解决方案可以用于我的游戏项目,也可以用于FPS)

Implement a Plugin for each browser you intend to support. AFAIK, this is the way they solved the problem with "Quake Live".

为您打算支持的每个浏览器实现一个插件。 AFAIK,这是他们通过“Quake Live”解决问题的方式。

Chrome / Chromium -> PPAPI

铬/铬 - > PPAPI

Firefox & Opera -> NPAPI

Firefox和Opera - > NPAPI

IE -> ActiveX

IE - > ActiveX

Safari -> Safari plugin development

Safari - > Safari插件开发

Btw, the link Daniel Baulig gave you has a nice pointer and solves this problem (on the long run).

顺便说一句,Daniel Baulig给你的链接有一个很好的指针并解决了这个问题(从长远来看)。

#7

At this point in time (Oct 2011) the only way to get real First Person Shooter-style controls is via a browser plugin. Depending on your needs you might also be able to get away with a simple click-and-drag scheme like I'm currently using in my Quake 3 demo, but if you are building an actual game and not a pretty tech demo this is probably not sufficient.

在这个时间点(2011年10月),获得真正的第一人称射击游戏控制的唯一方法是通过浏览器插件。根据您的需要,您也可以使用我目前在Quake 3演示中使用的简单点击和拖动方案,但如果您正在构建一个真正的游戏而不是一个漂亮的技术演示,这可能是不够。

(Note: That's actually what Google did for their GWT port of Quake 2. You have to use the CTRL key to fire, since clicking is used to move your view.)

(注意:这实际上是谷歌为他们的Quake 2的GWT端口所做的。你必须使用CTRL键才能触发,因为点击用于移动你的视图。)

In the near future, however, we should be receiving a "MouseLock" API that is basically custom-built for this purpose. You can read up on it's progress at Seth Ladd's Blog. Once that comes out we'll have a lot more options for game controls available to us. (Would also help with things like RTS games)

但是,在不久的将来,我们应该收到一个“MouseLock”API,它基本上是为此目的而定制的。您可以在Seth Ladd博客上了解它的进展情况。一旦出现,我们将有更多的游戏控制选项供我们使用。 (也可以帮助像RTS游戏这样的东西)

#8

Right here right now :

此时此刻 :

I make one with push/pop matrix with glmatrix 0.9 also version 2.0 webgl & glmatrix . Secret - Must translate to zero , rotate and then translate to map position. You have all parameters for first person controler.

我用push / pop矩阵制作了一个glmatrix 0.9和2.0版webgl&glmatrix。秘密 - 必须转换为零,旋转然后转换为地图位置。你有第一人称控制器的所有参数。

See:opengles 1.1. / webgl 1.0 / glmatrix 0.9 or see this example with full colizion.

见:opengles 1.1。 / webgl 1.0 / glmatrix 0.9或使用完全colizion查看此示例。

WebGl 2 / glmatrix 2 Example's (also First Person controller):

WebGl 2 / glmatrix 2示例(也是第一人称控制器):

Download from bitBucket

从bitBucket下载

Live example

Out of context :

你离题了 :

////////////////////////////////////////////////////////
// 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 function

....结束绘制功能

Content of SetCamera :

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

This code allows you to draw 3D objects and folders easily and quickly.Under the principle of one object one line. webgl 3d wourld engine framework zlatnaspirala First person web site look. Used lib : High performance matrix and vector operations for WebGL

此代码允许您轻松快速地绘制3D对象和文件夹。根据一个对象的原则一行。 webgl 3d wourld引擎框架zlatnaspirala第一人称网站看。使用的lib:WebGL的高性能矩阵和向量运算

#1