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

私はこのような頂点バッファーを持っています： 0.0, 0.0, 1.0, 0.0, 0.0, 0.6, 1.0, 0.6, 0.5, 1.0 次のインデックスバッファがあります。 0, 2, 2, 4, 4, 3, 3, 2, 2, 1, 1, 0, 0, 3, 3, 1 私はgl.LINESWebGLを使用して描画したいことを知っています。これは、複数の分割された線分を意味します。 gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer); WebGLの単一の描画呼び出しで複数の線分の描画を可能にするようです。 誰かELI5が私にできますか？インデックスバッファとは何ですか？それは頂点バッファとどのように関連していますか？プリミティブからインデックスバッファーを生成するにはどうすればよいですか？

11 webgl  line-drawing  mapping  vertex-buffer-object 

まず第一に、深度マップとキューブマップを使用したシャドウマッピングに関する多くの投稿を読み、それらがどのように機能するかを理解しています。また、OpenGLを使用してそれらを使用した経験がありますが、実装に問題があります。 「EZ3」という名前の3Dグラフィックエンジンで単一の点光源を使用した全方向シャドウマッピングテクニック。私のエンジンでは、WebGLを3DグラフィックAPIとして、JavaScriptをプログラミング言語として使用しています。これは、コンピューターサイエンスの学士論文のためです。 基本的に、これはシャドウマッピングアルゴリズムを実装した方法ですが、ポイントライトの場合にのみ焦点を当てます。 まず、次のように前面カリングをアクティブにします。 if (this.state.faceCulling !== Material.FRONT) { if (this.state.faceCulling === Material.NONE) gl.enable(gl.CULL_FACE); gl.cullFace(gl.FRONT); this.state.faceCulling = Material.FRONT; } 次に、各キューブマップ面の深度値を記録するために深度プログラムを作成します。これは、GLSL 1.0の深度プログラムコードです。 頂点シェーダー： precision highp float; attribute vec3 position; uniform mat4 uModelView; uniform mat4 uProjection; void main() { gl_Position = uProjection * uModelView * vec4(position, 1.0); } フラグメントシェーダー： precision highp float; …

9 glsl  webgl  shadow-mapping 

服の輪郭に合わせてテクスチャーをレンダリングする必要があるツールを作成中です。例として、このWebサイトhttps://knyttan.com/editor/jumper-editor/があります。ここでの効果は、カラーマップを使用することによって達成されます。 これに使用されているシェーダーを確認したところ、このマップのカラーチャネルに基づいてテクスチャオフセットが計算されているようです。 これは、これを行う完全に別注の方法なのか、またはこれが既知の技術であり、それが何と呼ばれるのか疑問に思っていました。

8 texture  webgl 

画面が異なれば、ピクセルジオメトリも異なり、赤、緑、青のコンポーネントが異なるパターンで配置されます。サブピクセルレンダリングを使用して見かけの解像度を高くすることは、ピクセルジオメトリがわかっている場合にのみ可能です（あるタイプのモニターで明瞭度を向上させると、別のタイプのモニターでは状況が悪化します）。 モバイル画面ではさまざまなピクセルジオメトリが非常に一般的であるため、デスクトップ/ラップトップとモバイル画面の両方でアプリケーションを実行する必要がある場合、これは特に重要です。 ユーザーに質問することなく、画面が実行時に使用するジオメトリを決定する方法はありますか？これが一般的に可能かどうかに興味がありますが、理想的には、WebGLでJavaScriptを使用するときに可能かどうかを知りたいです。

8 webgl  javascript