javascript - webglダッシュライン

Question

Three.jsやその他のツールキットを使用せずにWebGLで破線を描画する方法を教えてもらえますか？単なるWebGLです。私はWebGLに非常に慣れていないので、この質問に対する答えを見つけることができないようです。

Answer 1

WebGL（またはOpenGL ES）にはネイティブの点線はありませんが、VBOに「これまでの長さ」の頂点属性を含めると、フラグメントシェーダーを使用して効果を簡単に実現できます。

precision highp float;
varying float LengthSoFar; // <-- passed in from the vertex shader
const vec3 Color = vec3(1, 1, 1);
const float NumDashes = 10.0; // 10 dashes for every 1 unit in LengthSoFar

void main()
{
    float alpha = floor(2.0 * fract(LengthSoFar * NumDashes));
    gl_FragColor = vec4(Color, alpha);
}

別の方法は、1Dテクスチャにルックアップを作成することです。これまでの長さ属性は、実際には1Dテクスチャ座標にすぎません。

Answer 2

私が過去に行ったことは、ユースケースに合わないかもしれませんが、パスのポイントを含む頂点バッファーを作成し、それを使用して描画することです

gl.drawArrays(gl.LINES, 0, vertexCount);

を使用gl.LINESすると、パスの他のすべてのセグメントが自然に「スキップ」され、パス ポイントが十分に頻繁にある場合に破線の効果が作成されます。シンプルでハックですが、適切な状況では効果的です。