2か月前、私はGitHubにWebQuakeの最初のベータビルドを投稿しました。これはWebGLを介してブラウザで実行される最初のQuakeの移植版です。



この投稿では、エンジンの開発と実装の詳細について説明します。グラフィックスの作成方法、サウンドの動作方法などです。

それがすべて始まった方法

2012年9月に現在の形式でWebQuakeの開発を開始しました。 しかし、そのアイデアはそのずっと前に私に伝わりました。



JavaScriptで何も考えていない2011年の夏に、私が初めて似たようなことをすることに決めたとき。 それから、Quakeコードを見ずに「目で」ポートを作成し、ゲームメニューのほんの一部を作成しました。 そのバージョンでは、文字列を使用してバイナリデータを処理しました（浮動小数点数のパーサーでは、一般にMath.powを使用し、文字列0と1にビットを保持していました）。 WebGLでバッファとシェーダを操作する性質を理解していないことが、このような嘔吐の流れから世界を救ったことは非常に良いことです。



次に、ファイルに直接アクセスするために、WebQuakeをデスクトップアプリケーションにしたいと考えました。 彼はHTAとXULの間で選択を始めました。 ただし、WebGLをサポートしているものはありません。 したがって、私もこの考えを拒否しました。



最終的に純粋なHTML5に切り替えました。

開発

開始から最初のベータまで6か月が経過しました。 私の記憶が正しければ、 GWT Quake 2を作成するのにGoogleに2か月かかりましたが、Googleは3つにポートを作り、Jake2の形でベースを持っていました。すべてのコードを手動でコピーしました。



手動書き換えが選択された理由は、エンジン全体の一般的な原則に合わせてコードをカスタマイズし、ブラウザウィンドウのサイズに依存せずにエンジンをカスタマイズし、ブラウザの一部の領域（グラフィックなど）が元のQuakeとは完全に異なるためです。



しかし、このアプローチには欠点もあります。 時々タイプミスがあり、間違ったオペレーターのために2回手に入れました（最初に||ではなく&&のために壁に沿って猛スピードでスライドしていました、そして2回目は===の代わりにネットワークゲームにひどい痙攣がありました！） 、システム全体を掘り下げるのに3週間費やさなければなりませんでした。



タイプミスのため、ベータ版のリリースは非常にバグが多いことが判明し、リリースが早すぎることは明らかでした。 一般に、私はもともと3月から4月にリリースする予定でしたが、それ以降は多かれ少なかれ再生できるため、2月にポートをレイアウトすることにしました。

サブシステム

それでは、エンジン自体の詳細に移りましょう。

グラフィックス

もちろん、グラフィックレンダリングはWebGLを介して実装されます。



ただし、WebQuakeをGLQuakeポートと呼ぶことはできません。 グラフィックサブシステムのほぼ全体がゼロから書き直されました。



WebQuakeとGLQuakeの主な違いは、OpenGL関数の固定セットの代わりにシェーダーとバッファーを使用することです。 WebQuakeでは、オブジェクトの各タイプ（BSPモデル、ポリゴンモデル、プレーヤー、スプライト、パーティクル、空）でシェーダーがどこでも使用されます-独自のシェーダーが作成されます。



シェーダーを通じて、DOS Quake / WinQuakeに存在する効果が返されましたが、OpenGLの古いバージョンの制限のために、GLQuakeから削除されました。たとえば、照らされた領域と明るい光のテクスチャです。





GLQuakeでE1M1を起動します。 ライトは消灯しています。





WebQuakeの同じ場所。



Quakeエンジンのいくつかの機能により、グラフィックのパフォーマンスを向上させることができました。 たとえば、ポリゴンは4つの動的光源のみで同時に照らすことができ、照明マップは白黒なので、1つのテクスチャのカラーチャンネルを介して世界のレンダリングをベクトル化することができました。 ポートの世界のピクセルシェーダーは次のようになります。

