Question

我的问题如下。我有一个画布，我正在使用WebGL绘制一块。当它呈现时，它很好。

然而，两秒钟后左右，没有移动相机或任何东西，一些三角形消失了。

在移动相机之后，剩下的三角形保持不变（我读过在某些情况下是由于缓冲区和到物体的距离所以通过放大或缩小已经消失的三角形可以变化）。

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

感谢您的评论。请在这里找到两张图片：

第一次抽奖

First draw

几秒钟后。

A few seconds later

编辑：我会提供更多细节，以防这有助于找到问题。我将向您提供有关其中一个方格的信息（其余方块将遵循相同的方案）。请注意，它们在后面的代码中定义为公共变量，然后我将它们传递给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,
                                   };

连接形成三角形：

serverSideConnectivity = { 0,4,8， 0,8,7， 1,5,8， 1,8,4， 2,6,8， 2,8,5， 3,7,8， 3,8,6
                                      };

颜色：不相关。 TextureVertex：{

            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                 

                                      };
正如我所提到的，我的图像是白色的，边框周围只有几个像素的黑色。所以在片段着色器中我有类似的东西：

gl_FragColor = texture2D（u_texture，v_texcoord）* vColor;

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

最后在Draw函数中，我再次绑定缓冲区：vertexPosition，color（将其绑定为colorattribute），纹理（将其绑定为textureVertex）和连接，然后设置Matrix Uniform并绘制。我不认为问题在这里，因为它适用于较小的网格，但我仍然不知道为什么它不适用于较大的网格。我认为firefox的性能可能比其他浏览器差，但后来我运行在网上找到的firefox困难的WebGL模型，它们工作正常，没有缺少三角形。如果我打印没有纹理的相同对象（只是颜色），它工作正常，没有三角形丢失。您是否认为可能需要花费很多精力才能让着色器每次都通过倍增两种颜色来获得颜色？你能想到另一种方式吗？

我的想法只是在某些节点之间绘制黑色线而不是使用完整的纹理，但我无法使其工作，要么我绘制三角形，要么我绘制线条，但它不允许我同时绘制两个时间。如果我为两者都设置代码，则只绘制最后的“元素”。

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

0 个答案: