在WebGL中同时使用多个基元

Question

我实际上正在尝试开发一个可视化有限元网格的Web应用程序。为了做到这一点，我正在使用WebGl。现在我有一个页面，其中包含在视口中使用三角形作为基元绘制网格所需的所有代码（网格的每个四边形元素被分割成两个三角形以绘制它）。问题在于，当使用三角形时，所有部分都是“连续的”，你无法看到三角形之间的分离。事实上，我想要实现的是在节点之间添加线条，以便在每个四边形元素（由两个三角形形成）周围，我们将这些线条设置为黑色，因此实际上可以显示网格。

所以我能够在我的页面中定义行，但是因为一个着色器只能有一种类型的基元，如果我为行缓冲区添加代码并绑定它们，它只显示行，而不是元素（如他们是最后的缓冲区。）

所以我找到的最接近的解决方案是使用多个着色器，并使用多个程序管理它们，但是这个解决方案只能让我能够使用trias绘制几何图形或仅绘制线条，具体取决于当前选择的程序

你们有没有人能帮我解决这个问题？我看过一个使用OpenGL显示FE网格的Windows应用程序，它能够将三角形与点和线混合，除了使用不同的图层，照明等。所以我知道这可能很复杂，但我认为如果它有可能以某种方式使用OpenGl，它也应该与webGL一样。

如果您提供任何解决方案，我会非常感谢它包含一些代码作为示例，例如绘制一个三角形但在其边界处包含三条黑线，并且可能在顶点处包含三个点。

Answer 1

setup() {  <your current code here>

• 附加步骤 - 取消绑定以前的纹理，上传并绑定一个1x1黑色像素作为纹理。让这个纹理对象是borderID; }

Draw loop() {

• 取消绑定以前的纹理，绑定普通纹理，然后像当前设置一样绘制网格。这将用不同的颜色填充整个区域，没有边框（当前案例）
• 绑定borderID纹理，并再次绘制相同的顶点，但这次使用context.LINE_STRIP而不是context.TRIANGLES。这将绘制带有黑色纹理的线条，并将显示为边框，位于每个三角形的先前绘制的颜色之上。你可以有类似下面的内容

if(currDrawMode==0) context3dStore.bindTexture(context3dStore.TEXTURE_2D, meshTextureObj[bindId]); else context3dStore.bindTexture(context3dStore.TEXTURE_2D, borderTexture1pixObj[bindId]);

context3dStore.drawElements((currDrawMode == 0) ? context3dStore.TRIANGLES: context3dStore.LINE_LOOP, indicesCount[bindId], context3dStore.UNSIGNED_SHORT, 0);，其中currDrawMode在绘制边框和绘制网格填充之间切换。

• 由于线条纹理显示为您之前使用的平面颜色的边框，因此这可以解决您的需求 }