タグ付けされた質問 「webgl」

ブラウザJavaScript-グラフィックス用WebGL、ネットワーク用WebSocketを備えた本格的な3D MMOクライアントを書くことは技術的に可能だと思いますか？ 将来のMMO（およびゲーム全般）はWebGLで作成されると思いますか？ 今日のJavaScriptのパフォーマンスではこれが可能ですか？ 開発チームが開発者であり、別のモデル作成者（アーティスト）であったとしましょう。ゲームにSceneJSのようなライブラリを使用しますか、それともWebGLを直接作成しますか？SceneJSではなくライブラリを使用する場合は、どれを指定してください。 更新（2012年9月）： RuneScapeは、これまでJavaアプレットを使用していた非常に人気のある3DブラウザーベースのMMORPGであり、クライアント（ソース）にHTML5を使用することを発表しています。 Java（左）およびHTML5（右） 更新（2013年6月）： WebGL / WebSocketベースのMMOのプロトタイプを作成しました：https : //github.com/alongubkin/xylose

29 mmo  webgl  websocket 

フラグメントシェーダーに任意の数のライトの位置（および色）を渡し、シェーダーでそれらをループする方法はありますか？ そうでない場合、複数のライトをどのようにシミュレートするのですか？たとえば、拡散指向性ライティングに関しては、シェーダーのライトウェイトの合計を渡すことはできません。

19 lighting  webgl 

Twitterで、開発中のゲームの次のスクリーンショットを見つけました。 上の画像には色の制限がないようです。しかし、下部にある他の2つの画像には256色のパレットがあります。 私はで同様の効果を達成したい私のゲームを（私はOpenGLを使用しています）。どうすればできますか？

16 opengl  webgl 

webGLまたはOpenGLでドキュメントを読むと、関数とオブジェクトの名前の使用方法にいくつかのパターンが見られます。しかし、バッファオブジェクトと配列の違いを理解できません。 「頂点バッファオブジェクト」、「頂点配列オブジェクト」、さらにある種の「バッファ配列」または「配列バッファ」があります。 OpenGLコンテキストでは、何かが「配列」であり、代わりに「バッファ」と呼ばれるべきときは？

12 opengl  webgl 

WebGLでは、フラグメントシェーダーによって処理される画面スペースクワッドを送信しますが、フラグメントシェーダーに特定の条件下でのみピクセルを書き出させます（たとえば...円の中にあるか、ピクセルは、曲線方程式などで定義された半空間の正の側に属しています。 フラグメントシェーダー内で「ピクセルを書き込まない」と言うことは可能ですか？ これは、アルファブレンディング、これを最初にレンダリングし、ピクセルを描画したくない場所に背景色を配置したり、深度バッファやステンシルバッファでいくつかのトリックを行うなど、他のさまざまな方法を使用して実現できることを知っています。また、レンダリングしたいものと一致するジオメトリの束を作成できることも知っています。 フラグメントシェーダーにピクセルをまったく書き込まないように選択する方法はありますか？

11 graphics  graphics-programming  webgl 

webgl / OpenGL ESのglUniformMatrix4fvの転置値をfalseにする必要があるのはなぜですか？ OpenGL ES仕様では、転置値はfalseである必要があるか、またはINVALID_VALUEが生成されると記載されています。なぜパラメータがあるのですか？

11 opengl-es  webgl 

3Dエンジンでアクティブなアウトラインを設定する作業をしています。選択した3Dキャラクターのハイライト効果や画面の風景です。ステンシルバッファーを操作し、満足のいく結果が得られなかった後（凹面形状の問題、カメラからの距離が原因のアウトラインの厚さ、デスクトップとラップトップ間の不整合）、エッジ検出とフレームバッファーサンプリングに切り替えて、アウトラインを取得しましたかなり満足しています。 ただし、選択したメッシュが別のメッシュの背後にある場合、アウトラインを非表示にできません。これは、残りのシーンをレンダリングした後、フレームバッファーから2Dシェーダーアウトラインをレンダリングするだけなので、私のプロセスを考えると理にかなっています。 結果の2つの画面キャプチャーを以下に示します。1つ目は「良好な」アウトラインで、2つ目は、アウトラインソースをブロックするメッシュ上にアウトラインが表示される場所です。 レンダリングプロセスは次のように実行されます。1）ハイライトされたメッシュのアルファのみを描画し、フレームバッファー（framebuffer1）に黒いシルエットをキャプチャします。 2）テクスチャをframebuffer1からエッジ検出を実行する2番目のシェーダーに渡します。フレームバッファ2でエッジをキャプチャします。 3）シーン全体をレンダリングします。 4）シーンの上部にあるframebuffer2からテクスチャをレンダリングします。 私は達成する方法についていくつかのアイデアを持っているので、それらの有効性、またはより単純な、またはより良い方法についてフィードバックを得たいと思っています。 最初に、シーン全体をフレームバッファーにレンダリングし、強調表示されたメッシュの可視シルエットをアルファチャネルに格納することを考えました（強調表示されたメッシュが表示されているところはすべて白で保存されています）。次に、アルファチャネルでエッジ検出を実行し、シーンフレームバッファーをレンダリングしてから、エッジを上にレンダリングします。次のような結果になります： これを実現するために、ハイライトされたオブジェクトのレンダーパス中にのみ、定義を設定して、可視ピクセルのアルファをすべて黒くすることを考えました。 私の2番目のアイデアは、上で概説した現在のレンダリングプロセスを使用することですが、選択したメッシュのシルエットをレンダリングするときに、framebuffer1のR、G、BチャネルにもX、Y、Z座標を格納します。エッジ検出が実行され、framebuffer2に格納されますが、RGB / XYZ値をアルファのエッジからシルエットに渡します。次に、シーンをレンダリングするときに、座標がframebuffer2に格納されているエッジ内にあるかどうかをテストします。その場合は、現在のフラグメントの深度をテストして、RGBチャネルから抽出された座標（カメラ空間に変換）の前か後ろかを判断します。フラグメントが深度座標の前にある場合、フラグメントは正常にレンダリングされます。フラグメントが背後にある場合は、塗りつぶされたアウトラインカラーとしてレンダリングされます。 私はこのプロジェクトにLibGDXを使用しており、WebGLとOpenGL ESをサポートしたいので、ジオメトリシェーダーや新しいGLSL関数を使用するソリューションはありません。私の提案したアプローチについて誰かがコメントしたり、より良い提案をしたりできるとしたら、本当にありがたいです。

