javascript - linie punctată webgl

Poate cineva să-mi spună cum să desenez linii punctate în WebGL fără a folosi Three.js sau orice alt kit de unelte? Doar WebGL simplu. Sunt foarte nou în WebGL și nu reușesc să găsesc răspunsul la această întrebare.

Răspuns #1

Nu există linii punctate native în WebGL (sau OpenGL ES), dar efectul este ușor de realizat cu un fragment shader, dacă incluzi un atribut de vertex „lungime până acum” în VBO-ul tău.

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);
}

O metodă alternativă ar fi să se facă o căutare într-o textură 1D. Atributul de lungime-până-acum este de fapt doar un coordonat de textură 1D.

Răspunsul #2

Ceva ce am făcut în trecut, deși poate să nu se potrivească cazului tău de utilizare, este să creez un buffer de vârfuri care conține punctele unui traseu, apoi să-l desenez folosind

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

Folosind gl.LINES se „sare” în mod natural peste fiecare segment alternativ al traseului, creând un efect de linie punctată dacă punctele traseului sunt suficient de dese. Este simplu și improvizat, dar eficient în circumstanțele potrivite.