0

複数のポリゴン シェイプを描画したい (各シェイプには独自の頂点セットがある)。これらの形状を互いに独立して配置できるようにしたいと考えています。

頂点シェーダーの a_Position を設定するには、どの API を使用できますか?

  • A) gl.vertexAttrib3f
  • B) gl.vertexAttribPointer + gl.enableVertexAttribArray

ありがとう。

4

1 に答える 1

1

あなたの質問は、あなたが本当に WebGL に慣れていないように聞こえますか? 多分あなたはいくつかのチュートリアルを読むべきですか？しかし、あなたの質問への答えとして：

gl.vertexAttrib3fでは GLSL 属性に 1 つの定数値しか指定できないため、 and を使用する必要がありgl.vertexAttribPointerますgl.enableVertexAttribArray。また、頂点データを使用してバッファーを設定する必要があります。

gl.vertexAttrib3f唯一のポイントは、複数の属性を使用するシェーダーがあり、それらすべてのデータを持っていない場合に、定数を渡せるようにすることです。たとえば、両方のテクスチャを使用するシェーダーがあり、テクスチャ座標が必要であり、頂点カラーもあるとします。このようなもの

頂点シェーダー

attribute vec4 a_position;
attribute vec2 a_texcoord;
attribute vec4 a_color;

varying vec2 v_texcoord;
varying vec4 v_color;

uniform mat4 u_matrix;

void main() {
  gl_Position = u_matrix * a_position;

  // pass texcoord and vertex colors to fragment shader
  v_texcoord = a_texcoord;
  v_color = v_color;
}

フラグメントシェーダー

precision mediump float;

varying vec2 v_texcoord;
varying vec4 v_color;

uniform sampler2D u_texture;

void main() {
   vec4 textureColor = texture2D(u_texture, v_texcoord);

   // multiply the texture color by the vertex color
   gl_FragColor = textureColor * v_color;
}

このシェーダーには頂点カラーが必要です。ジオメトリに頂点カラーがない場合は、2 つのオプションがあります (1) 別のシェーダーを使用する (2) 頂点カラーのアトリビュートをオフにして、一定のカラー (おそらく白) に設定します。

gl.disableVertexAttribArray(aColorLocation);
gl.vertexAttrib4f(aColorLocation, 1, 1, 1, 1);

頂点カラー データがなくても、同じシェーダーを使用できるようになりました。

同様に、テクスチャ座標がない場合は、白い 1 ピクセル シェーダを渡して、テクスチャ座標を何らかの定数に設定できます。

gl.displayVertexAttribArray(aTexcoordLocation);
gl.vertexAttrib2f(aTexcoordLocation, 0, 0); 

gl.bindTexture(gl.TEXTURE_2D, some1x1PixelWhiteTexture);

その場合、頂点カラー アトリビュートを設定して、描画する色を決定することもできます。

gl.vertexAttrib4f(aColorLocation, 1, 0, 1, 1);  // draw in magenta
于 2014-06-03T07:53:15.293 に答える