Pertanyaan Bagaimana saya bisa menerapkan tampilan FPS dengan WebGL di dalam browser?


saya menggunakan Copperlicht, dan saya ingin membuat FPS yang dapat digunakan. Demo kontrol menunjukkan mengapa lingkungan browser membuat ini menjadi sakit.

Untuk menerapkan kontrol kamera FPS, Anda harus melacak posisi mouse relatif - dengan kata lain, gerakannya, bukan koordinat layar absolutnya. Mouse dapat meninggalkan browser kapan saja (memang seharusnya demikian) dan tidak dapat dilacak, kecuali pengguna memulai peristiwa seret di dalam halaman. Kejadian klik mengubah fokus dan mencegah aplikasi menggunakan data mouse sebagai input.

Posisi mouse dapat dilacak selama drag, tetapi ini mengharuskan pengguna untuk menekan tombol kiri mouse mereka. Ini tidak bagus karena mengklik kiri biasanya digunakan untuk hal lain. Menahan tombol itu juga melelahkan dan merepotkan.

Satu-satunya hal yang dapat saya pikirkan adalah mengotomatisasi tombol mouse tengah. Tekan tombol mouse di tengah menjaga fokus di browser, dan menyimpan peristiwa klik kiri / kanan di luar jendela browser dalam fokus browser. Apakah mungkin untuk menyebabkan tombol mouse tengah tetap ditekan menggunakan JavaScript?

Jika tidak, apakah ada solusi "murni" untuk ini? Saya lebih suka tidak pergi ke flash atau Java atau plugin sebagai jawaban.


32
2018-04-24 05:17


asal


Jawaban:


Ini benang adalah bacaan yang bagus tentang topik ini. Sepertinya prototipe untuk fungsi ini setidaknya disarankan untuk Firefox dan Chrome.


4
2018-05-14 20:28



Bagaimana tentang membuat jendela layar penuh dan kemudian menghentikan permainan jika kursor bergerak keluar dari jendela? Saya tahu ini tidak benar-benar menyelesaikan masalah, tetapi itu adalah hal terbaik yang dapat saya pikirkan, tanpa menggunakan plugin.


3
2018-05-14 10:23



Ini agak curang, tapi pergi about:flags di Chrome dan mengaktifkan "penghitung FPS" berfungsi untuk saya, :) (tetapi tidak melakukannya untuk semua browser maupun di dalam aplikasi WebGL Anda).


1
2018-05-20 22:18



Saya menemukan kode contoh ini di 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



Kami membutuhkan jendela untuk dapat menangkap mouse, seperti yang terlihat dengan beberapa plugin browser, mungkin di Jawa. Flash tidak memiliki kemampuan ini, AFAIK.

Sebagai sidenote, ketika ditangkap untuk "mendapatkan mouse kembali" Anda harus menekan ESC, dan ini dapat mengganggu ketika aplikasi tidak memberi tahu pengguna dengan benar.


0
2018-05-17 15:20



(Ini adalah satu-satunya solusi yang saya lihat sejauh ini dapat bekerja untuk proyek permainan saya, melakukan FPS juga)

Menerapkan Plugin untuk setiap browser yang ingin Anda dukung. AFAIK, ini adalah cara mereka memecahkan masalah dengan "Quake Live".

Chrome / Chromium -> PPAPI

Firefox & Opera -> NPAPI

IE -> ActiveX

Safari -> Pengembangan plugin Safari

Btw, tautan yang Daniel Baulig berikan kepada Anda memiliki penunjuk yang bagus dan menyelesaikan masalah ini (dalam jangka panjang).


0
2018-06-17 15:01



Pada titik waktu ini (Okt 2011) satu-satunya cara untuk mendapatkan kontrol gaya First Person Shooter yang nyata adalah melalui plugin browser. Tergantung pada kebutuhan Anda, Anda mungkin juga bisa lolos dengan skema klik-dan-seret sederhana seperti yang saya gunakan saat ini Demo Quake 3, tetapi jika Anda sedang membangun gim yang sebenarnya dan bukan demo teknologi yang bagus, ini mungkin tidak cukup.

(Catatan: Itulah sebenarnya yang dilakukan Google untuk port GWT Quake 2. Anda harus menggunakan kunci CTRL untuk diaktifkan, karena mengklik digunakan untuk memindahkan pandangan Anda.)

Namun, dalam waktu dekat, kami harus menerima API "MouseLock" yang pada dasarnya dibuat khusus untuk tujuan ini. Anda dapat membaca tentang perkembangannya Blog Seth Ladd. Setelah itu keluar, kita akan memiliki lebih banyak pilihan untuk kontrol permainan yang tersedia bagi kita. (Juga membantu dengan hal-hal seperti game RTS)


0
2017-10-03 22:37



Di sini sekarang :

Saya membuat satu dengan push / pop matrix dengan glmatrix 0.9 juga versi 2.0 webgl & glmatrix. Rahasia - Harus diterjemahkan ke nol , rotasikan dan kemudian terjemahkan ke posisi peta. Anda memiliki semua parameter untuk kontrol orang pertama.

Lihat:opengles 1.1. / webgl 1.0 / glmatrix 0.9 atau lihat contoh ini dengan colizion penuh.

WebGl 2 / glmatrix 2 Example (juga First Person controller):

Unduh dari bitBucket

Contoh langsung

Diluar konteks : 

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

.... Akhir dari fungsi Draw

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

Kode ini memungkinkan Anda untuk menggambar objek dan folder 3D dengan mudah dan dengan cepat. Di bawah prinsip satu objek satu baris. webgl 3d engine kerangka kerja zlatnaspirala Tampilan situs web orang pertama. Lib yang digunakan: Operasi matriks dan vektor kinerja tinggi untuk WebGL


0
2018-06-23 14:06