在WebGL中使用透明纹理的奇怪渲染行为

Question

我一直在使用Haxe + Away3D编写一个小型行星生成器，并部署到HTML5/WebGL。但是我在渲染我的云时遇到了一个奇怪的问题。我有行星网格，然后云层网格在相同的位置稍微大一点。

我使用perlin噪声函数来生成行星特征和云的形成，将它们写入位图并应用位图作为纹理。现在，奇怪的是，当我将它部署到iOS或C++/OSX时，它完全按照我想要的方式呈现：

​

​

现在，当我部署到WebGL时，它会生成一个相同的漫反射贴图，但会渲染为：

​

​

(由于我重新加载页面的频率，上面的分辨率要低得多。在更高的分辨率下，问题仍然存在。)

云层就在那里，边缘看起来很好，纤细而半透明。但内部是不透明的，似乎渲染方式不同(每个像素都是相同的颜色，只有alpha通道改变了)

我意识到这可能与代码最终是如何在haxe中编译/生成有关的，但我希望它是一些简单的东西，比如我没有设置的渲染设置或混合模式。但由于我甚至不确定到底发生了什么，我不知道该去哪里看。

这是正在生成的漫反射贴图。我把它覆盖在红色上，这样云就可以看得见了。

​

​

Answer 1

那么，你是不是从ByteArray上传了那张照片？Lime曾经允许使用数组索引运算符访问ByteArray，即使它不应该在js上。这是在最新版本的Lime中修复的，以避免错误。我使用__get和__set方法而不是[]来访问字节数组。

Away3d本身也可能是这个问题的原因，因为后端的代码是从不同的源文件中生成的，这取决于您使用的目标。例如，Texture.uploadFromByteArray的byteArrayOffset参数在html5上受支持，但在本机上不受支持。

如果问题是由away3d引起的，那么问题是由代码的哪一部分引起的？我现在还不确定。

编辑:我也遇到了OpenFL最新的WebGL后端的问题。我认为传统的OpenFL没有这个问题。OpenFL的OpenGL渲染器在我不知情的情况下改变了colorMask (可能还有其他sprite渲染状态)！出现这个问题是因为我的代码和OpenFL的sprite渲染器实际上使用了相同的OpenGL上下文。我通过手动禁用OpenFL的sprite渲染器解决了这个问题。