Fatal编程技术网
  • opengl-es/
  • Opengl es WebGL-正确渲染网格后，一些三角形将消失

Opengl es WebGL-正确渲染网格后，一些三角形将消失

opengl-es geometry webgl

Opengl es WebGL-正确渲染网格后，一些三角形将消失,opengl-es,geometry,rendering,webgl,Opengl Es,Geometry,Rendering,Webgl,我的问题如下。我有一张画布，我正在其中使用WebGL绘制一幅作品。 当它渲染时，就可以了 但是，大约两秒钟后，没有移动相机或任何东西，一些三角形消失了 在移动相机或其他东西后，消失的三角形保持不变（我已经读到，在某些情况下，由于缓冲区和到对象的距离，所以通过放大或缩小消失的三角形可以改变） 有什么问题吗？ 我将颜色和纹理应用于每个元素，以便在每个“正方形”周围打印黑色线条（我的纹理是一个带有黑色边框和白色内部的正方形）。这意味着在片段着色器中通过将颜色乘以纹理来计算最终颜色。这也意味着一些节点被

我的问题如下。我有一张画布，我正在其中使用WebGL绘制一幅作品。 当它渲染时，就可以了

但是，大约两秒钟后，没有移动相机或任何东西，一些三角形消失了

在移动相机或其他东西后，消失的三角形保持不变（我已经读到，在某些情况下，由于缓冲区和到对象的距离，所以通过放大或缩小消失的三角形可以改变）

有什么问题吗？ 我将颜色和纹理应用于每个元素，以便在每个“正方形”周围打印黑色线条（我的纹理是一个带有黑色边框和白色内部的正方形）。这意味着在片段着色器中通过将颜色乘以纹理来计算最终颜色。这也意味着一些节点被复制，甚至更多（为了给节点赋予TextureEvertex属性，我需要一个不同的节点，因为它属于每个元素），重要的是要注意，当我创建一个节点数较少的网格时，它们不会消失。无论如何，我在网上看到的WebGL示例非常复杂，我可能只有1000个节点，所以我认为这可能不是我的图形硬件的问题。 你认为会有什么问题？你将如何解决它？如果你需要更多的信息，请告诉我。我没有包含代码，因为它在开始时似乎渲染得很好，而且我只有“大”网格的问题

谢谢你的评论。请在此处找到两幅图像：

首轮抽签

几秒钟后

编辑：我会提供更多的细节，以防这有助于发现问题。我会给你关于其中一个方块的信息（其余的方块将遵循相同的方案）。请注意，它们在代码中被定义为公共变量，然后我将它们传递给html脚本：

顶点缓冲区的节点：

serverSideInitialCoordinates={

            -1.0,-1.0,0.0,
            1.0,-1.0,0.0,
            1.0,1.0,0.0,
            -1.0,1.0,0.0,
            0.0,-1.0,0.0,
            1.0,0.0,0.0,
            0.0,1.0,0.0,
            -1.0,0.0,0.0,
            0.0,0.0,0.0,
                                   };
形成三角形的连接：

服务器端连接={ 0,4,8, 0,8,7, 1,5,8, 1,8,4, 2,6,8, 2,8,5, 3,7,8, 3,8,6

                                      };
颜色：不相关。 TextureEvertex：{

正如我所提到的，我有一个图像，它是白色的，边缘只有几个像素是黑色的。所以在片段着色器中，我有一些类似的东西：

gl_FragColor=纹理2d（u_纹理，v_texcoord）*vColor

然后我有一个函数加载图像并获取纹理。 在函数InitBuffers中，我创建了缓冲区，并将顶点、颜色和三角形的连接性分配给它们

最后在Draw函数中，我再次绑定缓冲区：顶点、颜色（绑定为colorattribute）、纹理（绑定为textureVertex），和连接性，然后设置矩阵统一并绘制。我不认为问题出在这里，因为它适用于较小的网格，但我仍然不知道为什么它不适用于较大的网格。我认为firefox的性能可能比其他浏览器差，但后来我在firefox上运行了我在web上发现的困难的WebGL模型，它们工作正常，没有问题缺少角度。如果我打印没有纹理（只有颜色）的相同对象，效果很好，并且没有缺少三角形。你认为着色器每次都需要花费大量的精力来获得颜色吗？你能想出另一种方法吗

我的想法是在一些节点之间画黑线，而不是使用完整的纹理，但我无法让它工作，要么我画三角形，要么我画线，但它不允许我同时画两个。如果我为这两个都写代码，只有最后的“元素”已绘制。

图片肯定会有帮助，您可以用于上载图像。此外，最好至少共享用于绘制的顶点、索引和纹理坐标数组。我添加了图像。问题是我的网格有近1500个节点，甚至更多，因此我无法将节点直接放在此处。此外，它们会从我在另一个程序（来自代码隐藏）中生成它们，它们没有直接在html标记中定义。因为对于小网格，我认为它们是正确的。我将网格划分为正方形，如图所示。每个正方形有9个节点（每个顶点4个，四个中间边，一个在中心，形成四个较小的正方形）所以我形成了8个三角形。为了给每个正方形应用不同的颜色，我在空间中的一个特定点上有多个节点（一个属于每个相邻元素）.所以我一个接一个地创建节点，然后分配尽可能多的节点颜色，最后定义连接性以形成三角形。我将每个东西存储在一个缓冲区中。丢失的三角形是否与顶部和底部的其他三角形在完全相同的平面上？该平面是否平行于y轴？或者该平面中是否存在凸起/曲率中间？我已经更改了图像，现在你应该可以更好地看到它们了。丢失的三角形应该和周围的其他三角形在同一个平面上。虽然在上一个示例中，图案明显是Y方向的两行三角形，但在其他网格中，例如这一个，它呈之字形或其他任何形状，这取决于。它们在开始时渲染良好，但几秒钟后，数据就好像被破坏了一样。我必须说，如果我再次调用打印对象的函数，丢失的三角形对于该几何体来说是相同的。。 
            0.0,0.0
            1.0,0.0
            1.0,1.0
            0.0,1.0
            0.5,0.0
            1.0,0.5
            0.5,1.0
            0.0,0.5
            0.5,0.5                 

                                      };