Opengl es 在WebGL中同时使用多个原语

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

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

因此，我找到的最接近的解决方案是使用多个着色器，并使用多个程序管理它们，但此解决方案仅允许我使用Tria绘制几何体还是仅绘制直线，具体取决于当前选择的程序

你们谁能帮我解决这个问题？我见过一个windows应用程序，它使用OpenGL显示FE网格，除了使用不同的图层、照明等，它还能够将三角形与点和线混合。因此我知道这可能很复杂，但我认为如果OpenGL可以实现，那么webGL也应该可以

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

setup（）

{

• 附加步骤-取消绑定以前的纹理，上载并绑定一个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.drawerElements（（currDrawMode==0）？context3dStore.TRIANGLES:context3dStore.LINE_循环，指示计数[bindId]，context3dStore.UNSIGNED_SHORT，0）；

，其中currDrawMode在绘制边框和绘制网格填充之间切换

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

---

感谢您的回复。我尝试过你的回应，但无法让它工作，我可能做错了什么。例如，如果我创建一个带有黑色边框的白色正方形图像，并将其作为纹理加载，会怎么样。是否有可能得到一个最终的颜色乘以顶点的颜色，这样它就可以逐像素乘以这两个。因此，在白色区域我应该有颜色（rgb的每个颜色分量乘以1），在边框我应该有黑色（rgb分量乘以0的值就是0）。你介意建议怎么做吗？我发现的问题是，我可以只为纹理或颜色运行代码，但我不知道如何同时正确使用这两种代码（先绑定一个，然后再绑定第二个就足够了？如何绑定？请更明确一些？提前感谢使用带有白色填充和黑色边框的纹理可能会导致不同的边框宽度（和模糊度）因为纹理将在x和y方向上进行不同的缩放。如果要将颜色与纹理组合，则需要在片段着色器中组合它们，如

gl\u FragColor=vVertexColor*texture2D（纹理，vtexturecordinates）

（假定使用合适的变量名称）但这不是prabindh的建议：他说用

drawArrays（gl.三角形，…）

（在四边形中提供纹理）绘制常规纹理，然后用

drawArrays（gl.LINE_STRIP）

（在四边形边缘提供黑色）绘制特殊的1x黑色纹理边界.谢谢，这正是我的意思。@EPApro-我已经编辑了我的答案。