10 opengl  opengl-es  webgl  selection  outline 

現在、WebGLを使用して、ブラウザーで3D一人称シューティングゲームを作成しています。そのようなゲームにマウスルック/フリールックを実装するにはどうすればよいですか？

10 3d  javascript  webgl  first-person-shooter  browser-based-games 

私はWebGLを使い始めて、OpenGL（さらにはOpenGL ES）のエクスペリエンスを簡単に活用できることに満足しています。ただし、私の理解は次のとおりです。 OpenGL ESはOpenGLのサブセットです WebGLはOpenGL ESのサブセットです これはどちらの場合でも正しいですか？その場合、不足している機能を詳しく説明するリソースはありますか？ たとえば、欠落している注目すべき機能の1つはglPushMatrixおよびglPopMatrixです。WebGLには表示されませんが、検索ではOpenGL ESマテリアルで参照されているものは見つかりません。

10 opengl  opengl-es  webgl 

Google SketchUp 8 Proで生成したシンプルな3DオブジェクトをWebGLアプリに描画しようとしています。モデルはシンプルな円柱です。 エクスポートしたファイルを開き、javascriptで使用できるように、頂点の位置、インデックス、法線、テクスチャ座標を.jsonファイルにコピーしました。46.331676などのかなり大きな値と負の値を持つテクスチャ座標を除いて、すべてが正常に機能しているようです。今私は間違っているかどうかはわかりませんが、2Dテクスチャ座標は0.0から1.0の範囲のみであると想定されていませんか？ さて、これらのテクスチャ座標を使用してモデルを描画すると、完全に奇妙な外観が得られます。テクスチャがめちゃくちゃになっているかのように、モデルに非常に近い（実際には私ではなくカム）場合にのみ、テクスチャを正しく表示できますサイズが小さくなり、モデルの面全体で無限に繰り返されます。（そう、私はそのテクスチャラップにGL_REPEATを使用しています） 私が気づいたのは、これらの座標をすべて取得して10または100で割ると、「通常の」外観になりますが、0.0から1.0の範囲ではないということです。 これが私のjsonファイルです：http：//pastebin.com/Aa4wvGvv これが私のGLSLシェーダーです：http : //pastebin.com/DR4K37T9 ここに、SketchUpによってエクスポートされた.Xファイルがあります。http：//pastebin.com/hmYAJZWE また、XNAを使用してこのモデルを描画しようとしましたが、まだ機能しません。このHLSLシェーダーの使用：http : //pastebin.com/RBgVFq08 同じモデルを別の形式、collada、fbx、xにエクスポートしてみました。これらはすべて同じことをもたらします。

9 opengl  textures  models  webgl  uv-mapping 

以下のスクリーンショットのように、六角形のジオメトリで生成された地形があります。 次にバイオームを生成しますが、ご覧のとおり、それらの境界は本当に醜く、まっすぐです。その六角形の原点を隠すには、バイオーム間の境界を滑らかにする必要があります。これは、実際の波状面を含むワイヤーフレームでの外観です。 私が目指しているのは次のようなものです： 各頂点にはバイオームタイプを保持する属性があります。2つのバイオーム間のエッジの頂点に特別な属性を追加することもできますが、これをシェーダーコードで明らかにする方法がわからないようです。明らかにノイズです。ここに含まれていますが、複数のバイオームの複数の顔と境界全体で連続させるにはどうすればよいですか？ THREE.jsを使用してWebGLでレンダリングしています

8 opengl  shaders  webgl  terrain-rendering  noise 

従来の三角形ベースのモデルとパーティクルを、適度なフレームレートでレイトレースされたシーンで構成したいと考えています。 webGLではgl_FragDepth、フラグメントシェーダーでを記述できません。複数のレンダーターゲットを持つことはできませんが、RGBAテクスチャにレンダーしてから、そのテクスチャを別の描画操作への入力として使用できます。そのため、レイトレースされたシーンをレンダリングし、次のステージへの入力として深度を保存できます。これは明らかに理想からかけ離れていますが、実行可能です。 私はこれについて誤解したいのですが、これは決定的なソースではなく試行錯誤から集められたものです。欠陥のある仮定を修正してください GLSLフラグメントシェーダーで、フロートおよび理想的にはいくつかのフラグビットなどをRGBAテクスチャに効率的にパック/アンパックするにはどうすればよいですか？

8 textures  glsl  webgl