Three.js 着色器对象的线框

我想看到一个物体的线框，没有像这样的对角线

目前，我根据顶点添加线，问题是在我有几个顶点之后，我的性能出现了严重下降

这些示例对于我的三个版本来说要么太新，要么不起作用（我在那里对此进行了评论）

所以我想尝试实现一个着色器

我尝试使用这个着色器：但它将形状分解为多个部分，并且我得到了WebGL错误

我就是这样使用它的：

const vertexShader = `
varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`

const fragmentShader = `
#version 150 compatibility                                         
flat in float diffuse;
flat in float specular;
flat in vec3  edge_mask;                                           
in vec2 bary;
uniform float mesh_width = 1.0;
uniform vec3 mesh_color = vec3(0.0, 0.0, 0.0);
uniform bool lighting = true;
out vec4 frag_color ;
float edge_factor(){                                               
  vec3 bary3 = vec3(bary.x, bary.y, 1.0 - bary.x - bary.y);
  vec3 d = fwidth(bary3);
  vec3 a3 = smoothstep(vec3(0.0, 0.0, 0.0), d * mesh_width, bary3);
  a3 = vec3(1.0, 1.0, 1.0) - edge_mask + edge_mask * a3;
  return min(min(a3.x, a3.y), a3.z);
}
void main() {                                                      
  float s = (lighting && gl_FrontFacing) ? 1.0 : -1.0;
  vec4  Kdiff = gl_FrontFacing ?
    gl_FrontMaterial.diffuse : gl_BackMaterial.diffuse;
  float sdiffuse = s * diffuse;
  vec4 result = vec4(0.1, 0.1, 0.1, 1.0);
  if (sdiffuse > 0.0) {
    result += sdiffuse * Kdiff +
      specular * gl_FrontMaterial.specular;
  }
  frag_color = (mesh_width != 0.0) ?
    mix(vec4(mesh_color, 1.0), result, edge_factor()) :
    result;
}`     

所以要实现这个着色器，正确的方法是基本上检查每两个顶点之间的角度，如果度是90，就画一条线

如何从顶点着色器访问形状的所有顶点

我如何告诉片段着色器在两个顶点之间画一条符合上述条件的线？（同时保留其他所有内容的默认着色）

---

我使用的Autodesk viewer使用Three.js rev 71

兴趣Q，无答案，但-建议1）如果我们使用绘制线模式，并正确再生顶点和整个几何体（仅绘制前面可见的片段），我们也可以获得良好的优化效果（顶点数最少）。2） 也许glBlend可以在某种程度上有所帮助。3） 进行着色器计算以剪切不需要的值…@NikolaLukic“绘制线模式并正确再生顶点”这意味着什么？您不需要背面线，一种可能的方法是在运行时（在每个绘图框上）制作新的几何体，仅具有所需的视觉效果（顶点）。原始对象几何体和相机的位置/旋转将作为计算的基础值。对于立方体（示例）-新立方体几何体有3个（也可以是2个或1个）边，而不是按通常顺序排列的6个边。对不起，我英语不好。我希望您理解我的评论，您的着色器对WebGL无效。这一行尤其是

#版本150兼容性

无效。您的着色器未成功编译，因此您会收到与错误着色器相关的错误。这些线在浮动漫反射中也是平坦的也是WebGL2吗？我仍然会在删除这些行和变量时出错@gmanInterest Q，没有答案，但是-建议1）如果我们使用绘制线模式，并正确地重新生成顶点和整个几何体（只绘制前面可见的片段），我们也可以得到很好的优化（顶点数最少）。2） 也许glBlend可以在某种程度上有所帮助。3） 进行着色器计算以剪切不需要的值…@NikolaLukic“绘制线模式并正确再生顶点”这意味着什么？您不需要背面线，一种可能的方法是在运行时（在每个绘图框上）制作新的几何体，仅具有所需的视觉效果（顶点）。原始对象几何体和相机的位置/旋转将作为计算的基础值。对于立方体（示例）-新立方体几何体有3个（也可以是2个或1个）边，而不是按通常顺序排列的6个边。对不起，我英语不好。我希望您理解我的评论，您的着色器对WebGL无效。这一行尤其是

#版本150兼容性

无效。您的着色器未成功编译，因此您会收到与错误着色器相关的错误。这些线在浮动漫反射中也是平坦的也是WebGL2吗？我仍然会在删除这些行和变量时出错@格曼

// -- Vertex Shader --
precision mediump float;

// Input from buffers
attribute vec3 aPosition;
attribute vec2 aBaryCoord;

// Value interpolated accross pixels and passed to the fragment shader
varying vec2 vBaryCoord;

// Uniforms
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjMatrix;

void main() {
    vBaryCoord = aBaryCoord;
    gl_Position = uProjMatrix * uViewMatrix * uModelMatrix * vec4(aPosition,1.0);
}
// ---------------------

// -- Fragment Shader --
// This shader doesn't perform any lighting
precision mediump float;

varying vec2 vBaryCoord;

uniform vec3 uMeshColour;

float edgeFactor() {
    vec3 d = fwidth(vBaryCoord);
    vec3 a3 = smoothstep(vec3(0.0,0.0,0.0),d * 1.5,vBaryCoord);
    return min(min(a3.x,a3.y),a3.z);
}

void main() {
    gl_FragColor = vec4(uMeshColour,(1.0 - edgeFactor()) * 0.95);
}
// ---------------------

/*
    This code isn't tested so take it with a grain of salt

    Idea taken from
    http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/
*/

// -- Vertex Shader --
precision mediump float;

// Input from buffers
attribute vec3 aPosition;
attribute vec2 aBaryCoord;

// Value interpolated accross pixels and passed to the fragment shader
varying vec2 vBaryCoord;

// Uniforms
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjMatrix;

void main() {
    vBaryCoord = aBaryCoord;
    gl_Position = uProjMatrix * uViewMatrix * uModelMatrix * vec4(aPosition,1.0);
}
// ---------------------

// -- Fragment Shader --
// This shader doesn't perform any lighting
precision mediump float;

varying vec2 vBaryCoord;

uniform vec3 uMeshColour;

float edgeFactor() {
    vec3 d = fwidth(vBaryCoord);
    vec3 a3 = smoothstep(vec3(0.0,0.0,0.0),d * 1.5,vBaryCoord);
    return min(min(a3.x,a3.y),a3.z);
}

void main() {
    gl_FragColor = vec4(uMeshColour,(1.0 - edgeFactor()) * 0.95);
}
// ---------------------

/*
    This code isn't tested so take it with a grain of salt

    Idea taken from
    http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/
*/