three.js、nw.jsでの3Dゲーム

私は古いブラウザゲームの新しいバージョンをリリースすることにしました。これは、数年前からソーシャルネットワーク上のアプリケーションとして成功しています。 今回は、Windows用アプリケーション（7-8-10）としても設計し、さまざまなストアに配置しました。 もちろん、将来的には、MacOSおよびLinux用のアセンブリを作成できます。









ゲームコードは完全に純粋なjavascriptで記述されています。 3Dグラフィックを表示するには、three.jsライブラリをスクリプトとWebGL間のリンクとして使用します。 ただし、これは古いブラウザバージョンの場合です。 私にとってこのプロジェクトで最も重要なことは、ゲームと並行して、シーンオブジェクト、アニメーション、その他の多くの機能を使いやすくするためのツールでthree.jsを補完するように設計された独自のライブラリを追加する理由でした。 それから私は彼女を長い間見捨てました。 彼女に戻ってくる時間です。





私のライブラリには、シーンのオブジェクトの追加と削除、オブジェクトの個々の部分（メッシュ）のプロパティの変更、3Dオブジェクトのフレームに依存しないアニメーション、夜の星空テクスチャを備えたスカイシェーダーなどの便利なツールが含まれています。 それらのいくつかについて説明します。 空に関しては、いくつかの入力パラメーターを受け取り、シェーダーを初期化し、必要に応じてクラウドテクスチャをロードし、指定された反復で空の更新を開始する単一の関数で作成を実装しました。



ただし、すべてが少し複雑です-定期的に、ただしめったに呼び出されない関数については、別の構成が実際に動作します。setInterval（）を使用すると、異なる間隔でイベントをスローできます。リスト上のイベントに必要な時間。 そこで、空の更新間隔をスローすることもできます。 しかし、3Dゲームオブジェクトの動きは、requestAnimationFrame（）によって既にスムーズに実装されています...



それで、私たちは空について話しているので、空から始めます。

空

大空をシーンに追加する方法は次のとおりです。



まず、標準ライトthree.jsを最大（初期）輝度値でシーンに追加する必要があります。 グローバルスペースを混乱させないように、オブジェクト、ライト、その他の属性を含むシーン全体がapscene名前空間に保存されます。

