Pure WebGL Dashed Line

Pure WebGL Dashed Line

本文关键字：Line Dashed WebGL Pure      更新时间：2023-09-26

我正在尝试使用纯webgl创建一条虚线。 我知道已经有一个关于这个问题的问题，也许我很笨，但我不知道如何让它工作。 我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。 之前的答案有以下几行：

varying float LengthSoFar; // <-- passed in from the vertex shader

那么我该如何获得LengthSoFar？ 如何在顶点着色器中计算它？

我完全错过了什么吗？ 有人可以给我一个工作的例子吗？ 或者至少一些好的线索？ 几天来，我一直在用头撞墙。

我假设它是这样工作的。您有一个仓位缓冲区。你制作一个相应的缓冲区lengthSoFar所以，

function distance(array, ndx1, ndx2) 
{
  ndx1 *= 3;
  ndx2 *= 3;
  var dx = array[ndx1 + 0] - array[ndx2 + 0];
  var dy = array[ndx1 + 1] - array[ndx2 + 1];
  var dz = array[ndx1 + 2] - array[ndx2 + 2];
  return Math.sqrt(dx * dx + dy * dy + dz * dz);
}
var positions = 
[
  0.123, 0.010, 0.233,
  0.423, 0.312, 0.344,
  0.933, 1.332, 0.101,
];
var lengthSoFar = [0];  // the length so far starts at 0
for (var ii = 1; ii < positions.length / 3; ++ii) 
{
  lengthSoFar.push(lengthSoFar[ii - 1] + distance(positions, ii - 1, ii));
}

现在，您可以为positions和lengthSoFar创建缓冲区，并将lengthSoFar作为属性传递到顶点着色器中，然后从那里将其作为变体传递给片段着色器。

不幸的是，它不适用于索引几何体(最常见的类型？换句话说，它不适用于gl.drawElements，只能与gl.drawArrays一起使用。此外，虚线将以 3D 而不是 2D 形式虚线，因此进入屏幕(远离观众(的线条看起来与穿过屏幕的线条不同。当然，如果您正在绘制2D，则没有问题。

如果这些限制对您有好处，这是否回答了您的问题？

const gl = document.querySelector("#c").getContext("webgl");
// Note: createProgramFromScripts will call bindAttribLocation
// based on the index of the attibute names we pass to it.
var program = twgl.createProgramFromScripts(
    gl, 
    ["vshader", "fshader"], 
    ["a_position", "a_lengthSoFar"]);
gl.useProgram(program);
function distance(array, ndx1, ndx2) 
{
  ndx1 *= 3;
  ndx2 *= 3;
  var dx = array[ndx1 + 0] - array[ndx2 + 0];
  var dy = array[ndx1 + 1] - array[ndx2 + 1];
  var dz = array[ndx1 + 2] - array[ndx2 + 2];
  return Math.sqrt(dx * dx + dy * dy + dz * dz);
}
// Used this line in the console to generate the positions
// var sub = 10; for (var ii = 0; ii <= sub; ++ii) { r = (ii & 1) ? 0.5 : 0.9; a = ii * Math.PI * 2 / sub; console.log((Math.cos(a) * r).toFixed(3) + ", " + (Math.sin(a) * r).toFixed(3) + ", "); }
var positions = [
  0.900, 0.000, 0,
  0.405, 0.294, 0,
  0.278, 0.856, 0,
  -0.155, 0.476, 0,
  -0.728, 0.529, 0,
  -0.500, 0.000, 0,
  -0.728, -0.529, 0,
  -0.155, -0.476, 0,
  0.278, -0.856, 0,
  0.405, -0.294, 0,
  0.900, -0.000, 0,
];
    
var lengthSoFar = [0];  // the length so far starts at 0
for (var ii = 1; ii < positions.length / 3; ++ii) 
{
  lengthSoFar.push(lengthSoFar[ii - 1] + distance(positions, ii - 1, ii));
}
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
var vertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(lengthSoFar), gl.STATIC_DRAW);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 1, gl.FLOAT, false, 0, 0);
// Since uniforms default to '0' and since 
// the default active texture is '0' we don't
// have to setup the texture uniform. 
var pixels = [
    0, 0, 255, 255,
    0, 0, 255, 255,
    0, 0, 255, 255,
    0, 0, 255, 255,
    0, 0, 0, 0,
    0, 0, 0, 0,
    255, 0, 0, 255,
    0, 0, 0, 0,
    0, 0, 0, 0,
    255, 0, 0, 255,
    0, 0, 0, 0,
    0, 0, 0, 0,
];
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
    gl.TEXTURE_2D, 0, gl.RGBA, pixels.length / 4, 1, 0,
    gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(pixels));
gl.texParameteri(
    gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(
    gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.drawArrays(gl.LINE_STRIP, 0, positions.length / 3);
canvas { border: 1px solid black; }
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script id="vshader" type="whatever">
    attribute vec4 a_position;
    attribute float a_lengthSoFar;
    varying float v_lengthSoFar;
    void main() {
      gl_Position = a_position;
      v_lengthSoFar = a_lengthSoFar;
    }    
</script>
<script id="fshader" type="whatever">
precision mediump float;
varying float v_lengthSoFar;
uniform sampler2D u_pattern;
#define NumDashes 6.0
void main() {
    gl_FragColor = texture2D(
      u_pattern, 
      vec2(fract(v_lengthSoFar * NumDashes)), 0.5);
}
</script>
<canvas id="c" width="300" height="300"></canvas>

注意：这里有一篇文章可能有助于解释变化的工作原理

另请注意，您无法更改线条的粗细。为此，您需要从三角形绘制线条

将

"LengthSoFar"作为顶点属性传递给着色器。当你在javascript代码中创建着色器程序(js部分，而不是着色器部分(时，你可以创建类似的东西

program.lengthSoFar = gl.getAttribLocation(program, 'aLengthSoFar');

其中 aLengthSoFar 在顶点着色器的属性中

我在webgl上推荐本教程，它具有所有基础知识：http://www.youtube.com/watch?v=me3BviH3nZc

你很快就会意识到webgl中图形编程的问题。虽然着色器编程本身并不难，但在 js 和 webgl 中设置所有细节以开始使用是非常痛苦的。

提示：永远记住，图形编程是一条单行道。你有你的模型，即javascript代码。此模型会将信息发送到顶点着色器，顶点着色器会将信息发送到片段着色器，该着色器将在屏幕上显示像素。不幸的是，没有可以削减的角落。

这就是为什么他们想出了属性和变化这样的东西。您可以从 javascript 在顶点着色器中设置属性(如函数中的参数(。但属性是只读的。因此，您必须复制它们并将它们作为变体传递给片段着色器。

相关文章：