precision mediump float; uniform float uGamma; uniform sampler2D tTexture; uniform sampler2D tLightmap; uniform sampler2D tDlight; uniform sampler2D tLightStyle; varying vec4 vTexCoord; varying vec4 vLightStyle; void main(void) { vec4 texture = texture2D(tTexture, vTexCoord.xy); gl_FragColor = vec4(texture.rgb * mix(1.0, dot(texture2D(tLightmap, vTexCoord.zw), vec4( texture2D(tLightStyle, vec2(vLightStyle.x, 0.0)).a, texture2D(tLightStyle, vec2(vLightStyle.y, 0.0)).a, texture2D(tLightStyle, vec2(vLightStyle.z, 0.0)).a, texture2D(tLightStyle, vec2(vLightStyle.w, 0.0)).a) * 43.828125) + texture2D(tDlight, vTexCoord.zw).a, texture.a), 1.0); gl_FragColor.r = pow(gl_FragColor.r, uGamma); gl_FragColor.g = pow(gl_FragColor.g, uGamma); gl_FragColor.b = pow(gl_FragColor.b, uGamma); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、ドットは少し変わったタスクのためにここで使用されます。4つのライトマップに、0〜25または0.0〜0.0980392の値として64x1テクスチャにある特定の光源の現在の輝度を乗算します。



GLQuakeでひどく壊れた空は、空のテクスチャを持つポリゴンを多くの小さなものに分割し、それらを奇妙な方法で歪ませるGLQuakeとは異なり、深度テストでハックを介してレベル全体に描かれた平らな球体の形で作られています移動するときの波。





GLQuakeの空。



2次元画像もWebGLを介して描画されます（長さ1のクワッドを介して、頂点シェーダーで乗算されます）。 当初は2D Canvasを使用する予定でしたが、高解像度ではFPSは15に低下しました。



また、元のQuake（およびGWT Quake 2）とは異なり、WebQuakeはブラウザーウィンドウのサイズに依存しません。 このために、いわゆるHor + vert + FOVも使用されます。これについては、以前にHabrahabrで書いたものです。

音

サウンドは2つの方法で同時に実装されます。



デフォルトでは、Web Audio APIが使用されます。これは、ステレオサウンドとスムーズなサウンドの繰り返しをサポートします。



ブラウザがWeb Audio APIをサポートしていない場合、HTML5オーディオは有効になりますが、この場合のサウンドはシングルチャンネルであり、少し遅れて繰り返されます。



初期のベータリリースでは、HTML5オーディオのみが使用されていましたが、このため、Chromeは最初にAndroid、Linux、Mac、次にWindowsでクラッシュしたため、Web Audioサポートが追加されました。



音楽も存在しますが、ディスクからではなく、HTML5経由でサーバー上のOGGファイルから再生されます。

ネットワークゲーム

ブラウザをWebSocketサーバーにすることはできないため、リッスンサーバーを作成することはできませんでした。



専用サーバーはNode.jsを介して実行され、WebQuakeのほとんどのコードを使用します。



専用サーバーはWebSocketとUDPの両方をサポートしているため、WebQuakeサーバーは通常のQuakeクライアント（QuakeWorldではない）で再生できます。 おそらく将来的には、既存のQuake通常のサーバーに接続するプロキシを作成するでしょう。



サーバーに関する情報は、サーバーが実行されているのと同じアドレスおよびポートへのHTTPリクエストとして要求することができます（データはJSON形式で返されます）。

運営管理

現在、マウスのサポートはChromeでのみ機能します。 Firefoxにはポインターロックもあるという事実にもかかわらず、キャンバス自体にフルスクリーンモードが必要であり、プレーヤーと開発者に不便をもたらします。

ファイルシステム

ファイルへのアクセスは、同期XMLHttpRequestを介して行われます。



はい、同期XHRは「ファッショナブルではない」かもしれませんが、コールバック地獄につながることなくはるかに簡単に実装され、GWT Quakeで使用されているような一時的なテクスチャを見るよりもユーザーにとってさらに快適です2。



読み込み中（少なくともFirefoxでは）、画面の中央に「読み込み中」の画像が表示されるため、プレーヤーはダウンロードが進行中であることを理解します。



保存、設定、およびデモはローカルストレージに記録されます。 ローカルストレージにある保存は、ブート/保存メニューの[削除]ボタンで削除できます。



GWT Quake 2とは異なり、WebQuakeはファイル変換を必要とせず、.pakから（HTTP 1.1範囲経由で）ファイルを直接ダウンロードできます。つまり、完全なmodサポートがあります。

性能

さまざまなデバイスとブラウザーでWebQuakeをテストしました。



少し驚いたのは、壁が黒い（正確な理由はわからない）が、ベータ版のChromeを使用して電話（LG Optimus L9）でも許容可能なパフォーマンス（FPSの数はわかりませんが、30以上）を達成できることです。さらに、これは動的な照明が機能します）。



私の以前のコンピューターでは、GWT Quake 2の5-10 FPSとは異なり、WebQuakeは最大60 FPSで動作しました。開発中に、 GWT Quake 2エラーを暗黙的に考慮しました。たとえば、高速。



巨大なブレーキがかかっていたのは、NVIDIA GeForce 5200を搭載した古いコンピューターとSamsung N130ネットブックでした。 ASUSトランスパッドでは、TF300Tは非常にスムーズに動作します。