//  (AmbLight)   apscene.AmbLight=new THREE.AmbientLight(0xFFFFFF); apscene.scene.add(apscene.AmbLight); //  (AmbLightBk)   (      ) apscene.AmbLightBk=new THREE.AmbientLight(0xFFFFFF); apscene.sceneb.add(apscene.AmbLightBk); // (, )   var SFog=new THREE.FogExp2(0xaaaaaa, 0.0007); apscene.scene.fog=SFog; // (, )   var SFogBk=new THREE.FogExp2(0xa2a2aC, 0.0006); apscene.sceneb.fog=SFogBk; //  apscene.hemiLight=new THREE.HemisphereLight(0xFFFFFF, 0x999999, 1); apscene.scene.add(apscene.hemiLight); //        .       .        three.js   ,   ,     ,  ,   ... apscene.dirLight=new THREE.DirectionalLight(...) apscene.dirLightBk=new THREE.DirectionalLight(...)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、私の関数の1つを介して、シェーダー、テクスチャ（ブラックジャックなど）で空のアニメーションを実行できます。

 m3d.graph.skydom.initWorld( //  ,  ,         {saveStart:false}, { //ltamb (light ambient,    ) -       ltamb:{a1:-2, a2:8, k1:0.2, k2:0.75, obj:[ {obj:apscene.AmbLight.color, key:['r','g','b']} ]}, //a1  a2 -      (altitude,      ),     ,   obj,     (k1..k2),   k1  k2 -         // ,    ltamb :     -2  8 (    ),    (apscene.AmbLight.color),    r, g  b,    0.2  0.75     ( ,    ,    0xFFFFFF). //key -    ,        three.js //        (apscene.AmbLightBk.color).    (  altitude)  -4  12          0.3 ... 0.99    .  -4 , ,    0.3  ,   12   0.99   ltambb:{a1:-4, a2:12, k1:0.3, k2:0.99, obj:[ {obj:apscene.AmbLightBk.color, key:['r','g','b']} ]}, //      : ltdir:{a1:-2, a2:8, k1:0.0, k2:1, obj:[ {obj:apscene.dirLight, key:['intensity']}, {obj:apscene.dirLightBk, key:['intensity']} ]}, //       (apscene.dirLightBk)   ,    ,       . // ,      three.js    - inensity ( , apscene.dirLight.intensity).  ,  ,       three.js    . //  .   ,     ( 0.15  )     12  8 (, ,    8  12), : lthem:{a1:8, a2:12, k1:0.15, k2:0.3, obj:[ {obj:apscene.hemiLight, key:['intensity']} ]}, //         .       . //    ()   : ltambfog:{a1:-2, a2:8, k1:0.4, k2:1, obj:[ {obj:apscene.scene.fog.color, key:['r','g','b']} ]}, //  : ltambbfog:{a1:-2, a2:12, k1:0.25, k2:1, obj:[ {obj:apscene.sceneb.fog.color, key:['r','g','b']} ]}, //     .  ,         ,  . ltambfogd:{a1:8, a2:12, k1:0.2, k2:0.35, obj:[ {obj:apscene.scene.fog, key:['density']} ]}, //  ltambbfogd:{a1:6, a2:12, k1:0.2, k2:0.28, obj:[ {obj:apscene.sceneb.fog, key:['density']} ]}, //  ,      ( ,   ),   ,     ,   , -«»     ,      skyplane1..6: planeAmb:{a1:-5, a2:12, k1:0.5, k2:1.0, obj:[ {obj:apscene.user.skyplane1.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane2.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane3.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane4.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane5.material.color, key:['r','g','b']}, {obj:apscene.user.skyplane6.material.color, key:['r','g','b']} ]} //,     ,     ,  . };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、動的な空がシーンに表示され、太陽の高さが滑らかに変化し、それに応じて時刻が変化します。



ステージですべてのタイプの照明を使用する必要はありません。 また、時刻に応じてすべてのパラメーターを変更する必要はありません。 しかし、その明るさで遊んでも、昼と夜の変化をかなりリアルに再現できます。 パラメーターには好きな名前を付けることができます。主なことは、three.jsで指定されているように、パラメーター内のオブジェクトのキーを観察することです。



どのように見えるか、デモシーンからビデオを見ることができます：





これは別のゲームです。 ただ、その地平線にはさまざまなオブジェクトが散らばっていないため、このスクリプトの作業が最もはっきりと見えます。 しかし、ストーリーが議論されているゲームでは、まったく同じアプローチが使用されます。 ここでの時間の経過の高速は、デモンストレーションの目的のためにのみ設定されているため、もちろん、ゆっくりと流れます。反復の同じステップで大空が更新されます。 ちなみに、このデモでは、太陽の高さに応じて可変パラメーターを備えたウォーターシェーダーが含まれています...しかし、まだ完成していません。

性能

これはすべて、鉄に対する要求がほとんどありません。 Chromeブラウザで動作し、Xeon E5440をLGA775（および4ギガバイトのRAM）で20％読み込み、GT730グラフィックスカードのコアを45％読み込みます。 しかし、これは純粋に水のアニメーションによるものです。 水はないが都市はあるゲームについて話すと、これは：









その後、車が街を動き回る-パーセント45％、ビデオカード50％。 原則として、いくつかのfpsドローダウン（最大約30フレーム/秒）で、Pentium4 3GHz（1Gb RAM）およびIntel Atom 1.3GHz（2Gb RAM）のタブレット上でも非常にうまく機能します。



このハードウェアはすべて非常に脆弱であり、WebGLやHTML5上の他の同様のゲーム、2Dでさえ、ゲームをプレイすることができなくなるまで、それは私をひどく遅くします。 彼らが言うように、必要に応じて自分でゲームを書いてプレイしてください。

シーン

three.jsの3Dシーンはシーンオブジェクトであり、その子配列は実際、シーンにロードされるすべての3Dモデルです。 各モデルのブートローダーコールを登録しないために、ゲームシーン全体が特定の構成の形式で設定され、1つの大きな連想配列locd：{}（位置データなど）にすべての設定（ライト、プリロードされたテクスチャのパス）インターフェイスの画像、ステージにロードする必要があるすべてのモデルへのパスなど。 一般的に、これはシーンの完全な構成です。 ゲームのjsファイルに一度設定され、シーンローダーに供給されます。



そして、このlocd：{}オブジェクトには、特に、ロードする必要がある個々の3Dモデルへのパスが含まれています。 ゼロパスは共通パスであり、次に各オブジェクトの相対パスです。

 ['path/myObj', scale, y, x,z, r*Math.PI, 1, '', '', '', 1, ['','','',''], 'scene']
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのモデルは3Dエディターからjson形式にエクスポートされます。つまり、それらにはpath / myObj.jsonのようなパスがあります。 次に、スケール（ゲームに適さないスケールでエディターを保存できるため）、オブジェクトの高さ（y）の位置、軸（x）および（z）に沿って、モデルの回転角度®（y）、いくつかのオプションパラメーター、モデルをロードするシーンの名前-メインシーン（シーン）またはバックグラウンド（シーンb）。



はい、これを単純な形式ではなく、連想配列の形式で実装する必要がありました。 そのため、ドキュメントがなくても、または少なくともこれらのパラメータを取る関数の種類がなくても、パラメータの順序は理解できません。理解できません。 将来、これらの行を連想配列に再作成すると思います。 それまでは、次のようになります。

 landobj: [ ['gamePath/'], [ ['landscape/ground', 9.455, 0, 0,0, 0*Math.PI, 1, '', '', '', 1, ['','','',''], 'scene'], ['landscape/plants', 9.455, 0, 0,0, 0*Math.PI,1, '', '', '', 1, ['','','',''], 'scene'], ['landscape/buildings/house01', 2, 0, -420,420, -0.75*Math.PI, 1, '', '', '', 1, ['','','',''], 'scene'], ... ] ],
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのモデルはステージにロードされ、ここで指定された空間の座標に配置されます。 原則として、すべてのモデルは単一のオブジェクトとしてロードできます。つまり、ゲームシーン全体としてエディターからエクスポートし、座標（0; 0; 0）にロードできます。 次に、1行だけが表示されます。landscape/ ground-ground.jsonがあります-これはゲームの世界の主要部分です。 ただし、この場合、最初にブラウザコンソールを見て、この巨大な地面の子がどれであるかを覚えておく必要があるため、シーンの個々のオブジェクトを操作することは困難です。 そして、番号で連絡します。 したがって、ローミングゲームモデルには個別のオブジェクトをロードするのが最適です。 次に、連想配列から名前でアクセスできます。連想配列は、この目的のために特別に自動的に作成されます。



ゲームの完全な構成は、たとえば次のようになります。

 locd:{ // name: 'SeaBattle', type: 'game', menulabel: '', //    x:-420, y:70, z:-420, rot: -0.5, //    intsdistance: 200, // ambLtColor: 0xFFFFFF, ambLtColorBk: 0xFFFFFF, lightD: [0xDDDDDD,0.3,1000, 200000,0.3,-0.0003, -190,200000,-140,0,0,0, 200,-200,200,-200], lightDBk: [0xFFFFFF,0.3,10000, 40000,0.3,-0.0035, -190,1200,-140,0,0,0, 50000,-50000,50000,-50000], lightH: [0xFFFFFF,0x999999,1, 0,500,0], //      lightsP: [], //     lightsPDynamicAr: [ [0xffffff, 4, [0, -2000, 0], [50, 1.5] ] //[[distance], [decay]] ], //         (x,y,z) userPointLights: [ [0, -2000, 0] ], //   lightsS: [ [0xffffbb, 1.0, [0, 250, 180], [0, 0, 180], 0.5, 600,600,600, -0.0005] ], //  shadowMapCullFace:0, shadowsMode: 'all', //all,list,flag //  imagePaths: [ 'game/img/', 'interface.png', 'interface2.png' ], // 3D  landobj: [ ['game/models/'], [ ['landscape/land',1, 0, 0,0, 0.0*Math.PI,1,'','','',1,['','','',''],'scene'], ['landscape/sbp',1, 0, 0,180, 1.0*Math.PI,1,'','','',1,['','','',''],'scene'], ['landscape/sbu',1, 0, 0,1120, 1.0*Math.PI,1,'','','',1,['','','',''],'scene'] ] ], //        staffobj: [ ['game/models2/'], [ ] ], //  progobj: [ [ ] ] },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、これらのすべてのサブ配列を連想配列に再作成することをお勧めします。そうしないと、サブ配列内のパラメーターの順序が明確になりません...

3Dモデル

別の興味深いこと。 モデルの読み込み。 私のライブラリは、テクスチャ付きの3Dモデルを受け入れ、名前に応じていくつかのパラメーターを個々の要素（メッシュ）に自動的に設定します。 実際、たとえばモデルの場合、影を落とすように設定されている場合、そのコンポジションに含まれる各メッシュによってキャストされます。 モデル全体が完全に影を落としたり、パフォーマンスに強く影響する他のプロパティを取得したりする必要は必ずしもありません。 したがって、各メッシュを個別に考慮する必要があることを示す特定のフラグをオンにすると、ロード時に、このメッシュまたはそのプロパティを持つメッシュと持たないメッシュを決定できます。 たとえば、家の平らな水平な屋根や、大きな背景に対してモデルの小さな無関係な細部の多くによって影を落とす必要はまったくありません。 それでも、プレーヤーはこれらの影を見ることができず、ビデオプロセッサの電力がそれらの影を処理するために使用されます。



これを行うには、グラフィックエディター（Blender、Maxなど）で、特定のルールに従って（オブジェクト名フィールドで）メッシュの名前をすぐに指定できます。 アンダースコア（_）が必要です。 条件付き制御文字は左側に配置する必要があります。たとえば、d-ダブルサイド（メッシュは双方向、そうでない場合は-片方向）、c（キャストシャドウ）-シャドウをキャスト、r（シャドウを受信）-シャドウを取得します。 つまり、たとえば、家のパイプメッシュの名前はcr_tubeになります。 他の多くの文字も使用されます。 たとえば、「l」はコライダーです。つまり、crl_wall01という名前の家の壁は、プレーヤーが自分自身を通り抜けることができず、影を落とします。 屋根やドアハンドルなどのコライダーを作成する必要はなく、それによってパフォーマンスが低下します。 既に理解しているように、モデルをロードするとき、私のライブラリはメッシュの名前を解析し、それらにシーン上の対応するプロパティを与えます。 ただし、このためには、3Dエディターからモデルをエクスポートする前に、すべてのメッシュに正しく名前を付ける必要があります。 これにより、パフォーマンスが大幅に節約されます。



オブジェクト内のメッシュのすべての制御フラグ：

col_ ...はコライダーです。 このようなメッシュは、単純に透明で見えないコライダーとして表示されます。 エディターでは、彼は何にでも見えますが、その形だけが重要です。 たとえば、プレーヤーがこのモデル（建物、大きな石など）を通過できないようにする必要がある場合、モデル全体を平行六面体にすることができます。



l_ ...は衝突可能なオブジェクトです。 メッシュにコライダープロパティを与える。



i_ ...-交差点。 メッシュは交差リストに追加されます。このリストを使用して、たとえば、クリックする、つまりゲーム内で双方向性を提供できます。



j_ ...交差点も。 上記と同じ、新しいバージョンのみ-ゲーム内の交差点を見つけるためのアルゴリズムが改善され、リソース消費が少なくなりました。



e_ ...-家のドアの交差点（入口/出口）。 他のオブジェクトメッシュ上の交差を除外します。 他のすべてのインタラクティブな要素を除外して、ドアだけをインタラクティブにすることが家で必要な場合に使用されます。 想像力で、あなたはこれと他のトンの用途を思いつくことができます。



c_ ...-影を落とします。 メッシュは影を落とします。



r_ ...-影を受け取ります。 メッシュは、それらを投影する他のすべてのメッシュからの影を受け入れます。



d_ ...-両面（両面）。 両側に表示され、テクスチャは両側に重ねられます。



t_ ...-透明（透明）、three.jsでオブジェクト全体がalphatestに設定されている場合。



u_ ...-オブジェクト全体がthree.jsでalphatestを指定していない場合、固定密度（0.4）の透明（透明）。



g_ ...-ガラス。 固定透明度が設定されています（0.2）。



h_ ...-不可視（非表示）。 オブジェクトをシーンに追加するときに非表示にする必要があるオブジェクトの部分（メッシュ）。 非表示のリストに入力されました。



v_ ...表示されます。 「h」のマークが付いたオブジェクトを除くすべてのオブジェクトはすでに表示されていますが、フラグ「v」を使用すると、別のリストに入力され、さらに非表示または他の操作が可能になります。

その結果、メッシュの名前は次のようになります：crltj_box1（キャスト、シャドウを受け入れる、コライダー、透明、インタラクティブ）。 そして、同じモデルの一部としての別のメッシュ：cr_box2（キャストのみを行い、影を取ります）当然、制御文字は任意の順序で設定できます。 したがって、エディターから、ゲーム内のオブジェクトの一部の将来の表示を制御したり、むしろそれらのプロパティの一部を制御したり、同時に計算能力を節約したりできます。

ゲームの本質

実際、物語が正方形のフィールドの周囲を動き回り、企業を買収するというゲームの意味。 フィールドは3Dストリートの形で作成されます。 ゲームの経済モデルは、その種類のものとは大きく異なります。 私のゲームでは、誰かがビジネスを始めると、あなたの期待利益は下がります。 逆に、何かを発見すると増加します。 損益の計算はすべて、開始フィールドの税務調査官で行われます。 また、銀行から融資を受けたり、証券を取引したり、他の多くのことを行うこともできます。 古いバージョンと比較してAIの動作を改善しました。 ゲームのほぼすべての3Dモデルとテクスチャを最適化し、パフォーマンスを最適化しました。 より多くの設定を行いました。

アニメーション

ゲームオブジェクトの動きをアニメーション化するために、最も単純なエンジンが使用されます。これは、特定のフレームレート（60番目に制限されます）で、特定の時間間隔の数値パラメーターを変更し、中間値をハンドラーに渡します。 また、ハンドラーでは、たとえば、モデルが表示されます。



たとえば。 空間内のオブジェクトobjを位置（10; 10; 50）からポイント（100; 300; 60）に移動する必要があります。 初期値と最終値を指定して、3つのパラメーターを設定します。 x座標は10から100まで、yは10から300まで、zは50から60まで変化します。これはすべて、たとえば4秒で発生します。

 m3d.lib.anim.add( 'moveobj', 1, 4000, 'and', {userpar1:111, obj:my3DObject}, [ {lim1:10, lim2:100, sstart:10, sfin:100, t:0}, {lim1:10, lim2:300, sstart:10, sfin:300, t:0}, {lim1:50, lim2:60, sstart:50, sfin:60, t:0} ], function(){ myPeriodicFun(this); }, function(){ myFinishFun(this); } ); m3d.lib.anim.play();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5つのパラメーターの最初の行：moveobj-アニメーションの名前（任意）、1-ストリーム番号（無制限の数のストリームでオブジェクトを並行してアニメーション化できます）、4000-アニメーション時間4秒、および-未使用のパラメーター（将来的に遷移ロジックを担当します）まで同じストリーム内のアニメーション間で、userparはパラメーターとしてハンドラーに渡される連想配列です。たとえば、計算された半径、正弦、余弦、および一般にこのアニメーションに対して計算された値で、これらを計算しない 各反復の時間について。 または、実際にアニメーション化する3Dオブジェクトを参照します。



次は、可変パラメーターを持つ配列です。 最初のパラメーターはx座標の変化、2番目はy、3番目はzであることがわかります。 lim1とlim2に、それぞれのサイズとサイズを変更します。 sstartとsfinでは、同じ値を指定します。 ここで、たとえば他の値から開始を指定できます。パラメータは、そこから円に「スクロール」し、lim2をバイパスし、lim1で新しい「回転」を開始します。 たとえば、アニメーションがいくつかの値（lim1とlim2）の間でループする場合、これは必要ですが、最初から（つまり、lim1からではなく）中間値から開始する必要があります。



t：0は、このパラメーターのアニメーションが、合計時間（4000）に応じて1回実行されるように設定します。 メイン時間よりも短い別の数値を設定すると、このパラメーターはループされ、メインアニメーションの時間（4000）まで繰り返されます。 これは、たとえば、角度が360度の境界を繰り返し交差して0にリセットする必要がある場合に、オブジェクトの回転を設定するのに便利です。



次に2つのコールバックがあります-各反復で実行されるコールバックと、アニメーション全体の終了時に1回実行されるコールバック（終了ポイント）。



たとえば、最初のコールバックmyPeriodicFun（this）は、次のようになります。

 myPeriodicFun:function(self) { var state=self.par[0].state, state_old=self.par[0].state_old; var state2=self.par[1].state, state_old2=self.par[1].state_old; var state3=self.par[2].state, state_old3=self.par[2].state_old; if ((state!=state_old)||(state2!=state_old2)||(state3!=state_old3)) { var obj=self.userpar.obj; obj.position.x=state; obj.position.y=state2; obj.position.z=state3; ap.cameraFollowObj(obj); }; },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、動きの各反復で、与えられたすべてのアニメーションパラメーターの計算された中間値を含むパラメーター（self）がこの関数にスローされます：self.par [0] .state、self.par [1] .state、self.par [2] .state。 これは現在のx、y、zです。 たとえば、アニメーションが4秒続く場合、2秒後にxは（100-10）/ 2 = 45に等しくなります。すべての座標についても同様です。 したがって、myPeriodicFunでは、これらの座標でオブジェクトを表示するだけです。ブラウザが遅れ始めたり、このハードウェア上でゆっくりと動作したりする場合、怖くないわけではありません。合計アニメーション時間は変わらず、フレームレートのみが低下し、画像がスライドショーに変わります。



f（（state！= State_old）...、つまり、新しい計算値が古い値と等しいかどうか（state_oldが前の反復で計算された値を記憶している）を確認する理由1未満の場合、オブジェクト全体を再描画せず、システムのパワーを消費せず、アニメーションエンジンはstateおよびstate_oldの整数を生成します。 1ピクセルでも、再描画する必要はありません。画面上の位置は変わりません。



一般に、アニメーションは、コールバック関数への中間値の配信による特定の時間内の任意の数のパラメーターの単純な変化として理解されます。たとえば、オブジェクトの回転角度を担当する別の4番目のパラメーターを追加できます。また、多くのオブジェクトのパラメーターが何らかの形で均一に移動する場合、通常は1つのアニメーションに詰め込むことができます。アニメーションを異なるストリームに配置すると、アニメーションが並列処理されます。 （m3d.lib.anim.add（））を1つのストリームにアニメーションのシーケンス全体を追加すると、それらは次々に実行されます。さらに、各スレッドには独自の独立したシーケンスがあります。主なことは、システムに十分な電力があり、すべてがスライドショーにならないことです。



ここでのPSストリームは、すべての並列アニメーションの各反復での順次列挙と、すべてのパラメーターの中間値のそれぞれの計算によって単純に実装されます。つまり、javascriptには実際のマルチスレッドはありません。



同じ「エンジン」を使用して、画面プレーン上の2つの座標を変更するように設定し、取得した中間値に従ってコールバック関数にこれらの要素を表示することにより、インターフェイスの要素をアニメーション化することもできます 実際、これは私のゲームで行われます。

ダイナミックシャドウ

シーン全体に影を表示することは非常に無駄であることが判明したため、影をオンにすると、fpsが数回低下しました。これはダメです。プレーヤーの周囲の特定の小さな正方形にオブジェクトの影を表示します。そのような手法は、フレームレートを大幅に向上させるとすぐに言います。



ここで複雑なことはありません。Three.jsシャドウは、ボックスで定義された特定のシャドウカメラ（shadowCameraLeft、shadowCameraRight、shadowCameraTop、shadowCameraBottom）内に投影されます。シーン全体に引き伸ばすことも、メインカメラに追従してその周辺のみに影を落とすように作成することもできます。このシステムに追加したのは、シャドウを更新するステップだけです。システムに計算がロードされるため、プレイヤーがひきつるたびにこの更新を行う必要はまったくありません。影が更新されるように、3つの軸のいずれかに沿って特定の最小距離を超えてください。



私のライブラリでは、3Dワールドを初期化するときに、contrオブジェクトが作成されます。このオブジェクトには、常にカメラの座標が含まれます。そこにカスタムパラメータcontr.cameraForShadowStepを設定することもできます。これには、シャドウカメラの位置が変化するカメラ位置のステップが含まれます。



たとえば、シャドウカメラの平行六面体の寸法が700x700x700の場合、contr.cameraForShadowStepは、たとえば20に設定できます。また、プレーヤーがいずれかの軸に沿って20移動すると、初期位置が再び記憶され、プレーヤーの周囲のシャドウが更新されます。 3Dエディターですべてのモデルが作成されたスケールに応じて、3Dワールドのスケールは任意です。また、700x700x700と20の代わりに、7000x7000x7000と200を使用する必要がある可能性があります。しかし、これは本質を変えるものではありません。



ところで、太陽が空を移動するとき、影の方向はそこで変化するはずなので、影はこのシステムとは無関係に更新されます。つまり、プレーヤーが移動せずに立っている場合でも更新されます。そこでは、空を更新する期間までに影を更新する機能が愚かに呼ばれています。

ポイントライトシステム

ステージ上に12を超える点光源が存在すると、ダイナミックシャドウと同じくらいfpsに当たります。そして、古い「麻」を演奏することさえ不可能にします。さらに、これらのソースがプレーヤーの視野内（世界のレンダリングの範囲を設定可能）にあるか、かなりの距離にあるかは関係ありません。それらがステージ上に愚かに存在する場合、すべてがゆっくり動作します。したがって、3Dワールドを読み込む前に呼び出すことができるゲームの設定メニューで、「灯籠の灯」と呼ばれるそのようなソースの数（2、4、または8）のオプションを提供しました。









そのため、夜間、ステージに置かれたすべてのライトを同時に点灯しても機能しません。上記では、ワールド初期化スキームの説明で、userPointLightsとlightsPDynamicArの配列を紹介しました。 userPointLightsでは、ステージ上のすべてのランプの座標が配列に設定されます。 lightsPDynamicArには、8つのインスタンスすべてのライト設定が含まれています。ライトの数の設定に応じて、ライブラリは最初のライトを取得し、プレーヤーの視野内のシーンに追加します。



実際、プレーヤーの移動中に、userPointLightsランタン座標の配列を使用して、プレーヤーに最も近い2〜8個のランタンが検索されます。そして、点光源はそれらの下を移動します。つまり、2〜8個の照明ランプがプレイヤーを取り囲み、プレイヤーを囲んでいます。さらに、これはfpsのすべてのフレームではなく、特定のステップで実行されます。特にプレーヤーが動いていない場合は、検索機能を毎秒60回開始する必要はまったくありません。その場合、周囲で既に見つかっているライトを燃やします。



これが動きの様子です（Xeon E5440、GeForce GT730）：

配布ビルド

高度なメモ帳を除く高度な開発環境を使用していないため、各* .jsファイルのコードを難読化するためにGoogle Closure Compilerが呼び出されるbatファイルを作成しました。そして、nw.jsバンドルのnwjc.exeがそこで呼び出され、jsをバイナリ（* .bin）にコンパイルします。ファイルの1つの例を示します。

java -jar D：\ webservers \ Closure \ compiler.jar --js D：\ webservers \ proj \ m3d \ www \ game \ bus \ bus.js --js_output_file D：\ webservers \ proj \ nwProjects \ bus \ game \ bus \ bus.js



cd D：\ "Program Files" \ Web2Exe \ down \ nwjs-sdk-v0.35.5-win-ia32



D：\ "Program Files" \ Web2Exe \ down \ nwjs-sdk-v0.35.5-win -ia32 \ nwjc.exe D：\ webservers \ proj \ nwProjects \ bus \ game \ bus \ bus.js D：\ webservers \ proj \ nwProjects \ bus \ game \ bus \ bus.bin



del D：\ webservers \ proj \ nwProjects \バス\ゲーム\バス\ bus.js

次に、単純なWeb2Executableユーティリティを使用して、Windows用のアセンブリを含むexeファイルを作成します。新しいものが利用可能ですが、私はnw.jsバージョン0.35.5を選択しました。アセンブリのサイズを大きくすることを除いて、それらの効果に気付きませんでした。









このユーティリティは、選択したバージョンのnw.jsを指定したフォルダー自体にダウンロードできます。出力はアセンブリです。35メガバイトの実行可能ファイルには、実際にはゲーム自体が含まれています。それ以外はすべてnode-webkitです。localesフォルダーには、明らかに、いくつかの異なる言語のリソースを持つファイルが含まれています。それらを削除し、英語に関連するものだけを残しました。ところで、これはゲームのロシア語版の起動を妨げませんでした（ゲームでは、言語はロシア語と英語の間で切り替わります）。なぜこれらすべてのファイルは、私にはわかりません。しかし、英語がなければ、何も始まりません。



アセンブリ全体は最終的に167 MBかかりました。









次に、この目的のために設計された無料のユーティリティのいずれかを使用して、すべてを1つの実行可能な配布ファイルにパックし、出力は70.2 MBのBusinessman3DSetup.exeでした。

転記

アセンブリをさまざまなアプリストアに送信しました。それらのほとんどはまだ私のゲームをモデレートするプロセスにあります。現時点では、かゆみのみがこれを公開しています。私はすぐに警告します、ゲームは支払われます、価格は3ドルです。まだ購入していませんが、私はまだそのプロモーションに従事していません。 GOGは、ゲームが非常にシンプルでニッチであるという事実を引用して、公開を拒否しました。私は原則として同意します。 Epic Storeも同じことをすると思います。



ゲームの公開バージョンは1〜5のボットを持つシングルユーザーです。言語-ロシア語と英語。ネットワークバージョンを終了する予定です。しかし、考えながら-同じアプリケーションの形で、またはWindows、Linux、iO、MacOですぐに利用可能なWebブラウザーバージョンの形で、一般的にブラウザーがWebGLをサポートしている場所でリリースすること。実際、webkitはブラウザであり、Firefox、Edge、WindowsのIE11でもゲームは正常に動作しますが、後者では非常に遅いです。

結論

エンジンはまだ完成していないので、一般的な使用のためにエンジンをレイアウトする準備がまだ整っていないと思います。まず、別のゲームを作成します。船に関するデモビデオのゲームです。このゲームでは、ウォーターシェーダーを使用して作業を「実行」できるからです。さらに、そこに簡単な物理エンジンを実装する予定です。はい、他のすべての機能を終了し、すべての欠陥を修正する必要があります。いくつかのニュアンスが可能であるため、1つではなく2つのゲームでこれを行うことをお勧めします。一方で、私の意見では、私のエンジンは1つのゲームに対してはあまりにも鋭くなりすぎています。



さらに、私は誰もがこれをすべて必要としているとはまったく確信していません。地味に見れば、誰も純粋なjavascriptでゲームを書いていない。しかし、ゲームはブラウザにとって非常に簡単で高速なので、私はそれが好きです。それらは高速でロードされ、多くのRAMを必要とせず、2Dと比較しても、html5の競合他社と比較して非常に高速に動作します。これらすべての開発で、複数のブラウザゲーム（だけでなく）をリリースすると思います。